/* ============================
Orderroom Modern Skin (CSS-only)
Version 3.8 — Paul and Jim
============================ */

/* ============================
Fonts
============================ */

/* Unified family — browser picks the right file via font-weight */
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-SemiBold.ttf');
    font-weight: 600;
}
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Bold.ttf');
    font-weight: 700;
}
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-ExtraBold.ttf');
    font-weight: 800;
}
@font-face {
    font-family: 'Gabarito';
    src: url('fonts/Gabarito-Black.ttf');
    font-weight: 900;
}

/* Legacy aliases so existing var(--font-bold) / GabaritoBlack refs still resolve */
@font-face {
    font-family: 'GabaritoRegular';
    src: url('fonts/Gabarito-Regular.ttf');
}
@font-face {
    font-family: 'GabaritoBold';
    src: url('fonts/Gabarito-Bold.ttf');
}
@font-face {
    font-family: 'GabaritoBlack';
    src: url('fonts/Gabarito-Black.ttf');
}

/* ============================
CSS Reset / Root Vars
============================ */

* {
    box-sizing: border-box;
}

:root {
    --textColour: #2F2F2F;
    --bg: #eef3f4;
    --surface: #ffffff;
    --panel: #ffffff;
    --ink: #2F2F2F;
    --muted: #9fb3c8;
    --line: #3D3D3D;
    --accent: #6ea8ff;
    --accent-strong: #4c6fff;
    --ok-bg: #0a3d2a;
    --ok-fg: #aef5cd;
    --bad-bg: #FFEEEE;
    --bad-fg: #C42727;
    --chip: #162033;
    --chip-line: #23324a;
    --button-primary-admin: #790e6e;
    --button-primary-customer: #02B1C4;
    --header-action-fill: #3b3b3b;

    /* Border radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Spacing / gaps */
    --gap-sm: 8px;
    --gap-md: 16px;
    --space-sm: 12px;

    /* Typography */
    --font-body: 'Gabarito', 'Helvetica Neue', Arial;
    --font-bold: 'Gabarito', 'Helvetica Neue', Arial;
    --font-size-base: 1rem;
    --font-size-sm: 13px;
    --font-size-xs: 12px;
    --font-size-caption: 0.85rem;
    --font-size-body: 0.95rem;

    /* Padding presets */
    --pad-card: 12px 16px;
    --pad-btn: 8px 12px;
    --pad-item: 10px 12px;
    --pad-chip: 6px 10px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================
Base / Typography
============================ */

/* Reusable layout utilities — apply to elements that just need to centre
   their children with a flexbox row/column. Keeps repeated
   `display:flex; align-items:center; justify-content:center` blocks DRY. */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html,
body {
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
ul,
p,
.item,
.order {
    margin: 0 0 16px 0;
}

p.errormessage:empty {
    margin: 0;
    padding: 0;
    height: 0;
}

p.errormessage {
    padding: var(--gap-md);
    background: var(--bg);
    border-radius: var(--radius-lg);
}

h1 {
    margin: 0;
    font-size: 2.25rem;
    font-family: 'Gabarito', 'Helvetica Neue', Arial;
    font-weight: 900;
}

h2 {
    font-size: 1.75rem;
}

p,
input, select {
    font-size: var(--font-size-base);
}

ul {
    margin: 0;
    padding:0;
    list-style:none;
}

ul:not(:has(li)) {
    margin: 0!important;
}

li {
    margin:0;
}

/* ============================
Layout: Header / Main
============================ */

header {
    /* position:sticky;
    */
    top: 0;
    margin: 0 auto;
    padding: 16px 20px 10px;
}

header .header {
    display: flex;
    align-items: center;
    /* vertical centering */
    justify-content: space-between;
    /* left/right alignment */
    margin-bottom: 20px;
}

main {
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width:900px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

table {
    min-width: 900px;
}

/* ============================
Login Banner
============================ */

.cfg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    position: relative;
    flex-wrap: wrap;
}

.biz-heading {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.biz-heading .biz {
    display: inline-flex;
    align-items: baseline;
}

.nav-context {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 2.25rem;
    font-weight: 700;
    white-space: nowrap;
}

.nav-context[hidden] {
    display: none !important;
}

.back-btn {
    color: var(--button-primary-admin);
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin-right: 6px;
    flex-shrink: 0;
}

.back-btn[hidden] {
    display: none !important;
}

/* Override: wins by source order when both are !important at 0-2-0 specificity */
.back-btn.back-btn--force-show {
    display: inline-flex !important;
}

.back-btn .back-arrow {
    font-size: 1.25em;
    font-weight: 900;
    line-height: 1;
}

.back-btn:hover {
    opacity: 0.75;
}

.nav-context-segment {
    font-weight: 600;
    white-space: nowrap;
    margin-left: 16px;
}

.nav-context-segment--active {
    color: var(--button-primary-admin);
    cursor: pointer;
    text-decoration: none;
    font-size: inherit;
    font-family: 'Gabarito', 'Helvetica Neue', Arial;
    font-weight: 900;
}
.nav-context-segment--current {

    font-size: inherit;
    font-family: 'Gabarito', 'Helvetica Neue', Arial;
    font-weight: 900;
}

.nav-context-sep {
    margin: 0 6px;
    color: #999;
    font-weight: 400;
}

/* Hide in-screen Return buttons (Back button delegates to them programmatically) */
a[data-admin="return"],
a[data-action="return"],
#header-return-pill {
    display: none !important;
}

/* Business heading as a button back to Directory */
h1.biz.biz-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    transition: color 140ms ease, text-shadow 140ms ease;
}

h1.biz.biz-btn:hover {
    color: var(--button-primary-admin);
}

/* Business name as breadcrumb link (admin colour, clickable) */
h1.biz.biz-breadcrumb-link {
    color: var(--button-primary-admin);
    cursor: pointer;
}

h1.biz.biz-breadcrumb-link:hover {
    opacity: 0.75;
}

@media (max-width: 640px) {
    .biz-heading {
        gap: 0;
        flex-wrap: nowrap;
    }

    .nav-context {
        font-size: 1.05rem;
    }
}

/* Centered header action pills (Print / Email / Return) */
.header-action-pills {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
}

.header-action-pills ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-action-pills li {
    display: inline-flex;
}

/* Specificity bumped via combined classes / id selectors so we don't need !important
   to override .screen-pills .pill-btn { background: none } below. */
.header-action-pills.screen-pills .pill-btn,
#receipt-actions.receipt-screen-actions .pill-btn {
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    background: var(--header-action-fill);
    color: #fff;
}

.header-action-pills .pill-btn:hover,
.header-action-pills .pill-btn:focus {
    filter: brightness(1.05);
}

.login-banner.logged-in {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 40px 6px 14px;
    background: url(images/icons/user.svg) no-repeat calc(100% - 10px) 50%;
    color: var(--ink);
    font-weight: 400;
    cursor: pointer;
    border: 2px solid var(--ink);
    border-radius: 999px;
    transition: opacity 140ms ease;
}

.login-banner.logged-in strong {
    font-family: var(--font-bold);
    font-weight: 700;
}

.login-banner.logged-in:hover {
    opacity: 0.7;
}

/* Login banner dropdown wrapper */
.login-banner-wrap {
    position: relative;
}

.login-banner-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: var(--surface, #fff);
    border: 2px solid var(--ink);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    padding: 6px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-banner-menu[hidden] {
    display: none;
}

.login-banner-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink, #222);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.login-banner-menu-item[hidden] {
    display: none !important;
}

.login-banner-menu-item:hover,
.login-banner-menu-item:focus-visible {
    background: var(--line, #f0f0f0);
}

.login-banner-menu-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

header #logo {
    margin: 0;
}

/* Invisible iframe used to trigger browser print without affecting layout */
.print-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    border: 0;
}

body.receipt-print-page {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
    color: #222;
    background: #fff;
}

body.receipt-print-page .receipt-shell {
    justify-content: flex-start;
}

body.receipt-print-page .panel.receipt-panel {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

body.receipt-print-page.receipt-print-page--thermal {
    width: var(--receipt-paper-width, 80mm);
    max-width: var(--receipt-paper-width, 80mm);
    padding: var(--receipt-pad-top, 2.5mm) var(--receipt-pad-right, 1.5mm) var(--receipt-pad-bottom, 3.5mm) var(--receipt-pad-left, 2.5mm);
    margin: 0 auto;
    box-sizing: border-box;
}

body.receipt-print-page.receipt-print-page--thermal .receipt-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.receipt-print-page.receipt-print-page--thermal .panel.receipt-panel {
    width: var(--receipt-content-width, 72mm) !important;
    max-width: var(--receipt-content-width, 72mm) !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Force the full itemised table (Description / Unit / Qty / Amount) to show on
   the narrow thermal receipt, overriding the responsive mobile rules that hide
   the qty and amount columns at small viewports. */
body.receipt-print-page.receipt-print-page--thermal .receipt-table,
body.receipt-print-page.receipt-print-page--thermal .receipt-table thead,
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody,
body.receipt-print-page.receipt-print-page--thermal .receipt-table tr {
    display: table;
    width: 100% !important;
    table-layout: fixed;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table thead {
    display: table-header-group;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody {
    display: table-row-group;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table tr {
    display: table-row;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table th,
body.receipt-print-page.receipt-print-page--thermal .receipt-table td {
    display: table-cell !important;
    padding: 2px 2px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    vertical-align: top;
    word-break: break-word;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-unit,
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-qty,
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-amount,
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody td.receipt-cell-right {
    text-align: right !important;
    white-space: nowrap;
    width: auto !important;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-qty,
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody td:nth-child(3) {
    width: 22px !important;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-unit,
body.receipt-print-page.receipt-print-page--thermal .receipt-table th.receipt-col-amount,
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody td:nth-child(2),
body.receipt-print-page.receipt-print-page--thermal .receipt-table tbody td:nth-child(4) {
    width: 38px !important;
}
body.receipt-print-page.receipt-print-page--thermal .receipt-desc-row {
    display: block !important;
}

@media print {
    body.receipt-print-page {
        padding: 0;
    }

    body.receipt-print-page.receipt-print-page--thermal {
        width: var(--receipt-paper-width, 80mm);
        max-width: var(--receipt-paper-width, 80mm);
        margin: 0 auto;
    }

    body.receipt-print-page.receipt-print-page--thermal .panel.receipt-panel {
        margin: 0 auto !important;
    }
}

/* ============================
Panels
============================ */

.panel {
    background: var(--panel);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    margin-bottom: 16px;
    width: 100%;
    overflow-x: auto;
}

/* Receipt panel: size to content, reduce padding, avoid horizontal scrolling */
.receipt-panel {
    padding-left: 8px;
    padding-right: 8px;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.panel.receipt-panel {
    width: min(95vw, 980px) !important;
    display: inline-block !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box;
    padding: var(--space-sm);
}

.receipt-shell {
    display: flex;
    justify-content: center;
}

/* Reset panel wrapper when showing a receipt */
.receipt-panel-reset {
    background: transparent;
    padding: 0;
    overflow: visible;
}

.receipt-screen-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
}

.receipt-screen-actions:empty {
    display: none;
}

.receipt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: opacity 140ms ease;
}

.receipt-icon-btn:hover,
.receipt-icon-btn:focus-visible {
    opacity: 0.72;
}

.receipt-icon-btn img {
    display: block;
    width: 32px;
    height: 32px;
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
}

.receipt-business {
    flex: 1 1 50%;
    max-width: 48%;
}

.receipt-business-name {
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 700;
}

.receipt-business-phone {
    margin-top: 6px;
}

.receipt-meta {
    flex: 1 1 40%;
    max-width: 48%;
    text-align: right;
}

.receipt-meta-row {
    margin-top: 6px;
}

.receipt-meta-row--spaced {
    margin-top: 8px;
}

.receipt-items {
    margin-bottom: 10px;
    padding: 8px 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}

.receipt-items--compact {
    padding-top: 6px;
}

.receipt-items-head--compact,
.receipt-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0 10px;
    width: 100%;
}

.receipt-items-head--compact {
    padding: 0 6px 6px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-bottom: 1px solid #e0e0e0;
}

.receipt-items-head-unit,
.receipt-item-unit {
    text-align: right;
    white-space: nowrap;
}

.receipt-items-head-qty,
.receipt-item-qty {
    text-align: right;
    white-space: nowrap;
}

.receipt-item-row {
    padding: 5px 6px;
    border-bottom: 1px solid #f4f4f4;
}

.receipt-item-row:last-child {
    border-bottom: 0;
}

.receipt-item-name {
    min-width: 0;
    overflow-wrap: break-word;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
}

.receipt-table th,
.receipt-table td {
    padding: 6px;
    text-align: left;
}

.receipt-table thead th {
    font-size: var(--font-size-sm);
}

.receipt-table tbody td {
    border-bottom: 1px solid #f4f4f4;
}

.receipt-desc-cell {
    width: 100%;
}

.receipt-desc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.receipt-desc-text {
    min-width: 0;
}

@media (max-width: 900px) {
    .receipt-col-qty,
    .receipt-col-amount,
    .receipt-table tbody td:nth-child(3),
    .receipt-table tbody td:nth-child(4) {
        display: none;
    }

    .receipt-table tbody td:first-child {
        display: table-cell;
        width: auto;
    }

    .receipt-table tbody tr {
        display: table-row;
    }

    .receipt-desc-cell {
        display: table-cell;
        width: auto;
    }

    .receipt-desc-row {
        display: block;
        width: 100%;
    }

    .receipt-desc-text {
        min-width: 0;
    }

    .receipt-table .receipt-col-unit,
    .receipt-table thead th:nth-child(2),
    .receipt-table tbody td:nth-child(2) {
        display: table-cell;
        width: 86px;
        text-align: right !important;
        white-space: nowrap;
    }
}

.receipt-col-unit,
.receipt-col-qty,
.receipt-col-amount,
.receipt-cell-right {
    text-align: right !important;
}

.receipt-col-unit,
.receipt-col-amount {
    width: 120px;
}

.receipt-col-qty {
    width: 64px;
}

.receipt-empty {
    padding: 12px !important;
}

.receipt-totals {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 24px;
    margin-top: 12px;
}

.receipt-totals-card {
    width: 260px;
    font-size: var(--font-size-sm);
    text-align: right;
}

.receipt-total-block {
    margin-top: 8px;
}

.receipt-total-block:first-child {
    margin-top: 0;
}

.receipt-total-value {
    display: block;
    margin-top: 6px;
    font-weight: 700;
}

.receipt-total-block--grand .receipt-total-value {
    font-size: 16px;
    font-weight: 800;
}

.receipt-footer {
    margin-top: 18px;
    font-size: var(--font-size-sm);
    color: #666;
}

.receipt-company {
    margin-top: 18px;
    font-size: var(--font-size-sm);
    color: #222;
    text-align: center;
}

@media (max-width: 640px) {
    .receipt-header {
        flex-direction: column;
        gap: 12px;
    }

    .receipt-business-name {
        font-size: 1.85rem;
        font-weight: 700;
    }

    .receipt-business,
    .receipt-meta {
        max-width: 100%;
    }

    .receipt-meta {
        text-align: left;
    }

    .receipt-meta-row {
        font-size: 1.02rem;
    }

    .receipt-meta-row strong {
        font-weight: 700;
    }

    .receipt-table thead th:first-child {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .receipt-table thead th {
        font-size: 0.88rem;
    }

    .receipt-col-qty,
    .receipt-col-amount,
    .receipt-table tbody td:nth-child(3),
    .receipt-table tbody td:nth-child(4) {
        display: none;
    }

    .receipt-table tbody tr {
        display: table-row;
    }

    .receipt-table tbody td:first-child {
        font-size: 0.9rem;
        line-height: 1.2;
        display: table-cell;
        width: auto;
    }

    .receipt-desc-cell {
        display: table-cell;
        width: auto;
    }

    .receipt-desc-row {
        display: block;
    }

    .receipt-table tbody td {
        font-size: 0.78rem;
        padding: 5px 4px;
        vertical-align: top;
    }

    .receipt-table .receipt-col-unit,
    .receipt-table thead th:nth-child(2),
    .receipt-table tbody td:nth-child(2) {
        display: table-cell;
        width: 86px;
        text-align: right !important;
        white-space: nowrap;
    }

    .receipt-table tbody td:last-child,
    .receipt-table thead th:last-child {
        text-align: right;
    }

    .receipt-totals {
        justify-content: stretch;
    }

    .receipt-totals-card {
        width: 100%;
        font-size: 1.08rem;
    }

    .receipt-total-block {
        font-size: 1.08rem;
    }

    .receipt-total-value {
        font-size: 1.26rem;
    }

    .receipt-total-block--grand .receipt-total-value {
        font-size: 1.42rem;
    }

    .receipt-meta-row:last-child,
    .receipt-meta-row:nth-child(1),
    .receipt-meta-row:nth-child(2),
    .receipt-meta-row:nth-child(3) {
        font-family: inherit;
    }

    .global-working-banner {
        width: calc(100% - 20px);
        justify-content: center;
        padding: var(--pad-item);
    }
}

/* first child spacing tidy in panels */
.panel>*:first-child {
    margin-top: 0;
}

/* Network indicator (small persistent banner) */
#network-indicator {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--pad-chip);
    border-radius: 14px;
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.06);
    color: var(--ink);
}

#network-indicator.network-online {
    background: rgba(46, 204, 113, 0.12);
    color: #0b8a39;
}

#network-indicator.network-offline {
    background: rgba(231, 76, 60, 0.08);
    color: #c1271b;
}

#network-indicator .ni-dot {
    font-weight: 700;
    margin-right: 4px;
}

#network-indicator .ni-text {
    font-size: var(--font-size-xs);
    opacity: 0.95;
}

.network-offline-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: var(--pad-item);
    background: #fff4f4;
    color: #8b0000;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.global-working-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--pad-btn);
    border-radius: var(--radius-pill);
    background: rgba(23, 27, 38, 0.94);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.global-working-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.global-working-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: global-working-spin 0.9s linear infinite;
}

@keyframes global-working-spin {
    to { transform: rotate(360deg); }
}

body.has-network-offline-banner {
    padding-top: calc(var(--network-banner-base-padding-top, 0px) + var(--network-offline-banner-offset, 48px));
}

/* Opening screen full-viewport hero */
.opening-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: var(--opening-display, flex);
    align-items: center;
    justify-content: center;
    z-index: 99990;
    background-color: #eceff0;
    background-image: url('images/cafeimage.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* opening background image element: show entire photo without stretching */
.opening-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    /* ensures image is not stretched and full image visible */
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.opening-screen .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.22));
    z-index: 2;
}

.opening-screen .center-column {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 300px;
    padding: var(--gap-md);
    transform: translateY(-36px);
}

.opening-logo {
    max-width: 320px;
    height: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.12));
}

.opening-btn {
    width: 280px;
    height: 56px;
    border-radius: var(--radius-md);
    border: none;
    font-family: 'Gabarito', Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
}

.opening-btn.primary {
    background: #0b5962;
    color: #fff;
}

.opening-btn.secondary {
    background: rgba(255,255,255,0.92);
    color: var(--button-primary-admin);
    box-shadow: 0 6px 18px rgba(11,89,98,0.08);
}

.opening-screen .hint {
    margin-top: 8px;
    font-size: var(--font-size-sm);
    color: rgba(0,0,0,0.6);
}

.policy-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
    font-family: inherit;
}

.policy-link-btn:hover {
    color: #fff;
}

.screen-policy-links {
    position: fixed;
    bottom: 16px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 100;
    white-space: nowrap;
}

.screen-policy-links span {
    color: #bbb;
    font-size: 11px;
}

.policy-link-btn-dark {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    color: #bbb;
    text-decoration: none;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.policy-link-btn-dark:hover {
    color: #666;
    text-decoration: underline;
}

.policy-modal-inner {
    background: #fff;
    padding: 24px;
    border-radius: 18px;
    width: min(560px, calc(100% - 32px));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.policy-modal-inner .ues-header {
    margin-bottom: 16px;
    flex-shrink: 0;
}

.policy-modal-inner .ues-header h3 {
    margin: 0;
    line-height: 1.25;
}

.policy-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #333;
}

.policy-modal-body h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: #111;
}

.policy-modal-body h4:not(:first-child) {
    margin-top: 20px;
}

.policy-modal-body p, .policy-modal-body ul {
    margin: 0 0 10px;
}

.policy-modal-body ul {
    padding-left: 20px;
}

.policy-modal-body hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.stripe-policy-note {
    margin-top: 12px;
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.stripe-policy-note .policy-link-btn-dark {
    font-size: 12px;
    color: #635bff;
}

.stripe-policy-note .policy-link-btn-dark:hover {
    color: #4b45c6;
}

.panel>*:last-child {
    margin-bottom: 0;
}

#subscriptions-tiers-panel {
    background: transparent;
    padding: 0;
}

/* ============================
Forms / Inputs
============================ */

label {
    font-size: var(--font-size-base);
    margin: 0 0 16px 0;
    display: block;
}

label.checkbox {
    display: block;
}

label.checkbox.deliveries-include-delivered {
    display: inline-block;
    margin-left: 12px;
}

.businesses-include-all-toggle {
    display: inline-block;
    margin-left: 8px;
    align-self: flex-end;
}

label.checkbox,
label.checkbox span {
    width: auto;
}

label span {
    display: block;
    margin: 0 0 8px 0;
}

input,
select,
textarea,input[type="time"], input[type="date"] {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--pad-card);
    min-width: 200px;
    display: inline-block;
    font-size: var(--font-size-base);
    width: 100%;
    font-family: var(--font-body);
    line-height: normal;
    height:3em;
    text-align:left
}

input[type="date"]{
    background: url(images/icons/calendar.svg) no-repeat right 16px center var(--surface);
        line-height: normal;
        appearance: none;
        -webkit-appearance: none;
        display: block;
        max-width: 100%;
        min-width: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

select {
    line-height: normal;
}

input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    line-height: normal;
    height:3em;
    display: block;
    max-width: 100%;
    min-width: 0;
}

input[type="checkbox"] {
    visibility: hidden;
    height: 0;
    padding: 0;
    display: none;
}
input[readonly] { opacity: 0.6; }

/* custom checkbox visual — see consolidated rule near line 2204 */

/* Feature toggle visuals used on the Subscriptions screen */
.feature-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    gap: var(--gap-sm);
    flex-shrink: 0;
}

.feature-toggle.enabled {
    background: color-mix(in srgb, var(--button-primary-admin) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--button-primary-admin) 20%, transparent);
}

.feature-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    cursor: pointer;
    flex: 1;
    opacity: 1;
    margin: 0;
    line-height: 1;
}

.feature-toggle-label.is-disabled {
    cursor: default;
    opacity: 0.6;
}

.feature-toggle-checkbox {
    cursor: pointer;
}

.feature-toggle-checkbox:disabled {
    cursor: not-allowed;
}

.feature-toggle .dummycheckbox {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    margin: 0;
    flex-shrink: 0;
}

.feature-toggle.enabled .dummycheckbox {
    background: var(--button-primary-admin);
    color: #fff;
    border-color: var(--button-primary-admin);
}

.feature-toggle .state-badge {
    font-size: var(--font-size-sm);
    padding: var(--pad-chip);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--ink);
    white-space: nowrap;
    align-self: center;
}

.feature-toggle.enabled .state-badge {
    background: var(--button-primary-admin);
    color: #fff;
}

.feature-toggle .hint {
    color: var(--muted);
    margin-left: 8px;
    font-size: var(--font-size-sm);
}

.feature-toggle .state-badge.is-requires-subscription {
    opacity: 0.9;
}

tr.inactive {
    background: var(--bg);
}

/* focus noop holders */
input:focus,
select:focus,
textarea:focus {
    --_focus_noop: 0;
}

/* custom select arrow */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #333;
    background: url(images/icons/chevrondown.svg) no-repeat right 16px center;
}

/* ============================
Buttons / Badges / Status
============================ */

button {
    background: var(--button-primary-admin);
    color: #fff;
    border: 0;
    border-radius: var(--radius-lg);
    padding: var(--pad-card);
    font-size: var(--font-size-base);
    width:100%;
}


button.secondary {
    background:none;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
}

button.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--button-primary-admin);
    text-decoration: underline;
    width: auto;
    min-width: 0;
}

button:hover {
    cursor: pointer;
    filter: brightness(1.06);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: 1;
    cursor: not-allowed;
}

button.button-inline, #businesses-search-btn {
    width: auto
}

/* Subscription tiers card layout: ensure action buttons align horizontally
by making cards equal-height columns and pushing the action row to the bottom. */
#subscriptions-loading {
    text-align: center;
    padding: 40px;
}

#subscriptions-content {
    display: none;
}

#subscriptions-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-md);
    align-items: start;
}

#subscriptions-tiers > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    height:100%;
}

.subscription-tier-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bg);
}

.subscription-tier-card.is-included {
    background: var(--surface);
}

.subscription-tier-title {
    margin: 0 0 4px 0;
}

.subscription-tier-description {
    margin: 0 0 16px 0;
}

.subscription-tier-features {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.subscription-tier-features li {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: 6px;
}

/* Inline toggle switch inside tier cards */
.tier-switch {
    margin: 0 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.tier-switch.is-disabled {
    cursor: default;
    opacity: 0.35;
}

.tier-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

.tier-switch-track {
    display: block;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #ccc;
    position: relative;
    transition: background 150ms ease;
    margin: 0;
}

.tier-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 150ms ease;
}

.tier-switch-input:checked + .tier-switch-track {
    background: var(--button-primary-admin);
}

.tier-switch-input:checked + .tier-switch-track::after {
    transform: translateX(16px);
}

.subscription-tier-actions {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}

.subscription-tier-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.subscription-tier-badge.is-active,
.subscription-tier-badge.is-included {
    background: var(--button-primary-customer);
}

.subscription-tier-badge.is-requires-tier {
    background: var(--bg);
    color: var(--muted);
}

.subscription-tier-card .button-inline[disabled].is-current-plan {
    opacity: 0.5;
}

.subscription-tier-card .button-inline.downgrade-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--muted);
}

.subscription-tier-card .button-inline.downgrade-btn:hover {
    background: var(--bg);
}

#feature-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-top: 16px;
}

#subscriptions-tiers > div .button-inline {
    width: auto;
    /* keep buttons natural width */
    align-self: flex-start;
    /* left-align buttons inside the card */
}

button.large {
    width: 100%;
}

.ordering button {
    background: var(--button-primary-customer);
}

.badge,
.pill,
.status {
    display: inline-flex;
    align-items: center;
    height: 20px;
    background: var(--chip);
    color: #cde2ff;
    border: 1px solid var(--chip-line);
    border-radius: var(--radius-pill);
    padding: 0 10px;
    font-size: .8rem;
}
.status-error { color: #e55 !important; }
.status-ok    { color: #4c4 !important; }

/* Status badges (consolidated) */
.status-badge {
    display: inline-block;
    padding: var(--pad-chip);
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 18px;
    font-size: 0.85em;
    color: white;
}

.status-badge.delivery,
.status-badge.pickup {
    border: 1px solid rgba(0,0,0,0.06);
}

.status-badge.delivery {
    background: #dbeeff;
    color: #063a6b;
}

.status-badge.pickup {
    background: #2DAF7F;
    color: #fff;
}

.status-badge.table-order {
    background: color-mix(in srgb, var(--button-primary-admin) 12%, white);
    color: var(--button-primary-admin);
}

.status-badge.channel-badge {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 0;
    margin-right: 6px;
    padding: 4px 10px;
    vertical-align: middle;
}

.pickup-status {
    margin: 8px 0 4px;
}

.status-badge.pickup-status-badge {
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: 0;
}

.status-badge.pickup-status-badge.ready {
    background: #2DAF7F;
    color: #fff;
}

.status-badge.pickup-status-badge.preparing {
    background: #f0f0f0;
    color: #555;
}

.status-badge.refunded {
    background: #f8d7da;
    color: #842029;
}

.status-badge.sent {
    background: #e9ecef;
    color: #343a40;
}

.status-badge.delivered {
    background: #e6f9f0;
    color: #0b4f3a;
    font-weight: 700;
}

.status-badge.unpaid {
    background: #fff3cd;
    color: #664d03;
    font-weight: 700;
}

.status-badge.paid {
    background: #d1e7dd;
    color: #0a3622;
    font-weight: 700;
}

.status-badge.eta-range {
    background: #e6f7ff;
    color: #055;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    margin-left: 8px;
    display: inline-block;
    margin-bottom: 8px;
}

/* Highlight order rows for pickup/delivery in Stations view */

.ok {
    background: var(--ok-bg) !important;
    color: var(--ok-fg) !important;
    border-color: rgba(10, 61, 42, .6) !important;
}

.err {
    background: var(--bad-bg) !important;
    color: var(--bad-fg) !important;
    border-color: rgba(58, 21, 21, .6) !important;
    padding: var(--gap-md);
    border-radius: var(--radius-sm);
}

/* Hide empty error blocks so we don't display an empty red bar when
a status element has the .err class but no message text. */
.err:empty {
    display: none;
    padding: 0;
    height: 0;
    margin: 0;
}

/* visual "disabled" for primary buttons */
.button-primary.disabled,
.disabled.button-primary {
    opacity: .6;
    filter: grayscale(.25);
    cursor: default;
}

/* Till payment button spacing */
#till-cartcontainer .till-pay-buttons > p {
    margin: 0 0 0.75rem;
}

/* ============================
Move inline JS styles into classes
============================ */

/* small pill-style badge used for ETA/delivered markers */
.pill-badge,
.status-badge.eta-range.header-range {
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    background: #e6f7ff;
    color: #055;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    margin-left: 8px;
    font-size: var(--font-size-xs);
    vertical-align: middle;
    z-index: 9999;
}

/* highlighted overlay/pill shown to the right of order headers */
.order-override-pill,
.eta-overlay.order-override-pill {
    position: absolute;
    right: 12px;
    top: 12px;
    max-width: 46%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(90deg,#fff7c2,#fff1a8);
    color: #222;
    padding: 6px 12px;
    border: 2px solid #ffd24d;
    border-radius: var(--radius-md);
    z-index: 2147483647;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-weight: 700;
    font-family: sans-serif;
    font-size: var(--font-size-xs);
    pointer-events: none;
}

/* deliveries header layout */
.deliveries-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.eta-inline {
    display:flex;
    align-items:center;
    gap: var(--gap-sm);
}

/* small display utilities used by JS to toggle element layout without inline styles */
.d-inline-flex {
    display: inline-flex !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-inline {
    display: inline-block !important;
}

.button-primary.disabled:focus,
.disabled.button-primary:focus {
    outline: 3px solid rgba(0, 0, 0, .06);
    outline-offset: 2px;
}

/* ============================
Menu Items / Orders
============================ */

.menu {
    display: grid;
    gap: var(--gap-sm);
    margin-top: 8px;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    gap: var(--gap-md);
}
.item .product-title{
    display:flex;
    align-items:center;gap: var(--gap-sm);
    justify-content: space-between;
    width: 100%;
}
.item .product-title-main{
    display:flex;
    align-items:center;
    gap: var(--gap-sm);
    min-width:0;
    flex:1;
}
.item .product-title-no-desc{
    justify-content:flex-start;
}
.item .item-name,
.admin-item {
    flex: 1;
}
.item .item-dietary-badges{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}
.item .item-dietary-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:22px;
    padding:0 7px;
    border-radius: var(--radius-pill);
    font-size:var(--font-size-xs);
    font-weight:700;
    line-height:1;
}
.item .item-dietary-badge svg{ display:block; }
.item .item-veg-badge{
    background:#eaf5ee;
    color:#2e7d46;
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    overflow:hidden;
}
.item .item-vegan-badge{
    background:#ddf0e4;
    color:#1a6035;
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    overflow:hidden;
}
.item .item-spice-badge{
    gap:4px;
    padding:0 9px;
    height:30px;
    color:#bf4515;
}
.item .item-spice-mild  { background:#fdf1ee; color:#c07020; }
.item .item-spice-medium{ background:#fce8e2; color:#c04018; }
.item .item-spice-hot   { background:#fad8d0; color:#a82010; }
.item .spice-label{
    font-size:var(--font-size-xs);
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}
.item .spice-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ddd8d5;
    display:inline-block;
    flex-shrink:0;
}
.item .spice-dot--on:nth-child(1){ background:#e8821a; }
.item .spice-dot--on:nth-child(2){ background:#d4461e; }
.item .spice-dot--on:nth-child(3){ background:#b82020; }

@media (max-width:600px){
    .item .item-veg-badge,
    .item .item-vegan-badge{ width:24px; height:24px; }
    .item .item-veg-badge svg,
    .item .item-vegan-badge svg{ width:24px; height:24px; }
    .item .item-spice-badge{ height:24px; padding:0 7px; }
}

.order {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
}

.order .order-station-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
}

.order .order-station-section + .order-station-section {
    margin-top: var(--gap-md);
}

.order .order-station-content {
    flex: 1 1 auto;
    min-width: 0;
}

.order .products p {
    margin-top: 0;
    margin-bottom: 0;
}

.order .send-station {
    align-self: center;
    flex: 0 0 auto;
}

.order .ordernodate {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
}

.ordernodate p {
    margin-bottom: 0;
}

/* Delivery card header layout */
#screen-deliveries .ordernodate {
    display: block;
}

.delivery-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.delivery-card-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.delivery-order-num {
    font-weight: 600;
}

.delivery-card-eta {
    display: inline-flex;
    align-items: center;
}

.delivery-card-when {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.82rem;
    color: #111;
}

/* old delivery-card-top rule no longer needed */
.delivery-card-top { display: block; }
.delivery-card-title { display: block; }

.ordertable:not(:first-of-type) p {
    display: none;
}

.order .ordertable:first-of-type h3,
.order .ordertable:first-of-type p {
    margin: 0;
}

/* Orders by Table – row layout */
.tableorder-row {
    display: flex;
    align-items: baseline;
    gap: var(--gap-md);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.tableorder-ref {
    width: 180px;
    flex-shrink: 0;
    white-space: nowrap;
}

.tableorder-items {
    flex: 1;
}

.tableorder-time {
    width: 100px;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.tableorder-item-price {
    float: right;
    opacity: 0.7;
    font-size: 0.95em;
}

.tableorder-total-row {
    text-align: right;
    padding: 4px 0 2px;
    font-size: 0.95em;
}

.tableorder-refund {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-sm);
    padding: 8px 0 2px;
}

.tableorder-refund button {
    margin-left: 0 !important;
}

.tableorder-receipt-btn:hover {
    opacity: 0.7;
}

.delivery-receipt-btn {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
}
.delivery-receipt-btn img { filter: brightness(0); }
.delivery-receipt-btn:hover { opacity: 0.8; }

.delivery-order-num-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* Inline item switches (order items) */
.tableorder-item-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.tableorder-item-line .tableorder-item-name {
    flex: 1;
    min-width: 0;
}

.tableorder-item-line .tableorder-item-price {
    float: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.tableorder-item-line.item-excluded {
    opacity: 0.4;
}

.tableorder-item-line.item-excluded .tableorder-item-name {
    text-decoration: line-through;
}

.tableorder-item-line.item-refunded {
    opacity: 0.45;
}

.tableorder-item-line.item-refunded .tableorder-item-name {
    text-decoration: line-through;
}

/* Mobile: hide order ref and time, keep items/price/toggle */
@media (max-width: 600px) {
    main {
        padding: 0 6px;
    }

    .order.tableorder-group {
        padding: 8px;
    }

    .tableorder-ref,
    .tableorder-time {
        display: none;
    }

    .tableorder-row {
        gap: 0;
    }

    .tableorder-items {
        width: 100%;
    }

    .tableorder-item-line {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name switch"
            "price price"
            "qty qty";
        align-items: start;
        gap: 2px 10px;
    }

    .tableorder-item-line .tableorder-item-name {
        grid-area: name;
        min-width: 0;
    }

    .tableorder-item-line .tableorder-item-price {
        grid-area: price;
        justify-self: start;
        margin-top: 2px;
    }

    .tableorder-item-line .tier-switch {
        grid-area: switch;
        justify-self: end;
        align-self: start;
        margin-left: 0;
    }

    .tableorder-item-line .tableorder-qty-controls {
        grid-area: qty;
        justify-self: start;
    }

    .tableorder-qty-controls {
        gap: 2px;
    }

    .tableorder-qty-display {
        min-width: 20px;
    }
}

.tableorder-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tableorder-qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #888;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tableorder-qty-btn:hover {
    background: rgba(255,255,255,0.1);
}

.tableorder-qty-display {
    font-size: 0.85em;
    min-width: 32px;
    text-align: center;
}

.order .ordertable h3,
.order .ordertable p {
    margin-bottom: 0;
}

.order .ordertable {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-md);
}

/* ============================
Filters / Navigation (Pills)
============================ */

.menu-filters {
    background: var(--bg);
    z-index: 1;
    padding: 16px 0;
}

/* horizontal scroll containers */
#navigation ul,
.menu-filters ul {
    margin: 0;
    padding: 16px 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#navigation ul {
    padding-top: 8px;
}

.screen-pills {
    padding: 0 16px;
    margin: 0 auto;
}

.screen-pills .pill-btn,
.menu-filters .filter-btn,
#screen-ordering .filter-btn {
    background: none;
    color: var(--ink);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: flex-start;
    padding: var(--pad-card);
    cursor: pointer;
    font-weight: 100;
}

.pill-btn.active,
.filter-btn.active {
    background: var(--header-action-fill);
    color: #fff;
}

#screen-ordering .filter-btn.active {
    background: var(--button-primary-customer);
    color: #fff;
}

/* FIXED: no nested blocks;
list variant styling */
.menu-filters, #navigation {
    display: flex;
    position: sticky;
    top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 16px;
    flex-wrap: nowrap;
    gap: var(--gap-sm);
    align-items: baseline;
    background: var(--bg);
    z-index:100;
}

.menu-filters ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--gap-sm);
}

.menu-filters li {
    display: inline-block;
}

.menu-filters a.filter-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: var(--pad-card);
    border-radius: var(--radius-lg);
}

/* Ensure active filter buttons inside menu-filters show the admin colour. */
.menu-filters .filter-btn.active,
#screen-admin .menu-filters .filter-btn.active {
    background: var(--header-action-fill);
    color: #fff;
}

.menu-filters * {
    flex-shrink: 0;
}

/* ============================
Cart / Cart Rows
============================ */

.cart {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.cart li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    max-width: 364px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.cart li * {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

.cart .cart-name {
    width: 170px;
}

.cart li .adjustnumber {
    border: 1px solid var(--ink);
    padding: 2px;
    border-radius: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    width: 74px;
    min-width: 74px;
}

.maximised-cart button {
    background-image: url(images/icons/cross.svg);
    display: none;
}

.cart li .adjustnumber button {
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 12px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}

.cart li .adjustnumber button:first-of-type {
    background-image: url(images/icons/remove.svg);
}

.cart li .adjustnumber button.inc {
    background-image: url(images/icons/add.svg);
}

.cart li .adjustnumber .qty {
    min-width: 18px;
    text-align: center;
    font-size: var(--font-size-body);
    line-height: 1;
}

.cart li button:nth-of-type(1) {
    background-image: url(images/icons/bin.svg);
}

.total {
    font-weight: 800;
    font-size: 1.2rem;
}

/* ============================
Cart Containers
============================ */

#cartcontainer,
#till-cartcontainer {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
}

#cartcontainer>*:first-child,
#till-cartcontainer>*:first-child {
    margin-top: 0;
}

#cartcontainer>*:last-child,
#till-cartcontainer>*:last-child {
    margin-bottom: 0;
}

#cartcontainer h2 {
    margin-top: 0;
}

#cartcontainer .cart-header,
#till-cartcontainer .cart-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "bag-area close-area"
        "mode-area mode-area";
    column-gap: var(--gap-sm);
    row-gap: 6px;
    align-items: center;
}

#cartcontainer .minimised-cart,
#cartcontainer .maximised-cart,
#till-cartcontainer .minimised-cart,
#till-cartcontainer .maximised-cart {
    grid-area: bag-area;
}

#order-mode-switch {
    grid-area: mode-area;
}

/* Till cart never shows the channel switch — till has its own order-type controls */
#till-cartcontainer #till-order-mode-switch {
    display: none !important;
}

#till-cartcontainer .cart-header .cart-close,
#cartcontainer .cart-header .cart-close {
    border: 0;
    padding: 0;
    background: none;
    display: none;
    grid-area: close-area;
}

/* Hide the mode switch on the Till cart — mode is driven by the table dropdown */
#till-cartcontainer #till-order-mode-switch {
    display: none !important;
}

#cartcontainer .row,
#till-cartcontainer .row {
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
}

#bag-address-row {
    flex-wrap: nowrap;
    align-items: flex-start;
}

#bag-address-row>label:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

#bag-address-row>label:last-child {
    flex: 0 0 auto;
}

#bag-address-row #bag-street {
    width: clamp(120px, 40vw, 220px);
}

#cartcontainer input.bag-prefilled-locked {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: auto;
    height: auto;
    border-radius: 0;
    color: var(--text);
    cursor: default;
    box-shadow: none;
}

#cartcontainer #bag-address-row input.bag-prefilled-locked {
    width: auto;
    max-width: clamp(120px, 40vw, 260px);
}

#cartcontainer input.bag-prefilled-locked:focus,
#cartcontainer input.bag-prefilled-locked:focus-visible {
    outline: none;
    box-shadow: none;
}

#cartcontainer .minimised-cart,
#till-cartcontainer .minimised-cart {
    display: none;
}

/* ============================
Utilities / Helpers
============================ */

.row {
    display: flex;
    gap: var(--gap-md);
    flex-wrap: wrap;
}

.row> :nth-last-child(2) {
    flex: 1;
    margin-right: auto;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.right {
    display: flex;
    justify-content: flex-end;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* ============================
Product Thumbs
============================ */

.item .productimage {
    display: none;
}

.imagethumbs .item .productimage {
    display: block;
    text-align: center;
    background: #C5DFE6;
    width: 100%;
    align-items: center;
    border-radius: var(--radius-lg);
}

.imagethumbs .item .productimage img {
    width: 100%;
    height: 100%;
    /* Fill the container while preserving aspect ratio and avoid stretching */
    object-fit: cover;
    object-position: center center;
    display: block;
    /* Let the container's border-radius and overflow:hidden handle clipping */
    border-radius: 0;
}

/* No-image overlay: when a productimage has no image, show a styled placeholder
   background only — no text label needed on customer-facing ordering cards. */
.productimage {
    position: relative;
    overflow: hidden;
    /* ensure overlay sits above */
}

.productimage.no-image {
    background: #eef0f3;
}

.productimage.no-image::after {
    content: none;
}

/* Allow JS to supply a runtime min-height value via --min-h so we avoid
setting inline minHeight while keeping the computed per-element value. */
.productimage {
    min-height: var(--min-h, auto);
}

.imagethumbs .item button,
.thumbs .item button {
    width: 100%;
}

/* ============================
Price + Favourite (row)
============================ */

.pricefavourite {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: nowrap;
}

.pricefavourite p:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.pricefavourite p:last-child {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fav-btn {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

.fav-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

.fav-btn:hover,
.fav-btn:focus {
    color: #6f1b63;
    text-decoration: none;
}

/* Directory business capability icons (tick / cross) */
.biz-capabilities {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Capability pills overlaid on the bottom of the business card image */
.biz-cap-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px 4px;
    padding: 5px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
    pointer-events: none;
    border-radius: 0 0 16px 16px;
}

.biz-cap-pill {
    display: inline-block;
    background: rgba(22, 140, 70, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.biz-capabilities .cap-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.biz-capabilities .cap-item img.cap-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* Directory card — photo edit button (camera icon, top-right of image) */
.biz-photo-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    padding: 0;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Photo edit modal — preview area */
.biz-photo-preview-wrap {
    margin-top: 12px;
    max-height: 340px;
    overflow: hidden;
    border-radius: 8px;
}
.biz-photo-preview-wrap[hidden] {
    display: none;
}
.biz-photo-preview-wrap img {
    display: block;
    max-width: 100%;
}
.biz-photo-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.order-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 5;
    margin: 0 0 16px;
}

.order-mode-switch .mode-btn {
    background: rgba(0,0,0,0.04);
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--pad-btn);
    font-size: var(--font-size-body);
    line-height: 1.2;
    /* Ensure the mode buttons don't inherit the global `button {
        width:100%
    }
    ` */
    width: auto !important;
    display: inline-flex !important;
    min-width: 44px;
    justify-content: center;
}

.order-mode-switch .mode-btn.active {
    background: var(--button-primary-customer);
    color: #fff;
}

#cartcontainer.cart-open .order-mode-switch .mode-btn.active,
#till-cartcontainer.cart-open .order-mode-switch .mode-btn.active {
    background: var(--button-primary-customer) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28), 0 0 0 1px rgba(2, 177, 196, 0.18);
}

/* When hidden we simply apply the app's hidden utility */
.hidden {
    display: none !important;
}

/* ============================
Screens (Tabs/Sections)
============================ */

.screen {
    display: none;
}

.screen.on {
    display: block;
}

.sc-responsive-table table {
    background: green
}

.sc-responsive-table thead {
    background-color: #333;
    color: #fff;
}

.sc-responsive-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, .03);
}

.sc-responsive-table th,
.sc-responsive-table td {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.admin-add,
.station-refresh,
.filtercontainer {
    display: flex;
    gap: var(--gap-sm);
    align-items: flex-end;
    flex-wrap: wrap;
}

/* ---- Standardise all admin add-row forms ---- */
.admin-add > label {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.admin-add > label > span {
    display: block;
    margin: 0 0 6px 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--ink);
    white-space: nowrap;
    line-height: 1.2;
}

.admin-add input:not([type="checkbox"]),
.admin-add select,
.admin-add textarea {
    height: 42px;
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid #ccc;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    line-height: normal;
}

.admin-add textarea {
    height: 42px;
    resize: vertical;
}

.admin-add select {
    appearance: none;
    -webkit-appearance: none;
    background: url(images/icons/chevrondown.svg) no-repeat right 10px center var(--surface);
    padding-right: 30px;
}

.admin-add input:not([type="checkbox"])::placeholder,
.admin-add textarea::placeholder {
    color: var(--muted);
}

.admin-add .filter-button {
    height: 42px;
    min-width: 0;
    width: auto;
    padding: 0 20px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

#businesses-results.panel {
    background: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

#businesses-results .businesses-add {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#businesses-results .businesses-add .businesses-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

#businesses-results .businesses-add #businesses-create-business-btn {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--button-primary-admin);
    font-family: var(--font-bold);
    font-size: var(--font-size-base);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

#businesses-results .businesses-add #businesses-create-business-btn:hover,
#businesses-results .businesses-add #businesses-create-business-btn:focus {
    background: transparent;
    box-shadow: none;
    filter: none;
    color: #5d0b54;
}

#businesses-results .directory-empty-state {
    min-height: 96px;
}

#businesses-results .directory-empty-state .name {
    margin-bottom: 10px;
}

#businesses-results .directory-empty-state-guidance {
    border: 1px solid rgba(121, 14, 110, 0.18);
    background: linear-gradient(180deg, rgba(121, 14, 110, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#businesses-results .directory-empty-title {
    margin: 0 0 8px;
    font-family: var(--font-bold);
    font-size: 1.1rem;
    color: var(--button-primary-admin);
}

#businesses-results .directory-empty-copy {
    max-width: 44rem;
    margin: 0;
    color: #4d5560;
    line-height: 1.5;
}

/* Right-aligned group for Directory inputs (keeps labels left-aligned above inputs) */
.businesses-add .businesses-right {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.businesses-add .businesses-right label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* keep the header text left-aligned above the input */
    margin-bottom: 0;
}

.businesses-add .businesses-right input {
    min-width: 180px;
}

/* Keep Directory customer filter inputs mounted for JS/localStorage, but hidden */
#businesses-title,
#businesses-actions,
#businesses-results {
    display: none !important;
}

.biz-icons {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

#manager-money-icons.manager-range-icons,
#manager-reporting-icons.manager-range-icons,
#manager-delays-icons,
#manager-delivery-accuracy-icons,
#manager-refunds-icons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: end;
    column-gap: 14px;
}

.biz-icons > * {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

#deliveries-icons .booking-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#deliveries-icons .booking-icon-group:last-child {
    margin-left: auto;
}

#deliveries-icons .icon-search-field {
    min-width: 180px;
    width: 180px;
    flex: 0 1 180px;
}

#deliveries-icons .icon-search-field select {
    font-weight: 600;
}

.biz-icons[hidden] {
    display: none !important;
}

#mobile-biz-tools {
    display: none;
}

#mobile-biz-tools[hidden] {
    display: none !important;
}

.biz-icons .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--header-action-fill);
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: opacity 140ms ease;
    border: 1px solid var(--header-action-fill);
    border-radius: 14px;
    height: 40px;
    width: 40px;
    vertical-align: middle;
}

.biz-icons .icon-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.biz-icons .icon-search-field {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 40px;
    min-width: 340px;
    padding: 0 6px 0 14px;
    border-radius: 14px;
    background: #fff;
    vertical-align: middle;
}

.biz-icons .icon-search-field input[type="search"] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0;
}

.biz-icons .icon-search-field input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

.biz-icons .icon-search-field input[type="search"]::placeholder {
    color: #8f8f8f;
}

.biz-icons .icon-search-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.biz-icons .icon-select-field {
    position: relative;
    padding-right: 34px;
}

.biz-icons .icon-select-field::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: url(images/icons/chevrondown.svg) no-repeat center / 12px 12px;
    pointer-events: none;
    opacity: 0.8;
}

.biz-icons .icon-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    flex: 0 0 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.biz-icons .icon-search-btn img {
    width: 16px;
    height: 16px;
    filter: none;
}

.biz-icons .icon-search-btn:hover {
    background: rgba(47, 47, 47, 0.06);
}

@media (max-width: 640px) {
    .menu-filters.menu-filters--empty {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .biz-icons .icon-search-field {
        min-width: 0;
        width: min(100%, 240px);
        flex: 1 1 240px;
        margin-right: 8px;
    }

    .cfg {
        align-items: flex-start;
        row-gap: 10px;
    }

    .cfg .biz-icons,
    #mobile-biz-tools .biz-icons {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 10px;
    }

    #mobile-biz-tools .biz-icons {
        padding: 12px 14px;
        border-radius: 18px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        box-sizing: border-box;
    }

    #mobile-biz-tools {
        display: block;
        width: 100%;
        padding: 0 0 12px;
        background: var(--bg);
        box-sizing: border-box;
    }

    #mobile-biz-tools.mobile-tools--outer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cfg #manager-money-icons.manager-range-icons,
    .cfg #manager-reporting-icons.manager-range-icons,
    #mobile-biz-tools #manager-money-icons.manager-range-icons,
    #mobile-biz-tools #manager-reporting-icons.manager-range-icons {
        display: grid;
        width: 100%;
        grid-template-columns: 40px 40px minmax(0, 1fr) max-content 40px minmax(0, 1fr);
        justify-content: stretch;
        column-gap: 10px;
        align-items: center;
    }

    .cfg #manager-delays-icons,
    .cfg #manager-delivery-accuracy-icons,
    .cfg #manager-refunds-icons,
    #mobile-biz-tools #manager-delays-icons,
    #mobile-biz-tools #manager-delivery-accuracy-icons,
    #mobile-biz-tools #manager-refunds-icons {
        display: grid;
        width: 100%;
        grid-template-columns: 40px minmax(0, 1fr) max-content 40px minmax(0, 1fr);
        justify-content: stretch;
        column-gap: 10px;
        align-items: center;
    }

    #mobile-biz-tools #manager-money-icons.manager-range-icons .report-date-label,
    #mobile-biz-tools #manager-reporting-icons.manager-range-icons .report-date-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cfg #manager-money-adjust-icon,
    #mobile-biz-tools #manager-money-adjust-icon {
        margin-right: 0;
    }

    .cfg .report-date-arrow,
    #mobile-biz-tools .report-date-arrow {
        margin: 0;
        text-align: center;
    }

    .cfg #booking-icons,
    #mobile-biz-tools #booking-icons {
        justify-content: space-between;
        gap: 16px;
    }

    .cfg #deliveries-icons,
    #mobile-biz-tools #deliveries-icons {
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
    }

    #mobile-biz-tools #booking-icons {
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
    }

    .booking-icon-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #mobile-biz-tools #booking-icons .booking-icon-group {
        flex: 0 1 auto;
        min-width: 0;
    }

    #mobile-biz-tools #booking-icons .booking-icon-group:last-child {
        margin-left: auto;
        flex: 0 0 auto;
    }

    #mobile-biz-tools #booking-icons .report-date-label {
        margin-left: 0;
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mobile-biz-tools #deliveries-icons .report-date-label {
        margin-left: 0;
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
    }

    #mobile-biz-tools #booking-date-label {
        overflow: visible;
        text-overflow: clip;
    }

    #mobile-biz-tools #booking-party-label {
        min-width: 1ch;
        text-align: right;
    }

    .cfg .biz-icons .icon-search-field,
    #mobile-biz-tools .biz-icons .icon-search-field {
        width: 0;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
        max-width: none;
    }

    .cfg #deliveries-icons .icon-search-field,
    #mobile-biz-tools #deliveries-icons .icon-search-field {
        width: min(100%, 170px);
        flex: 1 1 170px;
        min-width: 140px;
    }

    .cfg .biz-icons .icon-btn,
    .cfg .biz-icons .icon-date-btn,
    #mobile-biz-tools .biz-icons .icon-btn,
    #mobile-biz-tools .biz-icons .icon-date-btn {
        flex: 0 0 40px;
    }

    #screen-admin .menu-filters {
        margin-top: 0;
    }

    .menu-filters {
        padding-top: 8px;
    }

    .menu-filters ul {
        padding-top: 0;
    }
}

.biz-icons .icon-date-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    margin: 0;
}

.biz-icons .icon-date-btn input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
}

.biz-icons .icon-date-btn input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.biz-icons label.icon-date-btn {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    margin-right: 0;
    margin-bottom: 0;
}

.biz-icons .icon-select-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    margin: 0;
}

.biz-icons .icon-select-btn select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    text-align-last: center;
}

.report-date-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #000;
    white-space: nowrap;
    line-height: 40px;
    pointer-events: none;
    user-select: none;
}

#booking-time-label,
#booking-party-label {
    pointer-events: auto;
    cursor: pointer;
}

#deliveries-date-label {
    pointer-events: none;
}

.report-date-arrow {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 40px;
    margin: 0 6px;
    pointer-events: none;
    user-select: none;
}

.biz-icons .icon-btn:hover {
    opacity: 0.7;
}

.biz-icons .icon-btn.active {
    box-shadow: 0 0 0 2px var(--button-primary-customer);
    border-radius: 50%;
}

.businesses-heading-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--gap-sm);
}

.businesses-heading-row #businesses-content {
    display: block;
    margin: 0;
}

.businesses-search-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: var(--gap-md);
}

.businesses-search-row[hidden] {
    display: none !important;
}

.businesses-search-row:not([hidden]) {
    display: block;
}

.businesses-search-row input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 140ms ease;
}

.businesses-search-row input:focus {
    border-color: var(--button-primary-customer);
}

#screen-till .till-controls {
    display: none !important;
}

#till-menuStatus:not(:empty) {
    background: var(--panel);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
    margin-bottom: 16px;
    grid-column: 1 / -1;
}

#screen-tableorders .tableorders-controls {
    display: none !important;
}

#screen-bookings .booking-controls {
    justify-content: flex-end;
}

#screen-bookings .booking-controls label {
    display: none !important;
}

#screen-stations .stations-controls {
    display: none !important;
}

#screen-deliveries #deliveries-actions h2,
#screen-deliveries .deliveries-controls {
    display: none !important;
}

.tableorders-inline-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.tableorders-inline-row select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    padding: 0 42px 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: url(images/icons/chevrondown.svg) no-repeat right 12px center var(--surface);
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width:600px) {
    header {
        padding: 16px;
    }

    main {
        padding: 0 16px;
    }

    #screen-businesses > div,
    #screen-home > div {
        width: 100%;
        min-width: 0;
    }

    #screen-till > div,
    #screen-till {
        min-width: 0;
    }

    .businesses-search-row {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 var(--gap-md);
        overflow: hidden;
    }

    .businesses-search-row input {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #businesses-list,
    .business-card-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #businesses-list .biz-card,
    .business-card-list .biz-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.filtercontainer .filter-button {
    width:auto;
}

.filtercontainer .filter-button:first-of-type {
    margin-left: auto;
}

#admin-input {
    flex: 1;
    min-width: 140px;
}

.admin-items {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin: 8px 0;
}

.admin-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.admin-stats p {
    flex: 1;
}
.admin-stats p {
    margin-top:0;
    margin-bottom:0;
}

.admin-stats span {
    display: block;
    font-size: 1.75rem;
}

.till-totals-row {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.till-totals-row .name {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.till-totals-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-end;
    align-items: baseline;
}
.till-totals-stats p {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.till-totals-stats span {
    display: block;
    font-size: 1.75rem;
}

.admin-item {
    --_admin_item_noop: 0;
}

.admin-item.admin-item-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-item.admin-item-table .meta {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
}

.admin-item.admin-item-table .toggle-table {
    margin-left: 12px;
}

.admin-row-deleted {
    opacity: 0.6;
}

.admin-row-deleted .meta,
.admin-row-deleted td[data-label="Deleted"],
.admin-row-deleted [data-label="Deleted"] {
    font-weight: 700;
}

.admin-form {
    --_admin_form_noop: 0;
}

label.inherit-station-toggle {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: var(--gap-sm);
    margin-top: 0;
    margin-bottom: 0;
    height: 42px;
    white-space: nowrap;
}

.station-row-group {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px 0;
}

.station-row-label {
    display: block;
    margin: 0 0 8px 0;
    font-size: var(--font-size-base);
    color: var(--ink);
}

.station-row-hint {
    display: inline;
    margin: 0;
    font-size: var(--font-size-sm, 13px);
    color: var(--ink-muted, #888);
    font-weight: 400;
}

.station-row-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.station-row-controls select {
    flex: 1 1 auto;
    min-width: 0;
}

.station-row-controls label.inherit-station-toggle {
    height: auto;
    flex-shrink: 0;
}

label.inherit-station-toggle > input[type="checkbox"] {
    display: none;
}

label.inherit-station-toggle > span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    margin: 0;
}

label.inherit-station-toggle > span:last-of-type {
    height: 100%;
}

label.inherit-station-toggle > span:first-of-type {
    display: inline-flex;
    margin: 0;
    position: static;
}

label.inherit-station-toggle .dummycheckbox {
    display: inline-flex;
    top: 0;
}

.admin-form .admin-inline-hint {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    height: 42px;
    white-space: nowrap;
}

select.inherited-station-disabled {
    background: #f1f2f4;
    color: #777;
}

#admin-content {
    display:flex;
    align-items: center;
}

.admin-header-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.admin-inline-controls {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0;
}

.admin-inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: 0;
}

.admin-inline-checkbox > span {
    margin: 0;
}

.admin-inline-checkbox-input {
    margin: 0;
    vertical-align: middle;
}

#screen-admin.admin-users-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-stations-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-tables-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-table-groups-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-hours-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-businesses-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-menu-groups-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-menu-subcategories-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-menu-items-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#screen-admin.admin-menu-variations-filter-mode #admin-biz-include-deleted-wrap {
    display: none !important;
}

#admin-biz-include-deleted-wrap[data-admin="users"],
#admin-biz-include-deleted-wrap[data-admin="stations"],
#admin-biz-include-deleted-wrap[data-admin="table-groups"],
#admin-biz-include-deleted-wrap[data-admin="tables"],
#admin-biz-include-deleted-wrap[data-admin="hours"],
#admin-biz-include-deleted-wrap[data-admin="businesses"],
#admin-biz-include-deleted-wrap[data-admin="groups"],
#admin-biz-include-deleted-wrap[data-admin="subcategories"],
#admin-biz-include-deleted-wrap[data-admin="items"],
#admin-biz-include-deleted-wrap[data-admin="variations"] {
    display: none !important;
}

#admin-content #admin-biz-include-deleted-wrap {
    margin-left:auto;
}


#admin-content #admin-biz-include-deleted-wrap label.checkbox {
    display:flex;
    gap: var(--gap-sm);
    justify-content: space-between;
    /* left + right */
    align-items: center;
    margin-bottom:0;
}
#admin-content #admin-biz-include-deleted-wrap label.checkbox span {
    margin: 0;   
}

#admin-content #admin-biz-include-deleted-wrap label.checkbox span.dummycheckbox {
    top: 0;
    margin:0;
}



.toggle-table[disabled],
.toggle-station[disabled],
.toggle-group[disabled],
.toggle-item[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

#admin-results label,
.filtercontainer label {
    margin-bottom: 0;
}

/* Checkbox copy tweaks */
label.checkbox {
    display: block;
}

label.checkbox>span:first-of-type {
    display: block;
    margin: 0 0 8px 0;
    position: relative;
    top: -2px;
}

/* Custom checkbox visual */
label.checkbox span.dummycheckbox {
    min-width: auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1;
}

/* tick when checked */
label.checkbox input[type="checkbox"]:checked~.dummycheckbox {
    border-color: var(--ink);
    background: url(images/icons/tick.svg) no-repeat 50% 50%;
}

/* ============================
Screen: Login
============================ */

.login-screen {
    max-width: 340px;
    margin: 0 auto;
}

#register-user {
    margin-top: 12px;
}

.login-screen label {
    width: 100%;
}

.login-screen input {
    display: block;
    width: 100%;
}

.switch-user-login-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-bottom: 12px;
}

.switch-user-login-header h3 {
    margin: 0;
    font-size: 1.35rem;
}

.switch-user-login-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0;
}

#screen-login.switch-user-login-modal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    max-width: none;
    margin: 0;
    padding: 20px 16px;
    background: rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

#screen-login.switch-user-login-modal > .panel {
    max-width: 420px;
    margin: 40px auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

#screen-login.switch-user-login-modal .switch-user-login-header {
    display: flex;
}

/* Shared surface styling for panels */
.user-edit-sheet {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--gap-md);
}

/* close buttons (no background by default) */
.ues-close {
    border: 0;
    padding: 0;
    background: none;
}

/* ============================
Responsive: Screen grid (≥900px)
============================ */

@media (min-width:900px) {
    .screen.on {
        grid-column: 1 / -1;
    }

}

/* ============================
Admin Lists / Controls
============================ */

.admin-item .name,
.admin-card .title {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.admin-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 8px 0;
}

.admin-chip {
    border: 1px solid #374151;
    border-radius: var(--radius-pill);
    padding: var(--pad-chip);
}

.admin-list table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    text-align: left;
    min-width: auto
}

.admin-list table th,
.admin-list table td {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg);
    /*width: 200px;
    */
}

.admin-list table th.col-actions, .admin-list table td.col-actions {
    white-space:nowrap;
    width:1%;
}

.admin-list table tr:last-child td {
    border-bottom: none;
}

.admin-list table tr td button, button.refund-station {
    background-color: transparent;
    border: 1px solid var(--ink);
    vertical-align: middle;
    /* centers it within the cell */
    margin-left: 8px;
    align-self: center;
    /* prevents vertical stretch in flex parent */
    height: 43px;
    /* keeps natural height */
    line-height: normal;
    /* removes browser-imposed height inflation */
}

.admin-list table tr td button img {
    margin: 0;
    padding: 0;
}

td:last-child button:first-child {
    margin-left: 0;
}

@media (max-width:600px) {
    .admin-list table th,
    .admin-list table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
        padding-left: 0;
        padding-right: 0;
        width: 100%
    }

    .admin-list table th {
        display: none
    }

    #screen-admin .panel:has(table) {
        background: none;
        padding: 0;
    }

    .admin-list table tbody tr {
        background: var(--panel);
        padding: var(--gap-md);
        border-radius: var(--radius-lg);
        display: block;
        margin-bottom: 16px;
    }

    td::before {
        content: attr(data-label);
        display: block;
        color: var(--ink);
        font-size: var(--font-size-base);
    }

    td.col-actions::before,
    td[data-label="Actions"]::before {
        content: none;
        display: none;
    }


    .admin-stats p {
        flex: 1 1 calc(50% - 16px);
        box-sizing: border-box;
    }

    label {
        width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-bottom: 12px;
    }

    input,
    select,
    textarea {
        min-width: auto;
        width: 100%;
        max-width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select {
        min-width: 0;
        max-width: 100%;
        height: 48px;
        min-height: 48px;
        line-height: 48px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .filtercontainer input[type="date"],
    .filtercontainer input[type="time"],
    .filtercontainer select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        line-height: 48px;
    }

    .filtercontainer input[type="date"]::-webkit-date-and-time-value,
    .filtercontainer input[type="time"]::-webkit-date-and-time-value {
        text-align: left;
    }

    input[type="date"]::-webkit-datetime-edit-fields-wrapper,
    input[type="time"]::-webkit-datetime-edit-fields-wrapper {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .filtercontainer input[type="date"]::-webkit-datetime-edit,
    .filtercontainer input[type="time"]::-webkit-datetime-edit {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0;
    }

    #businesses-results .businesses-add {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: var(--gap-sm);
        align-items: end;
    }

    #businesses-results .businesses-add label[for="businesses-input"] {
        width: 100%;
        margin-bottom: 0;
    }

    #businesses-results .businesses-add .businesses-directory-actions {
        width: auto;
        margin: 0;
        justify-self: start;
        align-self: end;
    }

    #businesses-results .businesses-add .businesses-include-all-toggle > span:first-of-type {
        margin-bottom: 8px;
    }

    #businesses-results .businesses-add #businesses-create-business-btn {
        width: auto;
        margin-bottom: 8px;
    }

    #businesses-results .businesses-add #businesses-search-btn {
        display: none;
    }

    /* dock carts to bottom on mobile */
    #cartcontainer,
    #till-cartcontainer {
        position: fixed;
        bottom: 0;
        left: 16px;
        right: 16px;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 0 16px rgba(107, 218, 114, .25);
        z-index:100;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
    }

    /* When cart is expanded, allow the inner section to scroll */
    #cartcontainer.cart-open,
    #till-cartcontainer.cart-open {
        overflow: hidden;
    }

    /* collapsed by default */
    #cartcontainer section,
    #till-cartcontainer section {
        display: none;
    }

    #cartcontainer.cart-open section,
    #till-cartcontainer.cart-open section {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Lock body scroll when cart overlay is open */
    body.cart-overlay-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    #cartcontainer h2,
    #till-cartcontainer h2 {
        display: none;
    }

    #cartcontainer.cart-open h2,
    #till-cartcontainer.cart-open h2 {
        display: block;
    }

    #cartcontainer .minimised-cart,
    #till-cartcontainer .minimised-cart {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--gap-md);
        align-items: center;
        width: 100%;
    }

    #cartcontainer p,
    #till-cartcontainer p {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
    }

    #cartcontainer .minimised-cart .cart-bag,
    #till-cartcontainer .minimised-cart .cart-bag {
        flex-shrink: 0;
    }

    #cartcontainer .minimised-cart> :last-child,
    #till-cartcontainer .minimised-cart> :last-child {
        margin-left: auto;
        flex: 1 1 0%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile minimised ordering bag should hide the channel switch.
       Keep it visible on desktop and when the mobile bag is expanded. */
    #cartcontainer:not(.cart-open) #order-mode-switch {
        display: none !important;
    }

    #cartcontainer.cart-open #order-mode-switch {
        display: flex !important;
    }

    #cartcontainer .maximised-cart,
    #till-cartcontainer .maximised-cart {
        display: none;
    }

    .maximised-cart button {
        display: inline-block;
        position: relative;
    }

    /* Show a small no-entry overlay on disabled action buttons */
    .admin-action-btn {
        position: relative;
    }

    .admin-action-btn .disabled-overlay {
        display: none;
        position: absolute;
        top: -6px;
        right: -6px;
        background: #fff;
        color: #c42727;
        border-radius: var(--radius-pill);
        padding: 2px 4px;
        font-size: var(--font-size-xs);
        line-height: 1;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }

    .admin-action-btn[disabled]:hover .disabled-overlay {
        display: block;
    }

    .admin-action-btn[disabled] {
        cursor: not-allowed;
    }

    #cartcontainer.cart-open .minimised-cart,
    #till-cartcontainer.cart-open .minimised-cart {
        display: none;
    }

    #cartcontainer.cart-open .maximised-cart,
    #till-cartcontainer.cart-open .maximised-cart {
        display: block;
    }

    #cartcontainer.cart-open .cart-header,
    #till-cartcontainer.cart-open .cart-header {
        position: relative;
        align-items: start;
    }

    #cartcontainer.cart-open .order-mode-switch .mode-btn,
    #till-cartcontainer.cart-open .order-mode-switch .mode-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 11px;
        font-size: 0.9rem;
    }

    #cartcontainer.cart-open .cart-header .cart-close,
    #till-cartcontainer.cart-open .cart-header .cart-close {
        display: flex;
        grid-area: close-area;
        padding: 0;
        position: static;
        top: auto;
        right: auto;
        left: auto;
        margin-left: 0;
        justify-self: end;
        align-self: start;
        z-index: 2;
    }

    /* Reserve space for the fixed mobile bag so the last product actions stay tappable. */
    #layout,
    #till-layout,
    #menu,
    #till-menu,
    .imagethumbs .menu-list,
    .thumbs .menu-list {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    .imagethumbs .menu-list,.thumbs .menu-list {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }


    #businesses-list .biz-card,
    .business-card-list .biz-card {
        width:100%;
        padding:0;
    }

#businesses-list .biz-card,
.business-card-list .biz-card {
    padding:0;
    background: #fff;
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(106, 112, 118, 0.18), 0 14px 28px rgba(74, 80, 88, 0.14);
    display: block;
    height: 100%;
}

#businesses-list .biz-card .restaurant-description,
.business-card-list .biz-card .restaurant-description,
.panel > .restaurant-description {
    position:relative;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#businesses-list .biz-card .restaurant-description .button,
.business-card-list .biz-card .restaurant-description .button {
    margin-top: auto;
}

/*
    #businesses-list .biz-card .restaurant-description .biz-hours-info-btn {
    position:absolute;
    top:0;
    right:16px;
}
*/

#businesses-list .biz-card-row,
.business-card-list .biz-card-row {
    width:100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

}

/* ============================
Bookings widget + availability grid
============================ */

.booking-time-widget {
    display: inline-flex;
    gap: var(--gap-sm);
    align-items: center;
}

/* Ensure time widget sits above neighbouring buttons and is interactive */
.booking-time-widget,
.booking-time-widget select {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

/* Ensure filter buttons don't overlay inputs */
.filtercontainer .filter-button,
.filtercontainer button {
    position: relative;
    z-index: 1;
}

.booking-time-widget select.booking-time-hour,
.booking-time-widget select.booking-time-minute {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--pad-item);
    font-size: var(--font-size-base);
    color: var(--ink);
    min-width: 72px;
}

.availability-grid {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

#bookings-results {
    text-align: center;
    width: 100%;
    margin-top: 8px;
}

#bookings-results[hidden] {
    display: none !important;
}

.availability-hour-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* ensure availability grid doesn't overlap the filter controls above */
.panel.filtercontainer + .panel .availability-grid,
#bookings-results .availability-grid {
    clear: both;
    margin-top: 12px;
}

.slot-btn {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid #555;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 64px;
    width: auto;
    flex: 0 0 auto;
    cursor: pointer;
    text-align: center;
}

.slot-btn:hover:not(:disabled) {
    filter: brightness(0.96);
}

.slot-btn.selected {
    background: var(--button-primary-admin);
    color: #fff;
    border-color: rgba(0,0,0,0.06);
}

.slot-btn.slot-unavailable {
    text-decoration: line-through;
    opacity: 0.4;
    cursor: not-allowed;
}

.slot-btn:disabled {
    cursor: not-allowed;
}

/* Welcome message */
.booking-welcome {
    flex: 1 1 auto;
    font-size: 1.15rem;
    line-height: 1.5;
    padding: 4px 0;
    color: var(--ink);
}

/* selected booking + book action */
.booking-selection {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.booking-selection-time {
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.booking-availability-stale {
    max-width: 32rem;
    margin: 10px auto 0;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 78%, #fff 22%);
    text-align: center;
}

.book-btn {
    background: var(--button-primary-admin);
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.95rem;
    width: auto;
}

/* Booking guest modal */
.booking-guest-modal .modal-inner{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:380px;
    background:var(--surface, #fff);
    padding:24px;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,0.2);
    width:min(380px, calc(100% - 32px));
    box-sizing:border-box;
}
.booking-guest-upsell{
    font-size:0.9rem;
    line-height:1.5;
    color:var(--text-muted, #666);
    margin:0;
}
.booking-guest-auth-btns{
    display:flex;
    gap:10px;
}
.booking-guest-auth-btns .filter-button{
    flex:1;
}
.booking-guest-divider{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.8rem;
    color:var(--text-muted, #888);
}
.booking-guest-divider::before,
.booking-guest-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--line, #ddd);
}
.bkm-label{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:0.85rem;
    font-weight:600;
    color:var(--text, #333);
}
.bkm-label input{
    padding:8px 12px;
    border:1.5px solid var(--line, #ddd);
    border-radius:var(--radius-md);
    font-size:0.95rem;
    background:var(--surface, #fff);
    color:var(--text, #333);
    outline:none;
}
.bkm-label input:focus{
    border-color:var(--button-primary-admin);
}

.book-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* My Bookings list (customer self-service) */
.my-bookings-heading {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
}
.my-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.my-booking-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    gap: 12px;
}
.my-booking-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.my-booking-date {
    font-weight: 600;
    font-size: 0.95rem;
}
.my-booking-meta {
    font-size: 0.85rem;
    color: var(--ink);
    opacity: 0.6;
}
.my-booking-cancel {
    background: var(--button-primary-admin);
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    flex: 0 0 auto;
    width: auto;
}
.my-booking-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================
Product Lists (one per row on small)
============================ */

/* On small screens (< 600px), show a 2-column grid when items fit */
@media (max-width:599px) {
    .thumbs .menu-list,
    .imagethumbs .menu-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--gap-sm);
    }
}

/* Till compact: entire card is tappable */
.till-compact #till-menu .item {
    cursor: pointer;
}

.imagethumbs .item,
.thumbs .item {
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
}

#businesses-list .biz-card,
.business-card-list .biz-card {
    align-items: stretch;
}

.imagethumbs .item p,
.thumbs .item p {
    margin: 0;
}

/* ============================
Till Compact View Toggle
============================ */

.till-view-toggle {
    color: #fff;
    transition: color 140ms ease;
}

.till-view-toggle:hover {
    color: var(--ink);
}

.till-view-toggle.active {
    color: #fff;
    background: #000;
    border-radius: 6px;
}
.till-view-toggle.active svg {
    fill: #fff;
    stroke: #fff;
}

/* Show grid icon by default; show list icon when compact is active */
.till-view-icon--list { display: none; }
.till-view-toggle.active .till-view-icon--grid { display: none; }
.till-view-toggle.active .till-view-icon--list { display: block; }

/* ============================
Till Compact Mode
============================ */

/* Constrain the menu so items never spill behind the cart */
.till-compact #till-menu {
    overflow: hidden;
}

.till-compact .menu-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 6px !important;
}

/* Keep items vertical but strip padding down */
.till-compact .item {
    padding: 8px 10px !important;
    gap: 4px !important;
}

/* Hide non-essential parts */
.till-compact .item .productimage,
.till-compact .item .desc-btn,
.till-compact .item .fav-btn,
.till-compact .item .item-dietary-badges {
    display: none !important;
}

.till-compact .item .pricefavourite .fav-btn,
.till-compact .item .pricefavourite p:has(.fav-btn) {
    display: none !important;
}

/* Name: one line, truncated */
.till-compact .item .product-title,
.till-compact .item .product-title-no-desc {
    min-width: 0;
}

.till-compact .item .item-name {
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Price + Add on one row */
.till-compact .item .pricefavourite {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.till-compact .item .price {
    font-size: var(--font-size-sm);
}

.till-compact .item .add-btn {
    padding: 5px 10px !important;
    font-size: var(--font-size-xs);
}

/* ============================
Desktop Layout (≥600px): Two Columns + Sticky Carts
============================ */

@media (min-width:600px) {
    /* two-column layouts */
    #layout,
    #till-layout {
        display: flex;
        gap: var(--gap-md);
        align-items: flex-start;
    }

    /* left columns (menus) can grow/shrink;
    allow shrinking */
    #menu,
    #till-menu {
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
        align-content: baseline;
    }

    /* right columns (carts): fixed width + sticky */
    #cartcontainer {
        position: sticky;
        top: 90px;
        align-self: flex-start;
        flex: 0 0 400px;
        height: fit-content;
    }

    #till-cartcontainer {
        position: sticky;
        top: 90px;
        align-self: flex-start;
        flex: 0 0 320px;
        height: fit-content;
    }

    .imagethumbs .menu-list,
    .thumbs .menu-list, #businesses-list,
    .business-card-list {
        display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--gap-md);
        align-items: stretch;
        justify-content: start;
    }

    .imagethumbs .menu-list > .item,
    .thumbs .menu-list > .item {
        max-width: 400px;
    }




    .imagethumbs .item,
    .thumbs .item {
        flex: 0 0 calc((100% - (2 * 16px)) / 3);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-md);
    }

    #businesses-list .biz-card .business-image,
    .business-card-list .biz-card .business-image {
        width: 100%;
        margin: 0 0 16px;
        display: block;
    }

    #businesses-list .biz-card .business-image .left,
    .business-card-list .biz-card .business-image .left {
        display: flex;
        align-items: center;
        gap: 10px;
    }


    #businesses-list .restaurant-phone,
    .business-card-list .restaurant-phone {
        margin-left: auto;
    }

    #businesses-list .biz-card p.button,
    .business-card-list .biz-card p.button {
        margin-top: auto;
    }



    .imagethumbs .item p,
    .thumbs .item p {
        margin: 0;
    }

}


#businesses-list .biz-card p.button,
.business-card-list .biz-card p.button {
    width: 40%;
    padding-top: 10px;
}

#businesses-list .biz-card p.button button,
.business-card-list .biz-card p.button button {
    display: block;
    width: 100%;
}

#businesses-list .biz-card li img,
.business-card-list .biz-card li img {
    vertical-align: middle;
}

/* Global override: always remove .panel's 16px padding so image fills edge-to-edge */
#businesses-list .biz-card,
.business-card-list .biz-card {
    padding: 0;
    overflow: hidden;
}

#businesses-list .biz-card .business-image,
.business-card-list .biz-card .business-image {
    width: 100%;
    margin: 0 0 16px;
    display: block;
}

/* Global: description area always gets padding so text is never flush with the card edge */
#businesses-list .biz-card .restaurant-description,
.business-card-list .biz-card .restaurant-description {
    padding: 12px 16px 16px;
}

#businesses-list .biz-card.activated-business-card,
.business-card-list .biz-card.activated-business-card {
    background: var(--surface) !important;
    box-shadow: 0 2px 8px rgba(121, 14, 110, 0.1);
}

#businesses-list .biz-card .business-activated-pill,
.business-card-list .biz-card .business-activated-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--button-primary-admin);
    border: none;
    box-shadow: none;
    color: #ffffff;
    white-space: nowrap;
    font-size: var(--font-size-base);
    font-weight: normal;
    font-family: var(--font-body);
}

#businesses-list .biz-card .biz-select-btn:disabled,
.business-card-list .biz-card .biz-select-btn:disabled {
    opacity: 0.72;
    cursor: default;
    filter: saturate(0.75);
    box-shadow: none;
}

#businesses-list .biz-card .biz-select-btn:disabled:hover,
.business-card-list .biz-card .biz-select-btn:disabled:hover {
    transform: none;
    filter: saturate(0.75);
}

#businesses-list .biz-card .restaurant-title,
.business-card-list .biz-card .restaurant-title {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-right: 0;
}

#businesses-list .biz-card .biz-name-row,
.business-card-list .biz-card .biz-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#businesses-list .biz-card .biz-name-row .restaurant-title,
.business-card-list .biz-card .biz-name-row .restaurant-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

#businesses-list .biz-card ul,
.business-card-list .biz-card ul {
    display: flex;
    flex-wrap: wrap;
    /* allow wrapping to second row */
    gap: var(--gap-md);
    align-items: flex-start;
    /* align items to top to avoid vertical centering issues */
    margin-bottom: 16px;
}

#businesses-list .biz-card li,
.business-card-list .biz-card li {
    flex: 1 1 calc(50% - 16px);
    /* 2 items per row, subtract half the gap */
    min-width: 0;
    /* allow shrinking */
    white-space: normal;
    /* allow text wrap */
}


/* Business hours list shown on directory cards */
.biz-hours {
    margin-top: 0;
    min-height: 0;
}

.biz-hours-day {
    display:grid;
    grid-template-rows:auto auto auto;
    gap:8px;
    justify-items:center;
    min-width:94px;
    flex:0 0 94px;
}

/* ============================
Admin Grid (≥900px)
============================ */
.biz-hours-today {
    display:grid;
    grid-template-columns: max-content 1fr;
    column-gap: 6px;
    row-gap: 2px;
    align-items:start;
    vertical-align:middle;
    font-family: var(--font-bold);
    font-weight:600;
    margin-right:8px;
    white-space:normal;
}

.biz-hours-line {
    display:block;
}

.biz-hours-label {
    grid-column: 1;
    grid-row: 1;
    display:block;
}

.biz-hours-line--first,
.biz-hours-line--extra {
    grid-column: 2;
}

.biz-hours-line--first {
    grid-row: 1;
}

.biz-hours-line--extra {
    display:block;
}

.biz-hours-info-btn , .item .desc-btn{
    display:inline-block;
    vertical-align:middle;
    width:24px !important;
    height:24px !important;
    cursor:pointer;
    box-shadow:none;
    background: url(images/icons/info.svg) no-repeat 50% 50%;
    padding:0;
}
.biz-hours-info-btn{
    margin: 0 0 0 auto;
    flex: 0 0 auto;
    align-self: flex-start;
}

.biz-hours-wrap {
    display:grid;
    gap:20px;
}

.biz-hours-week {
    display:grid;
    gap:12px;
}

.biz-hours-week-label {
    margin:0;
    font-family: var(--font-bold);
    color: var(--ink);
}

.biz-hours-strip {
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(41, 45, 50, 0.32) transparent;
}

.biz-hours-strip::-webkit-scrollbar {
    height:8px;
}

.biz-hours-strip::-webkit-scrollbar-thumb {
    background: rgba(41, 45, 50, 0.28);
    border-radius: 999px;
}

.biz-hours-dayname {
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--ink);
    text-align: center;
}

.biz-hours-card {
    width:100%;
    min-height:88px;
    border-radius: 16px;
    background: #3f4044;
    color:#fff;
    display:grid;
    align-content:center;
    justify-items:center;
    padding:8px 8px;
}

.biz-hours-card-day {
    font-family: var(--font-bold);
    font-size: 2rem;
    line-height: 1;
}

.biz-hours-card-month,
.biz-hours-card-year {
    font-size: 0.95rem;
    line-height: 1.1;
}

.biz-hours-times {
    max-width: 94px;
    min-height: 2.5em;
    text-align:center;
    font-size: 0.95rem;
    line-height: 1.25;
    color: #2e3136;
}

.biz-hours-closed .biz-hours-card {
    background: #cfd2d7;
    color: #fff;
    box-shadow: none;
}

.biz-hours-closed .biz-hours-times {
    color: #575e66;
}

.biz-hours-is-today .biz-hours-card {
    background: #6b1f66;
}

.biz-hours-is-today .biz-hours-dayname,
.biz-hours-is-today .biz-hours-times {
    color: #6b1f66;
    font-family: var(--font-bold);
}

.business-image img {
    display: block;
    width: 100%;
    height: 200px;
    min-width: 100%;
    object-fit: cover;
    border-radius:16px 16px 0 0;
}

.business-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* ============================
Home screen business card — shares the same list/card class as directory
============================ */
.home-business-card {
    box-sizing: border-box;
}

@media (min-width:600px) {
    .home-business-card.business-card-list {
        grid-template-columns: minmax(260px, 320px);
        justify-content: start;
    }
}

@media (max-width: 640px) {
    #businesses-list .biz-card .business-image,
    .business-card-list .biz-card .business-image {
        padding: 0;
    }

    #businesses-list .biz-card .business-image img,
    .business-card-list .biz-card .business-image img {
        border-radius: 16px 16px 0 0;
    }

}

/* "Create business" placeholder card in directory */
#businesses-list .biz-create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    border: 2px dashed var(--muted);
    background: transparent;
    min-height: 200px;
    transition: border-color 150ms ease, background 150ms ease;
}

#businesses-list .biz-create-card:hover {
    border-color: var(--button-primary-admin);
    background: rgba(121,14,110,0.04);
}

.biz-create-plus {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--muted);
    transition: color 150ms ease;
}

#businesses-list .biz-create-card:hover .biz-create-plus {
    color: var(--button-primary-admin);
}

.biz-create-label {
    font-size: var(--font-size-body);
    font-family: var(--font-bold);
    color: var(--muted);
    transition: color 150ms ease;
}

#businesses-list .biz-create-card:hover .biz-create-label {
    color: var(--button-primary-admin);
}

@media (min-width:900px) {
    .admin-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* ============================
User Edit Sheet (slide-up) - styles used by script.js classes
============================ */

.ues-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}


.ues-actions {
    display: flex;
    align-items: center;
    /* keeps them vertically aligned, not stretched */
}

#item-edit-sheet #ied-description {
    height: auto;
    min-height: 0;
    line-height: 1.35;
    resize: vertical;
}

#item-edit-sheet .ues-actions {
    margin-top: 24px;
    padding-top: 12px;
}

#booking-sheet .ues-actions {
    margin-top: 24px;
    padding-top: 12px;
}

#delivery-override-sheet .ues-actions.delivery-override-actions {
    margin-top: 16px;
    padding-top: 8px;
}

#booking-sheet #booking-sheet-notes {
    height: auto;
    min-height: 0;
    line-height: 1.35;
    resize: vertical;
}

.booking-sheet-party {
    width: 80px;
}

.ues-save {
    margin-left: auto;
}

.ues-cancel {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink)
}

.user-edit-sheet .ues-input:disabled {
    background: #f2f2f2;
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.58);
    box-shadow: none;
}

.user-edit-sheet .ues-row:has(.ues-input:disabled) > span {
    color: rgba(0, 0, 0, 0.58);
}

/* Variation picker style: match shopping bag look */
.variation-sheet {
    /* inherit general sheet look;
    compact like the shopping bag */
    padding: var(--space-sm);
    width: 320px;
    box-sizing: border-box;
}

.variation-sheet .ues-header {
    text-align: left;
    margin-bottom: 12px;
}

.variation-sheet .ues-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.variation-sheet .ues-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: 6px 0;
}

.variation-sheet .var-row {
    width: 100%;
}

.variation-sheet .var-choose {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--button-primary-customer);
    color: #fff;
    border: 0;
    padding: var(--pad-item);
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    cursor: pointer;
}

.variation-sheet .var-choose:hover {
    opacity: 0.98;
    transform: translateY(-1px);
}

.variation-sheet .var-choose[aria-selected="true"], .variation-sheet .var-choose.selected {
    background: #fff;
    color: var(--button-primary-customer);
    border: 2px solid var(--button-primary-customer);
}

/* Till-specific variant: use admin primary colour when opened from the Till screen */
.variation-sheet.variation-sheet--till .var-choose {
    background: var(--button-primary-admin);
}

.variation-sheet.variation-sheet--till .var-choose[aria-selected="true"],
.variation-sheet.variation-sheet--till .var-choose.selected {
    background: #fff;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
}

.variation-sheet .ues-actions {
    padding-top: 8px;
}

.variation-sheet #var-cancel {
    display: block;
    width: 100%;
    padding: var(--pad-item);
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    color: #000;
    margin-top: 6px;
}

/* Backdrop that blocks interaction behind a sheet-based picker */
.sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(0,0,0,0.35);
}
.sheet-backdrop--visible {
    display: block;
}

/* Position variation sheet like the shopping bag: right-side panel on desktop */
#variation-select-sheet.sheet.ues-open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(360px, 92vw) !important;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    border-radius: 16px;
}

/* Till controls compact form (moved from inline styles in index.html) */

/* Small variant for inputs used inside sheet rows */
.ues-input-small {
    width: 120px;
}

/* Right-align price cells in tables */
.cell-price-right {
    text-align: right;
}

/* spacer helper used in admin action cells */
.spacer {
    margin-left: 8px;
    display: inline-block;
}

.admin-action-btn, .refund-station, .tableorder-receipt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--ink);
    background: #fff !important;
}

.admin-action-btn img, .tableorder-receipt-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

.stripe-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 72px;
    height: 32px !important;
    padding: 0 12px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-md);
    background: #fff !important;
    color: var(--ink) !important;
    font-size: var(--font-size-caption);
    font-family: var(--font-bold);
    white-space: nowrap;
}

.stripe-action-btn[disabled] {
    opacity: 0.45;
}

#slots-panel {
    overflow-x: auto
}

/* Slots (Gantt) view styles */
.slots-gantt {
    position: relative;
    min-height: 160px;
    padding: var(--space-sm);
    overflow: auto;
    min-width: 900px;
    overflow-x: auto;
}

.gantt-axis {
    position: relative;
    height: 28px;
    margin-bottom: 8px;
}

.gantt-timeline {
    position: absolute;
    left: 140px;
    /* must match label width */
    right: 0;
    top: 0;
    height: 28px;
}

.gantt-axis-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: var(--font-size-caption);
    color: var(--muted);
}

.gantt-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gantt-row {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
}

.gantt-row-label {
    min-width: 110px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
}

.gantt-row-lane {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 44px;
    background: transparent;
    position: relative;
}

.gantt-bar {
    background: var(--button-primary-admin);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: var(--font-size-caption);
}

/* Party-size badge (right side of booking bar) */
.gantt-bar .gantt-bar-party {
    background: #fff;
    /* white background */
    color: var(--button-primary-admin);
    /* coloured number */
    border: 2px solid var(--button-primary-admin);
    padding: 2px 6px;
    border-radius: var(--radius-md);
    font-size: 0.85em;
    margin-left: 8px;
    flex: 0 0 auto;
    line-height: 1;
}

.gantt-bar.status-rejected {
    background: var(--bad-bg);
    color: var(--bad-fg);
    border: 1px solid rgba(200,50,50,0.08);
}

/* Arrived bookings: use the secondary button colour (outlined purple with white fill)
so arrived bars are visually distinct but not as prominent as active bookings. */
.gantt-bar.status-arrived {
    background: #fff;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.gantt-bar.status-arrived .gantt-bar-party {
    background: var(--button-primary-admin);
    color: #fff;
    border-color: var(--button-primary-admin);
}

.gantt-action-popup {
    position: absolute;
    display: flex;
    gap: var(--gap-sm);
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Now-line indicator (current time) — thin, dotted and subtle */
.gantt-now-line {
    position: absolute;
    width: 1px;
    /* visual width, actual height set inline by script */
    background: transparent;
    /* use border for dotted effect */
    border-left: 1px dotted rgba(119,14,110,0.9);
    /* purple dotted line */
    pointer-events: none;
    z-index: 9999;
}

/* Positioning for the now-line is driven by CSS variables that the
renderer sets on the outer `#slots-gantt` element. This keeps the
visual styling purely in CSS while allowing the script to compute
pixel-perfect placement without writing inline styles on the element. */
.gantt-now-line {
    left: var(--gantt-now-left, auto);
    top: var(--gantt-now-top, 0);
    height: var(--gantt-now-height, 100%);
    width: 0px;
    /* visual line is produced by the border */
}

/* Structured popup layout for booking actions */
.gantt-action-popup {
    flex-direction: column;
    padding: var(--space-sm);
    min-width: 260px;
}

.gantt-action-popup .gantt-popup-hdr {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

/* Title: keep on a single line to avoid vertical wrapping */
.gantt-action-popup .gantt-popup-title {
    font-weight:700;
    flex: 1 1 auto;
    margin-right:8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

/* Close/Return button: make compact so the title has more room */
.gantt-action-popup .gantt-popup-close {
    background: var(--button-primary-admin);
    color: #fff;
    border:1px solid var(--button-primary-admin);
    padding:4px 8px;
    border-radius:10px;
    cursor:pointer;
    min-width:0;
    font-size: 0.86rem;
    line-height:1;
    flex: 0 0 auto;
}

.gantt-action-popup .gantt-popup-details {
    margin-bottom:8px;
    font-size:var(--font-size-body);
}

.gantt-action-popup .gantt-popup-details div {
    margin-bottom:4px;
}

.gantt-action-popup .gantt-popup-actions {
    display:flex;
    gap: var(--gap-sm);
}

.gantt-action-popup .gantt-popup-actions button {
    flex:1;
}

.gantt-action-popup .gantt-popup-actions button.secondary {
    background:none;
    color: var(--button-primary-admin);
    border:2px solid var(--button-primary-admin);
}

/* Force-hide the Customer screen Business input only (defensive: covers cached HTML or runtime-inserted elements) */
label[for="customer-business"],
#customer-business {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Panels spacing used in bookings/slots screens */
#slots-panel.panel {
    margin-top: 12px;
}

#screen-slots #slots-panel.panel {
    margin-top: 0;
}

/* Customer register default hidden and small top margin */
#customer-register {
    display: none;
    margin-top: 10px;
}

#customer-forgot {
    display: none;
    margin-top: 10px;
}

#customer-reset {
    display: none;
    margin-top: 10px;
}

/* Gantt layout moved from inline JS into CSS so renderGantt can keep DOM simple */
.gantt-labels {
    display: inline-block;
    vertical-align: top;
    width: 140px;
    box-sizing: border-box;
}

.gantt-content {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(100% - 140px);
    box-sizing: border-box;
    padding-right: 20px;
}

.gantt-timeline {
    position: absolute;
    left: 140px;
    right: 0;
    top: 0;
    height: 28px;
}

.gantt-axis-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: var(--font-size-caption);
    color: #666;
}

.gantt-rows {
    margin-top: 8px;
}

.gantt-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: 8px;
}

.gantt-row-label {
    flex: 0 0 140px;
    box-sizing: border-box;
    padding-left: 8px;
    height: 44px;
    display:flex;
    align-items:center;
}

.gantt-row-lane {
    position: relative;
    flex: 1 1 auto;
    height: 40px;
}

/* Bars: left/width are set via CSS variables by the script, rest of visual layout in CSS */
.gantt-bar {
    position: absolute;
    left: var(--left, 0);
    width: var(--width, 0);
    height: 28px;
    padding: 4px 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    box-sizing: border-box;
}

.gantt-bar .gantt-bar-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-bar .gantt-bar-party {
    margin-left: 8px;
}

/* Overrides for table-group booking bars: make purple visuals blue (#1F3B6D)
Ensure all elements that normally use the admin purple are overridden,
including arrived variations. Use high specificity and !important so
these override inline or variable-driven styles. */
.gantt-bar.gantt-bar-group {
    background: #1F3B6D !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

.gantt-bar.gantt-bar-group .gantt-bar-party {
    background: #ffffff !important;
    color: #1F3B6D !important;
    border-color: #1F3B6D !important;
}

/* Arrived bars use outlined style — maintain that but use the blue colour */
.gantt-bar.status-arrived.gantt-bar-group {
    background: #ffffff !important;
    color: #1F3B6D !important;
    border: 2px solid #1F3B6D !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}

.gantt-bar.status-arrived.gantt-bar-group .gantt-bar-party {
    background: #1F3B6D !important;
    color: #ffffff !important;
    border-color: #1F3B6D !important;
}

/* Keep now-line visuals in CSS (positioning written by script or generated stylesheet) */
.gantt-now-line {
    border-left: 1px dotted rgba(119,14,110,0.9);
    background: transparent;
    pointer-events: none;
}

/* Slots visual refresh */
#slots-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    overflow-x: auto;
}

.slots-overview {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gap-md);
    border-radius: var(--radius-lg);
    background: var(--panel);
    padding: var(--gap-md);
}

.slots-overview__lead {
    display: grid;
    gap: 6px;
}

.slots-overview__eyebrow,
.slots-empty-state__eyebrow {
    font-size: var(--font-size-xs);
    font-family: var(--font-bold);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.slots-overview__date,
.slots-empty-state__title {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--ink);
}



.slots-overview__stats {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

.slots-overview__stat {
    min-width: 92px;
    padding: var(--pad-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    background: var(--panel);
}

.slots-overview__stat-value {
    display: block;
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--ink);
}

.slots-overview__stat-label {
    display: block;
    margin-top: 3px;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.slots-gantt {
    position: relative;
    min-height: 280px;
    min-width: 940px;
    overflow: auto;
    padding: var(--gap-md);
    isolation: isolate;
}

.gantt-placeholder.slots-empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
}

.slots-empty-state__card {
    position: relative;
    overflow: hidden;
    width: min(420px, 100%);
    padding: var(--gap-md);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.slots-empty-state__meta {
    margin-top: 8px;
}

.slots-empty-state__copy {
    margin-top: 10px;
    max-width: 34ch;
}

.slots-empty-state.is-loading .slots-empty-state__card::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: slotsShimmer 1.3s linear infinite;
}

@keyframes slotsShimmer {
    to {
        transform: translateX(100%);
    }
}

.gantt-content {
    display: block;
    position: relative;
    min-width: 980px;
    width: max(100%, 980px);
    box-sizing: border-box;
    padding-right: 12px;
}

.gantt-axis {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 46px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.gantt-axis::before {
    content: 'Tables';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 152px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    font-family: var(--font-bold);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.gantt-timeline {
    position: absolute;
    left: 152px;
    right: 12px;
    top: 8px;
    height: 28px;
}

.gantt-axis-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-family: var(--font-bold);
    color: var(--muted);
}

.gantt-axis-tick::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 24px;
    width: 1px;
    height: var(--gantt-grid-height, 220px);
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.12), rgba(17, 24, 39, 0.02));
    pointer-events: none;
}

.gantt-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
}

.gantt-row {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 0;
}

.gantt-row-label {
    position: sticky;
    left: -16px;
    z-index: 2;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: linear-gradient(
      to right,
      white calc(100% - 16px),
      rgba(255, 255, 255, 0)
    );
    
}

.gantt-row-lane {
    position: relative;
    min-height: 52px;
    height: 52px;
    overflow: hidden;
}

.gantt-bar {
    position: absolute;
    left: var(--left, 0);
    width: var(--width, 0);
    min-width: 52px;
    height: 36px;
    padding: 0 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: var(--button-primary-admin);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.gantt-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.gantt-bar .gantt-bar-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-bold);
    font-size: 0.88rem;
}

.gantt-bar .gantt-bar-party {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    margin-left: 10px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.gantt-bar--compact {
    padding: 0 10px;
}

.gantt-bar--compact .gantt-bar-label {
    font-size: 0.82rem;
}

.gantt-bar--micro .gantt-bar-party {
    display: none;
}

.gantt-bar.status-rejected {
    background: var(--bad-bg);
    color: var(--bad-fg);
    box-shadow: none;
}

.gantt-bar.status-rejected .gantt-bar-party {
    background: rgba(196, 39, 39, 0.1);
    color: var(--bad-fg);
    border-color: var(--bad-fg);
}

.gantt-bar.status-arrived {
    background: #fff;
    color: var(--button-primary-admin);
    border: 2px solid var(--button-primary-admin);
    box-shadow: none;
}

.gantt-bar.status-arrived .gantt-bar-party {
    background: var(--button-primary-admin);
    color: #fff;
    border-color: var(--button-primary-admin);
}

.gantt-bar.gantt-bar-group {
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: var(--shadow-sm) !important;
}

.gantt-bar.gantt-bar-group .gantt-bar-party {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}

.gantt-bar.status-arrived.gantt-bar-group {
    background: #fff !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    box-shadow: none !important;
}

.gantt-bar.status-arrived.gantt-bar-group .gantt-bar-party {
    background: var(--ink) !important;
    color: #fff !important;
    border-color: var(--ink) !important;
}

.gantt-now-line {
    border-left: 2px solid rgba(194, 76, 114, 0.95);
    background: transparent;
    pointer-events: none;
}

.gantt-now-line::before {
    content: 'Now';
    position: absolute;
    top: -14px;
    left: -16px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: #fff;
    font-size: var(--font-size-xs);
    font-family: var(--font-bold);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.gantt-now-line::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 8px;
    background: linear-gradient(180deg, rgba(194, 76, 114, 0.16), rgba(194, 76, 114, 0));
}

.gantt-action-popup {
    position: absolute;
    left: var(--left, auto);
    top: var(--top, auto);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 300px;
    max-width: min(340px, calc(100vw - 24px));
    padding: var(--gap-md);
    background: var(--panel);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}

.gantt-action-popup .gantt-popup-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.gantt-action-popup .gantt-popup-title {
    flex: 1 1 auto;
    margin-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-bold);
    font-size: 1.05rem;
    color: var(--ink);
}

.gantt-action-popup .gantt-popup-close {
    min-width: 0;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--button-primary-admin);
    color: #fff;
    border: 1px solid var(--button-primary-admin);
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
}

.gantt-action-popup .gantt-popup-details {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.gantt-action-popup .gantt-popup-details div {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gantt-action-popup .gantt-popup-details div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gantt-action-popup .gantt-popup-details strong {
    min-width: 56px;
    color: var(--ink);
}

.gantt-action-popup .gantt-popup-details .gantt-popup-row--notes {
    align-items: flex-start;
}

.gantt-action-popup .gantt-popup-details .gantt-popup-notes {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    flex: 1;
}

.gantt-action-popup .gantt-popup-actions {
    display: flex;
    gap: 8px;
}

.gantt-action-popup .gantt-popup-actions button {
    flex: 1;
    min-height: 40px;
    border-radius: var(--radius-md);
    font-family: var(--font-bold);
    font-weight: 600;
}

.gantt-action-popup .gantt-popup-actions button.secondary {
    background: transparent;
    color: var(--button-primary-admin);
    border: 2px solid rgba(95, 48, 128, 0.24);
}

@media (max-width: 768px) {
    .slots-overview {
        flex-direction: column;
        align-items: stretch;
        padding: var(--gap-md);
        border-radius: var(--radius-md);
    }

    .slots-overview__stats {
        justify-content: stretch;
    }

    .slots-overview__stat {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }

    .slots-gantt {
        width:100%;
        min-width:auto;
        padding: var(--space-sm);
        border-radius: var(--radius-md);
    }

    .slots-empty-state__card {
        width: 100%;
        padding: var(--gap-md);
    }

    .gantt-content {
        min-width: 820px;
        width: max(100%, 820px);
    }

    .gantt-row {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    .gantt-axis::before {
        width: 132px;
        padding-left: 12px;
    }

    .gantt-timeline {
        left: 132px;
    }

    .gantt-action-popup {
        min-width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}

/* Delivered action button shown to drivers */
.delivered-btn {
    /* Match the compact shopping-bag Change button sizing */
    background: var(--button-primary-admin);
    border: 0;
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 400;
    width: auto;
    flex-shrink: 0;
}

.delivered-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal{
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.4);
    display: block;
    z-index: 10000;
    padding:var(--gap-md);
    overflow-y: auto;
}
.modalinner{
    max-width: 760px; 
    margin: 40px auto; 
    background: white; 
    padding: var(--gap-md); 
    border-radius: var(--radius-lg); 
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ink);
    line-height: 1;
    padding: 4px 8px;
}

.account-modal-inner {
    background: #fff;
    padding: 24px;
    border-radius: 18px;
    width: min(420px, calc(100% - 32px));
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.account-modal-inner .ues-header {
    margin-bottom: 16px;
}

#account-fields {
    display: grid;
    gap: 20px;
}

.account-modal-inner .ues-header h3 {
    margin: 0;
    line-height: 1.25;
}

#biz-hours-modal {
    padding: clamp(16px, 4vw, 32px);
}

#biz-hours-modal .biz-hours-modal-inner{
    position: relative;
    width: fit-content;
    max-width: 90vw;
    padding: 20px 20px 24px;
    border-radius: 24px;
}

#biz-hours-modal button.biz-hours-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:40px;
    height:40px;
    padding:0;
    border:none;
    border-radius:999px;
    background: transparent;
    color: #2c3137;
    font-size: 2.1rem;
    line-height: 1;
    cursor:pointer;
}

#biz-hours-modal .biz-hours-modal-title {
    margin: 0 48px 18px 0;
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 0.95;
}

#biz-hours-modal .biz-hours-modal-section {
    margin-top: 20px;
}

#biz-hours-modal .biz-hours-modal-heading {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

#biz-hours-modal .biz-hours-modal-phone {
    margin: 0;
    font-size: 1rem;
    color: #20242a;
}

#biz-hours-modal .biz-hours-modal-content {
    overflow: hidden;
}

@media (max-width: 640px) {
    #biz-hours-modal .biz-hours-modal-inner {
        margin: 12px auto;
        padding: 18px 16px 22px;
    }

    #biz-hours-modal .biz-hours-modal-title {
        margin-right: 40px;
        font-size: 2rem;
    }

    .biz-hours-day {
        min-width: 96px;
        flex-basis: 96px;
    }

    .biz-hours-card {
        min-height: 102px;
    }

    .biz-hours-times {
        max-width: 96px;
        font-size: 0.9rem;
    }
}

/* Refund modal styling: center title and items, make items appear as selectable buttons */
#refund-items-sheet .ues-header,
#partpay-items-sheet .ues-header,
#pay-choice-sheet .ues-header {
    text-align: center;
}

#refund-items-sheet .ues-body {
    text-align: center;
    padding: var(--pad-card);
}

#refund-items-sheet .refund-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: var(--pad-btn);
    border: 1px solid var(--button-primary-admin, #6b1f66);
    border-radius: 6px;
    background: var(--button-primary-admin, #6b1f66);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

#refund-items-sheet .refund-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

#refund-items-sheet .refund-qty-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

#refund-items-sheet .refund-qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--button-primary-admin, #6b1f66);
    background: #fff;
    color: var(--button-primary-admin, #6b1f66);
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 120ms ease;
}

#refund-items-sheet .refund-qty-btn:active {
    background: var(--button-primary-admin, #6b1f66);
    color: #fff;
}

#refund-items-sheet .refund-qty-display {
    min-width: 36px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95em;
}

#refund-items-sheet .refund-item-btn .refund-item-name {
    display: block;
    font-weight: 600;
}

#refund-items-sheet .refund-item-btn .refund-item-qty {
    color: rgba(255,255,255,0.7);
    font-size: 90%;
}

#refund-items-sheet .refund-item-btn.selected .refund-item-qty {
    color: #666;
}

#refund-items-sheet .refund-item-btn:not(.selected):hover {
    opacity: 0.95;
    transform: translateY(-2px);
}

#refund-items-sheet .refund-item-btn.selected {
    background: #fff;
    color: var(--button-primary-admin, #6b1f66);
    border-color: var(--button-primary-admin, #6b1f66);
    box-shadow: var(--shadow-sm);
}

/* Refunded badge */
#refund-items-sheet .refunded-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.8em;
    background: rgba(255,255,255,0.9);
    color: var(--button-primary-admin, #6b1f66);
    border: 1px solid rgba(255,255,255,0.6);
    margin-top: -2px;
}

/* inline refunded marker used in order item lists */
.refunded-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.78em;
    background: #f8d7da;
    color: #842029;
    font-weight: 600;
}

#refund-items-sheet .ues-actions.refund-actions {
    text-align: center;
    gap: var(--gap-sm);
    display: flex;
    justify-content: center;
    padding: var(--pad-card);
}

#refund-items-sheet .ues-actions.refund-actions .button-inline {
    margin: 0 6px;
}

/* Part-pay modal — reuse refund modal styles */
#partpay-items-sheet .ues-body { text-align: center; padding: var(--pad-card); }
#partpay-items-sheet .refund-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px;
    padding: 10px 14px;
    border: 1px solid var(--button-primary-admin, #6b1f66);
    border-radius: 6px;
    background: #fff;
    color: var(--button-primary-admin, #6b1f66);
    cursor: pointer;
    min-height: 48px;
    width: calc(100% - 12px);
    text-align: left;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
    box-shadow: var(--shadow-sm);
}
#partpay-items-sheet .refund-item-btn .partpay-left { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: center; }
#partpay-items-sheet .refund-item-btn .refund-item-name { font-weight: 600; }
#partpay-items-sheet .refund-item-btn .refund-item-qty { color: #666; font-size: 90%; }
#partpay-items-sheet .refund-item-btn.selected:hover { opacity: 0.95; transform: translateY(-2px); }
#partpay-items-sheet .refund-item-btn.selected {
    background: var(--button-primary-admin, #6b1f66);
    color: #fff;
    border-color: var(--button-primary-admin, #6b1f66);
    box-shadow: none;
}
#partpay-items-sheet .refund-item-btn.selected .refund-item-qty { color: rgba(255,255,255,0.7); }
#partpay-items-sheet .partpay-totals {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-align: center;
    margin: 8px 0 12px;
    font-size: 1.05em;
    line-height: 1.8;
}
#partpay-items-sheet .partpay-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 12px;
}
#partpay-items-sheet .partpay-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: inherit;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    border: 1px solid rgba(255,255,255,0.4);
}
#partpay-items-sheet .refund-item-btn:not(.selected) .partpay-qty-btn {
    background: rgba(107,31,102,0.12);
    border-color: rgba(107,31,102,0.3);
}
#partpay-items-sheet .partpay-qty-display {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95em;
}
#partpay-items-sheet .ues-actions.refund-actions { text-align: center; gap: var(--gap-sm); display: flex; justify-content: center; padding: var(--pad-card); }
#partpay-items-sheet .ues-actions.refund-actions .button-inline { margin: 0 6px; }

/* Small utility styles for JS-created elements that previously used inline styles */
.pos-relative { position: relative; }

.admin-debug-panel {
    white-space: pre-wrap;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    margin-top: 8px;
    font-size: var(--font-size-caption);
    max-height: 220px;
    overflow: auto;
}

/* Small helpers to replace inline style snippets created by script.js */

/* ── Stripe Embedded Checkout overlay ── */
.stripe-checkout-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  z-index:10000;
  justify-content:center;
  align-items:flex-start;
  overflow-y:auto;
  padding:24px 16px;
}
.stripe-checkout-overlay.on{display:flex}
.stripe-checkout-wrapper{
  position:relative;
  width:100%;
  max-width:500px;
  background:#fff;
  border-radius:12px;
  padding:0 16px 24px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  margin:auto;
}
.stripe-checkout-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  margin:0 -16px 12px;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  background:#fff;
  border-radius:12px 12px 0 0;
  z-index:2;
}
.stripe-checkout-logo{
  height:28px;width:28px;flex-shrink:0;
}
.stripe-checkout-biz{
  font-weight:700;font-size:18px;color:#5a2d82;
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stripe-checkout-close{
  flex:0 0 auto;
  background:none;border:none;
  font-size:22px;line-height:1;
  cursor:pointer;color:#666;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.stripe-checkout-close:hover{color:#222;background:#f0f0f0}
#stripe-checkout-container{min-height:200px}
.stripe-pay-btn{
  display:block;width:100%;
  margin-top:16px;padding:12px;
  background:#635bff;color:#fff;
  border:none;border-radius:6px;
  font-size:16px;font-weight:600;
  cursor:pointer;
}
.stripe-pay-btn:disabled{opacity:.55;cursor:default}
.stripe-pay-btn:hover:not(:disabled){background:#4b45c6}
.stripe-pay-msg{
  margin-top:8px;
  color:#df1b41;font-size:14px;
  min-height:20px;
}
.sheet-error {
    color: #a00;
    margin: 8px 12px;
    display: none;
}
.sheet-error:not(:empty) {
    display: block;
}

/* ── Books tab ──────────────────────────────────────────────────────────── */
.books-section{margin-bottom:12px;padding:16px}
.books-section-title{font-weight:700;font-size:15px;color:#5a2d82;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #e8e0f0}
.books-note{font-size:12px;color:#888;font-style:italic;margin-bottom:8px}
.books-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;gap:8px}
.books-label{flex:1 1 auto;color:#444;font-size:14px}
.books-value{flex:0 0 auto;font-family:monospace;font-size:14px;text-align:right;min-width:80px}
.books-row-total .books-label,.books-row-total .books-value{font-weight:700;font-size:15px}
.books-row-total{padding-top:6px}
.books-row-in .books-label{color:#2a7a2a}
.books-row-out .books-label{color:#b00}
.books-row-memo{padding:0 0 2px 16px;opacity:0.75;font-size:13px}
.books-divider{border:none;border-top:1px solid #ddd;margin:6px 0}
.books-recon-ok .books-value{color:#2a7a2a}
.books-recon-fail .books-value{color:#b00}
/* Journal */
.books-journal{width:100%;margin-top:4px}
.books-j-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px;padding:3px 0;border-bottom:1px solid #f0f0f0;align-items:baseline}
.books-j-header{border-bottom:2px solid #ddd;padding-bottom:5px;margin-bottom:2px}
.books-j-header .books-j-desc,.books-j-header .books-j-dr,.books-j-header .books-j-cr{font-weight:700;font-size:13px;color:#5a2d82}
.books-j-desc{font-size:13px;color:#333}
.books-j-dr,.books-j-cr{font-family:monospace;font-size:13px;text-align:right;white-space:nowrap}
.books-j-dr{color:#1a4fa0}
.books-j-cr{color:#8a1a8a}
.books-j-spacer{height:6px}


.modal-title {
    margin-bottom: 12px;
}

.retry-wrap {
    margin-top: 8px;
}

.inline-row {
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
    flex-wrap: wrap;
}

.mt-8 {
    margin-top: 8px;
}

.image-preview {
    max-width: 360px;
    max-height: 360px;
    overflow: hidden;
    border: 1px solid #ddd;
    padding: 6px;
    background: #fff;
}

.image-preview-img {
    max-width: 100%;
    display: block;
}

#item-edit-sheet #ied-image-preview {
    display: none;
    width: min(280px, 100%);
    aspect-ratio: 1;
    max-width: 100%;
    max-height: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #f6f7f8;
}

#item-edit-sheet #ied-image-preview.has-image {
    display: block;
}

#item-edit-sheet #ied-image-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay[hidden] {
    display: none !important;
}

.directory-create-business-modal .modal-inner {
    background: #fff;
    padding: 20px;
    border-radius: 18px;
    width: min(560px, calc(100% - 32px));
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
    text-align: left;
}

.directory-create-business-modal h3 {
    margin: 0 0 8px;
}

.directory-create-business-modal p {
    margin: 0 0 16px;
    color: #55606b;
}

.directory-create-business-form {
    display: grid;
    gap: 12px;
}

.directory-create-business-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.directory-create-business-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.money-adjust-modal .modal-inner {
    background: #fff;
    padding: 24px;
    border-radius: 18px;
    width: min(420px, calc(100% - 32px));
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.money-adjust-modal .ues-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.money-adjust-modal .ues-header h3 {
    margin: 0;
    line-height: 1.25;
}

button.money-adjust-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    padding: 0;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
}

.money-adjust-form {
    display: grid;
    gap: 14px;
}

.money-adjust-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: var(--font-size-base);
}

.money-adjust-form input {
    padding: 10px 16px;
    border: 1px solid #bbb;
    border-radius: 999px;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    background: #fff;
    outline: none;
}

.money-adjust-form input:focus {
    border-color: #888;
}

.money-adjust-divider {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 6px 0 2px;
}

.money-adjust-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 0;
}

button.money-adjust-cancel-btn {
    background: none;
    border: none;
    color: #333;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    cursor: pointer;
    padding: 8px 4px;
    width: auto;
    min-width: 0;
}

button.money-adjust-save-btn {
    background: var(--button-primary-admin, #790e6e);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 28px;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    width: auto;
    min-width: 0;
}

.money-adjust-op-toggle {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--header-action-fill, #3b3b3b);
    border-radius: 999px;
    overflow: hidden;
}

button.money-op-btn {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: #fff;
    color: var(--header-action-fill, #3b3b3b);
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    cursor: pointer;
    font-weight: 600;
    width: auto;
    border-radius: 0;
}

button.money-op-btn.active {
    background: var(--header-action-fill, #3b3b3b);
    color: #fff;
}

@media (min-width: 641px) {
    #manager-money-adjust-icon {
        margin-right: auto;
    }
}

.qr-modal .modal-inner,
.qr-modal .qr-modal-inner {
    background: #fff;
    padding: 18px;
    border-radius: var(--radius-lg);
    max-width: 420px;
    width: calc(100% - 32px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.qr-target-toggle {
    width: 100%;
    margin: 0 0 14px;
}

.item-desc-modal .idm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.45);
}

.item-desc-modal .idm-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 18px;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.item-desc-modal .idm-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--button-primary-customer);
    color: #fff;
    font-size: var(--font-size-base);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.item-desc-modal .idm-title-wrap {
    margin-bottom: 8px;
}

.item-desc-modal .idm-title {
    font-size: var(--font-size-base);
}

.item-desc-modal .idm-text {
    color: #222;
    line-height: 1.4;
    white-space: pre-wrap;
}

.modal-btn-wrap {
    display: flex;
    gap: var(--gap-sm);
    justify-content: center;
}

.qr-modal button.filter-button.secondary,
.qr-modal .qr-close {
    width: auto;
    min-width: 76px;
    background: #fff !important;
    color: var(--button-primary-admin);
    border: 1px solid var(--button-primary-admin);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.qr-modal button.filter-button.secondary:hover,
.qr-modal .qr-close:hover,
.qr-modal button.filter-button.secondary:focus,
.qr-modal .qr-close:focus {
    background: #fff !important;
}

.qr-image {
    max-width: 300px;
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
}

.qr-input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.qr-download {
    margin-left: 8px;
}

.qr-wrap {
    margin-top: 8px;
}

/* Let JS set tick horizontal position using --left */
.gantt-axis-tick {
    left: var(--left);
}

/* Utility: prefer class-controlled visibility rather than frequent inline style writes */
.hidden {
    display: none !important;
}

/* Small set of helper classes that the JS helper may add when a specific display
type is required (inline-block / block / flex). These are intentionally
named with a js-display- prefix to avoid colliding with existing class names. */

.js-display-inline-block {
    display: inline-block !important;
}

.js-display-block {
    display: block !important;
}

.js-display-flex {
    display: flex !important;
}

/* Popups: allow JS to supply placement via --left/--top (fallback uses left/top). */
.gantt-action-popup {
    left: var(--left, auto);
    top: var(--top, auto);
}

/* Product image min-height is set via --min-h by JS when needed. */
.productimage {
    min-height: var(--min-h, auto);
}

/* User edit sheet: slide from bottom via CSS-controlled transition. JS toggles
the `.ues-open` class to reveal/hide it. */
.user-edit-sheet {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120%;
    /* hidden by default off-screen */
    width: calc(100% - 32px);
    max-width: 760px;
    box-sizing: border-box;
    transition: bottom 280ms ease;
    z-index: 9999;
}

.user-edit-sheet.ues-open {
    bottom: 8px;
}

/* ===== Fix: ensure admin/user edit sheets render consistently =====
There are a couple of older/duplicated rules in this stylesheet that
conflicted (".sheet.ues-open" vs ".user-edit-sheet.ues-open"). That
could leave the sheet visible but mis-positioned or still hidden when
JS only toggles the "ues-open" class. To be robust we force a
consistent, centred slide-up behaviour here and ensure any element
using the "sheet" class also benefits.
*/

/* Diagnostics: deliveries-range .slots-overview panel shown by script.js */
#deliveries-range-summary {
    box-sizing: border-box;
    margin: 8px 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg,#fffef8,#fff9e6);
    border: 1px solid rgba(255,210,77,0.9);
    font-family: monospace, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-size: var(--font-size-sm);
    color: #222;
    max-height: 220px;
    overflow: auto;
}

.deliveries-range-row {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}

.user-edit-sheet,
.table-edit-sheet,
.sheet {
    /* start hidden off-screen */
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: -140%;
    width: calc(100% - 32px);
    max-width: 760px;
    box-sizing: border-box;
    padding: var(--gap-md);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transition: bottom 280ms ease, opacity 200ms ease, transform 200ms ease;
    opacity: 0;
    z-index: 9999;
}

/* When opened, ensure display and positioning are unambiguous */
.user-edit-sheet.ues-open,
.table-edit-sheet.ues-open,
.sheet.ues-open {
    display: block !important;
    bottom: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Prevent background page scrolling while a bottom-sheet is open */
body.or-sheet-open {
    overflow: hidden !important;
}

/* Table group edit: checkbox list for assigning tables */
.vtge-tables-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 0;
}
.vtge-table-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 120px;
    font-size: var(--font-size-body, 14px);
}
.vtge-table-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.vtge-table-checkbox .dummycheckbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--ink, #333);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms, border-color 150ms;
}
.vtge-table-checkbox input[type="checkbox"]:checked + .dummycheckbox {
    background: var(--accent, #7b2d8e);
    border-color: var(--accent, #7b2d8e);
}
.vtge-table-checkbox input[type="checkbox"]:checked + .dummycheckbox::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Small responsive tweak so sheet uses full width on very small screens */
@media (max-width:420px) {
    .user-edit-sheet, .table-edit-sheet, .sheet {
        left: 8px;
        right: 8px;
        transform: none;
        width: calc(100% - 16px);
    }

    .user-edit-sheet.ues-open, .table-edit-sheet.ues-open, .sheet.ues-open {
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
    }

}

/* Deliveries tracker styles */
.deliveries-list,
#orders,
#tableorders-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

#orders,
#tableorders-list {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.delivery-card {
    padding:var(--pad-card);
}

.delivery-card-hdr {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
    min-height:56px;
}

.delivery-eta {
    display:flex;
    align-items:center;
    gap: var(--gap-sm);
    white-space:nowrap;
    margin-left:12px;
}

/* Mobile fix: long edit sheets must scroll when content exceeds viewport height. */
@media (max-width: 768px) {
    .user-edit-sheet.ues-open,
    .table-edit-sheet.ues-open,
    .sheet.ues-open {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

.delivery-ref {
    display:flex;
    align-items:center;
}

.delivery-ref {
    font-weight:600;
}

.delivery-tracker {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0 6px;
    overflow-x: auto;
}

/* ---- step node ---- */
.delivery-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 72px;
}

.step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dde1e7;
    margin-bottom: 7px;
    flex-shrink: 0;
    position: relative;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Completed past steps — filled + checkmark */
.delivery-step.active:not(.current) .step-dot {
    background: #4A90D9;
}
.delivery-step.active:not(.current) .step-dot::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* Current step — pulsing ring */
.delivery-step.current .step-dot {
    background: #2563EB;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2);
    animation: pulse-blue 1.8s ease-in-out infinite;
}
@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22); }
    50%       { box-shadow: 0 0 0 11px rgba(37, 99, 235, 0.0); }
}

/* ---- connector line ---- */
.step-connector {
    flex: 1 1 0;
    height: 3px;
    background: #dde1e7;
    align-self: flex-start;
    margin-top: 10px;   /* (22px dot − 3px line) / 2 = 9.5 → 10 */
    min-width: 12px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.step-connector.active {
    background: #4A90D9;
}
/* shimmer sweep on completed connectors */
.step-connector.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.65) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ---- labels ---- */
.step-label {
    font-size: 0.72rem;
    text-align: center;
    color: #b0b5be;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s, font-weight 0.2s;
}
.delivery-step.active:not(.current) .step-label {
    color: #555;
    font-weight: 600;
}
.delivery-step.current .step-label {
    color: #2563EB;
    font-weight: 700;
}

/* ========== Pickup — green theme ========== */
.delivery-tracker--pickup .delivery-step.active:not(.current) .step-dot { background: #22A37A; }
.delivery-tracker--pickup .delivery-step.current .step-dot {
    background: #16A34A;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.22);
    animation: pulse-green 1.8s ease-in-out infinite;
}
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.22); }
    50%       { box-shadow: 0 0 0 11px rgba(22, 163, 74, 0.0); }
}
.delivery-tracker--pickup .step-connector.active { background: #22A37A; }
.delivery-tracker--pickup .delivery-step.active:not(.current) .step-label { color: #16A34A; }
.delivery-tracker--pickup .delivery-step.current .step-label { color: #16A34A; }

/* ========== Table — admin brand colour theme ========== */
.delivery-tracker--table .delivery-step.active:not(.current) .step-dot { background: var(--button-primary-admin); }
.delivery-tracker--table .delivery-step.current .step-dot {
    background: var(--button-primary-admin);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--button-primary-admin) 22%, transparent);
    animation: pulse-table 1.8s ease-in-out infinite;
}
@keyframes pulse-table {
    0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--button-primary-admin) 22%, transparent); }
    50%       { box-shadow: 0 0 0 11px color-mix(in srgb, var(--button-primary-admin) 0%, transparent); }
}
.delivery-tracker--table .step-connector.active { background: var(--button-primary-admin); }
.delivery-tracker--table .delivery-step.active:not(.current) .step-label { color: var(--button-primary-admin); }
.delivery-tracker--table .delivery-step.current .step-label { color: var(--button-primary-admin); }

.delivery-details {
    margin-top: 4px;
    font-size: var(--font-size-sm);
    text-align: left;
}

.delivery-items {
    text-align: left;
}

.delivery-items p {
    margin: 8px 0 0;
}

.delivery-eta-footer {
    margin-top: 6px;
    text-align: left;
}

#screen-deliveries .delivery-details {
    margin-bottom: 6px;
}

#screen-deliveries .delivery-eta-footer .status-badge {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    display: inline-flex;
    justify-content: flex-start;
}

#screen-deliveries .delivery-eta-footer .status-badge.delivered-range {
    font-weight: 700;
}

/* Stations delivery footer */
.station-delivery-footer {
    margin-top: 0;
}

.station-delivery-footer--delivery {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-left: 4px;
    margin-right: 4px;
}

.station-delivery-footer .station-delivery-address {
    font-weight: 600;
    margin-bottom: 8px;
}

.station-delivery-footer .delivery-details {
    margin-bottom: 6px;
}

.station-delivery-footer .delivery-eta-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.station-delivery-footer .delivery-eta-footer .status-badge {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.station-delivery-footer .delivery-eta-footer .status-badge.eta-range {
    background: transparent;
    color: #000;
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    box-shadow: none;
}

.station-delivery-footer .override-delivery.icon-btn {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #555;
}

.station-delivery-footer .override-delivery.icon-btn:hover {
    background: #f5f5f5;
    border-color: #aaa;
}

/* Scoped overrides to beat any inherited centering */
#screen-deliveries .delivery-card,
#screen-deliveries .delivery-card * {
    text-align: left;
}
#screen-deliveries .step-label {
    text-align: center;
}
#screen-deliveries .delivery-details {
    margin-bottom: 10px;
}

@media (max-width:600px) {
    .delivery-card {
        padding: 10px;
    }

    .delivery-card-hdr .delivery-eta {
        margin-left: 8px;
    }
}

/* Vertical-centering fixes for the deliveries header (right-hand timestamp / badges) */
.delivery-card-hdr .delivery-eta {
    display: flex;
    align-items: center;
    /* center contents vertically via flexbox */
    gap: var(--gap-sm);
    margin-left: 12px;
    .eta-label {
        white-space: nowrap;
        margin-left: 6px;
        font-weight: 600;
    }

    .eta-debug {
        font-family: monospace;
        font-size: var(--font-size-xs);
        color: #666;
        margin-top: 6px;
    }

    align-self: center;
    /* ensure the group sits in the middle of the header */
    height: auto;
    /* let the header's min-height define the box;
    don't force height */
}

.delivery-card-hdr .delivery-eta * {
    display: inline-flex;
    align-items: center;
}

.delivery-card-hdr .delivery-eta .status-badge,
.delivery-card-hdr .delivery-eta .badge,
.delivery-card-hdr .delivery-eta .pill {
    margin-left: 8px;
    vertical-align: middle;
}

.delivery-card-hdr .delivery-eta span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* avoid baseline shifts */
}

/* Ensure header-range is visible and styled consistently */
.header-range {
    display: inline-block !important;
    background: #e6f7ff !important;
    color: #055 !important;
    padding: 3px 8px !important;
    border-radius: var(--radius-pill) !important;
    margin-left: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    z-index: 9999 !important;
}

/* Temporary: hide overlay elements that can occlude header-range during debugging */
.eta-overlay {
    display: none !important;
}

/* ============================
   Dark Mode — follows device preference
   ============================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1d23;
        --surface: #23272e;
        --panel: #23272e;
        --ink: #e0e0e0;
        --textColour: #e0e0e0;
        --muted: #7a8a9e;
        --line: #3a3f4b;
        --accent: #6ea8ff;
        --accent-strong: #6ea8ff;
        --ok-bg: #1a3d2a;
        --ok-fg: #78e8a8;
        --bad-bg: #3d1f1f;
        --bad-fg: #f5a0a0;
        --chip: #2a3040;
        --chip-line: #3a4560;
        --button-primary-admin: #c44fb8;
        --button-primary-customer: #049aaa;
        --no-image-bg: rgba(0,0,0,0.4);
    }

    /* Body / structural */
    html, body {
        color-scheme: dark;
    }

    /* Cards, items, orders — hardcoded #fff overrides */
    .item,
    .order,
    .subscription-tier-card,
    #businesses-list .biz-card,
    .business-card-list .biz-card,
    .slot-btn,
    .gantt-bar.status-arrived,
    .gantt-bar.status-arrived.gantt-bar-group {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--line);
    }

    /* Panels, modals, sheets */
    .modalinner,
    .directory-create-business-modal .modal-inner,
    .qr-modal .modal-inner,
    .item-desc-modal .idm-card,
    .sheet.ues-open,
    .user-edit-sheet,
    .table-edit-sheet,
    .sheet {
        background: var(--surface);
        color: var(--ink);
    }
    .modalinner {
        box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px;
    }

    /* Inputs */
    input, select, textarea,
    input[type="time"], input[type="date"] {
        background: var(--surface);
        color: var(--ink);
        border-color: var(--line);
    }
    select.inherited-station-disabled {
        background: #2a2d33;
        color: #999;
    }
    ::placeholder {
        color: var(--muted);
        opacity: 1;
    }

    /* Buttons — secondary/link keep readability */
    button.secondary {
        color: #c870be;
        border-color: #c870be;
    }
    button.link-button {
        color: #c870be;
    }

    /* Navigation pills and filter bar */
    .pill-btn,
    .filter-btn {
        color: var(--ink);
    }
    .mode-btn {
        background: rgba(255,255,255,0.06);
        color: var(--ink);
    }

    /* Tables */
    .sc-responsive-table table {
        background: var(--surface);
    }
    .sc-responsive-table thead {
        background: #2a2d33;
    }
    .sc-responsive-table tbody tr:nth-child(even) {
        background: rgba(255,255,255,0.03);
    }
    tr.inactive {
        background: #2a2d33;
    }

    /* Feature toggles */
    .feature-toggle {
        background: #2e2e1f;
    }
    .feature-toggle.enabled {
        background: #2e1f3a;
    }
    .feature-toggle .state-badge {
        color: var(--ink);
    }
    .feature-toggle .hint {
        color: var(--muted);
    }
    .subscription-tier-card.is-included {
        background: #2e1f3a;
    }

    /* Status badges */
    .status-badge.delivery {
        background: #1f3860;
        color: #9ac4ff;
    }
    .status-badge.pickup {
        background: #0e3020;
        color: #6fd9a0;
    }
    .status-badge.eta {
        background: #2a2d33;
        color: var(--ink);
    }
    .status-badge.refunded {
        background: #3d1f22;
        color: #f5a0a0;
    }
    .status-badge.sent {
        background: #2a2d33;
        color: #bbb;
    }
    .status-badge.delivered {
        background: #0e3020;
        color: #6fd9a0;
    }
    .status-badge.unpaid {
        background: #3d3520;
        color: #e8d870;
    }
    .status-badge.paid {
        background: #0e3020;
        color: #6fd9a0;
    }
    .pill-badge {
        background: #1f3040;
        color: #8ac0e8;
    }
    .item-veg-badge {
        background: #1a3a22;
        color: #80d898;
    }
    .item-vegan-badge {
        background: #153320;
        color: #6dcc8a;
    }
    .item-spice-badge { color: #e07050; }
    .item-spice-mild   { background: #3a2218; color: #d07828; }
    .item-spice-medium { background: #3d1e18; color: #d05030; }
    .item-spice-hot    { background: #3f1812; color: #c83020; }
    .spice-dot { background: #4a3a36; }
    .spice-dot--on:nth-child(1){ background: #d4761a; }
    .spice-dot--on:nth-child(2){ background: #c03a18; }
    .spice-dot--on:nth-child(3){ background: #a01818; }
    .refunded-inline {
        background: #3d1f22;
        color: #f5a0a0;
    }
    .order-override-pill {
        background: linear-gradient(135deg, #3a3520, #3a3010);
        color: #e8d870;
    }

    /* Gantt / bookings */
    .gantt-bar.status-rejected {
        background: var(--bad-bg);
    }
    .gantt-bar.gantt-bar-group {
        background: #1f2d50;
    }

    /* Product images placeholder */
    .productimage {
        background: #2a3a40;
    }

    /* Network indicators */
    #network-indicator {
        background: rgba(255,255,255,0.04);
    }
    #network-indicator.network-online {
        background: rgba(46,204,113,0.08);
    }
    #network-indicator.network-offline {
        background: rgba(231,76,60,0.06);
    }
    .network-offline-banner {
        background: #3d1f1f;
        color: #f5a0a0;
    }

    /* Activated business card */
    #businesses-list .biz-card.activated-business-card,
    .business-card-list .biz-card.activated-business-card {
        background: var(--surface) !important;
        box-shadow: 0 2px 8px rgba(154, 46, 142, 0.15);
        color: var(--ink);
    }
    .business-activated-pill {
        background: var(--button-primary-admin) !important;
        border-color: transparent !important;
    }

    /* Misc text overrides for hardcoded colors */
    .receipt-footer { color: #aaa; }
    .receipt-company { color: var(--ink); }
    .opening-screen .hint { color: rgba(255,255,255,0.5); }
    .directory-empty-copy { color: #9aa0a8; }
    .directory-create-business-modal p { color: #9aa0a8; }
    .item-desc-modal .idm-text { color: var(--ink); }
    #deliveries-range-summary { color: var(--ink); }
    .refund-item-btn .refund-item-qty { color: #aaa; }

    /* Scrollbar — subtle dark */
    ::-webkit-scrollbar {
        background: var(--bg);
    }
    ::-webkit-scrollbar-thumb {
        background: #3a3f4b;
        border-radius: 4px;
    }

    /* Logo invert for dark bg */
    header #logo img {
        filter: invert(1) brightness(1.8);
    }

    /* Directory search container */
    #businesses-results.panel {
        background: var(--surface);
        border-color: var(--line);
        box-shadow: none;
    }

    /* Slots Gantt chart */
    .slots-gantt {
        background: var(--surface);
        border-color: var(--line);
    }


    .gantt-axis,
    .gantt-row-label,
    .gantt-row-lane {
        background: rgba(255,255,255,0.04);
        border-color: var(--line);
        box-shadow: none;
    }
    .gantt-axis-tick::after {
        background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    }
    .gantt-bar {
        box-shadow: none;
    }
    .gantt-bar.status-arrived {
        background: #1d2330;
        color: #efe3ff;
        border-color: #b892ff;
    }
    .gantt-bar.status-arrived .gantt-bar-party {
        background: #b892ff;
        color: #101318;
        border-color: #b892ff;
    }
    .gantt-now-line::before {
        background: #f5f5f5;
        color: #111827;
    }

    /* Admin action icon buttons */
    .admin-action-btn, .refund-station, .tableorder-receipt-btn {
        background: var(--surface) !important;
        border-color: var(--line) !important;
    }
    .admin-action-btn img, .refund-station img, .tableorder-receipt-btn img {
        filter: invert(1);
    }
    .stripe-action-btn {
        background: var(--surface) !important;
        border-color: var(--line) !important;
    }

    /* Gantt booking popup */
    .gantt-action-popup {
        background: var(--surface);
        border-color: var(--line);
        box-shadow: 0 6px 18px rgba(0,0,0,0.4);
        color: var(--ink);
    }
    .gantt-action-popup .gantt-popup-details {
        color: var(--muted);
    }

    /* Opening / splash screen */
    .opening-screen {
        background-color: #1a1d23;
    }
    .opening-screen .overlay {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    }
    .opening-btn.secondary {
        background: rgba(30,33,40,0.92);
        color: #c870be;
    }

    /* Logged-in banner — lighten the user icon for dark bg */
    .login-banner.logged-in {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 21C19 17.134 15.866 14 12 14C8.13401 14 5 17.134 5 21M12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7C16 9.20914 14.2091 11 12 11Z' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* Info button — lighten the icon for dark bg */
    .biz-hours-info-btn,
    .item .desc-btn {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 11V16M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21ZM12.0498 8V8.1L11.9502 8.1002V8H12.0498Z' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    /* Favourite hearts — remove white background rect for dark mode */
    .fav-btn img[src*="fav-off"] {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7.15428C10 2.45984 3 2.95984 3 8.95987C3 14.9599 12 19.9601 12 19.9601C12 19.9601 21 14.9599 21 8.95987C21 2.95984 14 2.45984 12 7.15428Z' fill='%23404550'/%3E%3C/svg%3E");
    }
    .fav-btn img[src*="fav-on"] {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7.15428C10 2.45984 3 2.95984 3 8.95987C3 14.9599 12 19.9601 12 19.9601C12 19.9601 21 14.9599 21 8.95987C21 2.95984 14 2.45984 12 7.15428Z' fill='%2302B1C4'/%3E%3C/svg%3E");
    }

    /* Cart +/- and bin icons — lighten for dark backgrounds */
    .cart li .adjustnumber button:first-of-type {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12H18' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .cart li .adjustnumber button.inc {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12H12M12 12H18M12 12V18M12 12V6' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .cart li button:nth-of-type(1) {
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V17M10 10V17M6 6V17.8C6 18.9201 6 19.4798 6.21799 19.9076C6.40973 20.2839 6.71547 20.5905 7.0918 20.7822C7.5192 21 8.07899 21 9.19691 21H14.8031C15.921 21 16.48 21 16.9074 20.7822C17.2837 20.5905 17.5905 20.2839 17.7822 19.9076C18 19.4802 18 18.921 18 17.8031V6M6 6H8M6 6H4M8 6H16M8 6C8 5.06812 8 4.60241 8.15224 4.23486C8.35523 3.74481 8.74432 3.35523 9.23438 3.15224C9.60192 3 10.0681 3 11 3H13C13.9319 3 14.3978 3 14.7654 3.15224C15.2554 3.35523 15.6447 3.74481 15.8477 4.23486C15.9999 4.6024 16 5.06812 16 6M16 6H18M18 6H20' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    label.checkbox input[type="checkbox"]:checked~.dummycheckbox {
        filter: invert(1);
    }
}


/* -- Toast notification ------------------------------- */
#or-toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    background: #333;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    text-align: center;
    white-space: pre-line;
    word-break: break-word;
    color: #fff;
}
#or-toast.or-toast-show   { opacity: 1; transform: translateY(0); }
#or-toast.or-toast-error   { background: #c33; color: #fff; }
#or-toast.or-toast-success { background: color-mix(in srgb, var(--button-primary-admin) 12%, white); color: var(--button-primary-admin); }
#or-toast.or-toast-info    { background: #555; color: #fff; }

/* Sitting / paid timestamp in order group headers */
.sitting-paid-time { font-size: 0.8em; font-weight: 400; }

/* Bill split totals in part-pay panel */
.bill-total   { color: #790e6e; }
.bill-paying  { color: #02B1C4; }
.bill-unpaid  { color: #fff; }

/* Cash payment modal */
.or-cash-modal .ues-header { margin: 0 0 12px; }
.or-cash-modal .ues-row p  { margin: 0 0 8px; }
.or-cash-change            { margin: 8px 0; font-weight: 600; }

/* Banknote quick-add grid */
.or-cash-total {
    margin: 0 0 12px;
}

.or-cash-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 4px;
}

/* Landscape banknote shape */
.or-note-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 56px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0 14px 0 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.08s, box-shadow 0.08s;
}

.or-note-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Coloured left stripe (like the polymer window band) */
.or-note-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 28%;
    opacity: 0.55;
}

/* £5 — teal (Churchill note) */
.or-note-5  { background: #d4ede8; }
.or-note-5::before  { background: #1a7a6a; }
.or-note-5 .or-note-val  { color: #0d4d42; }

/* £10 — warm orange (Austen note) */
.or-note-10 { background: #fde8d0; }
.or-note-10::before { background: #c85a00; }
.or-note-10 .or-note-val { color: #7a3400; }

/* £20 — purple (Turner note) */
.or-note-20 { background: #e8d8f0; }
.or-note-20::before { background: #7030a0; }
.or-note-20 .or-note-val { color: #4a1a70; }

/* £50 — red (Watt & Boulton note) */
.or-note-50 { background: #fad8d8; }
.or-note-50::before { background: #b01010; }
.or-note-50 .or-note-val { color: #700808; }

.or-note-val {
    position: relative;
    font-size: 1.25rem;
    font-weight: 800;
    pointer-events: none;
    letter-spacing: -0.5px;
}

/* Confirm / prompt / cash-payment: shared white card inner */
.or-confirm-modal .modal-inner,
.or-prompt-modal .modal-inner,
.or-cash-modal .modal-inner {
    background: #fff;
    padding: 24px;
    border-radius: 18px;
    width: min(420px, calc(100% - 32px));
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}

.or-confirm-message {
    margin: 0 0 20px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.or-confirm-modal .ues-actions,
.or-prompt-modal .ues-actions,
.or-cash-modal .ues-actions {
    justify-content: flex-end;
    margin-top: 20px;
    gap: 12px;
}

.or-cash-modal #or-cash-confirm:disabled {
    opacity: 0.45;
    filter: grayscale(0.4);
    cursor: not-allowed;
    pointer-events: none;
}

/* Service charge edit button inline in total row */
.sc-edit-btn.icon-btn {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 5px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}
.sc-edit-btn.icon-btn:hover { background: #f5f5f5; border-color: #aaa; }
.sc-total-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 2px 0;
}

/* SC edit modal layout */
.or-sc-edit-modal .or-sc-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
}
.or-sc-edit-modal .or-sc-row span {
    font-size: 0.85em;
    color: var(--muted, #666);
    margin-bottom: 4px;
}
.or-sc-edit-modal .or-sc-row .ues-input {
    width: 100%;
    box-sizing: border-box;
}
.or-sc-revised {
    display: none;
}