/* Desktop-like scaling: base 16px (matches WPF App.xaml) */
html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Global touch-friendly scrolling: enable smooth momentum scrolling on iOS/Safari and any
   other touch device for every scrollable container (overflow auto/scroll on either axis).
   This guarantees that all lists, panels, and overlays in the app respond to finger swipes
   without us having to remember the property on each individual style. */
*, *::before, *::after {
    -webkit-overflow-scrolling: touch;
}

/* Make sure interactive scroll regions are not blocked by browser pan/zoom heuristics on
   touch devices. touch-action: pan-x pan-y allows two-finger zoom while still letting
   single-finger drags scroll the underlying container. */
html, body {
    touch-action: manipulation;
}

/* Master layout - header and footer */
.pos-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.pos-header {
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 16px;
    flex-shrink: 0;
    color: #000080;
    position: relative;
    z-index: 20;
}

.pos-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 22px;
}

.pos-header-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-right: 15px;
}

.pos-header-datetime {
    font-size: 22px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-header-user-name {
    font-size: 16px;
}

.pos-header-terminal {
    font-size: 14px;
    color: #000080;
}

.pos-header-terminal-id-link {
    color: #000080;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

.pos-header-terminal-id-link:hover {
    color: #0000a0;
}

.pos-header-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000080;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.pos-header-logout-link:hover {
    text-decoration: underline;
}

.pos-header-logout-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.pos-header-gear {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #000080;
    cursor: pointer;
    padding: 8px;
    text-decoration: none;
}

.pos-header-gear:hover {
    color: #0000a0;
}

.pos-main {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.pos-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.pos-footer {
    height: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

/* ===================== Page appearance (Light / Dark) =====================
   Time Clock, the labor screens, Monitors, Delivery Dispatch, Operation Schedule, Table
   Service and Gift Cards render dark text straight onto the layout surface, so a station
   configured with a black PageBackgroundColor made all of them unreadable - worst of all
   Time Clock, where an hourly employee lands immediately after entering an access code.
   The Dark/Light buttons in the header choose the surface and Light is the default, which
   needs no rule here because the layout already paints itself white and body text is
   #212529. Dark keeps the configured colour and lightens the page text instead.

   A page with nothing to gain from the switch marks its root pos-unthemed and opts out of
   all of this - the POS menu, Order Management and the customer database. Pages that only
   paint their own surface (Store/Terminal setup, Dashboard, Access Code, Cash Management)
   need no marker; the few whose container declares a background but no colour are
   re-asserted further down so light text cannot leak onto them. */
.pos-theme-dark .pos-page:not(:has(.pos-unthemed)) {
    color: #f1f3f5;
}

/* Bootstrap's muted grey and navy links are both too dark to read on a black surface. */
.pos-theme-dark .pos-page:not(:has(.pos-unthemed)) .text-muted {
    color: #ced4da !important;
}

.pos-theme-dark .pos-page:not(:has(.pos-unthemed)) a:not(.btn) {
    color: #7ec8ff;
}

.pos-theme-dark .pos-page:not(:has(.pos-unthemed)) .table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
    --bs-table-striped-bg: #1a1a1a;
    --bs-table-hover-color: inherit;
    --bs-table-hover-bg: #262626;
    --bs-table-border-color: #6c757d;
    color: inherit;
}

/* An opted-out page cannot be left stranded on the dark surface with the only control that would
   change it hidden, so the layout reverts to the light one for as long as one is open. The
   !important is what beats the inline background-color MainLayout writes. */
.pos-layout.pos-theme-dark:has(.pos-unthemed) {
    background-color: #ffffff !important;
}

/* Surfaces with their own light background keep dark text in either theme. */
.pos-theme-dark .pos-setup-layout,
.pos-theme-dark .pos-access-white-box {
    color: #212529;
}

/* The payment and modifier popups paint their own panels and can open over a page that is themed,
   so light text must not reach into them either. */
.pos-theme-dark .pos-menu-overlay,
.pos-theme-dark .pos-payment-overlay {
    color: #212529;
}

/* Dark / Light switch, sized to sit in the header next to the clock. */
.pos-theme-switch {
    display: inline-flex;
    gap: 4px;
}

/* The header's switch stands down wherever it would not do what the operator expects:

   - pos-page-owns-appearance marks a page's own switch (Cash Management), which the header's would
     otherwise sit next to and fight.
   - pos-unthemed marks a page that opts out of the switch entirely.
   - the payment and modifier popups need no marker of their own; their roots exist only while they
     are open, and the payment one also opens over Table Service. */
.pos-layout:has(.pos-page-owns-appearance) .pos-theme-switch,
.pos-layout:has(.pos-unthemed) .pos-theme-switch,
.pos-layout:has(.pos-menu-overlay) .pos-theme-switch,
.pos-layout:has(.pos-payment-overlay) .pos-theme-switch {
    display: none;
}

.pos-theme-btn {
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #000080;
    border-radius: 6px;
    background: transparent;
    color: #000080;
    cursor: pointer;
}

.pos-theme-btn.active {
    background: #000080;
    color: #ffffff;
}

/* Scaled controls to match desktop */
.btn {
    font-size: 16px;
    min-height: 34px;
    padding: 8px 16px;
}

.form-control, .form-select {
    font-size: 16px;
    min-height: 34px;
    padding: 6px;
    border-radius: 15px;
}

.form-label {
    font-size: 16px;
}

.table {
    font-size: 16px;
}

.table th, .table td {
    padding: 8px 12px;
    vertical-align: middle;
}

.card-header {
    font-size: 16px;
}

/* AccessCode page - matches desktop StackPanel layout */
.pos-access-code-page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 100%;
    background: #2c3e50;
    overflow: hidden;
}

.pos-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.pos-access-code-page .pos-centered {
    min-height: 100%;
}

.pos-access-white-box {
    background: white;
    border: 0;
    border-radius: 30px;
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pos-access-stack {
    width: 420px;
}

.pos-access-title {
    font-size: 42px;
    color: #000080;
    text-align: center;
    margin-bottom: 12px;
}

.pos-access-input {
    margin-bottom: 18px !important;
    min-height: 66px !important;
    font-size: 32px !important;
    color: #000080 !important;
}

.pos-numpad {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.pos-numpad-btn {
    min-height: 66px;
    font-size: 32px;
    padding: 12px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.9) 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.pos-numpad-btn:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.95) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 12px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.pos-numpad-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
}

.pos-numpad-btn-disabled,
.pos-numpad-btn:disabled {
    color: red !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.pos-build-stamp {
    text-align: right;
    font-size: 11px;
    color: #8A8A8A;
    margin-top: -12px;
    margin-bottom: 4px;
}

.pos-access-logo {
    max-width: 152px;
    margin-top: 18px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Station locked overlay */
.pos-station-locked-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.pos-station-locked-content {
    background: white;
    padding: 32px 48px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pos-station-locked-padlock {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    filter: invert(15%) sepia(95%) saturate(5000%) hue-rotate(350deg); /* red to match title */
}

.pos-station-locked-title {
    font-size: 24px;
    font-weight: 600;
    color: #c00;
    margin-bottom: 12px;
}

.pos-station-locked-message {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}

.pos-station-locked-waiting {
    font-size: 14px;
    color: #666;
}

.pos-manager-release-form {
    width: 260px;
    text-align: left;
}

/* Soft Keyboard - slides from bottom, 1/3 screen height */
.soft-keyboard-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 33.33vh;
    min-height: 220px;
    background: #e8e8e8;
    border-top: 1px solid #c0c0c0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    animation: soft-keyboard-slide-up 0.25s ease-out;
}

@keyframes soft-keyboard-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.soft-keyboard-header {
    display: flex;
    justify-content: center;
    padding: 2px 8px;
    flex-shrink: 0;
}

.soft-keyboard-hide-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    min-height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.soft-keyboard-hide-btn:hover {
    background: rgba(0,0,0,0.08);
}

.soft-keyboard-body {
    flex: 1;
    overflow: hidden;
    padding: 0 8px 8px;
    min-height: 0;
}

.soft-keyboard-main {
    display: grid;
    grid-template-columns: 10fr 3fr;
    gap: 6px;
    height: 100%;
}

.soft-keyboard-qwerty {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    height: 100%;
}

.soft-keyboard-row {
    display: grid;
    gap: 4px;
    height: 100%;
}

.soft-keyboard-row-10 {
    grid-template-columns: repeat(10, 1fr);
}

.soft-keyboard-row-9 {
    grid-template-columns: repeat(10, 1fr);
}

.soft-keyboard-row-shift {
    grid-template-columns: 1fr repeat(7, 1fr) 1fr 1fr;
}

.soft-keyboard-row-bottom {
    grid-template-columns: 2fr 5fr 3fr;
}

.soft-keyboard-numpad {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    height: 100%;
}

.soft-keyboard-numpad-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    height: 100%;
}

.soft-keyboard-key {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 4px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    border: 1px solid #b0b0b0;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 6px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.soft-keyboard-key:hover {
    background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 3px 8px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.soft-keyboard-key:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
}

.soft-keyboard-key-shift {
    font-size: 14px;
    font-weight: 600;
}

.soft-keyboard-key-shift.active {
    background: linear-gradient(to bottom, #d0d0d0 0%, #b8b8b8 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}

.soft-keyboard-key-space {
    font-size: 12px;
}

.soft-keyboard-key-action {
    font-size: 14px;
    font-weight: 500;
}

.soft-keyboard-key-00 {
    background: linear-gradient(to bottom, #606060 0%, #404040 100%);
    color: white;
    border-color: #303030;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
}

.soft-keyboard-key-00:hover {
    background: linear-gradient(to bottom, #686868 0%, #484848 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.3);
}

.pos-access-btn {
    padding: 6px 12px !important;
    font-size: 14px !important;
}

.pos-access-error {
    margin-top: 12px;
    text-wrap: wrap;
}

/* Home page - matches desktop two-button stack */
.pos-home-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pos-home-btn {
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* EmployeeList page - matches desktop Grid layout */
.pos-list-container {
    width: 100%;
    max-width: 100%;
}

.pos-list-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.pos-list-toolbar .btn {
    margin-right: 0;
}

.pos-list-grid-wrapper {
    width: 100%;
}

.pos-list-table {
    cursor: pointer;
}

/* Force a solid white background on every row, overriding Bootstrap's
   `.table-striped` zebra striping so the selected row reads cleanly
   against an unambiguous white baseline. */
.pos-list-table > tbody > tr > *,
.pos-list-table > tbody > tr:nth-of-type(odd) > *,
.pos-list-table > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: transparent;
    background-color: #ffffff;
}

/* Selected row highlight - light blue with strong contrast against white.
   Higher specificity than Bootstrap's striping rules so it always wins. */
.pos-list-table > tbody > tr.table-active > *,
.pos-list-table > tbody > tr.table-active:nth-of-type(odd) > *,
.pos-list-table > tbody > tr.table-active:nth-of-type(even) > * {
    --bs-table-accent-bg: #9ec5ff;
    --bs-table-bg-state: #9ec5ff;
    background-color: #9ec5ff;
    color: #052c65;
    font-weight: 600;
}

.pos-list-table > tbody > tr.table-active > *:first-child {
    box-shadow: inset 4px 0 0 0 #0d6efd;
}

.pos-list-table > tbody > tr.table-active:hover > *,
.pos-list-table > tbody > tr.table-active:hover:nth-of-type(odd) > *,
.pos-list-table > tbody > tr.table-active:hover:nth-of-type(even) > * {
    --bs-table-accent-bg: #7eb3ff;
    --bs-table-bg-state: #7eb3ff;
    background-color: #7eb3ff;
}

/* NewEmployeeForm - matches desktop ScrollViewer layout */
.pos-form-container {
    width: 100%;
    max-width: 100%;
}

/* Standalone employee form sits on the POS black page background, so it uses the
   same light setup coloring as Store/Terminal setup. */
.pos-employee-form {
    background: #f0f0f0;
    color: #212529;
    padding: 20px;
    min-height: 100%;
    box-sizing: border-box;
}
.pos-employee-form .form-label,
.pos-employee-form .card-header,
.pos-employee-form .card-title,
.pos-employee-form .form-check-label {
    color: #212529;
}
.pos-employee-form .card {
    background: #ffffff;
    border-color: #dee2e6;
}

.pos-employee-photo-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pos-employee-photo-box {
    width: 100px;
    height: 100px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f9fa;
}

.pos-employee-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-employee-photo-placeholder {
    font-size: 12px;
    color: #6c757d;
}

.pos-employee-list-photo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.pos-employee-list-photo-empty {
    font-size: 12px;
    color: #6c757d;
}

.pos-camera-modal {
    background: white;
    padding: 16px;
    border-radius: 8px;
    width: min(640px, 92vw);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pos-camera-title {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 600;
}

.pos-camera-video-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    margin-bottom: 12px;
}

.pos-camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-camera-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Station Setup tabs - ensure visible */
.pos-form-container .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1rem;
    padding-left: 0;
    list-style: none;
}
.pos-form-container .nav-tabs .nav-item {
    margin-bottom: -2px;
}
.pos-form-container .nav-tabs .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    cursor: pointer;
    background: #e9ecef;
    color: #495057;
    text-decoration: none;
}
.pos-form-container .nav-tabs .nav-link:hover {
    border-color: #dee2e6;
    background: #f8f9fa;
}
.pos-form-container .nav-tabs .nav-link.active {
    background: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #0d6efd;
    font-weight: 500;
}

.pos-form-toolbar {
    margin-bottom: 12px;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.pos-save-colors-btn {
    width: auto;
    min-width: 120px;
    padding: 8px 16px;
    flex: 0 0 auto;
}

.ha-account-editor {
    color: #212529;
}
.ha-account-editor .form-label,
.ha-account-editor .form-check-label,
.ha-account-editor h6 {
    color: #212529;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Setup access modal */
.pos-setup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pos-setup-modal {
    background: white;
    padding: 24px;
    border-radius: 8px;
    min-width: 320px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/*
   Leaflet's map panes sit at z-index 1000 and its controls higher still, which is above a good deal
   of Bootstrap's chrome. Giving the map's own wrapper a stacking context keeps those layers confined
   to it, so a map inside a modal cannot paint over the modal's header or its tab strip.
*/
#order-delivery-map {
    position: relative;
    z-index: 0;
}

.pos-setup-modal-title {
    font-size: 18px;
    margin-bottom: 12px;
}

.pos-setup-modal-actions {
    margin-top: 16px;
}

/* Station identity gate overlay */
.pos-station-identity-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pos-station-identity-dialog {
    background: white;
    padding: 24px;
    border-radius: 8px;
    min-width: 360px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pos-dashboard-page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 100%;
    background: #4a5568;
    overflow: hidden;
}

/* End-of-day exception header (persistent until exceptions are cleared) */
.pos-exception-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 68px 14px 20px;
    background: linear-gradient(180deg, #fff5f5 0%, #fdecec 100%);
    border-bottom: 3px solid #dc3545;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    color: #6a1a21;
    position: relative;
    z-index: 90;
}

.pos-exception-header-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
}

.pos-exception-header-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-exception-header-title {
    font-size: 17px;
    font-weight: 700;
    color: #c0212f;
    line-height: 1.2;
}

.pos-exception-header-subtitle {
    font-size: 13px;
    color: #7a2a30;
    margin-top: 1px;
}

.pos-exception-header-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pos-exception-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #f1aeb5;
    border-radius: 999px;
    font-size: 13px;
    color: #842029;
}

.pos-exception-chip strong {
    color: #c0212f;
}

.pos-exception-header-btn {
    flex: 0 0 auto;
    align-self: center;
    padding: 9px 18px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-exception-header-btn:hover {
    background: #bb2d3b;
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.4);
}

.pos-exception-header-btn:active {
    background: #a52834;
}

@media (max-width: 768px) {
    .pos-exception-header {
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    .pos-exception-header-btn {
        width: 100%;
    }
}

.pos-dashboard-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    padding: 0 20px 16px 20px;
}

.pos-dashboard-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pos-dashboard-row {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}

.pos-dashboard-wrap {
    display: grid;
    gap: 14px;
    width: min(96vw, 1500px);
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 13vw, 220px), 1fr));
    align-content: center;
    justify-content: center;
}

.pos-dashboard-row-separator {
    height: 3px;
    background: #dee2e6;
    width: 100%;
    flex-shrink: 0;
    margin: 30px 0;
}

.pos-dashboard-btn {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #212529;
    font-size: clamp(12px, min(1.45vw, 2.2vh), 20px);
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-dashboard-btn:hover {
    filter: brightness(0.97);
    border-color: #e69500;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(255, 165, 0, 0.25);
    transform: translateY(-1px);
}

.pos-dashboard-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.12);
}

.pos-dashboard-btn img {
    width: clamp(30px, min(5vw, 7vh), 76px);
    height: clamp(30px, min(5vw, 7vh), 76px);
    object-fit: contain;
}

/* Phone Order only mode: centered large Phone Order + Setup in lower right */
.pos-dashboard-phone-only-layout {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.pos-dashboard-btn-large {
    width: 352px;
    height: 352px;
    font-size: 29px;
}

.pos-dashboard-btn-large img {
    width: 115px;
    height: 115px;
}

.pos-dashboard-btn-setup-small {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 88px;
    height: 88px;
}

.pos-dashboard-btn-setup-small img {
    width: 35px;
    height: 35px;
}

.pos-dashboard-btn-setup-small span {
    display: none;
}

/* Responsive: Dashboard - stack buttons vertically on small screens */
@media (max-width: 768px) {
    .pos-dashboard-btn {
        aspect-ratio: 1 / 1;
    }

    .pos-dashboard-btn img {
        width: min(72px, 16vw);
        height: min(72px, 16vw);
    }

    .pos-dashboard-content {
        margin-top: 24px;
        padding: 0 16px;
    }

    .pos-dashboard-wrap {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
}

@media (max-width: 480px) {
    .pos-dashboard-btn {
        aspect-ratio: 1 / 1;
    }

    .pos-dashboard-btn img {
        width: 56px;
        height: 56px;
    }

    .pos-dashboard-btn span {
        font-size: 16px;
    }
}

.pos-setup-gear-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 6px;
}

.pos-setup-gear-btn:hover {
    color: #333;
}

/* Setup layout - single column, no left nav */
.pos-setup-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
    background: #f0f0f0;
}

.pos-setup-top-bar {
    padding: 0 0 8px 0;
}

.pos-setup-content {
    overflow: auto;
    padding: 20px;
}

/* Setup charts */
.pos-setup-charts {
    max-width: 100%;
}

/* First bar chart: full width, height proportional to width (420:560 = 3:4) */
.pos-chart-agg-container {
    width: 100%;
    aspect-ratio: 560 / 252; /* 40% shorter than original 420 */
    min-height: 120px;
}

.pos-chart-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.pos-chart-container {
    position: relative;
    width: 100%;
}

.pos-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
}

.pos-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pos-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: inline-block;
}

.pos-pie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.pos-pie-item {
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s ease;
}

.pos-pie-item:hover {
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
}

.pos-pie-chart-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.pos-pie-chart-center {
    flex-shrink: 0;
}

.pos-pie-legend {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-size: 13px;
    color: #475569;
    width: 100%;
}

.pos-pie-legend .pos-legend-label {
    margin-right: 5px;
}

.pos-pie-legend .pos-legend-val {
    font-weight: 600;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.pos-pie-legend .pos-legend-color {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

.pos-raw-data-table {
    max-height: 60vh;
    overflow-y: auto;
}

/* ========== Responsive: All pages ========== */

/* Header - shrink on small screens */
@media (max-width: 768px) {
    .pos-header {
        height: auto;
        min-height: 80px;
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    .pos-header-logo {
        width: 24px;
        height: 24px;
        margin: 0;
    }

    .pos-header-left {
        font-size: 14px;
    }

    .pos-header-datetime {
        font-size: 14px;
        margin: 8px 8px 0 0;
        flex-wrap: wrap;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .pos-header-logo {
        width: 18px;
        height: 18px;
    }

    .pos-header-left {
        font-size: 12px;
    }

    .pos-header-datetime {
        font-size: 12px;
    }
}

/* Setup layout - stack menu above content on small screens */
@media (max-width: 768px) {
    .pos-setup-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .pos-setup-layout.pos-setup-menu-hidden {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .pos-setup-layout.pos-setup-menu-hidden .pos-setup-menu {
        width: auto;
        min-width: unset;
        padding: 12px;
    }

    .pos-setup-menu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .pos-setup-menu-btn {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
    }

    .pos-setup-content {
        padding: 12px;
    }
}

/* Setup charts - responsive pie charts and stacked layout */
@media (max-width: 768px) {
    .pos-pie-chart-row {
        flex-direction: column;
    }

    .pos-pie-chart-center {
        max-width: 100%;
        height: 280px !important;
        width: 100% !important;
    }

    .pos-pie-grid {
        grid-template-columns: 1fr;
    }

    .pos-chart-section {
        padding: 12px;
    }

    .pos-setup-modal {
        min-width: 90%;
        margin: 16px;
    }
}

/* Access code - responsive on small screens */
@media (max-width: 480px) {
    .pos-access-stack {
        width: 100%;
        max-width: 420px;
        padding: 0 24px;
    }

    .pos-access-title {
        font-size: 33px;
    }

    .pos-numpad {
        gap: 9px;
    }

    .pos-numpad-btn {
        min-height: 60px;
        font-size: 27px;
    }

    .pos-centered {
        min-height: 0;
        padding: 16px;
    }
}

/* Tables - horizontal scroll on small screens */
@media (max-width: 768px) {
    .pos-list-grid-wrapper,
    .pos-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pos-list-table {
        min-width: 400px;
    }

    .pos-list-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pos-list-toolbar .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }
}

/* Forms - stack layout on small screens */
@media (max-width: 768px) {
    .pos-form-container {
        padding: 0 8px;
    }

    .pos-form-toolbar {
        flex-wrap: wrap;
    }

    .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 8px;
    }

    .d-flex.justify-content-between.align-items-center {
        align-items: flex-start;
    }
}

/* Station setup and form rows - stack label above input on small screens */
@media (max-width: 576px) {
    .pos-form-container .row.g-2 .col-3,
    .pos-form-container .row.g-2 .col-9,
    .pos-form-container .row .col-3,
    .pos-form-container .row .col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pos-form-container .row.g-2 .col-3 label,
    .pos-form-container .row .col-3 label {
        margin-bottom: 4px;
    }

    .pos-form-container h4 {
        font-size: 1.1rem;
    }
}

/* Color & Fonts - responsive cards */
@media (max-width: 768px) {
    .pos-setup-content .card-body .d-flex {
        flex-wrap: wrap;
    }

    .pos-setup-content .card-body .btn.text-start {
        width: 100% !important;
        min-width: unset;
    }
}

/* Delivery overlay */
.pos-delivery-overlay {
    position: fixed;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    width: 90vw;
    height: 90vh;
    background: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.pos-delivery-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

/* Applied by POSApp.closeAllOverlays on logout. It has to beat the overlays' own display rules
   without detaching the elements, which Blazor's renderer still expects to find in the DOM. */
.pos-overlay-force-hidden {
    display: none !important;
}

.pos-delivery-embedded {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: white;
    display: flex;
    flex-direction: column;
}

/* Payment overlay - 90% of screen */
.pos-payment-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.pos-payment-overlay {
    position: fixed;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    width: 90vw;
    height: 90vh;
    background: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.pos-payment-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.pos-payment-overlay-title {
    font-size: 20px;
    font-weight: 600;
}

.pos-payment-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.pos-payment-overlay-close:hover {
    opacity: 0.8;
}

.pos-payment-overlay-content {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.pos-payment-overlay-content.ticket-left .pos-payment-ticket-column {
    order: 0;
}

.pos-payment-overlay-content.ticket-left .pos-payment-methods-column {
    order: 1;
}

.pos-payment-overlay-content.ticket-right .pos-payment-ticket-column {
    order: 1;
}

.pos-payment-overlay-content.ticket-right .pos-payment-methods-column {
    order: 0;
}

.pos-payment-ticket-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #dee2e6;
}

.pos-payment-overlay-content.ticket-right .pos-payment-ticket-column {
    border-right: none;
    border-left: 1px solid #dee2e6;
}

.pos-payment-ticket-column .pos-menu-receipt-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.pos-payment-ticket-column .pos-menu-receipt-totals {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background-color: #ffffff;
}

.pos-payment-methods-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

.pos-payment-order-summary-row {
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f0f7ff;
    font-size: 13px;
}

.pos-payment-order-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pos-payment-customer-info,
.pos-payment-order-details {
    min-width: 0;
}

.pos-payment-order-summary-line {
    margin-bottom: 4px;
}

.pos-payment-order-summary-line:last-child {
    margin-bottom: 0;
}

.pos-payment-ordertype-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid #FFA500;
    border-radius: 8px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #212529;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}

.pos-payment-ordertype-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pos-payment-method-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fafafa;
}

.pos-payment-method-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-payment-method-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.pos-payment-method-icon-large {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.pos-payment-method-label {
    font-size: 16px;
    font-weight: 600;
}

.pos-payment-cash-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.pos-payment-cash-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 80px;
    padding: 6px 4px;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #212529;
    container-type: inline-size;
    font-size: clamp(12px, 22cqi, 28px);
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.15);
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.pos-payment-cash-btn:hover {
    border-color: #e69500;
}

.pos-payment-cash-btn-exact {
    background: #198754;
    color: #fff;
    border-color: #198754;
    font-weight: 700;
    font-size: clamp(11px, 16cqi, 22px);
    padding: 6px 6px;
}

.pos-payment-cash-btn-exact:hover {
    background: #157347;
    border-color: #146c43;
}

.pos-payment-tip-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-payment-tip-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pos-payment-tip-title {
    font-size: 18px;
    font-weight: 700;
}

.pos-payment-tip-summary {
    font-size: 14px;
    color: #495057;
    font-variant-numeric: tabular-nums;
}

.pos-payment-tip-presets {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.pos-payment-tip-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
    padding: 4px;
    border: 2px solid #198754;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #212529;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.12);
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.pos-payment-tip-btn:hover:not(:disabled) {
    border-color: #146c43;
}

.pos-payment-tip-btn.active {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

.pos-payment-tip-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pos-payment-tip-btn-none {
    border-color: #6c757d;
}

.pos-payment-tip-btn-none.active {
    background: #6c757d;
    border-color: #6c757d;
}

.pos-payment-tip-btn-label {
    font-size: 18px;
    font-weight: 700;
}

.pos-payment-tip-btn-amount {
    font-size: 13px;
}

.pos-payment-tip-custom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-payment-cash-custom-label {
    font-size: 28px !important;
}

.pos-payment-cash-custom-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
}

.pos-payment-cash-custom-input-wrap:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.pos-payment-cash-usd-prefix {
    padding: 0 12px;
    font-size: 28px;
    font-weight: 600;
    color: #212529;
}

.pos-payment-cash-custom-input {
    width: 200px !important;
    font-size: 28px !important;
    padding: 12px 16px !important;
    border: none !important;
}

.pos-payment-cash-add-btn {
    font-size: 24px !important;
    padding: 12px 24px !important;
}

.pos-payment-emv-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    cursor: pointer;
    align-self: flex-start;
}

.pos-payment-emv-btn:hover {
    border-color: #e69500;
}

.pos-payment-pay-later-row {
    flex: 1;
    min-height: 60px;
}

.pos-payment-pay-later-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 80px;
    padding: 6px 4px;
    font-size: clamp(11px, 1.4vw, 16px);
    font-weight: 600;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    cursor: pointer;
    word-wrap: break-word;
    text-align: center;
    line-height: 1.2;
}

.pos-payment-pay-later-btn:hover {
    border-color: #e69500;
}

.pos-payment-emv-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.pos-payment-emv-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

/* Phone Order overlay - 80% of page */
.pos-phone-order-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.pos-phone-order-overlay {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.pos-phone-order-header {
    padding: 16px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
}

.pos-phone-order-title {
    font-size: 18px;
    font-weight: 600;
}

.pos-phone-order-content {
    flex: 1;
    padding: 16px;
    min-height: 0;
    overflow: auto;
}

.pos-phone-order-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.pos-phone-order-service-btn {
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: white;
    border: 2px solid #FFA500;
    border-radius: 8px;
    cursor: pointer;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
}

.pos-phone-order-service-btn img {
    width: 48px;
    height: 48px;
}

.pos-phone-order-service-btn:hover {
    background: #fff8f0;
}

.pos-phone-order-coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 24px;
    font-weight: 600;
}

.pos-phone-order-form {
    max-width: 460px;
    margin: 0 auto;
}

.pos-phone-order-footer {
    padding: 16px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
}

.pos-delivery-header {
    padding: 16px;
    border-bottom: 1px solid #dee2e6;
}

.pos-delivery-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}

.pos-delivery-footer {
    padding: 16px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* The map and the route read-out under it: distance, live ETA and turn-by-turn directions all describe
   the route on the map, so they travel with it and leave the column beside them a single run of fields.
   The read-out takes the height it needs and the map keeps the rest, down to a floor past which the
   column scrolls instead. Leaflet is initialized after this has settled and re-measures itself then. */
.pos-delivery-map-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow-y: auto;
}

.pos-delivery-map {
    flex: 1 1 auto;
    min-height: 260px;
    min-width: 0;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.pos-delivery-route {
    flex: 0 0 auto;
}

.pos-delivery-route .form-label {
    margin-bottom: 4px;
}

.pos-delivery-route .mb-2 {
    margin-bottom: 12px;
}

.pos-delivery-map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}

.pos-delivery-form {
    min-width: 0;
    overflow-y: auto;
}

.pos-delivery-directions {
    resize: none;
    height: 180px;
    max-height: 180px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
}

.pos-delivery-form .form-label {
    margin-bottom: 4px;
}

.pos-delivery-form .mb-2 {
    margin-bottom: 12px;
}

/* Live queue depth / driver count / ideal delivery ETA card (Setup > Store > Delivery > Delivery Time formula) */
.pos-delivery-eta-card {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
    padding: 10px;
}

.pos-delivery-eta-label {
    font-size: 11px;
    color: #6c757d;
}

.pos-delivery-eta-value {
    font-weight: 600;
    font-size: 15px;
}

/* Always occupies its line, whether or not there is a breakdown to show: the card sits above the map,
   which is sized from what is left over, and a line appearing there would resize it after Leaflet has
   already measured the container. */
.pos-delivery-eta-breakdown {
    font-size: 10px;
    color: #6c757d;
    min-height: 13px;
}

.pos-delivery-eta-promise {
    color: #0078D4;
}

/* Google Places Autocomplete - custom dropdown (replaces pac-container for reliable display in overlay) */
.pos-address-autocomplete-dropdown {
    z-index: 100001 !important;
    font-family: inherit;
}

.pos-address-autocomplete-item:hover {
    background-color: #f0f0f0 !important;
}

/* Footer - stack on small screens */
@media (max-width: 480px) {
    .pos-footer {
        flex-direction: column;
        gap: 4px;
        min-height: 40px;
        padding: 8px 16px;
    }
}

/* Broadcast toast - bottom right */
.pos-broadcast-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    max-width: 400px;
    min-height: 35vh;
    padding: 16px;
    background: #ADD8E6;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pos-broadcast-toast-message {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Clock-in/clock-out notice: sized to its one line of text, closes itself, never takes a tap. */
.pos-clock-toast-stack {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

.pos-clock-toast {
    font-size: 14px;
    line-height: 1.3;
    padding: 6px 12px;
    color: #212529;
    background: #ADD8E6;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    white-space: nowrap;
    animation: pos-clock-toast-in 150ms ease-out;
}

@keyframes pos-clock-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Dine-in layout tree */
.dine-in-layout-tree {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}
.dine-in-layout-tree .tree-node {
    margin: 4px 0;
}
.dine-in-layout-tree .tree-node-label {
    cursor: pointer;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}
.dine-in-layout-tree .tree-node-label:hover {
    background: #e9ecef;
}
.dine-in-layout-tree .tree-children {
    margin-left: 16px;
    padding-left: 8px;
    border-left: 1px solid #dee2e6;
}
.dine-in-layout-tree .tree-leaf {
    padding: 2px 8px;
    font-size: 0.9rem;
    color: #495057;
}

/* Store Setup > Access tree (AccessTreeNodeRow.razor), modelled on the dine-in layout tree. */
.access-tree {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}
.access-tree-node {
    margin: 2px 0;
}
.access-tree-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.access-tree-row:hover {
    background: #e9ecef;
}
.access-tree-root > .access-tree-label {
    font-weight: 700;
    font-size: 1.05rem;
}
.access-tree-match {
    background: #fff3cd;
}
.access-tree-match mark {
    padding: 0;
    background: #ffe69c;
}
.access-tree-children {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px solid #ced4da;
}
.access-tree-caret,
.access-tree-caret-spacer {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}
.access-tree-caret {
    padding: 0;
    border: none;
    background: transparent;
    color: #495057;
    font-size: 14px;
    line-height: 22px;
}
.access-tree-label {
    font-weight: 500;
}
.access-tree-meta {
    font-size: 0.8rem;
    color: #6c757d;
}
.access-tree-below {
    font-style: italic;
}
.access-tree-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #6c757d;
}
.access-tree-linked {
    color: #0d6efd;
}
.access-level-badge {
    display: inline-block;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}
.access-tier-staff { background: #198754; }
.access-tier-supervisor { background: #0d6efd; }
.access-tier-manager { background: #fd7e14; }
.access-tier-owner { background: #6f42c1; }
.access-level-picker {
    display: grid;
    grid-template-columns: repeat(10, minmax(40px, 1fr));
    gap: 6px;
}
.access-level-pick {
    min-height: 48px;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}
.access-level-pick.selected {
    border-color: #212529;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.85);
}
.access-level-pick:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.access-slider-wide {
    max-width: 420px;
}
.access-plan-preview {
    padding: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}
.access-plan-linked {
    padding: 6px 8px;
    border-radius: 4px;
    background: #fff3cd;
}
.access-lock {
    vertical-align: -2px;
    opacity: 0.75;
}
.access-gate-locked {
    border-style: dashed;
}
.access-approval-dialog {
    width: 100%;
    max-width: 420px;
}
.access-approval-passcode {
    min-height: 48px;
    font-size: 28px;
    letter-spacing: 6px;
    text-align: center;
    cursor: text;
}

/* Menu page - no page scroll, columns scroll independently.
   box-sizing: border-box so padding is included in the calc(...) height; otherwise the
   bottom padding makes the page taller than its parent (.pos-page), which causes
   .pos-main to scroll and clip the top of the order-type button row. */
.pos-menu-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 65px);
    max-height: calc(100vh - 65px);
    min-height: 0;
    overflow: hidden;
    padding: 6px 16px 16px;
    position: relative;
    contain: layout;
}
.pos-menu-header {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.pos-menu-header-left {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}
.pos-menu-header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 0;
}
.pos-menu-order-type-btns {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.pos-menu-order-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 96px;
    height: 96px;
    margin: 5px 0;
    padding: 8px;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    color: #212529;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pos-menu-order-type-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.pos-menu-order-type-btn span {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.pos-menu-order-type-btn:hover {
    border-color: #e69500;
}
.pos-menu-order-type-btn.selected {
    background: #000080;
    border-color: #000080;
    color: white;
}
.pos-menu-order-type-btn.selected img {
    filter: brightness(0) invert(1);
}
.pos-menu-promise-btn {
    white-space: nowrap;
    width: auto;
}
.pos-menu-promise-btn span {
    white-space: nowrap;
}
.pos-menu-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 2px solid #FFA500;
    border-radius: 10px;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.15s ease;
}
.pos-menu-cancel-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.pos-promise-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    display: flex;
    justify-content: flex-end;
}
.pos-promise-panel {
    width: 360px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    padding: 16px;
    box-shadow: -10px 0 24px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    animation: pos-slide-in-right 0.18s ease-out;
}
@keyframes pos-slide-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.pos-promos-panel-layout {
    display: flex;
    flex-direction: column;
    max-width: 540px;
    height: auto;
    max-height: 100%;
}

.pos-promos-list {
    overflow-y: auto;
    min-height: 0;
    padding: 2px 0;
}

.receipt-preview-paper {
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    color: #222;
    font-family: "Courier New", monospace;
    font-size: 0.92rem;
    padding: 14px 16px;
    max-height: 70vh;
    overflow-y: auto;
}

.receipt-preview-meta {
    text-align: center;
    font-weight: 700;
    margin-bottom: 4px;
}

.receipt-preview-divider {
    border-top: 1px dashed #aeb7c2;
    margin: 10px 0;
}

.receipt-preview-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.receipt-preview-line span:first-child,
.receipt-preview-line strong:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.receipt-preview-line span:last-child,
.receipt-preview-line strong:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.receipt-preview-total {
    margin-top: 4px;
    font-size: 1rem;
}

.pos-promo-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    /* Column so a coupon picture sits above its name; a text-only row is unaffected. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 95% of the row, which is the 540px .pos-promos-panel-layout the panel lives in. */
.pos-promo-btn-img {
    width: 95%;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    object-fit: contain;
    border-radius: 6px;
}

.pos-promo-btn-label {
    display: block;
    width: 100%;
}

.pos-promo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pos-promo-btn:active {
    transform: translateY(0);
}

.pos-promo-btn.btn-primary {
    background-color: navy !important;
    border-color: navy !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,128,0.35);
}

.pos-promo-btn.pos-promo-validated {
    background-color: green !important;
    border: none !important;
    color: white;
}

.pos-promo-btn.btn-primary.pos-promo-validated {
    background-color: darkblue !important;
    border-color: darkblue !important;
    color: white !important;
    font-weight: bold !important;
}

.pos-validate-any-active {
    background-color: darkblue !important;
    border-color: darkblue !important;
    color: white !important;
}

.pos-menu-cancel-btn:hover {
    border-color: #e69500;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(255, 165, 0, 0.25);
    transform: translateY(-1px);
}
.pos-menu-cancel-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.12);
}
.pos-menu-content {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.pos-menu-content.pos-menu-layout-vertical {
    flex-direction: row;
}
.pos-menu-content.pos-menu-layout-horizontal {
    flex-direction: column;
}
/* Ensure menu page never scrolls - only category, items, and receipt columns scroll internally */
body:has(.pos-menu-page) {
    overflow: hidden;
}
.pos-menu-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    column-gap: 8px;
    row-gap: 10px;
    align-items: start;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    min-height: 0;
    align-content: start;
    -webkit-overflow-scrolling: touch;
}
.pos-menu-layout-vertical .pos-menu-categories {
    flex: 0 0 20%;
}
.pos-menu-layout-vertical .pos-menu-items {
    flex: 0 0 60%;
}
.pos-menu-layout-vertical .pos-menu-receipt {
    flex: 0 0 20%;
}
.pos-menu-layout-horizontal .pos-menu-categories {
    flex: 0 0 20%;
}
.pos-menu-layout-horizontal .pos-menu-items {
    flex: 0 0 60%;
}
.pos-menu-layout-horizontal .pos-menu-receipt {
    flex: 0 0 20%;
}
.pos-menu-cat-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    aspect-ratio: 1;
    padding: 0;
    font-size: 12px;
    text-align: center;
    border: 2px solid #dee2e6;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
}
.pos-menu-cat-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
}
.pos-menu-cat-btn span {
    padding: 4px 2px;
    font-weight: bold;
    font-size: 19px;
    flex-shrink: 0;
    line-height: 1.2;
    margin-top: auto;
}
/* Without a picture the square card has nothing to fill, so the grid switches to one row height
   for every row and the button fills its cell. Every category then occupies the same box and the
   label can sit dead centre instead of being pinned to the bottom edge under where the picture
   was. --pos-card-row-h is measured by fitPosCardText from the name that wraps to the most
   lines; the literal is the first-paint value and the fallback when script has not run. The
   `auto` upper bound lets a station-configured fixed height through without clipping. */
.pos-menu-categories.no-image {
    /* As many ~90px columns as the panel fits, but never fewer than the two the pictured
       layout gives: the category panel is only a fifth of the screen, and a 90px floor alone
       drops it to a single column on a narrow terminal. calc(50% - 4px) is one of two columns
       once the 8px column-gap is taken out. */
    grid-template-columns: repeat(auto-fill, minmax(min(90px, calc(50% - 4px)), 1fr));
    grid-auto-rows: minmax(var(--pos-card-row-h, 52px), auto);
    align-items: stretch;
    row-gap: 8px;
}
.pos-menu-cat-btn.no-image {
    aspect-ratio: auto;
    min-height: 52px;
    height: 100%;
    align-items: center;
    justify-content: center;
    /* Narrow sides: the category panel is a fifth of the screen split into two columns, and
       every pixel of side padding comes straight off the size the name can be set at. */
    padding: 6px 3px;
}
.pos-menu-cat-btn.no-image span {
    margin-top: 0;
    padding: 0;
}
/* Scoped away from the no-image cards: the `background` shorthand here would wipe the gloss
   gradient the raised skin paints, and it loses to the inline config colour anyway. */
.pos-menu-cat-btn:not(.no-image):hover, .pos-menu-cat-btn:not(.no-image).active {
    border-color: #FFA500;
    background: #fff;
}
.pos-menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 12px;
    justify-items: stretch;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    min-height: 0;
}
.pos-menu-items.no-image {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(var(--pos-card-row-h, 60px), auto);
    align-items: stretch;
}
.pos-menu-item-btn {
    padding: 0;
    font-size: 16px;
    border: 2px solid #dee2e6;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    min-width: 156px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.pos-menu-item-img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
}
.pos-menu-item-btn .pos-menu-item-name {
    padding: 4px 6px;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1.2;
    text-align: center;
    margin-top: auto;
}
.pos-menu-item-btn:not(.no-image):hover {
    border-color: #FFA500;
    background: #fff;
}
.pos-menu-item-btn.no-image {
    min-height: 60px;
    min-width: 100px;
    height: 100%;
    gap: 0;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
/* Receipt panel layout.
   Previously used CSS Grid with a fixed `grid-template-rows: auto 1fr auto auto`
   plus a `:has()` rule that added an extra row when the Order Instructions banner
   was present. That broke as soon as a *second* conditional banner appeared
   between the header and the items list (e.g. the "Auth short by ..." banner
   produced by `_authStatus`, the auth-sync success message, the inactive-auth
   notice). The new banner would consume the single `1fr` track and the items
   row would shift into an `auto` track — its content then overflowed downward
   and visually overlapped the next row (the split-check Print/Clear/Remove
   buttons, etc.). Flexbox sizes every banner to its natural height and lets
   `.pos-menu-receipt-items` claim the remaining space regardless of how many
   banner siblings are rendered. */
.pos-menu-receipt {
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 0;
}
.pos-menu-order-instructions-banner {
    margin-bottom: 8px;
}
.pos-menu-ticket-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}
/* Bootstrap-like ticket toolbar (shared with split-check rows) */
.pos-menu-ticket-btn {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
}
.pos-menu-ticket-btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}
.pos-menu-ticket-btn-primary {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}
.pos-menu-ticket-btn-primary:hover:not(:disabled) {
    background: #0b5ed7;
    border-color: #0a58ca;
}
.pos-menu-ticket-btn-outline {
    background: #fff;
    color: #212529;
    border-color: #ced4da;
    font-weight: 500;
}
.pos-menu-ticket-btn-outline:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: #adb5bd;
}
.pos-menu-ticket-btn-danger {
    background: #fff;
    color: #dc3545;
    border-color: #dc3545;
    font-weight: 500;
}
.pos-menu-ticket-btn-danger:hover:not(:disabled) {
    background: #f8d7da;
    border-color: #b02a37;
}
.pos-menu-ticket-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Back-compat: Finish Chair and any stray markup */
.pos-menu-print-ticket-btn {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #0d6efd;
    background: #0d6efd;
    color: #fff;
    line-height: 1.4;
}
.pos-menu-print-ticket-btn:hover:not(:disabled) {
    background: #0b5ed7;
    border-color: #0a58ca;
}
.pos-menu-print-ticket-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.pos-menu-ticket-status {
    margin-bottom: 8px;
    font-size: 12px;
    color: #495057;
}
.pos-menu-receipt-items {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    min-height: 0;
    /* Claim the leftover vertical space inside the flex-column `.pos-menu-receipt`.
       The other siblings (ticket header, banners, totals, Finish Order) keep their
       intrinsic height; only this scrollable items list grows/shrinks. */
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.pos-menu-receipt-items:has(.pos-menu-receipt-items-scroll) {
    overflow: hidden;
}
.pos-menu-receipt-items-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.pos-menu-chair-group-header {
    margin: 8px 0 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #eef4ff;
    color: #1f3c88;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.pos-menu-receipt-item-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    padding-bottom: 22px;
}
/* Combo groups: the header carries the combo's name and price, the children are indented beneath it and
   show no price of their own. The visual join is what tells a cashier these lines are one thing - they
   cannot be removed, moved or re-quantified separately, so they must not read as separate lines. */
.pos-menu-receipt-combo-parent {
    border-color: #0d6efd;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.pos-menu-receipt-combo-child {
    border-color: #0d6efd;
    border-top: none;
    border-radius: 0;
    margin-bottom: 0;
    margin-left: 18px;
    background: #f8fbff;
}
/* The last child closes the group, so the bottom corners round once rather than per line. */
.pos-menu-receipt-combo-child:not(:has(+ .pos-menu-receipt-combo-child)) {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-bottom: 8px;
}
.pos-menu-receipt-item-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px 4px 0;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    justify-content: space-between;
    min-height: auto;
}
.pos-menu-receipt-header-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.pos-menu-toggle-btn {
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.pos-menu-box-icon {
    width: 18px;
    height: 18px;
}
.pos-menu-receipt-thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.pos-menu-receipt-header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: stretch;
}
.pos-menu-receipt-header-main .pos-menu-receipt-header-sections {
    position: relative;
    padding-right: 0;
}
.pos-menu-receipt-header-main .pos-menu-receipt-modifiers {
    margin-bottom: 0;
    max-height: none;
}
.pos-menu-receipt-header-main .pos-menu-receipt-item-footer {
    background: transparent;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid #e9ecef;
}
.pos-menu-receipt-header-title {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.pos-menu-receipt-title-text {
    flex: 1;
    min-width: 0;
}
.pos-menu-receipt-header-title .pos-menu-receipt-line-total {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
}
.pos-menu-receipt-chevron {
    position: absolute;
    right: 6px;
    bottom: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 21px;
    line-height: 1;
    padding: 2px 4px;
    transition: transform 0.15s ease;
    transform-origin: center;
}
.pos-menu-receipt-chevron.expanded {
    transform: rotate(90deg);
}
.pos-menu-receipt-qty {
    margin-right: 4px;
}
.pos-menu-receipt-qty.qty-increased {
    font-weight: bold;
    color: #dc3545;
}
.pos-menu-receipt-header-price {
    margin-left: 6px;
    font-weight: bold;
}
.pos-menu-receipt-header-price.pos-price-original {
    text-decoration: line-through;
    opacity: 0.6;
}
.pos-menu-receipt-header-price.pos-price-discounted {
    color: #dc3545;
    margin-left: 2px;
}
.pos-menu-receipt-item-body {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    font-size: 14px;
    max-height: 200px;
    min-height: 0;
    overflow-y: auto;
}
.pos-menu-receipt-item-body.collapsed {
    display: none;
}
.pos-menu-receipt-modifiers {
    font-size: 12px;
    color: #6c757d;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 8px;
    max-height: 100px;
    overflow-y: auto;
}
.pos-menu-receipt-modifiers .pos-modifier-removed {
    color: #dc3545;
    text-decoration: line-through;
}
.pos-menu-receipt-price-breakdown {
    margin-bottom: 8px;
    font-size: 12px;
    flex-shrink: 0;
}
.pos-menu-receipt-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}
.pos-menu-receipt-breakdown-line {
    color: #6c757d;
    margin-left: 12px;
}
.pos-menu-receipt-breakdown-amount {
    font-weight: 500;
    color: #333;
}
.pos-menu-receipt-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 4px;
}
.pos-menu-receipt-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pos-menu-receipt-footer-left .pos-menu-edit-btn,
.pos-menu-receipt-footer-left .pos-menu-remove-btn {
    padding: 6px;
}
.pos-menu-receipt-body-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pos-menu-receipt-line-total {
    font-size: 14px;
    font-weight: bold;
}
.pos-menu-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
}
.pos-menu-receipt-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-menu-qty-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}
.pos-menu-qty-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    background: #f0f0f0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
}
.pos-menu-qty-btn:hover:not(:disabled) {
    background: #e0e0e0;
}
.pos-menu-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pos-menu-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.pos-menu-edit-btn:hover {
    background: rgba(13, 110, 253, 0.15);
}
.pos-menu-edit-icon {
    width: 30px;
    height: 30px;
}
.pos-menu-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
.pos-menu-remove-btn:hover {
    background: rgba(220, 53, 69, 0.15);
}
.pos-menu-remove-icon {
    width: 30px;
    height: 30px;
    display: block;
}
.pos-menu-receipt-totals {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 8px 5px;
    margin-bottom: 8px;
    flex-shrink: 0;
    background-color: #ffffff;
}
.pos-menu-total-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pos-menu-total-label {
    flex: 1 1 auto;
}
.pos-menu-total-amount {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
}
.pos-menu-total {
    font-weight: bold;
    font-size: 18px;
}
.pos-menu-totals-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #6c757d;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.pos-menu-totals-toggle-btn:hover {
    color: #212529;
}
.pos-menu-totals-details {
    border-top: 1px solid #dee2e6;
    margin-top: 4px;
    padding-top: 4px;
}
.pos-menu-focused-ticket-inline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0 4px 0;
    font-size: 13px;
}
.pos-menu-focused-ticket-inline .pos-menu-total-label {
    flex: 1 1 auto;
}
.pos-menu-focused-ticket-inline .pos-menu-total-amount {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}
.pos-menu-tip-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pos-menu-tip-btn {
    padding: 6px 12px;
    font-size: 14px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}
.pos-menu-tip-btn:hover {
    background: #e0e0e0;
}
.pos-menu-tip-clear {
    background: #fff3cd;
    border-color: #ffc107;
}
.pos-menu-tip-clear:hover {
    background: #ffe69c;
}
.pos-menu-finish-btn {
    flex-shrink: 0;
    padding: 16px 24px;
    font-size: 18px;
    background: #FFA500;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.pos-menu-finish-btn:hover {
    background: #e69500;
}
.pos-menu-finish-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.pos-menu-finish-btn:disabled:hover {
    background: #FFA500;
}
.pos-menu-chair-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.pos-menu-chair-status {
    min-width: 0;
    color: #495057;
    font-size: 13px;
}
.pos-menu-finish-chair-btn {
    background: #198754;
}
.pos-menu-finish-chair-btn:hover {
    background: #157347;
}
.ts-chair-tab {
    position: fixed;
    top: calc(var(--pos-header-bottom, 45px) + 85vh / 2);
    right: 0;
    transform: translateY(-50%);
    z-index: 1040;
    border: 1px solid #d0d7de;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #ffffff;
    color: #1f2328;
    padding: 12px 14px;
    min-width: 54px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.ts-chair-tab.open {
    right: min(420px, 36vw);
}
.ts-chair-tab-flash {
    animation: ts-chair-tab-flash 2s ease-in-out infinite;
}
@keyframes ts-chair-tab-flash {
    0%, 100% { background: #ffffff; color: #1f2328; }
    50% { background: #1f2328; color: #ffffff; }
}
.ts-chair-overlay {
    position: fixed;
    top: var(--pos-header-bottom, 45px);
    right: 0;
    width: min(420px, 36vw);
    max-width: 100vw;
    height: 85vh;
    background: #ffffff;
    border-left: 1px solid #dee2e6;
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom-left-radius: 8px;
}
.ts-chair-overlay.open {
    transform: translateX(0);
}
.ts-chair-overlay-header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    flex-shrink: 0;
}
.ts-chair-overlay-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ts-print-btn-header {
    background: #1f2328;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ts-print-btn-header:hover {
    background: #333a42;
}
.ts-chair-overlay-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2328;
}
.ts-chair-overlay-subtitle {
    margin-top: 4px;
    color: #57606a;
    font-size: 13px;
}
.ts-chair-overlay-body {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ts-chair-overlay-canvas-wrap {
    height: 220px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff;
    padding: 16px 16px 0;
}
.ts-chair-overlay-canvas-wrap .ts-canvas-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ts-chair-overlay-canvas-wrap .ts-canvas-row {
    height: 100%;
    display: flex;
    flex: 1;
    min-height: 0;
}
.ts-chair-overlay-canvas-wrap .ts-canvas-wrap {
    height: 100%;
    flex: 1;
    min-width: 0;
}
.ts-chair-overlay-canvas-wrap .ts-canvas-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.ts-chair-overlay-canvas-wrap .ts-canvas-svg > rect[fill="url(#grid)"] {
    fill: transparent;
}
.ts-chair-overlay-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #6c757d;
    text-align: center;
    font-size: 14px;
}
.ts-chair-overlay-orders {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    margin-top: 0;
}
.ts-chair-overlay-orders > .ts-overlay-chair-label:first-child {
    padding-top: 16px;
}
.ts-overlay-chair-label {
    font-size: 14px;
    font-weight: 700;
    color: #1f2328;
    padding: 8px 0 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}
.ts-overlay-order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    gap: 8px;
    border-bottom: 1px solid #f8f8f8;
}
.ts-overlay-order-text {
    flex: 1;
    font-size: 13px;
    color: #333;
    min-width: 0;
}
.ts-fire-btn {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ts-fire-btn:hover {
    background: #bb2d3b;
}
.ts-chair-overlay-footer {
    position: sticky;
    bottom: 0;
    padding: 12px 0 16px;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    margin-top: 16px;
}
.ts-print-btn {
    width: 100%;
    padding: 10px;
    background: #1f2328;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ts-print-btn:hover {
    background: #333a42;
}.pos-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.pos-menu-order-type-form {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    min-width: 360px;
}
.pos-menu-order-type-form h3 {
    margin-top: 0;
    margin-bottom: 16px;
}
.pos-menu-form-row {
    margin-bottom: 12px;
}
.pos-menu-form-row input, .pos-menu-form-row textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
}
.pos-menu-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.pos-menu-form-actions button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}
.pos-menu-size-selection {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    min-width: 320px;
}
.pos-menu-size-selection h3 {
    margin-top: 0;
    margin-bottom: 8px;
}
.pos-menu-size-item-name {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #333;
}
.pos-menu-size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.pos-menu-size-btn {
    padding: 16px 24px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    word-break: break-word;
    text-align: center;
    overflow: visible;
}
.pos-menu-size-btn:hover {
    border-color: #000080;
    background: #fff;
}
.pos-menu-size-btn.default,
.pos-menu-size-btn.selected {
    border-color: #000080;
    border-width: 2px;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 0 12px 2px rgba(0, 0, 128, 0.5);
}
.pos-menu-selector-btn:hover {
    border-color: #006400;
}
.pos-menu-selector-btn.default,
.pos-menu-selector-btn.selected {
    border-color: #006400;
    background: #006400;
    color: #fff;
    box-shadow: 0 0 12px 2px rgba(0, 100, 0, 0.35);
}
.pos-menu-item-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.pos-menu-modifier-selection {
    background: #fff;
    padding: 0;
    border-radius: 8px;
    width: 80vw;
    height: 80vh;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pos-menu-modifier-header {
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    gap: 16px;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 1;
    max-height: 25vh;
    overflow: hidden;
}
.pos-menu-header-selectors {
    display: flex;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}
.pos-menu-header-selectors .pos-menu-options-section {
    flex: 1;
    min-width: 0;
}
.pos-menu-header-selectors-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pos-menu-inline-btn-group {
    display: flex;
    gap: 6px;
    margin-right: 12px;
}
.pos-menu-inline-label {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: #006400;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.pos-menu-modifier-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
}
.pos-menu-modifier-header-price {
    font-size: 16px;
    font-weight: 600;
    color: #000080;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.pos-menu-price-breakdown-line {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}
.pos-menu-price-breakdown-total {
    font-size: 20px;
    font-weight: bold;
    color: #000080;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #dee2e6;
}
.pos-menu-price-calc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    max-width: 340px;
    max-height: 110px;
    overflow-y: auto;
    margin-top: 3px;
}
.pos-menu-price-calc-method {
    font-size: 12px;
    font-weight: 700;
    color: #555;
}
.pos-menu-price-calc-line {
    font-size: 12px;
    font-weight: normal;
    color: #555;
}
.pos-menu-modifier-item-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.pos-menu-modifier-item-name {
    font-size: 27px;
    font-weight: bold;
}
.pos-menu-modifier-option-group-line {
    font-size: 16px;
    color: #333;
}
.pos-menu-modifier-option-group-name {
    font-weight: bold;
    font-size: 18px;
}
.pos-menu-modifier-inline-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pos-menu-modifier-item-ingredients {
    font-size: 19.5px;
    color: #6c757d;
}
.pos-menu-modifier-selected-summary {
    font-size: 21px;
    color: #6c757d;
}
.pos-menu-modifier-item-desc {
    font-size: 21px;
    color: #6c757d;
}
.pos-menu-modifier-label {
    font-size: 12px;
    font-weight: normal;
    color: #6c757d;
}
.pos-menu-current-price {
    font-size: 18px;
    font-weight: bold;
    margin-right: auto;
}
.pos-menu-collapsed-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.pos-menu-collapsed-link {
    font-size: 14px;
    color: #0d6efd;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
}
.pos-menu-collapsed-link:hover {
    color: #0a58ca;
}
.pos-menu-modifier-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.pos-menu-modifier-list {
    margin-bottom: 16px;
}
.pos-menu-modifier-group {
    margin-bottom: 16px;
}
.pos-menu-modifier-name {
    font-weight: 600;
    margin-bottom: 8px;
}
.pos-menu-modifier-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.pos-menu-modifier-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.pos-menu-modifier-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.pos-menu-modifier-option input[type="checkbox"]:checked {
    background: #28a745;
    border-color: #28a745;
    position: relative;
}
.pos-menu-modifier-option input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pos-menu-modifier-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ---- Control skin: radios and checkboxes presented as buttons ----
   Terminal Setup > Screens > Layout > Menu Controls. The inputs stay in the DOM so the
   browser keeps enforcing one-of-N inside a radio name group; only the paint changes.
   The pressed state comes from a `checked` class emitted from C#, not from `:checked`,
   because Blazor renders `checked` as an attribute and attribute diffing does not
   reliably push back to the live DOM property once the user has interacted. */
.menu-ctl-buttons input[type="radio"],
.menu-ctl-buttons input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.menu-ctl-buttons .pos-menu-modifier-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    min-height: 44px;                                  /* touch target on a POS screen */
    box-sizing: border-box;
    text-align: center;
    line-height: 1.15;
    font-size: var(--mctl-font, 14px);
    color: var(--mctl-fg, #000);
    background: var(--mctl-bg, #fff);
    border: var(--mctl-border-w, 1px) solid var(--mctl-border, #000080);
    border-radius: var(--mctl-radius, 5px);
    cursor: pointer;
    user-select: none;
    transition: filter 0.1s ease, box-shadow 0.1s ease;
}

/* Honours Options Display > Auto Size being turned off, so a skinned control and a real
   option button end up the same size as well as the same colour. */
.menu-ctl-buttons .pos-menu-modifier-option {
    width: var(--mctl-w, auto);
    height: var(--mctl-h, auto);
}

.menu-ctl-buttons .pos-menu-modifier-option:hover {
    filter: brightness(0.96);
}

/* Pressed / ON. Three cues, so selection never depends on colour alone:
   filled background, thicker border, and an inset shadow that reads as depressed. */
.menu-ctl-buttons .pos-menu-modifier-option.checked {
    background: var(--mctl-sel-bg, #0d6efd);
    color: var(--mctl-sel-fg, #fff);
    border-color: var(--mctl-sel-bg, #0d6efd);
    border-width: calc(var(--mctl-border-w, 1px) + 1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    font-weight: 600;
}

.menu-ctl-buttons .pos-menu-modifier-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The pill and the strike-through must stay legible once the button is filled. */
.menu-ctl-buttons .pos-menu-modifier-option.checked .pos-menu-option-attr-pill {
    background: rgba(255, 255, 255, 0.9);
}
.menu-ctl-buttons .pos-menu-modifier-option.checked .pos-modifier-removed {
    color: #ffd6d6 !important;
}

.pos-menu-option-prices {
    font-size: 12px;
    color: #333;
    margin-bottom: 2px;
}
.pos-menu-option-pricing-json {
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
}
.pos-menu-modifier-option-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pos-menu-modifier-option-row:has(.pos-modifier-btn-row) {
    position: relative;
    z-index: 1;
}
.pos-menu-modifier-option-row.pos-modifier-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.pos-menu-modifier-option-row.pos-modifier-inline .pos-modifier-btn-row {
    margin-top: 0;
    margin-left: 4px;
    width: auto;
    justify-content: flex-start;
}
.pos-menu-modifier-option-row.pos-modifier-option-removed .pos-menu-modifier-option span {
    color: #dc3545;
    text-decoration: line-through;
}
.pos-modifier-removed {
    color: #dc3545 !important;
    text-decoration: line-through !important;
}
/* The pills share the option's grid cell with the control above them, so they wrap and centre
   inside it; a nowrap row runs past the cell and paints over the next option. */
.pos-modifier-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.pos-modifier-btn-row .pos-menu-instruction-pill {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 5px 7px;
    font-size: 8px;
    white-space: nowrap;
}
/* Attribute buttons (Remove, Lite, Side, Extra): when selected, navy fill and white text */
.pos-modifier-btn-row .pos-menu-instruction-pill.selected {
    background: #000080 !important;
    color: #fff !important;
    border-color: #000080 !important;
}
/* Bi-state option buttons (rendered when Screens Config -> Options Display = Buttons).
   Sizing/colors/border/radius come from inline styles built from station config. */
.pos-menu-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 1.15;
    padding: 8px 10px;
    transition: filter 0.1s ease;
}
.pos-menu-option-btn:hover:not(:disabled) {
    filter: brightness(0.96);
}
.pos-menu-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pos-menu-option-btn.selected {
    font-weight: 600;
}
.pos-menu-option-btn-label {
    white-space: normal;
}
/* Selected-attribute pill shown on the option button / next to a checkbox */
.pos-menu-option-attr-pill {
    display: inline-block;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #000080;
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1;
    padding: 2px 8px;
    margin-left: 6px;
    white-space: nowrap;
}
.pos-menu-option-attr-pill.attr-remove {
    background: #dc3545;
    color: #fff;
}
.pos-menu-modifier-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}
.pos-menu-modifier-footer .pos-menu-size-btn {
    margin: 0;
}
.pos-menu-instructions-section {
    margin-top: auto;
}
.pos-menu-instructions-body {
    display: flex;
    justify-content: center;
}
.pos-menu-instructions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.pos-menu-instruction-pill {
    padding: 12px 24px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 50px;
    background: #fff;
    cursor: pointer;
}
.pos-menu-instruction-pill:hover {
    border-color: #000080;
    background: #fff;
}
.pos-menu-instruction-pill.selected {
    border-color: #000080;
    border-width: 2px;
    background: #fff;
    font-weight: 600;
    box-shadow: 0 0 12px 2px rgba(0, 0, 128, 0.5);
}
.pos-menu-add-btn {
    background: #FFA500 !important;
    color: #fff !important;
    border-color: #FFA500 !important;
}
.pos-menu-add-btn:hover {
    background: #e69500 !important;
    border-color: #e69500 !important;
}
.pos-menu-modifier-footer .pos-menu-finish-btn {
    background: #28a745 !important;
    color: #fff !important;
    border-color: #28a745 !important;
}
.pos-menu-modifier-footer .pos-menu-finish-btn:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Unified item options overlay - size, crust, modifiers in boxed sections */
.pos-menu-item-options-overlay {
    background: #fff;
    padding: 0;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Compact, Bootstrap-style centered modal for short instructions input.
   Used by Order Instructions (Menu.razor) and Menu Item Instructions
   (ItemOptionsOverlay.razor). When applied alongside
   .pos-menu-item-options-overlay it overrides the 90vw/90vh full-size layout. */
.pos-instructions-modal {
    width: auto;
    height: auto;
    min-width: 320px;
    max-width: 480px;
    max-height: 90vh;
}
.pos-instructions-modal .pos-menu-modifier-header {
    max-height: none;
}
.pos-instructions-modal .pos-menu-modifier-item-name {
    font-size: 18px;
}
.pos-menu-item-options-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pos-menu-options-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.pos-menu-options-section-topping {
    overflow: visible;
}
.pos-menu-options-section-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.pos-menu-options-section-body {
    padding: 10px;
}
.pos-menu-options-section-body-topping {
    overflow: visible;
}

/* Topping card grid layout */
.topping-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
/* --pos-card-reserve is the space fitPosCardText holds below the name on top of what it
   measures, so that revealing the L/W/R picker (32px tall plus its 4px margin) or the
   qualifier pill on selection cannot push one card's row taller than its neighbours'. A card
   inside a pizza section panel never gets the picker, only the pill. */
.topping-cards-grid.no-image {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    grid-auto-rows: minmax(var(--topping-card-row-h, 76px), auto);
    align-items: stretch;
    --pos-card-reserve: 40px;
}
.pos-section-toppings .topping-cards-grid.no-image {
    --pos-card-reserve: 24px;
}
.topping-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 0 0 8px;
    cursor: pointer;
    text-align: center;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    overflow: visible;
    box-sizing: border-box;
}
.topping-card:hover {
    border-color: #000080;
}
.topping-card.selected {
    border-color: #000080;
    background: #000080;
    color: #fff;
}
.topping-card-img {
    width: 95%;
    aspect-ratio: 1;
    height: auto;
    max-width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 6px;
    flex-shrink: 1;
    min-height: 0;
    overflow: visible;
    background: transparent;
}
.topping-card-img svg {
    width: 100%;
    height: 100%;
    display: block;
}
.topping-card-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topping-card-img-fallback svg {
    width: 100%;
    height: 100%;
}
/* Height follows the slot; width follows the photo so radius clips the picture, not a wrapper. */
.topping-card-photo {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 5px;
    display: block;
}
.topping-card.selected .topping-card-img svg path,
.topping-card.selected .topping-card-img svg circle,
.topping-card.selected .topping-card-img svg ellipse,
.topping-card.selected .topping-card-img svg rect,
.topping-card.selected .topping-card-img svg polygon {
    stroke: #fff;
}
.topping-card-fallback {
    font-size: 28px;
    font-weight: 700;
    color: #adb5bd;
    line-height: 1;
}
.topping-card.selected .topping-card-fallback {
    color: rgba(255,255,255,0.5);
}
.topping-card-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    padding: 0 8px;
    line-height: 1.2;
    word-break: break-word;
    flex-shrink: 1;
    min-height: 0;
    max-width: 100%;
    overflow: visible;
}

/* Vertical cards: every name in a grid shares one size, so the labels read as a set instead of
   each card picking its own scale. First paint estimates from the card width; JS then measures
   the real glyphs and lands on the largest size that fits the longest name in the grid. */
.topping-card:not(.horizontal) > .topping-card-main {
    container-type: inline-size;
}
.topping-card:not(.horizontal) .topping-card-name {
    width: 100%;
    box-sizing: border-box;
    padding: 0 3px;
    text-align: center;
    font-size: var(--topping-name-size, clamp(10px, 14cqi, 20px));
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The fitter measures full glyph widths, which the ellipsis would otherwise cut short. */
.topping-cards-grid.measuring-names .topping-card-name {
    text-overflow: clip;
}
.topping-card-section-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
    padding: 0 8px;
    flex-shrink: 1;
    min-height: 0;
}
.topping-card-section-picker .pizza-section-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
}
.topping-card-section-picker .pizza-section-btn .pizza-shape {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
}
.topping-card-section-picker .pizza-section-btn .pizza-section-letter {
    font-size: 11px;
}
.topping-card-attr {
    margin-top: 4px;
    flex-shrink: 0;
}

/* ---- Horizontal card orientation: picture beside the text ----
   Terminal Setup > Screens > Layout > Orientation. --card-img-pct is emitted per card by
   GetCategoryButtonStyle / GetMenuItemButtonStyle / GetOptionCardStyle. The wrapper exists
   so only one container has to flip, which keeps the L/W/R row and the qualifier pill along
   the bottom of a topping card as siblings of the picture+name pair rather than inside it. */
.pos-card-main,
.topping-card-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
}
.topping-card-main {
    align-items: center;
    justify-content: center;
}

/* The category / menu item name is styled by element selector (.pos-menu-cat-btn span), so
   the wrapper would otherwise pick up that padding, weight and margin-top:auto as well. */
.pos-menu-cat-btn > .pos-card-main,
.pos-menu-item-btn > .pos-card-main {
    padding: 0;
    margin-top: 0;
    font-weight: inherit;
    font-size: inherit;
    flex: 1 1 auto;
}
.pos-menu-cat-btn.no-image > .pos-card-main,
.pos-menu-item-btn.no-image > .pos-card-main {
    padding: 0;
}

.pos-menu-cat-btn.horizontal > .pos-card-main,
.pos-menu-item-btn.horizontal > .pos-card-main,
.topping-card.horizontal > .topping-card-main {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.pos-menu-cat-btn.horizontal.img-right > .pos-card-main,
.pos-menu-item-btn.horizontal.img-right > .pos-card-main,
.topping-card.horizontal.img-right > .topping-card-main {
    flex-direction: row-reverse;
}

.pos-menu-cat-btn.horizontal .pos-menu-cat-img,
.pos-menu-item-btn.horizontal .pos-menu-item-img,
.topping-card.horizontal .topping-card-img {
    flex: 0 0 var(--card-img-pct, 50%);
    width: var(--card-img-pct, 50%);
    max-width: var(--card-img-pct, 50%);
    height: 100%;
    min-height: 0;
    margin-bottom: 0;                                  /* cancels topping-card-img's 6px */
    overflow: visible;
    background: transparent;
}

.horizontal .pos-card-text,
.horizontal .pos-menu-item-name,
.topping-card.horizontal .topping-card-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;                                     /* cancels the margin-top:auto that pinned text to the bottom */
    margin-bottom: 0;
    text-align: left;
    overflow-wrap: break-word;
}

/* Horizontal cards are wide and short, so the square / tall assumptions have to go. */
.pos-menu-cat-btn.horizontal {
    aspect-ratio: auto;
    min-height: 64px;
}
.pos-menu-categories.horizontal {
    grid-template-columns: 1fr;
}
.pos-menu-items.horizontal {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pos-menu-item-btn.horizontal {
    min-width: 0;
}
.topping-cards-grid.horizontal {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* L/W/R and the attribute pill stay along the bottom, full width, as in vertical mode. */
.topping-card.horizontal {
    align-items: stretch;
    padding: 10px 8px 8px;
}
.topping-card.horizontal .topping-card-img {
    overflow: visible;
    background: transparent;
}
.topping-card.horizontal .topping-card-photo {
    border-radius: 5px;
}
.topping-card.horizontal .topping-card-name {
    padding: 0;
}
.topping-card.horizontal > .topping-card-section-picker {
    justify-content: center;
    width: 100%;
}

/* Pizza section picker (half/whole topping selection) */
.pizza-section-picker {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    margin-left: 3px;
}
.pizza-section-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    user-select: none;
}
.pizza-section-btn .pizza-shape {
    width: 40px;
    height: 40px;
}
.pizza-section-btn .pizza-shape path,
.pizza-section-btn .pizza-shape circle {
    fill: transparent;
    stroke: #adb5bd;
    stroke-width: 2;
}
.pizza-section-btn .pizza-section-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: #333;
    pointer-events: none;
}
.pizza-section-btn.selected .pizza-shape path,
.pizza-section-btn.selected .pizza-shape circle {
    fill: #000080;
    stroke: #000080;
}
.pizza-section-btn.selected .pizza-section-letter {
    color: #fff;
}
.topping-card.selected .pizza-section-btn .pizza-shape path,
.topping-card.selected .pizza-section-btn .pizza-shape circle {
    stroke: rgba(255,255,255,0.5);
}
.topping-card.selected .pizza-section-btn .pizza-section-letter {
    color: rgba(255,255,255,0.7);
}
.topping-card.selected .pizza-section-btn.selected .pizza-shape path,
.topping-card.selected .pizza-section-btn.selected .pizza-shape circle {
    fill: #fff;
    stroke: #fff;
}
.topping-card.selected .pizza-section-btn.selected .pizza-section-letter {
    color: #000080;
}
/* Keyed on the half rather than the position: a whole-only item (Calzone) shows W alone. */
.topping-card-section-picker .pizza-section-btn.section-left .pizza-section-letter {
    left: 28%;
}
.topping-card-section-picker .pizza-section-btn.section-right .pizza-section-letter {
    left: 72%;
}

/* Pizza topping attribute popup (horizontal) */
.pizza-attr-popup {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    min-width: 0;
    width: fit-content;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 6px;
    white-space: nowrap;
}
.topping-card .pizza-attr-popup {
    width: max-content;
    max-width: none;
}
/* Which side of the card the popup opens on is settled by placeToppingAttrPopups once it can
   measure the room left inside the scrolling options list. Specificity has to clear the
   section-panel override further down, hence the .topping-card prefix. */
.topping-card .pizza-attr-popup.attr-popup-above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--attr-popup-gap, 6px);
}
.topping-card .pizza-attr-popup.attr-popup-below {
    top: 100%;
    bottom: auto;
    margin-top: var(--attr-popup-gap, 6px);
    margin-bottom: 0;
}
.pizza-attr-popup-btn {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    background: #fff;
    border: none;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.pizza-attr-popup-btn:hover {
    background: #f0f0ff;
}
.pizza-attr-popup-btn.selected {
    background: #000080;
    color: #fff;
}
.pizza-attr-popup-btn.attr-remove-btn:hover {
    background: #fff0f0;
}
.pizza-attr-popup-btn.attr-remove-btn.selected {
    background: #dc3545;
    color: #fff;
}
.pizza-attr-popup-btn + .pizza-attr-popup-btn {
    border-left: 1px solid #eee;
}

/* Pizza topping attribute pill indicator */
.pizza-attr-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50px;
    background: #fff;
    color: #000080;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.pizza-attr-pill.attr-remove {
    background: #dc3545;
    color: #fff;
}

/* Screens Config preview */
.screens-config-preview {
    width: min(100%, 560px);
    height: 260px;
    border: 2px solid #adb5bd;
    border-radius: 8px;
    background: #fff;
    display: grid;
    overflow: hidden;
}
.screens-config-preview.vertical {
    /* Column widths are set inline per panel (see GetScreenPreviewStyle); this is only a fallback. */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.screens-config-preview.horizontal {
    grid-template-columns: 1fr;
    grid-template-rows: 20% 60% 20%;
}
.screens-config-slot {
    border-right: 2px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.screens-config-preview.vertical .screens-config-slot:last-child {
    border-right: none;
}
.screens-config-preview.horizontal .screens-config-slot {
    border-right: none;
}
.screens-config-preview.horizontal .screens-config-slot:last-child {
    border-bottom: none;
}
.screens-config-panel {
    width: 100%;
    text-align: center;
    border: 1px solid #000080;
    color: #000080;
    background: #f5f6ff;
    border-radius: 8px;
    padding: 8px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
}

/* Two-state slider (TwoStateSlider.razor) - Vertical/Horizontal and Left/Right in the
   Layout Orientation card. The thumb sits behind two equal, transparent buttons and slides
   between the halves, so the control reads as a switch while still being a pair of buttons. */
.two-state-slider {
    position: relative;
    display: inline-flex;
    width: 100%;
    max-width: 240px;
    padding: 3px;
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 999px;
    overflow: hidden;
    user-select: none;
}
.two-state-slider .tss-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #000080;
    border-radius: 999px;
    transition: left 0.15s ease;
    pointer-events: none;
}
.two-state-slider.right .tss-thumb {
    left: 50%;
}
.two-state-slider .tss-option {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-width: 0;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.two-state-slider .tss-option.active {
    color: #fff;
}
.two-state-slider.disabled {
    opacity: 0.55;
    pointer-events: none;
}
.two-state-slider.lockout-locked .tss-thumb {
    background: #c0392b;
}

.pos-employee-lockout-banner {
    margin-bottom: 12px;
}
.pos-employee-lockout-banner ul {
    padding-left: 1.2rem;
}
.pos-employee-lock-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.pos-employee-lock-row .form-label {
    margin-bottom: 4px;
}

/* SVG Graphics tab - force SVGs to fill their preview containers */
.svg-preview-cell svg {
    width: 100%;
    height: 100%;
    display: block;
}
.svg-edit-preview svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Customer Lookup Dropdown ──────────────────────────────────────────────── */
.customer-lookup-wrapper {
    position: relative;
}

.customer-lookup-phone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.customer-lookup-phone-row label {
    flex: 1;
    min-width: 0;
}

.customer-lookup-add-link {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.customer-lookup-add-link:hover {
    text-decoration: underline;
}

.customer-lookup-phone-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 15px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.customer-lookup-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 1001;
    max-height: 280px;
    overflow-y: auto;
}

/* Catches the click-away. The phone row is lifted over it so the input stays editable while open. */
.customer-lookup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.customer-lookup-wrapper.open .customer-lookup-phone-row {
    position: relative;
    z-index: 1000;
}

/* The order type popup is narrower than a row with its badges and Accept button. */
.pos-menu-order-type-form .customer-lookup-dropdown {
    min-width: 440px;
}

.customer-lookup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    gap: 8px;
    cursor: pointer;
}

.customer-lookup-row:hover {
    background: #eaf3ff;
}

.customer-lookup-row:last-child {
    border-bottom: none;
}

.customer-lookup-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.customer-lookup-name {
    font-weight: 600;
    font-size: 14px;
    color: #000080;
}

.customer-lookup-phone {
    font-size: 13px;
    color: #555;
    margin-left: 8px;
}

.customer-lookup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.customer-lookup-accept-btn {
    flex-shrink: 0;
}

.customer-lookup-addr {
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-lookup-no-match {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

/* ── Employee Photo Thumbnail in Header ───────────────────────────────────── */
.pos-header-user-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000080;
    flex-shrink: 0;
}

/* ── Customer Management Page ─────────────────────────────────────────────── */
.customer-mgmt-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f5;
    padding: 16px;
    gap: 12px;
}

.customer-mgmt-top {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 14px;
}

.customer-mgmt-top input {
    flex: 1;
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.customer-mgmt-top button {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #007bff;
    color: #fff;
}

.customer-mgmt-body {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.customer-mgmt-list {
    width: 320px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow-y: auto;
}

.customer-mgmt-list-item {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s;
}

.customer-mgmt-list-item:hover,
.customer-mgmt-list-item.selected {
    background: #e8f0fe;
}

.customer-mgmt-list-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #000080;
}

.customer-mgmt-list-item-sub {
    font-size: 12px;
    color: #666;
}

.customer-mgmt-detail {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow-y: auto;
    padding: 20px;
}

.customer-mgmt-detail-section {
    margin-bottom: 20px;
}

.customer-mgmt-detail-section h4 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #000080;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 6px;
}

.customer-mgmt-field-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.customer-mgmt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 180px;
}

.customer-mgmt-field label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.customer-mgmt-field input,
.customer-mgmt-field textarea {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 100%;
}

.customer-mgmt-field textarea {
    resize: vertical;
    min-height: 70px;
}

.customer-mgmt-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #f0f4ff;
    border: 1px solid #c0d0f0;
    border-radius: 6px;
    padding: 10px 18px;
    min-width: 120px;
}

.customer-mgmt-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
}

.customer-mgmt-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #000080;
}

.customer-mgmt-addr-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 6px;
    background: #f9f9f9;
}

.customer-mgmt-addr-info {
    flex: 1;
    font-size: 13px;
}

.customer-mgmt-addr-label {
    font-weight: 700;
    color: #000080;
    margin-right: 6px;
}

.customer-mgmt-addr-default {
    font-size: 11px;
    color: #28a745;
    font-weight: 600;
}

.customer-mgmt-addr-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1080;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.customer-mgmt-addr-suggestion {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.customer-mgmt-addr-suggestion:last-child {
    border-bottom: none;
}

.customer-mgmt-addr-suggestion:hover {
    background: #f0f4ff;
}

.customer-mgmt-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.customer-mgmt-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.customer-mgmt-btn-save { background: #28a745; color: #fff; }
.customer-mgmt-btn-delete { background: #dc3545; color: #fff; }
.customer-mgmt-btn-cancel { background: #6c757d; color: #fff; }
.customer-mgmt-btn-add { background: #007bff; color: #fff; }
.customer-mgmt-btn-order { background: #ff8c00; color: #fff; }

.customer-mgmt-order-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

/* ── Customer purchases & rewards history (customer database) ────────────── */
.customer-rewards-history-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 10px;
}

.customer-rewards-history-controls .customer-mgmt-field {
    flex: 0 0 auto;
    min-width: 150px;
}

.customer-rewards-history-controls select {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.customer-rewards-history-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 12px;
}

.customer-rewards-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.customer-rewards-history-table th,
.customer-rewards-history-table td {
    border-bottom: 1px solid #eee;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}

.customer-rewards-history-table th {
    position: sticky;
    top: 0;
    background: #f0f4ff;
    color: #000080;
    font-size: 12px;
}

.customer-rewards-history-table .num {
    text-align: right;
    white-space: nowrap;
}

.customer-rewards-history-table tr.reversed td {
    color: #888;
    text-decoration: line-through;
}

/* ── Customer order history (customer database, delivery overlay, Takeout form) ── */
.pos-order-history {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* The Takeout form is sized for two fields, so it widens only while a history is in it. The list
   scrolls on its own rather than the form, which would clip the phone lookup's dropdown. */
.pos-menu-order-type-form:has(.pos-order-history) {
    width: min(760px, 95vw);
}

.pos-menu-order-type-form .pos-order-history {
    max-height: 40vh;
    overflow-y: auto;
}

/* Fixed widths rather than space-between, so order number, date, type, total and status line up
   down the list however wide each row's own text happens to be. The row wraps instead of using grid
   tracks because the delivery overlay renders the same list in a column too narrow for one line. */
.pos-order-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.pos-order-history-row:last-child {
    border-bottom: none;
}

.pos-order-history-id {
    width: 110px;
    color: #000080;
    font-weight: 600;
}

.pos-order-history-id a {
    margin-left: 8px;
    font-weight: 400;
}

.pos-order-history-when { width: 150px; }
.pos-order-history-type { width: 90px; }

.pos-order-history-total {
    width: 80px;
    text-align: right;
}

.pos-order-history-status {
    flex: 1 1 110px;
    text-align: right;
    color: #28a745;
}

.pos-order-history-actions {
    margin-left: auto;
}

.pos-order-history-btn {
    padding: 4px 12px;
    font-size: 12px;
}

/* ── Quick Customer Search on Menu ───────────────────────────────────────── */
.menu-customer-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.menu-customer-search-bar input {
    flex: 1;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #aaa;
    border-radius: 4px;
}

.menu-customer-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 900;
    max-height: 240px;
    overflow-y: auto;
}

.menu-customer-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 13px;
}

.menu-customer-search-row:hover {
    background: #e8f0fe;
}

/* ── Recent Orders recall dropdown on Menu ───────────────────────────────── */
/* Layout and positioning come from Bootstrap's .dropdown / .dropdown-menu so the list
   overlays the page rather than growing the customer bar. Only sizing is ours. */
.menu-recent-orders-btn {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.menu-recent-orders-menu {
    min-width: 320px;
    max-width: 460px;
    max-height: 320px;
    overflow-y: auto;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Catches the next click anywhere on the page so the list closes on click-away.
   Bootstrap's dropdown JS, which would normally do this, is not loaded by this app.
   Sits just under .dropdown-menu's z-index of 1000. */
.menu-recent-orders-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Long names give way to the order number and status badge either side of them. */
.menu-recent-orders-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-customer-accept-btn,
.menu-customer-view-btn {
    border: none;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.menu-customer-accept-btn {
    background: #28a745;
}

.menu-customer-accept-btn:hover {
    background: #218838;
}

.menu-customer-view-btn {
    background: #0078D4;
}

.menu-customer-view-btn:hover {
    background: #006abe;
}

.menu-customer-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-customer-info strong {
    color: #000080;
}

.menu-customer-name-link {
    color: #000080;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.menu-customer-name-link:hover {
    text-decoration: underline;
}

.menu-customer-info-phone {
    color: #555;
}

.menu-customer-info-addr {
    color: #555;
    font-style: italic;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Countdown timer in header ───────────────────────────────────────────── */
.pos-header-countdown {
    font-size: 13px;
    color: #c0392b;
    font-weight: 700;
    min-width: 42px;
    text-align: right;
}

/* ── Time Clock page ─────────────────────────────────────────────────────── */
.pos-timeclock-page {
    padding: 24px;
    max-width: 480px;
    margin: 0 auto;
}
.pos-timeclock-title {
    font-size: 28px;
    margin-bottom: 8px;
}
.pos-timeclock-status {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}
.pos-theme-dark .pos-timeclock-status {
    color: #dee2e6;
}
.pos-timeclock-job-row {
    margin-bottom: 16px;
}
.pos-timeclock-job-row label { margin-right: 8px; }
.pos-timeclock-job-select {
    max-width: 240px;
    display: inline-block;
}
.pos-timeclock-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.pos-timeclock-btn {
    min-height: 64px;
    min-width: 140px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #ccc;
    cursor: pointer;
    padding: 12px 20px;
}
.pos-timeclock-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.pos-timeclock-btn-in {
    background: #28a745;
    color: white;
    border-color: #1e7e34;
}
.pos-timeclock-btn-in:hover:not(:disabled) {
    background: #218838;
}
.pos-timeclock-btn-out {
    background: #dc3545;
    color: white;
    border-color: #c82333;
}
.pos-timeclock-btn-out:hover:not(:disabled) {
    background: #c82333;
}
.pos-timeclock-btn-break {
    background: #ffc107;
    color: #212529;
    border-color: #e0a800;
}
.pos-timeclock-btn-break:hover:not(:disabled) {
    background: #e0a800;
}
.pos-timeclock-btn-break-end {
    background: #17a2b8;
    color: white;
    border-color: #138496;
}
.pos-timeclock-btn-break-end:hover:not(:disabled) {
    background: #138496;
}
.pos-timeclock-btn-override {
    background: #fd7e14;
    color: white;
    border-color: #e8590c;
    margin-bottom: 20px;
}
.pos-timeclock-btn-override:hover:not(:disabled) {
    background: #e8590c;
}
.pos-timeclock-message {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.pos-timeclock-success {
    background: #d4edda;
    color: #155724;
}
.pos-timeclock-error {
    background: #f8d7da;
    color: #721c24;
}
.pos-timeclock-warnings {
    margin-bottom: 12px;
}
.pos-timeclock-warning {
    padding: 8px;
    background: #fff3cd;
    color: #856404;
    border-radius: 4px;
    margin-bottom: 4px;
}
.pos-timeclock-back {
    margin-top: 24px;
}
.pos-timeclock-back a {
    color: #000080;
    text-decoration: underline;
}

/* ===== Table Service Canvas ===== */
.ts-canvas-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 500px;
}
.ts-toolbar {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}
.ts-canvas-row {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.ts-canvas-wrap {
    position: relative;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #ddd;
}
.ts-canvas-svg {
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ts-canvas-svg:active { cursor: grabbing; }
.ts-obj { cursor: pointer; }
.ts-obj:hover { filter: brightness(1.05); }
.ts-selected { filter: drop-shadow(0 0 4px rgba(13,110,253,0.5)); }
.ts-combined { filter: drop-shadow(0 0 3px rgba(255,165,0,0.6)); }
.ts-combine-sel { filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)); outline: 2px dashed #ffc107; }
.resize-handle { cursor: se-resize; }

/* Palette sidebar */
.ts-palette {
    width: 130px;
    min-width: 130px;
    background: #f0f0f0;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 6px;
}
.ts-palette-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}
.ts-palette-section {
    margin-bottom: 10px;
}
.ts-palette-label {
    font-size: 11px;
    color: #666;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ts-palette-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ts-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: grab;
    transition: box-shadow 0.15s;
    width: 56px;
}
.ts-palette-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border-color: #0d6efd;
}
.ts-palette-item:active { cursor: grabbing; }
.ts-palette-item-label {
    font-size: 9px;
    color: #555;
    margin-top: 2px;
    text-align: center;
    line-height: 1.1;
}

/* Waitstaff table service page */
.ts-floor-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}
.ts-floor-btn {
    padding: 6px 16px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}
.ts-floor-btn.active {
    background: #000080;
    color: #fff;
    border-color: #000080;
}
.ts-floor-btn:hover:not(.active) {
    background: #e8e8e8;
}
.ts-order-panel {
    width: 340px;
    min-width: 340px;
    background: #fff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    padding: 10px;
}

/* ── Reconnection overlay ── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
.reconnect-box {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 40px 48px;
    text-align: center;
    color: #fff;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.reconnect-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #4dabf7;
    border-radius: 50%;
    animation: reconnect-spin 0.8s linear infinite;
}
@keyframes reconnect-spin {
    to { transform: rotate(360deg); }
}
.reconnect-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 600;
}
.reconnect-message {
    margin: 0 0 6px;
    color: #adb5bd;
    font-size: 0.95rem;
}
.reconnect-attempt {
    margin: 0 0 4px;
    color: #868e96;
    font-size: 0.85rem;
}
.reconnect-failed-message {
    display: none;
    margin: 12px 0 0;
    color: #ff6b6b;
    font-size: 0.9rem;
}
.reconnect-reload-btn {
    display: none;
    margin: 16px auto 0;
    padding: 8px 28px;
    background: #4dabf7;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}
.reconnect-reload-btn:hover {
    background: #339af0;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner {
    display: none;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-message,
#components-reconnect-modal.components-reconnect-rejected .reconnect-message {
    display: none;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-attempt,
#components-reconnect-modal.components-reconnect-rejected .reconnect-attempt {
    display: none;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-message,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-message,
#components-reconnect-modal.components-reconnect-failed .reconnect-reload-btn,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reload-btn {
    display: block;
}

/* Station management cards */
.station-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border: 1px solid #dee2e6;
}
.station-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.station-card.station-closed {
    border-color: #dc3545;
    opacity: 0.85;
}
.station-card.station-locked {
    border-color: #ffc107;
}

/* Station closed/locked full-screen overlay */
.station-closed-overlay,
.station-locked-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.station-closed-overlay {
    background: rgba(220, 53, 69, 0.95);
}
.station-locked-overlay {
    background: rgba(0, 0, 0, 0.92);
}

/* Background image rotation layers — contained to the page (below the header), not the viewport */
.pos-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.pos-bg-layer-base  { z-index: 0; }
.pos-bg-layer-slide { z-index: 1; }
.pos-bg-content     { position: relative; z-index: 2; }

@keyframes bgSlideFromLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes bgSlideFromRight  { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes bgSlideFromTop    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes bgSlideFromBottom { from { transform: translateY(100%);  } to { transform: translateY(0); } }

/* ========== KDS board layout ========== */

/* The board is built around 100vh, so it gets the whole viewport with no app chrome. */
.kds-layout {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ========== Dual / Second Screen ========== */

.ds-layout {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.ds-container {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Always-visible 50/50 split */
.ds-active-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.ds-left-panel {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: none;
    padding: 24px;
    overflow-y: auto;
}

.ds-right-panel {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    overflow: hidden;
}

/* Dual slideshow halves */
.ds-slideshow-half {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.ds-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.ds-slideshow-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Directional slide-in animations */
@keyframes dsSlideFromTop {
    from { transform: translateY(-100%); opacity: 0.3; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes dsSlideFromBottom {
    from { transform: translateY(100%); opacity: 0.3; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes dsSlideFromLeft {
    from { transform: translateX(-100%); opacity: 0.3; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes dsSlideFromRight {
    from { transform: translateX(100%); opacity: 0.3; }
    to   { transform: translateX(0);    opacity: 1; }
}

.ds-slide-from-top    { animation: dsSlideFromTop    1s ease both; }
.ds-slide-from-bottom { animation: dsSlideFromBottom 1s ease both; }
.ds-slide-from-left   { animation: dsSlideFromLeft   1s ease both; }
.ds-slide-from-right  { animation: dsSlideFromRight  1s ease both; }

/* Phone numpad */
.ds-numpad-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

/* Tip selector occupies the left panel during the dual-screen tip flow */
.ds-tip-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
}

.ds-numpad-title {
    color: #ffffff;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.ds-phone-display {
    width: 100%;
    background: #1a1a2e;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-phone-text {
    color: #ffffff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.ds-numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 16px;
}

.ds-numpad-btn {
    background: #2a2a4a;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 12px;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 600;
    padding: clamp(12px, 2vh, 20px) 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ds-numpad-btn:active {
    background: #4a4a7a;
    transform: scale(0.96);
}

.ds-numpad-clear {
    color: #ff6b6b;
    border-color: #ff6b6b55;
}

.ds-numpad-back {
    color: #ffd93d;
    border-color: #ffd93d55;
}

.ds-ok-btn {
    width: 100%;
    padding: clamp(12px, 2vh, 18px) 0;
    background: #28a745;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    user-select: none;
}

.ds-ok-btn:active {
    background: #1e7e34;
    transform: scale(0.97);
}

/* Ticket display (right panel) */
.ds-ticket {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    color: #222;
}

.ds-ticket-header {
    padding: 16px 20px 12px;
    border-bottom: 2px solid #eee;
}

.ds-ticket-header h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: #333;
}

.ds-ticket-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}

.ds-ticket-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 40px 0;
    font-size: 1.1rem;
}

.ds-ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ds-ticket-item:last-child {
    border-bottom: none;
}

.ds-ticket-item-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.ds-ticket-item-qty {
    font-weight: 700;
    color: #555;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    white-space: nowrap;
}

.ds-ticket-item-name {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    color: #333;
    word-break: break-word;
}

.ds-ticket-item-price {
    font-weight: 600;
    color: #333;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    white-space: nowrap;
    margin-left: 12px;
    font-variant-numeric: tabular-nums;
}

.ds-ticket-totals {
    border-top: 2px solid #ddd;
    padding: 12px 20px 16px;
    background: #fafafa;
}

.ds-ticket-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    color: #555;
}

.ds-ticket-discount {
    color: #d9534f;
}

.ds-ticket-grand-total {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    color: #222;
    border-top: 1px solid #ccc;
    margin-top: 6px;
    padding-top: 8px;
}

/* Detailed ticket item box */
.ds-ticket-detail-box {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

.ds-ticket-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.ds-ticket-detail-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ds-ticket-detail-title {
    flex: 1;
    font-weight: 600;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: #222;
}

.ds-ticket-detail-qty {
    font-weight: 700;
}

.ds-qty-increased {
    color: #dc3545;
}

.ds-ticket-detail-price {
    font-weight: 700;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: #333;
    white-space: nowrap;
}
.ds-ticket-detail-price.pos-price-original {
    text-decoration: line-through;
    opacity: 0.6;
}
.ds-ticket-detail-price.pos-price-discounted {
    color: #dc3545;
    margin-left: 4px;
}

.ds-ticket-detail-sections {
    padding: 6px 14px 8px;
    font-size: 0.85rem;
    color: #555;
}

.ds-ticket-section-line {
    padding: 2px 0;
    line-height: 1.4;
}

/* Mirror the menu/payment receipt section-line treatment (.pos-menu-receipt-section-line.*)
   so half/whole/CYO and attribute/remove modifier lines render identically on the
   customer-facing dual screen. */
.ds-ticket-section-line.section-whole {
    font-weight: 600;
}

.ds-ticket-section-line.section-half {
    padding-left: 8px;
}

.ds-ticket-section-line.section-cyo-topping {
    padding-left: 16px;
    font-size: 0.82rem;
}

.ds-ticket-section-line.section-attr-changed {
    color: #0000FF;
    font-weight: 700;
}

.ds-ticket-section-line.section-mod-remove-line {
    color: #CE2029;
    font-weight: 700;
}

.ds-ticket-detail-modifiers {
    padding: 6px 14px 8px;
    font-size: 0.85rem;
    color: #6c757d;
}

.ds-modifier-removed {
    color: #dc3545;
    text-decoration: line-through;
}

.ds-ticket-detail-breakdown {
    padding: 4px 14px 8px;
    font-size: 0.82rem;
}

.ds-ticket-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.ds-ticket-breakdown-line {
    color: #6c757d;
}

.ds-ticket-breakdown-amount {
    font-weight: 600;
    color: #333;
}

/* Responsive: stack vertically on very narrow viewports */
@media (max-width: 600px) {
    .ds-active-split {
        flex-direction: column;
    }
    .ds-left-panel,
    .ds-right-panel {
        flex: 1;
    }
}

/* ========== Kiosk Mode ========== */

.kiosk-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e;
    color: #fff;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Attract State ── */
.kiosk-attract {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    animation: kioskAttractPulse 4s ease-in-out infinite;
    overflow: hidden;
}

@keyframes kioskAttractPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.kiosk-title {
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 1.2rem 0 0.6rem;
    text-shadow: 0 0 20px rgba(255,255,255,0.25);
    transition: color 1.5s ease;
    flex-shrink: 0;
}

.kiosk-attract-content {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    gap: 0.75rem;
}

.kiosk-attract-center {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.kiosk-attract-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    animation: kioskFadeIn 1s ease-in;
}

@keyframes kioskFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.kiosk-slider {
    flex: 0.9;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    min-width: 0;
}

.kiosk-slider::before,
.kiosk-slider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 2;
    pointer-events: none;
}

.kiosk-slider::before {
    top: 0;
    background: linear-gradient(to bottom, #302b63 0%, transparent 100%);
}

.kiosk-slider::after {
    bottom: 0;
    background: linear-gradient(to top, #302b63 0%, transparent 100%);
}

.kiosk-slider-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    will-change: transform;
}

.kiosk-slider-track.kiosk-slider-up {
    animation: kioskSlideUp 40s linear infinite;
}

.kiosk-slider-track.kiosk-slider-down {
    animation: kioskSlideDown 40s linear infinite;
}

@keyframes kioskSlideUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes kioskSlideDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.kiosk-slider-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.kiosk-attract-cta {
    padding: 1rem 0 1.5rem;
    font-size: 2.2rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    animation: kioskCtaPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes kioskCtaPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ── Menu Layout ── */
.kiosk-menu-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kiosk-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #16213e;
    border-bottom: 2px solid #0f3460;
    flex-shrink: 0;
    z-index: 10;
}

.kiosk-home-btn {
    background: none;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.kiosk-home-btn:hover, .kiosk-home-btn:active {
    background: rgba(255,255,255,0.1);
}

.kiosk-home-icon {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
}

.kiosk-category-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}

.kiosk-category-bar::-webkit-scrollbar { display: none; }

.kiosk-cat-btn {
    background: rgba(255,255,255,0.08);
    border: 2px solid transparent;
    color: #fff;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 1.1rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.kiosk-cat-btn:hover { background: rgba(255,255,255,0.15); }
.kiosk-cat-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    font-weight: 700;
}

.kiosk-cancel-btn {
    background: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
}

.kiosk-cancel-btn:hover, .kiosk-cancel-btn:active {
    background: #dc3545;
    color: #fff;
}

/* ── Body: items + cart ── */
.kiosk-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.kiosk-items-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    transition: margin-right 0.3s ease;
}

.kiosk-items-area.cart-open {
    margin-right: 340px;
}

.kiosk-items-area.modifier-open {
    margin-left: 40%;
}

.kiosk-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.kiosk-item-card {
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12px;
}

.kiosk-item-card:hover, .kiosk-item-card:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(233,69,96,0.25);
    border-color: #e94560;
}

.kiosk-item-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: rgba(0,0,0,0.2);
}

.kiosk-item-name {
    padding: 8px 10px 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* ── Modifier Slide-In Panel ── */
.kiosk-modifier-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    background: #1a1a2e;
    border-right: 2px solid #0f3460;
    display: flex;
    flex-direction: column;
    z-index: 20;
    animation: kioskSlideInLeft 0.3s ease;
    overflow: hidden;
}

/* Half-and-half builder host. Its own stacking context keeps everything the options overlay draws
   (including its z-index:1100 instructions dialog) above the kiosk chrome but below the
   inactivity prompt (.kiosk-timeout-overlay, z-index 200). */
.kiosk-item-options-host {
    position: fixed;
    inset: 0;
    z-index: 150;
}

@keyframes kioskSlideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.kiosk-modifier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.kiosk-modifier-header h3 { margin: 0; font-size: 1.5rem; }

.kiosk-modifier-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.kiosk-modifier-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.kiosk-mod-section {
    margin-bottom: 20px;
}

.kiosk-mod-section h4 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kiosk-mod-required {
    margin: -4px 0 10px;
    color: #e94560;
    font-weight: 600;
}

.kiosk-mod-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kiosk-mod-opt-btn {
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.kiosk-mod-opt-btn:hover { border-color: #e94560; }
.kiosk-mod-opt-btn.selected {
    background: #e94560;
    border-color: #e94560;
    font-weight: 600;
}

.kiosk-modifier-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.kiosk-add-btn {
    width: 100%;
    padding: 16px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.kiosk-add-btn:hover, .kiosk-add-btn:active { background: #218838; }

/* ── Cart Panel ── */
.kiosk-cart {
    position: absolute;
    right: -340px;
    top: 0;
    bottom: 0;
    width: 340px;
    background: #16213e;
    border-left: 2px solid #0f3460;
    display: flex;
    flex-direction: column;
    z-index: 15;
    transition: right 0.3s ease;
}

.kiosk-cart.open {
    right: 0;
}

.kiosk-cart-tab {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: #e94560;
    color: #fff;
    padding: 16px 12px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 16;
}

.kiosk-cart-badge {
    background: #fff;
    color: #e94560;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    writing-mode: horizontal-tb;
}

.kiosk-cart-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kiosk-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.kiosk-cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kiosk-cart-item-info {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.kiosk-cart-item-qty {
    color: #e94560;
    font-weight: 700;
    flex-shrink: 0;
}

.kiosk-cart-item-name {
    min-width: 0;
    font-size: 0.95rem;
}

.kiosk-cart-item-base {
    font-weight: 600;
}

.kiosk-cart-item-mods {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kiosk-cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.kiosk-cart-item-price {
    font-weight: 600;
    font-size: 0.95rem;
}

.kiosk-cart-item-del {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

.kiosk-cart-totals {
    padding: 12px;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.kiosk-cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.95rem;
}

.kiosk-cart-grand-total {
    font-size: 1.2rem;
    font-weight: 800;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 4px;
}

.kiosk-fee-help-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: 8px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.kiosk-fee-help-text {
    font-size: 0.95rem;
    opacity: 0.85;
    padding: 4px 0 8px;
}

.kiosk-cart-empty {
    padding: 40px 16px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 1.1rem;
}

.kiosk-pay-btn {
    margin: 12px;
    padding: 16px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
}

.kiosk-pay-btn:hover, .kiosk-pay-btn:active { background: #218838; }

/* ── Checkout ── */
.kiosk-checkout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 24px;
    padding: 40px;
}

.kiosk-checkout h2 {
    font-size: 2.4rem;
    margin: 0;
}

.kiosk-checkout-options {
    display: flex;
    gap: 32px;
    margin: 24px 0;
}

.kiosk-checkout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 48px;
    background: rgba(255,255,255,0.06);
    border: 3px solid rgba(255,255,255,0.15);
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.2s;
    min-width: 240px;
}

.kiosk-checkout-btn:hover, .kiosk-checkout-btn:active {
    border-color: #e94560;
    background: rgba(233,69,96,0.1);
    transform: scale(1.03);
}

.kiosk-checkout-icon {
    width: 80px;
    height: 80px;
    filter: brightness(0) invert(1);
}

.kiosk-checkout-card:hover .kiosk-checkout-icon { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(233,69,96,0.5)); }

.kiosk-checkout-error {
    background: rgba(220,53,69,0.2);
    border: 1px solid #dc3545;
    color: #ff6b6b;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 1.1rem;
    text-align: center;
}

.kiosk-checkout-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.kiosk-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255,255,255,0.15);
    border-top: 5px solid #e94560;
    border-radius: 50%;
    animation: kioskSpin 1s linear infinite;
}

@keyframes kioskSpin {
    to { transform: rotate(360deg); }
}

.kiosk-back-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.kiosk-back-btn:hover { border-color: #fff; background: rgba(255,255,255,0.05); }

/* ── Tip selection ── */
.kiosk-tip-subtotal {
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    margin: 4px 0 16px;
}

.kiosk-tip-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
    max-width: 720px;
}

.kiosk-tip-btn {
    min-width: 180px;
    padding: 28px 36px;
    font-size: 1.4rem;
    font-weight: 700;
}

.kiosk-tip-btn:disabled { opacity: 0.5; cursor: default; }

.kiosk-tip-none {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
}

/* ── E-Commerce hosted payment iframe ── */
.kiosk-card-entry {
    width: 100%;
}

.kiosk-payment-iframe {
    width: 100%;
    max-width: 560px;
    height: 620px;
    border: none;
    border-radius: 12px;
    background: #fff;
    margin: 16px auto;
    display: block;
}

/* ── Thank You ── */
.kiosk-thankyou {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.kiosk-thankyou-box {
    text-align: center;
    animation: kioskFadeIn 0.5s ease;
}

.kiosk-thankyou-check {
    font-size: 6rem;
    color: #28a745;
    background: rgba(40,167,69,0.15);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border: 4px solid #28a745;
}

.kiosk-thankyou h1 {
    font-size: 3rem;
    margin: 0 0 16px;
}

.kiosk-thankyou-order-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: #e94560;
}

.kiosk-thankyou-countdown {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.55);
}

.kiosk-thankyou-neworder {
    margin-top: 2rem;
    padding: 16px 48px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #e94560, #c23152);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kiosk-thankyou-neworder:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 20px rgba(233,69,96,0.4);
}

/* ── Toast ── */
.kiosk-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 1.3rem;
    font-weight: 700;
    z-index: 100;
    animation: kioskToastIn 0.3s ease, kioskToastOut 0.3s ease 1.7s;
    box-shadow: 0 4px 20px rgba(40,167,69,0.4);
}

@keyframes kioskToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes kioskToastOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Timeout Overlay ── */
.kiosk-timeout-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: kioskFadeIn 0.3s ease;
}

.kiosk-timeout-box {
    background: #1a1a2e;
    border: 2px solid #e94560;
    border-radius: 24px;
    padding: 48px 56px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.kiosk-timeout-box h2 {
    margin: 0 0 12px;
    font-size: 2rem;
}

.kiosk-timeout-box p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.7);
    margin: 0 0 20px;
}

.kiosk-timeout-box strong {
    color: #e94560;
    font-size: 1.6rem;
}

.kiosk-timeout-continue {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.kiosk-timeout-continue:hover { background: #218838; }

.kiosk-receipt-print-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px 24px 0;
    z-index: 300;
    animation: kioskFadeIn 0.2s ease;
    pointer-events: none;
}

.kiosk-receipt-print-modal {
    width: min(360px, calc(100vw - 48px));
    color: #222;
    text-align: center;
}

.kiosk-receipt-print-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
}

.kiosk-receipt-print-sheet {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    padding: 20px 22px 18px;
}

.kiosk-receipt-print-order {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.35rem;
    font-weight: 700;
}

.kiosk-receipt-print-divider {
    border-top: 1px dashed #d6d6d6;
    margin: 14px 0;
}

.kiosk-receipt-print-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.kiosk-receipt-print-row,
.kiosk-receipt-print-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.08rem;
    text-align: left;
}

.kiosk-receipt-print-row span:first-child,
.kiosk-receipt-print-total-row span:first-child {
    flex: 1;
}

.kiosk-receipt-print-row span:last-child,
.kiosk-receipt-print-total-row span:last-child {
    white-space: nowrap;
}

.kiosk-receipt-print-total-row {
    margin-top: 8px;
}

.kiosk-receipt-print-total-label {
    font-weight: 700;
}

.kiosk-receipt-print-grand-total {
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: 12px;
}

@keyframes kds-flash-anim {
    0%, 50%, 100% { opacity: 1; }
    12.5%, 62.5% { opacity: 0.15; }
}
.kds-flash {
    animation: kds-flash-anim 1s ease-in-out;
}

@keyframes kds-slide-out {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}
@keyframes kds-slide-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.kds-slide-out {
    animation: kds-slide-out 0.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.kds-slide-in {
    animation: kds-slide-in 0.45s cubic-bezier(0, 0, 0.2, 1);
}

/* ===== Section Mode ===== */
.pos-section-count-input {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
    margin: 0 4px;
}
.pos-section-toggle-btn {
    background: none;
    border: 2px solid #6c757d;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px;
    margin-left: 4px;
    transition: border-color 0.15s, background 0.15s;
}
.pos-section-toggle-btn:hover { border-color: #495057; }
.pos-section-toggle-btn.active { border-color: #0d6efd; background: #e8f0fe; }
.pos-section-toggle-btn svg { pointer-events: none; }

.pos-sections-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
    min-width: 0;
}
.pos-sections-stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pos-section-panel {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px;
    background: #fafafa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pos-section-header {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 4px 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 8px;
}
.pos-section-slider {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 8px;
    scrollbar-width: thin;
}
.pos-section-slider-track {
    display: flex;
    gap: 5px;
    padding: 4px 0;
    min-width: max-content;
}
.pos-section-slider-item {
    flex: 0 0 100px;
    text-align: center;
    cursor: pointer;
    padding: 6px 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pos-section-slider-item:hover { background: #f0f4ff; }
.pos-section-slider-item.selected {
    border-color: #0d6efd;
    background: #e8f0fe;
}
.pos-section-slider-img {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    background: #f8f9fa;
}
.pos-section-slider-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pos-section-slider-name {
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-top: 4px;
    width: 100%;
}

/* Device Menu Images > Half/Half Section Buttons with pictures off: each button shrinks to its
   label and takes the station's font settings and the item's menu colour from the inline style.
   The track is padded because the slider clips vertically, and the raised shadow and the
   selection ring in --pos-btn-pressed both draw outside the button. */
.pos-section-slider.text-only .pos-section-slider-track {
    gap: 8px;
    padding: 6px 6px 12px;
}
.pos-section-slider-item.text-only {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 14px;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--pos-btn-radius, 10px);
    background-image: var(--pos-btn-gloss);
    box-shadow: var(--pos-btn-raised);
    transition: box-shadow 0.12s ease, transform 0.07s ease, filter 0.12s ease;
}
.pos-section-slider-item.text-only .pos-section-slider-name {
    margin-top: 0;
    width: auto;
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
/* The button keeps its own colour when selected; the sunk shadow and its ring mark the choice. */
.pos-section-slider-item.text-only.selected {
    border-color: transparent;
    background-color: #fff;
    background-image: var(--pos-btn-gloss);
    box-shadow: var(--pos-btn-pressed);
    transform: translateY(1px);
}
.pos-section-slider-item.text-only:hover {
    background-color: #fff;
    background-image: var(--pos-btn-gloss);
}
@media (hover: hover) {
    .pos-section-slider-item.text-only:hover {
        filter: brightness(1.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pos-section-slider-item.text-only {
        transition: none;
    }
    .pos-section-slider-item.text-only.selected {
        transform: none;
    }
}
.pos-section-toppings {
    flex: 1;
    min-height: 0;
}
.pos-section-toppings .pizza-attr-popup {
    bottom: auto;
    top: 100%;
    margin-top: 2px;
    --attr-popup-gap: 2px;
}
.pos-section-toppings .topping-cards-grid {
    row-gap: 50px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.pos-menu-receipt-sections {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pos-menu-receipt-header-sections {
    background: #f0f2f5;
    padding: 4px 10px 6px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pos-menu-section-expand-btn {
    display: block;
    margin: 4px auto 0;
    background: none;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #495057;
    cursor: pointer;
    padding: 0;
}
.pos-menu-section-expand-btn:hover {
    background: #dee2e6;
    color: #212529;
}
.pos-menu-receipt-section-line {
    font-size: 0.85rem;
    line-height: 1.4;
}
.pos-menu-receipt-section-line.section-whole {
    font-weight: 600;
}
.pos-menu-receipt-section-line.section-half {
    padding-left: 8px;
}
.pos-menu-receipt-section-line.section-cyo-topping {
    padding-left: 16px;
    font-size: 0.82rem;
}
.pos-menu-receipt-section-line.section-attr-changed {
    color: #0000FF;
    font-weight: 700;
}
.pos-menu-receipt-section-line.section-mod-remove-line {
    color: #CE2029;
    font-weight: 700;
}
.section-mod-plus {
    color: #000080;
    font-weight: 700;
    display: inline-block;
    margin: 0 4px 0 6px;
}
.section-mod-remove {
    color: #CE2029;
    font-weight: 700;
    display: inline-block;
    margin: 0 4px 0 6px;
}
.section-mod-attr {
    color: #0000FF;
    font-weight: 700;
    display: inline-block;
    margin: 0 4px 0 6px;
}
.section-mod-sep {
    color: #999;
    font-weight: 400;
}

/* ===== KDS Pipeline Diagram (Setup → KDS tab) ===== */
.kds-graph-wrap {
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff;
    height: 520px;
    overflow: hidden;
}
.kds-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}
.kds-graph-toolbar-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.kds-graph-toolbar-btns .btn {
    min-height: 32px;
    min-width: 40px;
    padding: 4px 12px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.kds-graph-svg {
    flex: 1;
    width: 100%;
    min-height: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background: #fafbfc;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}
.kds-graph-svg.kds-graph-panning,
.kds-graph-svg:active {
    cursor: grabbing;
}
.kds-graph-node {
    transition: filter 0.12s ease-in-out;
}
.kds-graph-node:hover {
    filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.45));
}
.kds-graph-node-orphan:hover {
    filter: drop-shadow(0 0 4px rgba(108, 117, 125, 0.45));
}
.kds-graph-gate {
    pointer-events: none;
}
.kds-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 6px 12px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    font-size: 12px;
}
.kds-graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kds-graph-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid #999;
}
.kds-graph-legend-dot.kds-graph-legend-kds {
    background: #ffffff;
    border-color: #0d6efd;
}
.kds-graph-legend-dot.kds-graph-legend-gate {
    background: #fff8e1;
    border-color: #b8860b;
}

/* ===== Delivery Dispatch map labels ===== */
/* Compact, opaque chips so marker labels stay readable and don't blend into
   the map or icons. Leaflet renders tooltips in a pane above markers, so these
   sit on top; the offsets in dispatch-map.js keep each label clear of its icon. */
.leaflet-tooltip.dispatch-tip {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.leaflet-tooltip.dispatch-tip::before { display: none; } /* drop the arrow to reduce visual clutter */
.leaflet-tooltip.dispatch-tip-store { color: #b71c1c; }
.leaflet-tooltip.dispatch-tip-driver { color: #1b5e20; }

/* Delivery popup map (delivery-map.js) - returning-driver pulse halo + chip. */
.delivery-driver-icon { background: transparent; border: none; }
.delivery-driver-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid;
    transform: translate(-50%, -50%);
    animation: delivery-pulse-ring 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes delivery-pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
.delivery-driver-chip {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #1565C0;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Optimized-route leg labels: opaque pill that floats above the route line. */
.dispatch-leg-label { background: transparent; border: none; }
.dispatch-leg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.dispatch-leg-chip .leg-n { font-weight: 700; color: #0f172a; }
.dispatch-leg-chip .leg-d { color: #475569; }

/* ===================== Cash management page =====================
   Cash figures have to be legible on every station, so this page paints its own background and
   text colours instead of inheriting the terminal's configured PageBackgroundColor. Light is pure
   white on black; the Dark/Light buttons on the page switch between the two and nothing here is
   configurable from Setup. */
.cash-mgmt {
    flex: 1;
    min-height: calc(100vh - 120px);
    padding: 20px;
}

.cash-mgmt-light {
    background: #ffffff;
    color: #000000;
}

.cash-mgmt-dark {
    background: #000000;
    color: #ffffff;
}

.cash-mgmt h3, .cash-mgmt h5, .cash-mgmt h6, .cash-mgmt p, .cash-mgmt label, .cash-mgmt strong {
    color: inherit;
}

/* Bootstrap's muted grey is too faint for money on either surface. */
.cash-mgmt-light .text-muted { color: #333333 !important; }
.cash-mgmt-dark .text-muted { color: #cccccc !important; }

.cash-mgmt .table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
    --bs-table-hover-color: inherit;
    color: inherit;
}
.cash-mgmt-light .table {
    --bs-table-striped-bg: #f2f2f2;
    --bs-table-hover-bg: #e6e6e6;
    --bs-table-border-color: #000000;
}
.cash-mgmt-dark .table {
    --bs-table-striped-bg: #1a1a1a;
    --bs-table-hover-bg: #262626;
    --bs-table-border-color: #ffffff;
}

.cash-mgmt-light .card {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
}
.cash-mgmt-dark .card {
    background: #0d0d0d;
    border-color: #ffffff;
    color: #ffffff;
}

.cash-mgmt-dark .form-control,
.cash-mgmt-dark .form-select,
.cash-mgmt-dark .denom-count {
    background: #0d0d0d;
    border-color: #cccccc;
    color: #ffffff;
}
.cash-mgmt-dark .form-control::placeholder { color: #999999; }
.cash-mgmt-dark .btn-outline-secondary { color: #ffffff; border-color: #cccccc; }
.cash-mgmt-dark .btn-outline-secondary:hover { background: #ffffff; color: #000000; }
.cash-mgmt-dark .btn-outline-dark { color: #ffffff; border-color: #ffffff; }
.cash-mgmt-dark .btn-outline-dark:hover { background: #ffffff; color: #000000; }
.cash-mgmt-dark .btn-link { color: #7ec8ff; }

.cash-mgmt-dark .nav-tabs { border-bottom-color: #ffffff; }
.cash-mgmt-dark .nav-tabs .nav-link { background: #1a1a1a; color: #ffffff; }
.cash-mgmt-dark .nav-tabs .nav-link:hover { background: #262626; border-color: #cccccc; }
.cash-mgmt-dark .nav-tabs .nav-link.active {
    background: #000000;
    border-color: #ffffff #ffffff #000000;
    color: #ffffff;
}

.cash-mgmt-dark .denom-section-title { color: #ffffff; }
.cash-mgmt-dark .denom-subtotal { color: #cccccc; }
.cash-mgmt-dark .denom-tile { background: #0d0d0d; border-color: #cccccc; }
.cash-mgmt-dark .denom-btn { background: #262626; border-color: #cccccc; color: #ffffff; }
.cash-mgmt-dark .denom-total { background: #ffffff; color: #000000; }

/* Dark / Light switch */
.cash-mgmt-theme {
    display: inline-flex;
    gap: 4px;
}

.cash-mgmt-theme-btn {
    width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.cash-mgmt-light .cash-mgmt-theme-btn.active { background: #000000; color: #ffffff; }
.cash-mgmt-dark .cash-mgmt-theme-btn.active { background: #ffffff; color: #000000; }

/* ===================== Cash slip printer picker ===================== */
.cash-mgmt-printer-bar {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.cash-mgmt-printer-label { font-weight: 600; margin-bottom: 6px; }
.cash-mgmt-printer-label span { font-weight: 400; opacity: .7; font-size: .85rem; }

.cash-mgmt-printer-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* The 44px floor is the standard minimum touch target, so a finger cannot land between two
   adjacent printers and silently tick the wrong one. */
.cash-mgmt-printer-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #d7dce3;
    border-radius: 22px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

/* Selected reads the same way it does on the denomination tiles above. */
.cash-mgmt-printer-option.selected { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb33; }
.cash-mgmt-printer-summary { font-size: .85rem; margin-top: 4px; opacity: .8; }

.cash-mgmt-printer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 26px;
}
.cash-mgmt-printer-actions .btn { white-space: nowrap; min-height: 44px; }

.cash-mgmt-light .cash-mgmt-printer-option { background: #ffffff; }
.cash-mgmt-light .cash-mgmt-printer-option.selected { background: #eaf1fe; }
.cash-mgmt-dark .cash-mgmt-printer-option { background: #0d0d0d; border-color: #cccccc; }
.cash-mgmt-dark .cash-mgmt-printer-option.selected { background: #16304d; border-color: #7ec8ff; box-shadow: 0 0 0 1px #7ec8ff55; }

/* ===================== Revenue Center ===================== */
/* The RC reuses the cash-mgmt surface (light / dark) and printer bar. These add the tile pickers,
   the role buttons, the badges and the settlement step rail. */
.rc-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-tile {
    min-width: 150px; min-height: 64px; padding: 10px 14px;
    border: 1px solid #d7dce3; border-radius: 10px; background: #ffffff;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    cursor: pointer; user-select: none; text-align: left; color: inherit;
}
.rc-tile:disabled, .rc-tile.blocked { opacity: .5; cursor: not-allowed; }
.rc-tile.selected { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb33; background: #eaf1fe; }
.rc-tile .rc-tile-title { font-weight: 600; }
.rc-tile .rc-tile-sub { font-size: .8rem; opacity: .75; }
.cash-mgmt-dark .rc-tile { background: #0d0d0d; border-color: #cccccc; }
.cash-mgmt-dark .rc-tile.selected { background: #16304d; border-color: #7ec8ff; box-shadow: 0 0 0 2px #7ec8ff55; }

.rc-role-buttons { display: flex; gap: 10px; }
.rc-role-btn {
    flex: 1; min-height: 56px; border-radius: 10px; border: 1px solid #d7dce3; background: #ffffff;
    font-weight: 600; font-size: 1.05rem; color: inherit; cursor: pointer;
}
.rc-role-btn.active { background: #0f172a; color: #ffffff; border-color: #0f172a; }
.cash-mgmt-dark .rc-role-btn { background: #0d0d0d; border-color: #cccccc; }
.cash-mgmt-dark .rc-role-btn.active { background: #ffffff; color: #000000; border-color: #ffffff; }

.rc-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 600;
    margin-left: 6px; vertical-align: middle;
}
.rc-badge-warn { background: #fde68a; color: #78350f; }
.rc-badge-danger { background: #fecaca; color: #7f1d1d; }
.rc-badge-info { background: #bfdbfe; color: #1e3a8a; }
.rc-badge-muted { background: #e5e7eb; color: #374151; }

.rc-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rc-step {
    padding: 6px 12px; border-radius: 16px; border: 1px solid #d7dce3; font-size: .9rem; opacity: .6;
}
.rc-step.active { opacity: 1; border-color: #2563eb; background: #eaf1fe; font-weight: 600; }
.rc-step.done { opacity: 1; border-color: #16a34a; background: #dcfce7; }
.cash-mgmt-dark .rc-step { border-color: #cccccc; }
.cash-mgmt-dark .rc-step.active { background: #16304d; border-color: #7ec8ff; }
.cash-mgmt-dark .rc-step.done { background: #14532d; border-color: #4ade80; }

.rc-table-wrap { max-height: 420px; overflow: auto; }
.rc-table-wrap table { font-size: .9rem; }
.rc-table-wrap th { position: sticky; top: 0; background: inherit; }
.cash-mgmt-light .rc-table-wrap th { background: #ffffff; }
.cash-mgmt-dark .rc-table-wrap th { background: #000000; }
.rc-row-unpaid { background: #fee2e2 !important; }
.cash-mgmt-dark .rc-row-unpaid { background: #450a0a !important; }
.rc-row-pending { opacity: .7; font-style: italic; }
.rc-row-frozen { pointer-events: none; }

.rc-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rc-kpi {
    min-width: 140px; padding: 10px 14px; border: 1px solid #d7dce3; border-radius: 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.rc-kpi .rc-kpi-label { font-size: .75rem; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.rc-kpi .rc-kpi-value { font-size: 1.2rem; font-weight: 700; }
.cash-mgmt-dark .rc-kpi { border-color: #cccccc; }

.rc-tip-input { width: 90px; text-align: right; display: inline-block; }

/* The roster under the Access Code numpad. */
.pos-terminal-roster {
    margin-top: 10px; padding: 8px 12px; border-radius: 8px;
    background: rgba(15, 23, 42, .06); border: 1px solid rgba(15, 23, 42, .15);
    font-size: .9rem; color: #0f172a; text-align: left;
}
.pos-terminal-roster-rule { font-size: .8rem; opacity: .8; margin-top: 2px; }

/* The per-stop tip prompt (Dispatch, Order Details). */
.tip-prompt-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1065;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.tip-prompt {
    width: 100%; max-width: 440px; background: #ffffff; color: #0f172a; border-radius: 14px;
    padding: 20px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.tip-prompt h5 { margin-bottom: 4px; }
.tip-prompt .tip-prompt-sub { font-size: .9rem; color: #475569; margin-bottom: 14px; }
.tip-prompt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip-prompt-row label { flex: 1; font-weight: 600; margin: 0; }
.tip-prompt-row .tip-prompt-currency { font-weight: 700; }
.tip-prompt-row input { width: 130px; text-align: right; font-size: 1.1rem; }
.tip-prompt-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.tip-prompt-actions .btn { min-height: 44px; min-width: 100px; }

/* ===================== Cash denomination matrix ===================== */
.denom-matrix { display: flex; flex-direction: column; gap: 16px; }
.denom-section-title { font-weight: 600; margin-bottom: 6px; color: #334155; }
.denom-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.denom-tile {
    width: 110px; border: 1px solid #d7dce3; border-radius: 10px; padding: 8px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff;
}
.denom-tile.has-count { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb33; }
.denom-bill {
    width: 100%; height: 34px; border-radius: 4px; color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center; background: var(--denom-color, #455a64);
    letter-spacing: .5px;
}
.denom-coin {
    width: 42px; height: 42px; border-radius: 50%; font-weight: 700; color: #5b4a1f;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 35% 30%, #f6d365, #d4af37);
    border: 1px solid #b8902a;
}
.denom-stepper { display: flex; align-items: center; gap: 4px; }
.denom-btn {
    width: 26px; height: 26px; border: 1px solid #cbd5e1; background: #f1f5f9; border-radius: 6px;
    font-weight: 700; line-height: 1; cursor: pointer;
}
.denom-btn:disabled { opacity: .5; cursor: default; }
.denom-count { width: 46px; text-align: center; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px; }
.denom-subtotal { font-size: .8rem; color: #475569; }
.denom-total {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
    background: #0f172a; color: #fff; border-radius: 10px; font-size: 1.1rem;
}

/* ============================================================
   Heartbeat (HB) — mobile-first live metrics dashboard
   ============================================================ */
.hb-shell {
    min-height: 100vh;
    background: #0b1220;
    color: #e5e7eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.hb-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.hb-spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 4px solid rgba(255,255,255,.15); border-top-color: #38bdf8;
    animation: hb-spin 1s linear infinite;
}
@keyframes hb-spin { to { transform: rotate(360deg); } }

/* Login */
.hb-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.hb-login-card {
    width: 100%; max-width: 360px; background: #111a2e; border: 1px solid #1f2a44;
    border-radius: 18px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.hb-logo { font-size: 1.6rem; font-weight: 800; letter-spacing: 3px; color: #38bdf8; }
.hb-login-sub { color: #94a3b8; margin: 8px 0 20px; }
.hb-code-input {
    width: 100%; text-align: center; font-size: 2rem; letter-spacing: 12px; padding: 14px;
    border-radius: 12px; border: 1px solid #334155; background: #0b1220; color: #fff; margin-bottom: 16px;
}
.hb-code-input:focus { outline: none; border-color: #38bdf8; }
.hb-error { color: #f87171; margin-bottom: 12px; font-size: .9rem; }

/* Buttons */
.hb-btn {
    border: none; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 1rem;
    cursor: pointer; min-height: 48px;
}
.hb-btn-primary { background: #2563eb; color: #fff; }
.hb-btn-primary:disabled { opacity: .6; }
.hb-btn-ghost { background: transparent; color: #93c5fd; border: 1px solid #1f2a44; }
.w-100 { width: 100%; }

/* Header */
.hb-header {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px; background: #0b1220; border-bottom: 1px solid #1f2a44;
}
.hb-title { font-size: 1.3rem; font-weight: 800; }
.hb-subtitle, .hb-card-sub { color: #94a3b8; font-size: .85rem; }
.hb-clock { text-align: center; line-height: 1.1; margin: 0 auto; }
.hb-clock-time { font-size: 1.15rem; font-weight: 700; color: #e2e8f0; }
.hb-clock-zone { color: #64748b; font-size: .72rem; }
.hb-detail-title { font-size: 1.1rem; font-weight: 700; text-align: center; flex: 1; }

/* Range bar */
.hb-range-bar { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; }
.hb-range-btn {
    flex: 0 0 auto; border: 1px solid #1f2a44; background: #111a2e; color: #cbd5e1;
    border-radius: 999px; padding: 8px 14px; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.hb-range-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.hb-meta { display: flex; justify-content: space-between; padding: 4px 16px 10px; color: #94a3b8; font-size: .8rem; }
.hb-updated { color: #64748b; }

.hb-section-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 6px; font-size: .8rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #7dd3fc;
}
.hb-link { background: none; border: none; color: #93c5fd; font-size: .85rem; cursor: pointer; }

/* Tile grid */
.hb-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px 6px;
}
@media (min-width: 540px) { .hb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .hb-grid { grid-template-columns: repeat(4, 1fr); } }
.hb-tile {
    position: relative; text-align: left; background: #111a2e; border: 1px solid #1f2a44;
    border-radius: 14px; padding: 14px; min-height: 78px; display: flex; flex-direction: column;
    justify-content: space-between; color: inherit;
}
.hb-tile.clickable { cursor: pointer; }
.hb-tile.clickable:active { background: #16213a; }
.hb-tile:disabled { cursor: default; }
.hb-tile-label { font-size: .78rem; color: #94a3b8; }
.hb-tile-value { font-size: 1.25rem; font-weight: 800; margin-top: 6px; }
.hb-badge { position: absolute; top: 10px; right: 10px; font-size: .72rem; font-weight: 700; }
.hb-badge.up { color: #34d399; }
.hb-badge.down { color: #f87171; }

/* Category list */
.hb-cat-list { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.hb-cat-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
    background: #111a2e; border: 1px solid #1f2a44; border-radius: 12px; padding: 12px 14px;
    color: inherit; cursor: pointer; text-align: left;
}
.hb-cat-name { font-weight: 600; }
.hb-cat-qty { color: #94a3b8; font-size: .85rem; }
.hb-cat-amt { font-weight: 700; }
.hb-empty { color: #64748b; text-align: center; padding: 24px; }

/* Search bar */
.hb-search-bar { display: flex; gap: 8px; padding: 12px 12px 4px; }
.hb-search {
    flex: 1; border-radius: 12px; border: 1px solid #334155; background: #0b1220; color: #fff;
    padding: 12px 14px; font-size: 1rem;
}
.hb-search:focus { outline: none; border-color: #38bdf8; }

/* Tables */
.hb-table-wrap { padding: 0 8px; overflow-x: auto; }
.hb-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hb-table th, .hb-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #1f2a44; white-space: nowrap; }
.hb-table th { color: #7dd3fc; font-weight: 700; position: sticky; top: 0; background: #0b1220; }
.hb-sortable { cursor: pointer; user-select: none; }
.hb-amt { text-align: right; font-weight: 700; }
.hb-clickrow { cursor: pointer; }
.hb-clickrow:active { background: #16213a; }

/* Cards (clocked-in) */
.hb-card { background: #111a2e; border: 1px solid #1f2a44; border-radius: 14px; padding: 14px; margin: 8px 12px; }
.hb-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hb-card-title { font-weight: 700; }
.hb-card-row { display: flex; justify-content: space-between; color: #cbd5e1; font-size: .9rem; padding: 3px 0; }
.hb-card-breaks { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-pill { background: #1e293b; color: #cbd5e1; border-radius: 999px; padding: 4px 10px; font-size: .75rem; }
.hb-pill.warn { background: #7c2d12; color: #fed7aa; }

/* Pager */
.hb-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; color: #cbd5e1; }
.hb-footer-pad { height: 40px; }

/* House account invoice aging alert (PRD 3.5) */
.invoice-late-alert { background-color: var(--house-account-aging-color, #FFA500); color: #000; }
.invoice-late-alert td { background-color: transparent; }

/* Fingerprint login hint (access code page) */
.pos-fingerprint-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 8px 10px;
    border: 1px solid #cfe3ff;
    background: #f2f8ff;
    border-radius: 8px;
    color: #0b3d91;
    font-size: .85rem;
    text-align: center;
}
.pos-fingerprint-hint .pos-fingerprint-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1e88e5;
    box-shadow: 0 0 0 0 rgba(30, 136, 229, .6);
    animation: posFpPulse 1.6s infinite;
    flex: 0 0 auto;
}
.pos-fingerprint-hint.pos-fingerprint-busy .pos-fingerprint-dot { background: #f59e0b; }
@keyframes posFpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 136, 229, .6); }
    70%  { box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
}

/* Fingerprint enrollment wizard (employee setup) */
.pos-fp-enroll-steps { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.pos-fp-step {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #cbd5e1; color: #64748b; font-weight: 700;
}
.pos-fp-step.done { background: #16a34a; border-color: #16a34a; color: #fff; }
.pos-fp-step.active { border-color: #1e88e5; color: #1e88e5; }
.pos-fp-instructions { font-size: .9rem; color: #334155; line-height: 1.5; }
.pos-fp-instructions ul { margin: 8px 0 0; padding-left: 20px; }
.pos-fp-status { margin-top: 10px; font-weight: 600; text-align: center; }
.pos-fp-status.err { color: #dc2626; }
.pos-fp-status.ok { color: #16a34a; }

/* ===== Menu image picker (Setup > Menu editor) ===== */
.menu-image-picker { background: #fbfbfb; }

.menu-image-picker-preview {
    width: 96px;
    /* Shrinks with the dialog rather than overflowing it; aspect-ratio keeps the box square as it does. */
    max-width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 1 96px;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.menu-image-picker-preview img {
    /* Sized off the box width less a hairline gap, with height left to follow the image's own ratio. */
    max-width: calc(100% - 5px);
    max-height: calc(100% - 5px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.menu-image-picker-empty {
    color: #94a3b8;
    font-size: .75rem;
}

/*
 * The generated candidate in the AI Image Gen panel, deliberately not sharing
 * .menu-image-picker-preview: that one is a thumbnail of a picture already attached, while this is the
 * one thing an operator has to look at properly before deciding to keep it.
 *
 * No aspect-ratio here, so the box takes whatever shape the picture has rather than letterboxing a
 * non-square generation inside a square.
 */
.menu-image-gen-preview {
    width: 95%;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #fff;
    padding: 4px;
}

.menu-image-gen-preview img {
    display: block;
    width: 100%;
    /* Height follows the image's own ratio. */
    height: auto;
}

/* Same treatment for a coupon picture, kept separate so the two panels can diverge. */
.coupon-image-gen-preview {
    width: 95%;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #fff;
    padding: 4px;
}

.coupon-image-gen-preview img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Menu tree (Setup > Menu editor) ===== */
/* The SVG scales with its container via viewBox, so the graph stays readable on narrow screens. */
.menu-tree-svg {
    display: block;
    width: 100%;
    height: auto;
}

.menu-tree-toolbar {
    background: #fff;
}

/* ===== Raised button skin for cards with the picture switched off =====
   Terminal Setup > Screens > Device Menu Images turns the category, menu item and modifier
   pictures off independently. A card built around a picture has nothing to fill once the
   picture goes, so its label ends up pinned to the bottom edge and the rows size themselves
   to their own content. These rules take over for those cards only: the label centres on both
   axes, one shared font size per section keeps the set reading evenly, and the flat outline
   becomes a raised button with hover, pressed and selected states.

   Every state is expressed with box-shadow, filter and transform rather than background or
   border, because GetCategoryButtonStyle / GetMenuItemButtonStyle / GetOptionButtonStyle emit
   background-color and border-color inline from the station config, and an inline declaration
   beats any stylesheet rule. That is also why the gloss uses the background-image longhand:
   it composites over the configured colour instead of fighting it.

   This block lives at the end of the file so it also outranks the .horizontal orientation rules
   at equal specificity - with no picture there is nothing to sit beside the text, so a
   horizontal card centres its label like every other one. */

:root {
    --pos-btn-radius: 10px;
    --pos-btn-raised:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 0 rgba(0, 0, 0, 0.14),
        0 2px 3px rgba(0, 0, 0, 0.18),
        0 5px 10px -4px rgba(0, 0, 0, 0.22);
    --pos-btn-raised-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -2px 0 rgba(0, 0, 0, 0.14),
        0 3px 5px rgba(0, 0, 0, 0.22),
        0 8px 16px -5px rgba(0, 0, 0, 0.28);
    --pos-btn-pressed:
        inset 0 3px 6px rgba(0, 0, 0, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.12);
    --pos-btn-selected:
        inset 0 3px 7px rgba(0, 0, 0, 0.32),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 3px rgba(255, 165, 0, 0.85);
    --pos-btn-gloss: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(0, 0, 0, 0.10) 100%);
}

/* ---- Centring ---- */

/* The wrapper is the query container the label's font clamp measures against. */
.pos-menu-cat-btn.no-image > .pos-card-main,
.pos-menu-item-btn.no-image > .pos-card-main,
.topping-card.no-image > .topping-card-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    gap: 0;
    container-type: inline-size;
}

/* margin-top:auto on .pos-menu-cat-btn span / .pos-menu-item-name and margin-bottom on
   .topping-card-name exist to hold the label against the bottom of a picture. */
.pos-menu-cat-btn.no-image .pos-card-text,
.pos-menu-item-btn.no-image .pos-menu-item-name,
.topping-card.no-image .topping-card-name {
    margin: 0;
    padding: 0 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
}

/* A name wraps onto as many centred lines as it needs rather than being cut off with an
   ellipsis - on a 90px category cell "Catering Salad Bowls" has no single-line size a cashier
   could read. fitPosCardText picks the largest size at which nothing in the section overflows
   its line budget, then sizes every row in the section to the name that ended up tallest, so
   wrapping costs alignment nothing. break-word is only the backstop for a single word still
   too wide at the smallest size the fitter will go to. */
.pos-menu-cat-btn.no-image .pos-card-text,
.pos-menu-item-btn.no-image .pos-menu-item-name,
.topping-card.no-image .topping-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

/* fitPosCardText measures each candidate size with word breaking off, so that a size only
   counts as fitting if the names still break at spaces. */
.pos-menu-categories.measuring-names .pos-menu-cat-btn.no-image .pos-card-text,
.pos-menu-items.measuring-names .pos-menu-item-btn.no-image .pos-menu-item-name,
.topping-cards-grid.measuring-names .topping-card.no-image .topping-card-name {
    overflow-wrap: normal;
    word-break: normal;
}

/* One size per section, resolved by fitPosCardText; the clamp is the first-paint estimate and
   the fallback when script has not run. The topping rule is repeated here for the horizontal
   orientation, which is skipped by the sizing rule up in the topping card block but still needs
   fitting once its picture is gone. */
.pos-menu-cat-btn.no-image .pos-card-text,
.pos-menu-item-btn.no-image .pos-menu-item-name {
    font-size: var(--pos-card-name-size, clamp(11px, 12cqi, 19px));
}
.topping-card.no-image .topping-card-name {
    font-size: var(--topping-name-size, clamp(10px, 13cqi, 20px));
}

.topping-card.no-image {
    padding: 6px;
    height: 100%;
    justify-content: center;
}

/* The picture was the only reason this header spread its children apart. */
.pos-menu-modifier-header.no-image {
    align-items: center;
    justify-content: center;
}

/* Option controls never carry a picture, so they are always in the no-image case. Each one sits
   in its own cell of .pos-menu-modifier-options and has to fill it, or a two-line option stands
   taller than the one-line options beside it. --mctl-h is the station's fixed control height
   (Options Display > Auto Size off) and still wins wherever one is configured. */
.pos-menu-modifier-options > .pos-menu-modifier-option-row {
    height: 100%;
    min-width: 0;                                      /* cell width wins over the pills' content width */
}
.pos-menu-modifier-options > .pos-menu-modifier-option {
    height: var(--mctl-h, 100%);
}
.pos-menu-modifier-option-row:not(.pos-modifier-inline) > .pos-menu-option-btn,
.pos-menu-modifier-option-row:not(.pos-modifier-inline) > .pos-menu-modifier-option {
    flex: 1 1 auto;
}
.pos-menu-option-btn {
    width: 100%;
    min-height: 44px;                                  /* touch target on a POS screen */
    box-sizing: border-box;
}
.pos-menu-option-btn-label {
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---- Raised skin ----
   .pos-menu-option-btn is in this set unconditionally: it never renders a picture, so it is
   always in the no-image case. */
.pos-menu-cat-btn.no-image,
.pos-menu-item-btn.no-image,
.topping-card.no-image,
.pos-menu-option-btn {
    border-radius: var(--pos-btn-radius, 10px);
    background-image: var(--pos-btn-gloss);
    box-shadow: var(--pos-btn-raised);
    transition: box-shadow 0.12s ease, transform 0.07s ease, filter 0.12s ease;
}

/* hover:hover keeps a touch terminal from latching a card into the hover look after a tap. */
@media (hover: hover) {
    .pos-menu-cat-btn.no-image:hover,
    .pos-menu-item-btn.no-image:hover,
    .topping-card.no-image:hover,
    .pos-menu-option-btn:hover:not(:disabled) {
        box-shadow: var(--pos-btn-raised-hover);
        transform: translateY(-1px);
        filter: brightness(1.06);
    }
}

/* Outranks hover on specificity, so an already-selected card stays sunk while the pointer is
   over it and only picks up hover's brightness. */
.pos-menu-cat-btn.no-image.active,
.topping-card.no-image.selected,
.pos-menu-option-btn.selected {
    box-shadow: var(--pos-btn-selected);
    transform: none;
}

/* The .active / .selected pairs are spelled out so a selected card can still be pushed. */
.pos-menu-cat-btn.no-image:active,
.pos-menu-cat-btn.no-image.active:active,
.pos-menu-item-btn.no-image:active,
.topping-card.no-image:active,
.topping-card.no-image.selected:active,
.pos-menu-option-btn:active:not(:disabled),
.pos-menu-option-btn.selected:active:not(:disabled) {
    box-shadow: var(--pos-btn-pressed);
    transform: translateY(1px);
    filter: brightness(0.94);
}

.pos-menu-cat-btn.no-image:focus-visible,
.pos-menu-item-btn.no-image:focus-visible,
.topping-card.no-image:focus-visible,
.pos-menu-option-btn:focus-visible {
    outline: 3px solid rgba(255, 165, 0, 0.9);
    outline-offset: 2px;
}

/* Nothing that cannot be pressed should look pressable. */
.pos-menu-item-btn.no-image.disabled,
.pos-menu-option-btn:disabled {
    box-shadow: none;
    background-image: none;
    transform: none;
}

/* A cashier taps these hundreds of times an hour; the lift and sink are feedback, not decoration,
   so they collapse to shadow-only rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
    .pos-menu-cat-btn.no-image,
    .pos-menu-item-btn.no-image,
    .topping-card.no-image,
    .pos-menu-option-btn {
        transition: none;
    }

    .pos-menu-cat-btn.no-image:hover,
    .pos-menu-item-btn.no-image:hover,
    .topping-card.no-image:hover,
    .pos-menu-option-btn:hover:not(:disabled),
    .pos-menu-cat-btn.no-image:active,
    .pos-menu-cat-btn.no-image.active:active,
    .pos-menu-item-btn.no-image:active,
    .topping-card.no-image:active,
    .topping-card.no-image.selected:active,
    .pos-menu-option-btn:active:not(:disabled),
    .pos-menu-option-btn.selected:active:not(:disabled) {
        transform: none;
    }
}

/* Order Management cards. The terminal's card height is a minimum: a card grows rather than
   clipping, and the wrapping row stretches every card in a row to its tallest neighbour. */
.om-card {
    container-type: inline-size;
    border-radius: 8px;
    overflow: hidden;
}

.om-card > .card-header {
    border-bottom: 1px solid #dee2e6;
    font-size: .95rem;
}

/* Date and time drop onto two lines before either is cut. */
.om-card-time {
    min-width: 0;
    text-align: right;
}

.om-card-time > span {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.om-card-body {
    flex: 1 0 auto;
}

.om-card-customer {
    border-top: 1px solid #dee2e6;
}

.om-line {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.om-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.om-card-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* The global .btn sizing overrides btn-sm and would push Split onto its own row. */
.om-card-actions .btn {
    font-size: 14px;
    padding: 6px 4px;
    min-height: 34px;
}

@container (max-width: 210px) {
    .om-card-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===== Menu page order tabs (Terminal Setup > Screens > Tab Builder) ===== */
/* The strip is the first child of .pos-menu-page and only exists when a terminal has tabs. */
.menu-order-tabs {
    display: flex;
    gap: 6px;
    height: 44px;
    margin-bottom: 6px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.menu-order-tab {
    --tab-bg: #6c757d;
    --tab-fg: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 40px;
    padding: 0 16px;
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: var(--tab-bg);
    color: var(--tab-fg);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    opacity: .72;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: opacity .12s ease, transform .12s ease;
}
.menu-order-tab:hover { opacity: .9; }
.menu-order-tab.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 -2px 0 0 var(--tab-bg) inset, 0 3px 8px rgba(0, 0, 0, .28);
    transform: translateY(-1px);
}
.menu-order-tab-main {
    --tab-bg: #343a40;
    --tab-fg: #ffffff;
}

/* A screen tab (Dine-in Layout, Delivery Dispatch, Revenue Center), outside the menu layout so the screen's
   own fixed overlays reach the whole viewport. order-tab-content.js sets top/left/width/height to the area
   under the strip; hidden until then. No transform here, or those overlays would be positioned inside it. */
.otc-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow: auto;
    background: #ffffff;
    color: #212529;
    visibility: hidden;
}
.otc-host.placed {
    visibility: visible;
}

/* Covers the Menu content instead of replacing it: the menu stays laid out underneath, so its ticket,
   timers and card text fitting are unaffected. Above the menu's chair tab (1040) and dropdowns (1000),
   below its modal backdrops (9998). 56px = page padding 6 + strip 44 + gap 6. */
.otv-host {
    --otv-bg: #eef0f3;
    --otv-text: #212529;
    --otv-muted: #6c757d;
    --otv-section: #f8f9fa;
    --otv-card-bg: #ffffff;
    --otv-card-border: #dee2e6;
    --otv-row-bg: #ffffff;
    --otv-head-bg: linear-gradient(135deg, #1a1a2e, #0f3460);
    --otv-exc-bg: #ffe5d0;
    --otv-exc-section: #fecba1;
    --otv-exc-accent: #fd7e14;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    overflow: auto;
    padding: 8px 16px 16px;
    background: var(--otv-bg);
    color: var(--otv-text);
}
.otv-theme-dark {
    --otv-bg: #121417;
    --otv-text: #e9ecef;
    --otv-muted: #9aa4ae;
    --otv-section: #2a2f35;
    --otv-card-bg: #1f2328;
    --otv-card-border: #3a4048;
    --otv-row-bg: #1f2328;
    --otv-head-bg: linear-gradient(135deg, #000000, #1f2a3a);
    --otv-exc-bg: #3a2412;
    --otv-exc-section: #4d2e14;
    --otv-exc-accent: #fd7e14;
}
.otv-muted { color: var(--otv-muted) !important; }
.otv-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.otv-status {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.otv-status-title { font-size: 1.25rem; font-weight: 700; }
.otv-status-count { color: var(--otv-muted); }
.otv-status-warn { color: #fd7e14; font-size: .9rem; }
.otv-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--otv-muted);
    font-size: 1.1rem;
}
.otv-capped { margin-top: 12px; color: var(--otv-muted); font-size: .9rem; text-align: center; }

.otv-badge-timed { background: #6f42c1; color: #fff; }
.otv-badge-deferred { background: #0dcaf0; color: #000; }
.otv-badge-exception { background: var(--otv-exc-accent); color: #fff; }

.otv-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.otv-btn-compact { padding: 2px 8px; font-size: .78rem; }

/* Cards: Order Management's card, themed. */
.otv-grid-cards { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.otv-card {
    background: var(--otv-card-bg);
    border: 1px solid var(--otv-card-border);
    color: var(--otv-text);
}
.otv-card .otv-card-section { background: var(--otv-section); color: var(--otv-text); }
.otv-card .card-footer { background: transparent; border-top-color: var(--otv-card-border); }
.otv-card.otv-exception { background: var(--otv-exc-bg); border-color: var(--otv-exc-accent); }
.otv-card.otv-exception .otv-card-section { background: var(--otv-exc-section); }

/* Small cards: a summary per order. */
.otv-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.otv-small-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--otv-card-bg);
    border: 1px solid var(--otv-card-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.otv-small-card.otv-exception { background: var(--otv-exc-bg); border-color: var(--otv-exc-accent); }
.otv-small-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.otv-small-number { font-size: 1.35rem; font-weight: 800; }
.otv-small-time { color: var(--otv-muted); font-size: .85rem; white-space: nowrap; }
.otv-small-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.otv-small-line { display: flex; gap: 4px; font-size: .9rem; min-width: 0; }
.otv-small-actions { margin-top: auto; }

/* Rows: Order Management's table, themed. */
.otv-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 1.05rem; color: var(--otv-text); }
.otv-table thead tr { background: var(--otv-head-bg); color: #fff; }
.otv-table th { padding: 10px 12px; font-weight: 600; }
.otv-table td { padding: 10px 12px; vertical-align: top; background: var(--otv-row-bg); }
.otv-table tr.otv-exception td { background: var(--otv-exc-bg); }
.otv-table .otv-preview-row td { padding-top: 0; font-size: .8em; color: var(--otv-muted); max-width: 0; }
.otv-table td.otv-clip { max-width: 220px; }

/* Tab Builder */
.ot-builder-chip { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); flex-shrink: 0; }
.ot-builder-swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, .15); padding: 0; cursor: pointer; }
.ot-builder-swatch.selected { border-color: #000; box-shadow: 0 0 0 2px #fff inset; }
.ot-builder-format {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 120px;
    padding: 8px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.ot-builder-format.selected { border-color: #0d6efd; background: #e7f1ff; }
.ot-builder-format-art { display: block; width: 84px; height: 48px; border-radius: 4px; background-color: #f1f3f5; }
.ot-art-cards { background-image: linear-gradient(90deg, #adb5bd 0 26px, transparent 26px 29px, #adb5bd 29px 55px, transparent 55px 58px, #adb5bd 58px 84px); }
.ot-art-smallcards { background-image: repeating-linear-gradient(90deg, #adb5bd 0 17px, transparent 17px 20px), repeating-linear-gradient(0deg, transparent 0 21px, #f1f3f5 21px 27px); }
.ot-art-rows { background-image: repeating-linear-gradient(0deg, #adb5bd 0 8px, transparent 8px 12px); }

/* Order tab icons: the stored PNG is only a shape, used as a mask over the element's text colour, so the
   icon always matches the label colour, which contrasts with the tab. 1em = the label's font size. */
.menu-order-tab-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    margin-right: .45em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.ot-icon-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .15);
}
.menu-order-tab-icon.ot-icon-lg { width: 64px; height: 64px; margin: 0; }

/* Order tab search box, top right of the tab page. */
.otv-status { align-items: center; flex-wrap: wrap; }
.otv-search { position: relative; margin-left: auto; width: min(380px, 100%); }
.otv-search input {
    height: 42px;
    padding-right: 38px;
    font-size: 1rem;
    border-radius: 8px;
}
.otv-search input::-webkit-search-cancel-button { display: none; }
.otv-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.otv-theme-dark .otv-search input {
    background: #1f2328;
    color: #e9ecef;
    border-color: #3a4048;
}
.otv-theme-dark .otv-search input::placeholder { color: #9aa4ae; }
.otv-theme-dark .otv-search-clear { background: rgba(255, 255, 255, .12); }

/* ===== Item options overlay ("modifier popup") =====================================================
   ItemOptionsOverlay.razor. One screen, three zones:

     header     item name, description, running total
     config     Size / Crust / Layout (one pizza, half & half, 3+ sections)
     body       main column  - section tabs + specialty buttons (section mode), search + "add toppings
                              to" picker, then the only scrolling region: the option groups
                side column  - "Your selections" chips grouped Left / Whole / Right, and under them the
                              editor for whichever option is active (Left / Whole / Right, Lite, Extra,
                              Side, Remove)
     footer     what still blocks Add, plus Instructions / Back / Cancel / Finish / Add

   Everything is scoped to .pos-mod-v2 so the shared button, header and section-slider rules used by
   other screens (combo builder, Terminal Setup previews) are untouched. Touch targets are 52-60px and
   no text is smaller than 14px. */

.pos-menu-item-options-overlay.pos-mod-v2 {
    --mod-ink: #1f2937;
    --mod-muted: #5b6472;
    --mod-line: #d5dae3;
    --mod-soft: #f1f3f8;
    --mod-navy: #000080;
    --mod-accent: #ffa500;
    --mod-danger: #c62828;
    width: min(98vw, 2200px);
    height: 96vh;
    max-width: 98vw;
    max-height: 96vh;
    border-radius: 14px;
    color: var(--mod-ink);
}

/* ---- Header ---- */
.pos-mod-v2 .pos-menu-modifier-header {
    align-items: center;
    flex-shrink: 0;
    max-height: none;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mod-line);
}
.pos-mod-v2 .pos-menu-modifier-header-text {
    gap: 2px;
    overflow: hidden;
}
.pos-mod-v2 .pos-menu-modifier-item-name {
    font-size: 28px;
    line-height: 1.15;
}
.pos-mod-v2 .pos-menu-modifier-item-desc {
    font-size: 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pos-mod-v2 .pos-menu-modifier-header-price {
    margin-left: auto;
}
.pos-mod-v2 .pos-menu-modifier-header-layout {
    margin-left: auto;
}
.pos-mod-v2 .pos-menu-modifier-header-layout + .pos-menu-modifier-header-price {
    margin-left: 12px;
}
.pos-mod-v2 .pos-menu-modifier-header-layout .pos-menu-inline-btn-group {
    margin-right: 0;
}
.pos-mod-v2 .pos-menu-modifier-header-layout .pos-menu-size-btn {
    min-width: 72px;
    min-height: 48px;
    padding: 6px 16px;
    font-size: 17px;
    border-radius: 12px;
}
.pos-mod-v2 .pos-menu-price-breakdown-total {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 30px;
    white-space: nowrap;
}

/* ---- Config strip: Size / Crust / Layout ---- */
.pos-mod-v2 .pos-menu-header-selectors-inline {
    gap: 8px 12px;
    padding: 8px 20px;
    background: var(--mod-soft);
    border-bottom: 1px solid var(--mod-line);
}
.pos-cfg-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pos-mod-v2 .pos-menu-inline-label {
    padding: 0;
    background: transparent;
    color: var(--mod-muted);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pos-mod-v2 .pos-menu-inline-btn-group {
    flex-wrap: wrap;
    gap: 8px;
    margin-right: 10px;
}
.pos-mod-v2 .pos-menu-header-selectors-inline .pos-menu-size-btn {
    min-width: 72px;
    min-height: 52px;
    padding: 8px 16px;
    font-size: 18px;
    border-radius: 12px;
}

/* ---- Body ---- */
.pos-mod-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 400px);
}
.pos-mod-body.no-side {
    grid-template-columns: minmax(0, 1fr);
}
.pos-mod-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.pos-mod-v2 .pos-menu-item-options-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 16px 18px;
    gap: 14px;
    overscroll-behavior: contain;
}

/* ---- Section tabs and specialty buttons ---- */
.pos-section-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 0;
    flex-shrink: 0;
}
.pos-section-tab {
    flex: 1 1 0;
    min-width: 0;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 60px;
    padding: 6px 16px;
    border: 2px solid var(--mod-line);
    border-radius: 12px;
    background: var(--mod-soft);
    color: var(--mod-ink);
    text-align: left;
    cursor: pointer;
}
.pos-section-tab-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mod-muted);
}
.pos-section-tab-name {
    max-width: 100%;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-section-tab.active {
    background: var(--mod-navy);
    border-color: var(--mod-navy);
    color: #fff;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
}
.pos-section-tab.active .pos-section-tab-label {
    color: rgba(255, 255, 255, 0.75);
}
.pos-mod-v2 .pos-section-panel {
    flex-shrink: 0;
    padding: 8px 16px 2px;
    border: 0;
    border-radius: 0;
    background: #fff;
    overflow: visible;
}
.pos-mod-v2 .pos-section-slider {
    margin-bottom: 0;
}
.pos-mod-v2 .pos-section-slider-item {
    flex-basis: 108px;
}
.pos-mod-v2 .pos-section-slider-img {
    width: 72px;
    height: 72px;
}
.pos-mod-v2 .pos-section-slider-name {
    font-size: 15px;
    font-weight: 600;
}
.pos-mod-v2 .pos-section-slider-item.text-only {
    min-height: 52px;
}
.pos-mod-v2 .pos-section-slider-item.text-only .pos-section-slider-name {
    font-size: inherit;
    font-weight: inherit;
}

/* ---- Toolbar: search + where new toppings go ---- */
.pos-mod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mod-line);
    background: #fff;
    flex-shrink: 0;
}
.pos-mod-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 300px;
    min-width: 240px;
}
.pos-mod-search-icon {
    position: absolute;
    left: 16px;
    color: var(--mod-muted);
    pointer-events: none;
}
.pos-mod-search-input {
    width: 100%;
    height: 56px;
    padding: 0 18px 0 52px;
    border: 2px solid #8d97a8;
    border-radius: 14px;
    background: #fff;
    font-size: 22px;
    color: var(--mod-ink);
}
.pos-mod-search-input:focus {
    outline: none;
    border-color: var(--mod-navy);
    box-shadow: 0 0 0 4px rgba(0, 0, 128, 0.16);
}
.pos-mod-search.has-text .pos-mod-search-input {
    padding-right: 150px;
}
.pos-mod-search-count {
    position: absolute;
    right: 62px;
    font-size: 15px;
    color: var(--mod-muted);
    pointer-events: none;
}
.pos-mod-search-clear {
    position: absolute;
    right: 6px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #e3e7ee;
    color: var(--mod-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.pos-place-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.pos-place-label {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mod-muted);
}
.pos-place-btn,
.pos-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 6px 18px;
    border: 2px solid var(--mod-line);
    border-radius: 14px;
    background: #fff;
    color: var(--mod-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}
.pos-place-btn:hover,
.pos-edit-btn:hover {
    border-color: var(--mod-navy);
}
.pos-place-btn.selected,
.pos-edit-btn.selected {
    background: var(--mod-navy);
    border-color: var(--mod-navy);
    color: #fff;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.38);
}
.pos-place-icon .pizza-outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
}
.pos-place-icon .pizza-fill {
    fill: currentColor;
    stroke: none;
}

/* ---- Option groups ---- */
.pos-mod-group {
    flex-shrink: 0;
}
.pos-mod-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-bottom: 8px;
}
.pos-mod-group-name {
    font-size: 20px;
    font-weight: 800;
}
.pos-mod-group-meta {
    font-size: 15px;
    color: var(--mod-muted);
}
.pos-mod-v2 .pos-menu-modifier-label {
    padding: 1px 9px;
    border-radius: 999px;
    background: #e8ebf1;
    font-size: 13px;
    font-weight: 600;
    color: var(--mod-muted);
}
.pos-mod-v2 .pos-menu-modifier-label.required {
    background: #fde7e7;
    color: var(--mod-danger);
    font-weight: 800;
}
/* A plain modifier group (sauce, side, dressing ...) reads as a labelled row: the name on the left,
   the choices on the right, so several small groups do not each cost a full-width heading. */
.pos-mod-group:not(.pos-mod-group-topping) {
    display: grid;
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    gap: 6px 18px;
    padding: 12px 14px;
    border: 1px solid var(--mod-line);
    border-radius: 12px;
    background: #fff;
}
.pos-mod-group:not(.pos-mod-group-topping):not(.is-collapsed) > .pos-mod-group-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
}
.pos-mod-v2 .pos-menu-modifier-list,
.pos-mod-v2 .pos-menu-modifier-group {
    margin: 0;
}
.pos-mod-v2 .pos-menu-modifier-options {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
}
.pos-mod-v2 .pos-menu-option-btn {
    min-height: 56px;
}
.pos-mod-v2.menu-ctl-buttons .pos-menu-modifier-option {
    min-height: 56px;
}
.pos-mod-v2 .pos-menu-modifier-option-row.is-active {
    border-radius: var(--mctl-radius, 8px);
    outline: 3px solid #111827;
    outline-offset: 2px;
}
/* A single-select group that is already answered: one line, tap to change. */
.pos-mod-v2 .pos-mod-group.is-collapsed {
    padding: 0;
    display: block;
}
.pos-mod-group-fold {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mod-ink);
    text-align: left;
    cursor: pointer;
}
.pos-mod-group-fold .pos-mod-group-name {
    flex: 0 0 auto;
}
.pos-mod-group-current {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--mod-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-mod-group-change,
.pos-mod-group-hide {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 2px solid var(--mod-line);
    border-radius: 10px;
    background: var(--mod-soft);
    font-size: 16px;
    font-weight: 700;
    color: var(--mod-navy);
}
.pos-mod-group-hide {
    margin-left: auto;
    cursor: pointer;
}
.pos-mod-v2 .pos-menu-instructions-buttons {
    justify-content: flex-start;
    gap: 10px;
}
.pos-mod-v2 .pos-menu-instruction-pill {
    min-height: 52px;
    padding: 10px 22px;
    font-size: 18px;
}
.pos-mod-empty {
    padding: 48px 16px;
    text-align: center;
    font-size: 22px;
    color: var(--mod-muted);
}

/* ---- Topping buttons ---- */
.pos-mod-v2 .topping-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
}
.pos-mod-v2 .topping-cards-grid.no-image {
    --pos-card-reserve: 0px;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    grid-auto-rows: minmax(var(--topping-card-row-h, 52px), auto);
}
.pos-mod-v2 .topping-cards-grid.horizontal {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.pos-mod-v2 .topping-card {
    border-radius: 12px;
    padding-bottom: 6px;
    touch-action: manipulation;
}
/* A picture is a recognition aid, not the content: keeping it small is what lets a whole menu of
   toppings fit on screen at once. */
.pos-mod-v2 .topping-card:not(.horizontal) .topping-card-img {
    width: 60px;
    max-width: 60px;
    margin: 6px auto 2px;
}
.pos-mod-v2 .topping-card:not(.horizontal) .topping-card-name {
    margin-bottom: 2px;
}
/* The marks sit on the card's top corners, half outside, so they never cover the name. */
.pos-mod-v2 .topping-card-check,
.pos-mod-v2 .topping-card-place {
    position: absolute;
    top: -9px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--mod-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.pos-mod-v2 .topping-card-check {
    right: -7px;
    width: 26px;
    height: 26px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}
.pos-mod-v2 .topping-card-place {
    left: -7px;
    width: 30px;
    height: 30px;
}
.pos-mod-v2 .topping-card-place .pos-place-icon {
    width: 24px;
    height: 24px;
}
/* The qualifier pill straddles the bottom edge, so it adds no height and no card reflows. */
.pos-mod-v2 .topping-card-attr {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    z-index: 3;
    margin: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.pos-mod-v2 .pizza-attr-pill {
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid var(--mod-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pos-mod-v2 .pizza-attr-pill.attr-remove {
    border-color: var(--mod-danger);
}
/* Selected = filled navy with a check; on a palette-coloured board the fill alone is not enough, so a
   picture card also gets a white inner and navy outer ring. Active = the one the editor is acting on,
   marked with a dark ring that no palette colour can hide. */
.pos-mod-v2 .topping-card.selected:not(.no-image) {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92), 0 0 0 3px var(--mod-navy);
}
.pos-mod-v2 .topping-card.active {
    outline: 4px solid #111827;
    outline-offset: 3px;
    z-index: 1;
}
/* A default that was taken off: still on the board, clearly not on the pizza. */
.pos-mod-v2 .topping-card.removed {
    border-style: dashed;
    border-color: var(--mod-danger);
}
.pos-mod-v2 .topping-card.removed .topping-card-name {
    color: #9b1c1c;
    text-decoration: line-through;
}

/* ---- Side column: selections + editor ---- */
.pos-mod-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--mod-line);
    background: #f7f8fb;
}
.pos-mod-side-head {
    flex-shrink: 0;
    padding: 12px 16px 6px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mod-muted);
}
.pos-mod-summary {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px 12px;
    overscroll-behavior: contain;
}
.pos-sum-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.pos-sum-tag {
    padding: 4px 12px;
    border: 1px solid var(--mod-line);
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
}
.pos-sum-tag b {
    margin-right: 5px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mod-muted);
}
.pos-sum-group {
    margin-bottom: 10px;
    padding: 8px 10px 10px;
    border: 1px solid var(--mod-line);
    border-radius: 12px;
    background: #fff;
}
.pos-sum-group.active {
    border-color: var(--mod-navy);
    box-shadow: 0 0 0 2px rgba(0, 0, 128, 0.14);
}
.pos-sum-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mod-navy);
    text-align: left;
}
.pos-sum-title.is-link {
    min-height: 32px;
    cursor: pointer;
}
.pos-sum-detail {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mod-ink);
}
.pos-sum-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pos-sum-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 5px 12px;
    border: 2px solid #c9d1f3;
    border-radius: 999px;
    background: #e9edff;
    color: var(--mod-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}
.pos-sum-chip.is-default {
    border-color: var(--mod-line);
    background: #f4f6fa;
}
.pos-sum-chip:disabled {
    cursor: default;
    opacity: 1;
}
.pos-sum-chip.removed {
    border-color: #f1b3b3;
    background: #fdecec;
    color: #9b1c1c;
}
.pos-sum-chip.removed .pos-sum-chip-name {
    text-decoration: line-through;
}
.pos-sum-chip.active {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.28);
}
.pos-sum-chip-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mod-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.pos-sum-chip-tag.attr-remove {
    background: var(--mod-danger);
}
.pos-sum-chip-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--mod-muted);
}
.pos-sum-none {
    font-size: 15px;
    font-style: italic;
    color: var(--mod-muted);
}
.pos-mod-editor {
    flex: 0 0 auto;
    min-height: 150px;
    padding: 10px 12px;
    border-top: 1px solid var(--mod-line);
    background: #fff;
}
.pos-mod-editor.has-target {
    border-top: 3px solid var(--mod-accent);
    background: #fffaf0;
}
.pos-edit-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pos-edit-name {
    min-width: 0;
    font-size: 21px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pos-edit-group {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--mod-muted);
    white-space: nowrap;
}
.pos-edit-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #e9ecf2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pos-edit-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.pos-edit-btn {
    padding: 6px 4px;
    font-size: 18px;
}
.pos-edit-place {
    flex-direction: column;
    gap: 2px;
    font-size: 16px;
}
.pos-edit-btn.attr-remove-btn {
    color: var(--mod-danger);
}
.pos-edit-btn.attr-remove-btn:hover {
    border-color: var(--mod-danger);
}
.pos-edit-btn.attr-remove-btn.selected {
    background: var(--mod-danger);
    border-color: var(--mod-danger);
    color: #fff;
}
.pos-edit-hint {
    padding: 4px 2px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--mod-muted);
}
.pos-mod-side .pos-menu-price-calc {
    flex-shrink: 0;
    max-width: none;
    padding: 8px 14px;
    border-top: 1px solid var(--mod-line);
    align-items: flex-start;
    text-align: left;
}

/* ---- Footer ---- */
.pos-mod-v2 .pos-menu-modifier-footer {
    gap: 12px;
    padding: 10px 20px;
}
.pos-mod-v2 .pos-menu-modifier-footer .pos-menu-size-btn {
    min-width: 130px;
    min-height: 56px;
    padding: 8px 28px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 700;
}
.pos-mod-missing {
    margin-right: auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--mod-danger);
}

/* ---- Smaller / shorter screens ----
   1366x768 and 1024x768 terminals: the chrome gets denser (touch targets stay at 46-52px) so the topping
   grid keeps most of the screen, and the toolbar stays on one row. */
@media (max-width: 1100px) {
    .pos-mod-body {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
    .pos-mod-v2 .pos-menu-modifier-item-name {
        font-size: 24px;
    }
    .pos-mod-v2 .pos-menu-price-breakdown-total {
        font-size: 26px;
    }
    .pos-mod-group:not(.pos-mod-group-topping) {
        grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
        gap: 6px 12px;
    }
    .pos-mod-search {
        flex-basis: 200px;
        min-width: 200px;
    }
    .pos-place-label {
        max-width: 76px;
        font-size: 12px;
        line-height: 1.15;
    }
    .pos-place-btn {
        padding: 6px 12px;
        font-size: 18px;
    }
    .pos-mod-v2 .pos-menu-header-selectors-inline .pos-menu-size-btn {
        padding: 8px 12px;
        font-size: 17px;
    }
}
@media (max-width: 860px) {
    .pos-mod-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .pos-mod-side {
        max-height: 40vh;
        border-left: 0;
        border-top: 1px solid var(--mod-line);
    }
    .pos-mod-group:not(.pos-mod-group-topping) {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-height: 820px) {
    .pos-mod-v2 .pos-section-slider-img {
        width: 56px;
        height: 56px;
    }
    .pos-mod-v2 .pos-section-slider-item {
        flex-basis: 96px;
        padding: 4px;
    }
    .pos-mod-v2 .pos-menu-modifier-header {
        padding: 6px 16px;
    }
    .pos-mod-v2 .pos-menu-modifier-item-name {
        font-size: 24px;
    }
    .pos-mod-v2 .pos-menu-modifier-item-desc {
        font-size: 15px;
    }
    .pos-mod-v2 .pos-menu-price-breakdown-total {
        font-size: 26px;
    }
    .pos-mod-v2 .pos-menu-header-selectors-inline {
        padding: 6px 16px;
        gap: 6px 10px;
    }
    .pos-mod-v2 .pos-menu-header-selectors-inline .pos-menu-size-btn {
        min-height: 48px;
    }
    .pos-mod-toolbar {
        padding: 8px 16px;
    }
    .pos-place-btn,
    .pos-mod-search-input {
        min-height: 50px;
        height: 50px;
    }
    .pos-mod-search-clear {
        width: 40px;
        height: 40px;
    }
    .pos-section-tab {
        min-height: 54px;
    }
    .pos-mod-v2 .pos-menu-option-btn,
    .pos-mod-v2.menu-ctl-buttons .pos-menu-modifier-option {
        min-height: 50px;
    }
    .pos-mod-group:not(.pos-mod-group-topping) {
        padding: 8px 12px;
    }
    .pos-mod-v2 .pos-menu-modifier-footer {
        padding: 8px 16px;
    }
    .pos-mod-v2 .pos-menu-modifier-footer .pos-menu-size-btn {
        min-height: 52px;
        font-size: 19px;
    }
    .pos-edit-btn {
        min-height: 50px;
    }
    .pos-mod-editor {
        min-height: 130px;
    }
}