/* ==================================================================
Nano POS — Cashier Interface
------------------------------------------------------------------
Hooks read or toggled by public/assets/js/website.js must keep their
names: .item-card .root-card .held-order-card .order-item .badges-wrapper
.attributes-wrapper .note-display .control-wrapper .qty-btn .qty-input
.dining-table .busy .available .loading-cover, plus every #id used by
renderOrder()/renderMenu()/PaymentManager/DineInManager/TablesMonitor/
HeldOrdersMonitor.
================================================================== */

/* --------------------------------------------------
Design Tokens
-------------------------------------------------- */
:root {
    --pos-gap: 0.75rem;
    --pos-radius: 0.875rem;
    --pos-radius-sm: 0.625rem;
    --pos-cart-width: 23rem;
    --pos-touch: 2.375rem;

    --pos-surface: var(--tblr-bg-surface);
    --pos-sunken: color-mix(in srgb, var(--tblr-body-color) 3%, transparent);
    --pos-hover: color-mix(in srgb, var(--tblr-body-color) 6%, transparent);
    --pos-border: var(--tblr-border-color);
    --pos-tint: color-mix(in srgb, var(--tblr-primary) 10%, transparent);
    --pos-shadow: 0 1px 2px rgba(var(--tblr-body-color-rgb), 0.05);
    --pos-shadow-lift: 0 0.5rem 1.25rem -0.5rem rgba(var(--tblr-body-color-rgb), 0.22);
}

/* --------------------------------------------------
App Shell — full viewport, panes scroll independently
-------------------------------------------------- */
body.pos-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.pos-page > main.page,
body.pos-page .page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

body.pos-page .page-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-block: 0 !important;
    padding: 0;
}

#pos-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pos-cart-width);
    gap: var(--pos-gap);
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--pos-gap);
}

.pos-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background-color: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow);
    overflow: hidden;
}

.pos-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* --------------------------------------------------
Category Rail (root categories)
-------------------------------------------------- */
.pos-rail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    max-height: 10rem;
    gap: 0.5rem;
    padding: var(--pos-gap);
    border-bottom: 1px solid var(--pos-border);
    flex-shrink: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pos-rail:empty {
    display: none;
}

.root-card {
    --tile-bg: transparent;
    --tile-fg: inherit;

    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 8.5rem;
    width: max-content;
    padding: 0.5rem 0.875rem;
    background-color: var(--tile-bg);
    color: var(--tile-fg);
    border: 1px solid var(--pos-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover/active tints layer as a background-image so a category that carries
   its own background_color keeps that color instead of being painted over. */
.root-card:hover {
    border-color: var(--tblr-primary);
    background-image: linear-gradient(var(--pos-hover), var(--pos-hover));
}

.root-card.active {
    border-color: var(--tblr-primary);
    box-shadow: inset 0 0 0 2px var(--tblr-primary);
}

.root-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--pos-sunken);
    font-size: 0.8125rem;
}

.root-card.active .root-card-icon {
    background-color: var(--tblr-primary);
    color: #fff;
}

.root-card-title {
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* --------------------------------------------------
Menu Toolbar (breadcrumb + search)
-------------------------------------------------- */
.pos-toolbar {
    display: flex;
    align-items: center;
    gap: var(--pos-gap);
    padding: 0.625rem var(--pos-gap);
    border-bottom: 1px solid var(--pos-border);
    background-color: var(--pos-sunken);
    /* Same reasoning as .pos-rail above: don't let #items-container's growth compress
       the toolbar instead of just scrolling past it. */
    flex-shrink: 0;
}

.pos-toolbar .breadcrumb {
    margin: 0;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: 0.875rem;
}

.pos-toolbar .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-search {
    flex: 0 0 auto;
    width: min(22rem, 45%);
    margin-inline-start: auto;
}

.pos-search .form-control {
    height: var(--pos-touch);
    border-inline-start: 0;
}

.pos-search .input-group-text {
    background-color: var(--tblr-bg-forms, var(--pos-surface));
}

.pos-search kbd {
    font-size: 0.6875rem;
}

/* --------------------------------------------------
Menu Tiles
-------------------------------------------------- */
#items-container {
    display: flex;
    flex-wrap: wrap;
    /* start, not stretch: rows keep their natural height instead of being
       spread over the full pane when there are only a few items. */
    align-content: start;
    gap: var(--pos-gap);
    padding: var(--pos-gap);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.item-card {
    --tile-bg: var(--pos-surface);
    --tile-fg: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    width: max-content;
    padding: 0.875rem 0.75rem;
    min-height: 8.25rem;
    background-color: var(--tile-bg);
    color: var(--tile-fg);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    box-shadow: var(--pos-shadow);
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-card:hover {
    border-color: var(--tblr-primary);
    box-shadow: var(--pos-shadow-lift);
    /* layered, not replaced — keeps a product's own background_color */
    background-image: linear-gradient(var(--pos-hover), var(--pos-hover));
}

.item-card:active {
    transform: scale(0.975);
}

.item-card.active {
    border-color: var(--tblr-primary);
    box-shadow: inset 0 0 0 1px var(--tblr-primary);
}

.item-card.disabled,
.root-card.disabled {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.item-card-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--pos-sunken);
    color: var(--tblr-primary);
    font-size: 1.125rem;
}

.item-card[data-type='category'] .item-card-icon {
    color: var(--tblr-orange);
}

.item-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.item-card-price {
    margin: auto 0 0;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background-color: var(--pos-tint);
    color: var(--tblr-primary);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.item-card-price.is-manual {
    background-color: var(--pos-sunken);
    color: var(--tblr-secondary);
    font-weight: 600;
}

.item-card-sku {
    margin: 0;
    font-size: 0.75rem;
    color: var(--tblr-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pos-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--tblr-secondary);
    text-align: center;
}

.pos-empty i {
    font-size: 2rem;
    opacity: 0.45;
}

/* --------------------------------------------------
Cart Pane — header
-------------------------------------------------- */
.pos-cart-head {
    flex: 0 0 auto;
    padding: var(--pos-gap);
    border-bottom: 1px solid var(--pos-border);
}

.pos-cart-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pos-cart-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.pos-cart-title i {
    color: var(--tblr-primary);
}

.pos-cart-head-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pos-cart-head-actions .btn {
    --tblr-btn-padding-y: 0.375rem;
    min-height: var(--pos-touch);
}

.pos-cart-head-actions .btn-icon {
    width: var(--pos-touch);
    padding-inline: 0;
}

/* Order meta chips — redot-visibility toggles inline display on each
   chip, so the default must be an inline-level box and the vertical
   spacing has to sit on the chips (not the row) to avoid dead space
   while every chip is hidden. */
.pos-order-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.375rem;
    row-gap: 0;
}

.pos-meta-chip {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background-color: var(--pos-sunken);
    color: var(--tblr-body-color);
    font-size: 0.75rem;
    line-height: 1.4;
}

.pos-meta-chip i {
    color: var(--tblr-secondary);
    font-size: 0.6875rem;
}

.pos-meta-chip span {
    font-weight: 600;
}

/* --------------------------------------------------
Order Type Switcher (segmented)
-------------------------------------------------- */
#order-types {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.625rem;
    padding: 0.25rem;
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-sunken);
}

#order-types .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    border: 0;
    border-radius: calc(var(--pos-radius-sm) - 0.25rem);
    background-color: transparent;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

#order-types .btn:hover {
    background-color: var(--pos-hover);
    color: var(--tblr-body-color);
}

#order-types .btn.active {
    background-color: var(--pos-surface);
    color: var(--tblr-primary);
    box-shadow: var(--pos-shadow);
}

#order-types .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------
Held Orders
-------------------------------------------------- */
#held-orders-container {
    flex: 0 0 auto;
    padding: 0.625rem var(--pos-gap);
    border-bottom: 1px solid var(--pos-border);
}

.pos-section-label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--tblr-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.held-list {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.held-order-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    flex: 0 0 auto;
    width: max-content;
    min-width: 8rem;
    max-width: 14rem;
    scroll-snap-align: start;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-sunken);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.held-order-card:hover {
    border-color: var(--tblr-primary);
    background-color: var(--pos-tint);
}

.held-order-card-number {
    font-weight: 700;
}

.held-order-card-context {
    text-align: end;
    color: var(--tblr-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.held-order-card-time {
    text-align: end;
    color: var(--tblr-secondary);
}

.held-order-card-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tblr-secondary);
}

/* Inline placeholder for horizontally scrolling strips (rail, held list) */
.pos-inline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    align-self: center;
    padding-block: 0.25rem;
    color: var(--tblr-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* --------------------------------------------------
Order Items List
-------------------------------------------------- */
#order-items-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--pos-gap);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

#order-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#no-order-state,
#empty-items-state {
    margin: auto 0;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--tblr-secondary);
}

#no-order-state i,
#empty-items-state i {
    opacity: 0.4;
}

.order-item {
    position: relative;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--pos-border);
    border-inline-start-width: 3px;
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-surface);
    transition: border-color 0.15s ease;
}

.order-item.printed {
    border-inline-start-color: var(--tblr-success);
}

.order-item.voided {
    border-inline-start-color: var(--tblr-danger);
    background-color: color-mix(in srgb, var(--tblr-danger) 6%, transparent);
    opacity: 0.7;
}

.order-item.voided .order-item-title,
.order-item.voided .order-item-total {
    text-decoration: line-through;
}

.order-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.375rem;
}

.order-item-title {
    margin: 0;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badges-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.pos-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

.pos-badge-info {
    background-color: color-mix(in srgb, var(--tblr-azure) 14%, transparent);
    color: var(--tblr-azure);
}

.pos-badge-success {
    background-color: color-mix(in srgb, var(--tblr-success) 14%, transparent);
    color: var(--tblr-success);
}

.pos-badge-danger {
    background-color: color-mix(in srgb, var(--tblr-danger) 14%, transparent);
    color: var(--tblr-danger);
}

.item-note-btn {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    font-size: 0.75rem;
    line-height: 1;
}

.item-note-btn:hover {
    background-color: var(--pos-hover);
}

.note-display:not(:empty) {
    margin-top: 0.25rem;
    padding: 0.25rem 0.4375rem;
    border-radius: var(--pos-radius-sm);
    background-color: color-mix(in srgb, var(--tblr-yellow) 12%, transparent);
    color: var(--tblr-body-color);
    font-size: 0.75rem;
    font-style: italic;
}

.order-item-price {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.order-item-price .unit {
    color: var(--tblr-primary);
    font-weight: 600;
}

.order-item-price .charge {
    margin-inline-start: 0.375rem;
    color: var(--tblr-secondary);
    font-size: 0.6875rem;
}

.order-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.order-item-total {
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Quantity stepper */
.control-wrapper {
    display: flex;
    align-items: center;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 999px;
    background-color: var(--pos-sunken);
}

.qty-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--pos-surface);
    box-shadow: var(--pos-shadow);
    font-size: 0.75rem;
    line-height: 1;
}

.qty-btn.minus {
    color: var(--tblr-danger);
}

.qty-btn.plus {
    color: var(--tblr-success);
}

.qty-btn:hover:not(.disabled):not(:disabled) {
    background-color: var(--pos-hover);
}

.qty-btn.disabled,
.qty-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.qty-input {
    width: 2.25rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: none;
}

.qty-input:focus {
    outline: none;
    box-shadow: none;
    background-color: transparent;
}

.qty-static {
    padding-inline: 0.75rem;
    font-weight: 700;
    color: var(--tblr-danger);
}

/* --------------------------------------------------
Invoice Footer (totals + actions)
-------------------------------------------------- */
#invoice-footer {
    flex: 0 0 auto;
    padding: var(--pos-gap);
    border-top: 1px solid var(--pos-border);
    background-color: var(--pos-sunken);
}

.summary {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--tblr-secondary);
}

.summary-row .summary-value {
    font-weight: 600;
    color: var(--tblr-body-color);
    white-space: nowrap;
}

.summary-row.is-discount .summary-value {
    color: var(--tblr-success);
}

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--pos-border);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
}

.summary-total .summary-value {
    color: var(--tblr-primary);
    white-space: nowrap;
}

.pos-cart-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pos-cart-actions .dropdown > .btn {
    height: 100%;
    min-height: 3rem;
}

[actions-dropdown] .dropdown-item {
    padding-block: 0.5rem;
}

.pos-pay-btn {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.0625rem;
    min-height: 3rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.pos-pay-btn small {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: none;
}

/* --------------------------------------------------
Payment Modal
-------------------------------------------------- */
.pos-remaining {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-sunken);
}

.pos-remaining-label {
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pos-remaining-value {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

#payment-breakdown:empty::after {
    content: attr(data-empty-text);
    display: block;
    padding: 0.875rem;
    border: 1px dashed var(--pos-border);
    border-radius: var(--pos-radius-sm);
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

/* --------------------------------------------------
Sections & Dining Tables (cloned into jquery-confirm)
-------------------------------------------------- */
.pos-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-gap);
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pos-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.pos-modal-title i {
    color: var(--tblr-primary);
}

.pos-modal-section + .pos-modal-section {
    margin-top: 1.25rem;
}

#table-search {
    width: min(20rem, 100%);
    height: var(--pos-touch);
}

.held-orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.held-orders-search-group {
    flex: 1 1 16rem;
}

.held-orders-type-filter {
    width: auto;
    min-width: 10rem;
}

#sections-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}

.section-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--pos-border);
    border-radius: 999px;
    background-color: var(--pos-surface);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.section-card:hover {
    border-color: var(--tblr-primary);
    background-color: var(--pos-hover);
}

.section-card.active {
    border-color: var(--tblr-primary);
    background-color: var(--pos-tint);
    color: var(--tblr-primary);
    box-shadow: inset 0 0 0 1px var(--tblr-primary);
}

.pos-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--tblr-secondary);
    font-size: 0.75rem;
}

.pos-legend-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.3125rem;
    border-radius: 50%;
}

.pos-legend-dot.is-available {
    background-color: var(--tblr-success);
}

.pos-legend-dot.is-busy {
    background-color: var(--tblr-danger);
}

#dining-tables-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dining-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-surface);
    box-shadow: var(--pos-shadow);
    transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dining-table:not(.busy):hover {
    border-color: var(--tblr-primary);
    box-shadow: var(--pos-shadow-lift);
}

.dining-table:not(.busy):active {
    transform: scale(0.975);
}

.dining-table img.table-icon {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
}

.dining-table-number {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.dining-table-status {
    font-size: 0.6875rem;
    font-weight: 600;
}

.dining-table.available {
    border-color: color-mix(in srgb, var(--tblr-success) 45%, var(--pos-border));
}

.dining-table.available .dining-table-status {
    color: var(--tblr-success);
}

.dining-table.busy {
    border-color: color-mix(in srgb, var(--tblr-danger) 45%, var(--pos-border));
    background-color: color-mix(in srgb, var(--tblr-danger) 5%, transparent);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}

.dining-table.busy .dining-table-status {
    color: var(--tblr-danger);
}

.dining-table.selected {
    border-color: var(--tblr-primary);
    background-color: var(--pos-tint);
    box-shadow: inset 0 0 0 1px var(--tblr-primary);
}

/* Both state variants stay hidden until JS has resolved availability,
   so a freshly cloned table never flashes two icons/labels at once. */
.dining-table .busy-img,
.dining-table .available-img,
.dining-table .dining-table-status {
    display: none;
}

.dining-table.busy .busy-img,
.dining-table.busy .status-busy,
.dining-table.available .available-img,
.dining-table.available .status-available {
    display: block;
}

.loading-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--tblr-bg-surface) 80%, transparent);
    backdrop-filter: blur(2px);
    border-radius: var(--pos-radius-sm);
    z-index: 10;
}

/* --------------------------------------------------
POS Navbar
-------------------------------------------------- */
.pos-navbar {
    flex: 0 0 auto;
    gap: var(--pos-gap);
    padding: 0.5rem var(--pos-gap);
    border-bottom: 1px solid var(--pos-border);
    background-color: var(--pos-surface);
    box-shadow: var(--pos-shadow);
}

.pos-navbar-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.pos-navbar-toggle {
    display: grid;
    place-items: center;
    width: var(--pos-touch);
    height: var(--pos-touch);
    flex: 0 0 auto;
    border-radius: var(--pos-radius-sm);
    color: var(--tblr-body-color);
    font-size: 1.125rem;
    text-decoration: none;
}

.pos-navbar-toggle:hover {
    background-color: var(--pos-hover);
    color: var(--tblr-primary);
}

.pos-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    flex: 0 0 auto;
    min-width: 0;
    height: var(--pos-touch);
    padding-inline: 0.75rem;
    border: 1px solid var(--pos-border);
    border-radius: 999px;
    background-color: var(--pos-sunken);
    font-size: 0.8125rem;
    line-height: 1;
    white-space: nowrap;
}

.pos-chip > i {
    color: var(--tblr-secondary);
    font-size: 0.75rem;
}

.pos-chip-strong {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-chip-divider {
    width: 1px;
    height: 0.875rem;
    background-color: var(--pos-border);
}

.pos-chip-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pos-navbar .nav-link {
    height: var(--pos-touch);
    display: inline-flex;
    align-items: center;
    border-radius: var(--pos-radius-sm);
    padding-inline: 0.625rem;
}

.pos-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--pos-touch);
    padding-inline: 0.875rem;
    border: 1px solid color-mix(in srgb, var(--tblr-danger) 35%, var(--pos-border));
    border-radius: 999px;
    background-color: transparent;
    color: var(--tblr-danger);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.pos-logout:hover {
    background-color: color-mix(in srgb, var(--tblr-danger) 10%, transparent);
    color: var(--tblr-danger);
}

.pos-login {
    border-color: color-mix(in srgb, var(--tblr-success) 35%, var(--pos-border));
    color: var(--tblr-success);
}

.pos-login:hover {
    background-color: color-mix(in srgb, var(--tblr-success) 10%, transparent);
    color: var(--tblr-success);
}

/* --------------------------------------------------
POS Offcanvas
-------------------------------------------------- */
.pos-offcanvas .offcanvas-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--tblr-body-color);
}

.pos-offcanvas .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border: 0;
    color: var(--tblr-body-color);
    text-decoration: none;
}

.pos-offcanvas .list-group-item i {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-sunken);
    color: var(--tblr-primary);
    font-size: 0.875rem;
}

.pos-offcanvas .list-group-item:hover,
.pos-offcanvas .list-group-item:active {
    color: var(--tblr-body-color);
    text-decoration: none;
    background-color: var(--pos-hover) !important;
}

/* --------------------------------------------------
Shared Utilities (also used by shift/summary views)
-------------------------------------------------- */
.card-link {
    text-decoration: none;
    color: inherit;
}

.dashed-divider {
    border-top: 1px dashed var(--pos-border);
}

.dashed-divider-dark {
    border-top: 2px dashed var(--tblr-gray-600);
}

[orders-datatable-container] tr {
    cursor: pointer;
}

[orders-datatable-container] tr:hover {
    --tblr-table-color-state: var(--tblr-table-active-color);
    --tblr-table-bg-state: var(--tblr-table-active-bg);
}

[order-items-datatable-container] tr.voided {
    opacity: 0.6;
    text-decoration: line-through;
}

/* --------------------------------------------------
Touch terminals — grow every hit target
-------------------------------------------------- */
@media (pointer: coarse) {
    .pos-page {
        --pos-touch: 2.75rem;
    }

    .qty-btn {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }

    .qty-input {
        width: 2.75rem;
        font-size: 1.0625rem;
    }

    .item-card {
        min-height: 9rem;
    }

    .item-card-title {
        font-size: 1rem;
    }

    #order-types .btn {
        min-height: 2.625rem;
        font-size: 0.875rem;
    }

    .held-order-card {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }

    .item-note-btn {
        width: 2rem;
        height: 2rem;
    }

    .pos-cart-actions .dropdown > .btn,
    .pos-pay-btn {
        min-height: 3.5rem;
    }
}

/* --------------------------------------------------
Responsive — stack panes and restore page scrolling
-------------------------------------------------- */
@media (max-width: 1400px) {
    .pos-page {
        --pos-cart-width: 21rem;
    }
}

@media (max-width: 991.98px), (max-height: 600px) {
    body.pos-page {
        height: auto;
        overflow: visible;
    }

    body.pos-page > main.page,
    body.pos-page .page-wrapper,
    body.pos-page .page-body {
        height: auto;
        min-height: 0;
    }

    #pos-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-pane {
        max-height: none;
    }

    #items-container,
    #order-items-container {
        overflow-y: visible;
    }

    #order-items-container {
        min-height: 8rem;
    }

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

    .pos-search {
        width: 100%;
        margin-inline-start: 0;
    }
}