/* ==========================================================================
   TableTap app.css - shared components built on tokens.css (`--tt-*`).
   Mobile-first: base styles target phones; `@media (min-width: 768px)` and
   `(min-width: 1280px)` add tablet/desktop enhancements (see tokens.css).
   Load order in layouts: bootstrap.min.css → tokens.css → app.css →
   shared-toast.css → scoped bundle → page `Styles` section.
   This is a design system, not a page skin - page-specific styling belongs
   in page CSS or the Stage 2 page reworks.
   ========================================================================== */

/* ---- Base ---- */
html {
    font-size: 14px;
    /* Sticky-footer contract: the scoped _Layout.cshtml.css positions .footer
       absolute at the bottom of <html>; body reserves its 60px height below. */
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px; /* clears the absolute .footer from _Layout.cshtml.css */
    font-family: var(--tt-font-family);
    line-height: var(--tt-line-height-normal);
    background-color: var(--tt-color-bg);
    color: var(--tt-color-text);
    -webkit-tap-highlight-color: transparent;
}

/* Visible focus rings (ported from legacy site.css, token-based) */
.btn:focus-visible,
.btn-link.nav-link:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.tt-btn:focus-visible,
.tt-icon-btn:focus-visible,
.tt-card:focus-visible,
.tt-table [role="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15rem var(--tt-color-surface), 0 0 0 0.35rem var(--tt-color-focus-ring);
}

/* ---- Page structure ---- */
.tt-container {
    width: 100%;
    max-width: var(--tt-content-max-width);
    margin-inline: auto;
    padding-inline: var(--tt-space-4);
}

.tt-section {
    margin-block-end: var(--tt-space-6);
}

.tt-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-space-3);
    margin-block-end: var(--tt-space-5);
}

.tt-page-header__title {
    margin: 0;
    font-size: var(--tt-font-size-2xl);
    font-weight: var(--tt-font-weight-bold);
    line-height: var(--tt-line-height-tight);
    letter-spacing: -0.01em;
}

.tt-page-header__subtitle {
    margin: var(--tt-space-1) 0 0;
    font-size: var(--tt-font-size-sm);
    color: var(--tt-color-text-muted);
}

.tt-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-2);
    margin-inline-start: auto;
}

/* ---- Cards ---- */
.tt-card {
    display: block;
    background-color: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: var(--tt-space-4);
}

.tt-card + .tt-card {
    margin-block-start: var(--tt-space-3);
}

/* Inside a card list the grid gap already provides the spacing */
.tt-card-list > .tt-card + .tt-card {
    margin-block-start: 0;
}

.tt-card__title {
    margin: 0;
    font-size: var(--tt-font-size-lg);
    font-weight: var(--tt-font-weight-semibold);
}

.tt-card__meta {
    font-size: var(--tt-font-size-sm);
    color: var(--tt-color-text-muted);
}

/* Card list: cards on mobile; comfortable, denser rows on desktop */
.tt-card-list {
    display: grid;
    gap: var(--tt-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .tt-card-list .tt-card {
        display: flex;
        align-items: center;
        gap: var(--tt-space-4);
        padding-block: var(--tt-space-3);
    }
}

/* ---- Responsive data table ----
   Markup contract: <table class="tt-table">, each <td> carries a
   data-label="Column name" attribute. Below 768px the table collapses
   into stacked cards, one per row, with data-label shown as the field
   label (matches the Staff _TableCard pattern). */
.tt-table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 767.98px) {
    .tt-table,
    .tt-table thead,
    .tt-table tbody,
    .tt-table tr,
    .tt-table td {
        display: block;
    }

    .tt-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tt-table tr {
        background-color: var(--tt-color-surface);
        border: 1px solid var(--tt-color-border);
        border-radius: var(--tt-radius-lg);
        box-shadow: var(--tt-shadow-sm);
        padding: var(--tt-space-3) var(--tt-space-4);
        margin-block-end: var(--tt-space-3);
    }

    .tt-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--tt-space-3);
        padding: var(--tt-space-2) 0;
        border: 0;
    }

    .tt-table td::before {
        content: attr(data-label);
        font-size: var(--tt-font-size-xs);
        font-weight: var(--tt-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--tt-color-text-muted);
    }

    .tt-table td.tt-table__cell--no-label::before {
        content: none;
    }
}

@media (min-width: 768px) {
    .tt-table {
        background-color: var(--tt-color-surface);
        border: 1px solid var(--tt-color-border);
        border-radius: var(--tt-radius-lg);
        box-shadow: var(--tt-shadow-sm);
        overflow: hidden;
    }

    .tt-table th,
    .tt-table td {
        padding: var(--tt-space-3) var(--tt-space-4);
        text-align: start;
        vertical-align: middle;
        border-block-end: 1px solid var(--tt-color-border);
    }

    .tt-table thead th {
        font-size: var(--tt-font-size-xs);
        font-weight: var(--tt-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--tt-color-text-muted);
        background-color: var(--tt-color-surface-sunken);
    }

    .tt-table tbody tr:last-child td {
        border-block-end: 0;
    }
}

/* Fixed-layout variant (used by menu editors with long cell content) */
.tt-table--fixed {
    table-layout: fixed;
}

/* ---- Forms ----
   .tt-field wraps label + control: label above input, 44px min touch
   targets, clear focus rings. */
.tt-field {
    margin-block-end: var(--tt-space-4);
}

.tt-field__label {
    display: block;
    margin-block-end: var(--tt-space-2);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-medium);
    color: var(--tt-color-text);
}

.tt-field__hint {
    margin-block-start: var(--tt-space-1);
    font-size: var(--tt-font-size-xs);
    color: var(--tt-color-text-muted);
}

.tt-field .form-control,
.tt-field .form-select {
    min-height: var(--tt-touch-target-min);
    border-radius: var(--tt-radius-md);
}

/* ---- Bootstrap component bridge ----
   Bootstrap 5.3 hard-codes per-variant button colors (literal hex in
   .btn-primary/.btn-danger/...), so the :root --bs-* mappings in tokens.css
   never reach them. Re-point the variants the app uses at the brand tokens;
   the tokens flip per theme, so these stay correct in light and dark. */
.btn-primary {
    --bs-btn-color: var(--tt-color-primary-contrast);
    --bs-btn-bg: var(--tt-color-primary);
    --bs-btn-border-color: var(--tt-color-primary);
    --bs-btn-hover-color: var(--tt-color-primary-contrast);
    --bs-btn-hover-bg: var(--tt-color-primary-hover);
    --bs-btn-hover-border-color: var(--tt-color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--tt-color-primary-contrast);
    --bs-btn-active-bg: var(--tt-color-primary-active);
    --bs-btn-active-border-color: var(--tt-color-primary-active);
    --bs-btn-disabled-color: var(--tt-color-primary-contrast);
    --bs-btn-disabled-bg: var(--tt-color-primary);
    --bs-btn-disabled-border-color: var(--tt-color-primary);
}

.btn-danger {
    --bs-btn-color: var(--tt-color-danger-contrast);
    --bs-btn-bg: var(--tt-color-danger);
    --bs-btn-border-color: var(--tt-color-danger);
    --bs-btn-hover-color: var(--tt-color-danger-contrast);
    --bs-btn-hover-bg: var(--tt-color-danger);
    --bs-btn-hover-border-color: var(--tt-color-danger);
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-active-color: var(--tt-color-danger-contrast);
    --bs-btn-active-bg: var(--tt-color-danger);
    --bs-btn-active-border-color: var(--tt-color-danger);
    --bs-btn-disabled-color: var(--tt-color-danger-contrast);
    --bs-btn-disabled-bg: var(--tt-color-danger);
    --bs-btn-disabled-border-color: var(--tt-color-danger);
}

/* Keep a visible hover affordance now that the variant is token-driven */
.btn-danger:hover {
    filter: brightness(0.92);
}

/* ---- Buttons ---- */
.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-space-2);
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-4);
    border: 1px solid transparent;
    border-radius: var(--tt-radius-md);
    font-family: var(--tt-font-family);
    font-size: var(--tt-font-size-base);
    font-weight: var(--tt-font-weight-semibold);
    line-height: var(--tt-line-height-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tt-btn--primary {
    background-color: var(--tt-color-primary);
    border-color: var(--tt-color-primary);
    color: var(--tt-color-primary-contrast);
}

.tt-btn--primary:hover {
    background-color: var(--tt-color-primary-hover);
    border-color: var(--tt-color-primary-hover);
    color: var(--tt-color-primary-contrast);
}

.tt-btn--primary:active {
    background-color: var(--tt-color-primary-active);
    border-color: var(--tt-color-primary-active);
}

.tt-btn--outline {
    background-color: transparent;
    border-color: var(--tt-color-border-strong);
    color: var(--tt-color-text);
}

.tt-btn--outline:hover {
    border-color: var(--tt-color-primary);
    color: var(--tt-color-primary);
}

.tt-btn--ghost {
    background-color: transparent;
    color: var(--tt-color-primary);
}

.tt-btn--ghost:hover {
    background-color: var(--tt-color-primary-subtle);
}

.tt-btn--danger {
    background-color: var(--tt-color-danger);
    border-color: var(--tt-color-danger);
    color: var(--tt-color-danger-contrast);
}

.tt-btn--danger:hover {
    filter: brightness(0.92);
    color: var(--tt-color-danger-contrast);
}

.tt-btn:disabled,
.tt-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Icon-only action buttons (row actions: QR / edit / delete) ----
   Shared across backoffice areas; focus ring comes from the shared
   :focus-visible rule at the top of this file. */
.tt-icon-rail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tt-space-1);
}

.tt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tt-touch-target-min);
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-md);
    background-color: var(--tt-color-surface);
    color: var(--tt-color-text-muted);
    font-size: var(--tt-font-size-base);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tt-icon-btn:hover {
    color: var(--tt-color-primary);
    border-color: var(--tt-color-primary);
    background-color: var(--tt-color-primary-subtle);
}

.tt-icon-btn--danger:hover {
    color: var(--tt-color-danger);
    border-color: var(--tt-color-danger);
    background-color: var(--tt-color-danger-subtle);
}

/* ---- Status pills ---- */
.tt-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-space-1);
    padding: var(--tt-space-1) var(--tt-space-3);
    border-radius: var(--tt-radius-pill);
    font-size: var(--tt-font-size-xs);
    font-weight: var(--tt-font-weight-semibold);
    line-height: var(--tt-line-height-normal);
    white-space: nowrap;
}

.tt-pill--success {
    background-color: var(--tt-color-success-subtle);
    color: var(--tt-color-success);
}

.tt-pill--warning {
    background-color: var(--tt-color-warning-subtle);
    color: var(--tt-color-warning);
}

.tt-pill--danger {
    background-color: var(--tt-color-danger-subtle);
    color: var(--tt-color-danger);
}

.tt-pill--info {
    background-color: var(--tt-color-info-subtle);
    color: var(--tt-color-info);
}

.tt-pill--neutral {
    background-color: var(--tt-color-surface-sunken);
    color: var(--tt-color-text-muted);
}

/* ---- Empty state ---- */
.tt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tt-space-3);
    padding: var(--tt-space-7) var(--tt-space-4);
    text-align: center;
    color: var(--tt-color-text-muted);
}

.tt-empty__icon {
    font-size: 2.5rem;
    color: var(--tt-color-text-subtle);
}

.tt-empty__title {
    margin: 0;
    font-size: var(--tt-font-size-lg);
    font-weight: var(--tt-font-weight-semibold);
    color: var(--tt-color-text);
}

/* ---- Sticky bottom action bar (mobile) → inline actions (desktop) ---- */
.tt-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--tt-z-fixed);
    display: flex;
    gap: var(--tt-space-3);
    padding: var(--tt-space-3) var(--tt-space-4);
    padding-bottom: calc(var(--tt-space-3) + env(safe-area-inset-bottom, 0px));
    background-color: var(--tt-color-surface);
    border-top: 1px solid var(--tt-color-border);
    box-shadow: var(--tt-shadow-md);
}

.tt-action-bar .tt-btn {
    flex: 1;
}

/* When an action bar is present, keep page content clear of it */
body:has(.tt-action-bar) main {
    padding-bottom: calc(var(--tt-touch-target-min) + var(--tt-space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .tt-action-bar {
        position: static;
        padding: 0;
        background-color: transparent;
        border-top: 0;
        box-shadow: none;
        justify-content: flex-end;
    }

    .tt-action-bar .tt-btn {
        flex: initial;
    }

    body:has(.tt-action-bar) main {
        padding-bottom: 0;
    }
}

/* ---- Customer topbar (Pages/Shared/_LayoutCustomer.cshtml) ----
   Fixed 4rem bar; customer-order.js derives its sticky-scroll offset from
   --tt-topbar-height (4rem) - keep the height in sync. */
.tt-topbar {
    position: sticky;
    top: 0;
    z-index: var(--tt-z-topbar);
    min-height: var(--tt-topbar-height);
    background-color: var(--tt-color-surface);
    border-bottom: 1px solid var(--tt-color-border);
    box-shadow: var(--tt-shadow-sm);
}

.tt-topbar__bar {
    min-height: var(--tt-topbar-height);
}

.tt-topbar__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-space-2);
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-3);
    border-radius: var(--tt-radius-md);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-semibold);
    color: var(--tt-color-text-muted);
    text-decoration: none;
}

.tt-topbar__nav-link:hover {
    color: var(--tt-color-text);
    background-color: var(--tt-color-surface-sunken);
}

.tt-topbar__nav-link.active,
.tt-topbar__nav-link[aria-current="page"] {
    color: var(--tt-color-primary);
    background-color: var(--tt-color-primary-subtle);
}

/* ---- Customer bottom nav (mobile, d-md-none in markup) ---- */
.tt-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--tt-z-bottom-nav);
    background-color: var(--tt-color-surface);
    border-top: 1px solid var(--tt-color-border);
    box-shadow: var(--tt-shadow-md);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tt-bottom-nav__track {
    display: flex;
}

.tt-bottom-nav__segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tt-space-1);
    min-height: calc(var(--tt-touch-target-min) + var(--tt-space-2));
    padding: var(--tt-space-2);
    font-size: var(--tt-font-size-xs);
    font-weight: var(--tt-font-weight-medium);
    color: var(--tt-color-text-muted);
    text-decoration: none;
}

.tt-bottom-nav__segment:hover {
    color: var(--tt-color-text);
}

.tt-bottom-nav__segment.active,
.tt-bottom-nav__segment[aria-current="page"] {
    color: var(--tt-color-primary);
}

/* Keep page content clear of the fixed bottom nav */
body:has(.tt-bottom-nav) main {
    padding-bottom: calc(var(--tt-touch-target-min) + var(--tt-space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    body:has(.tt-bottom-nav) main {
        padding-bottom: 0;
    }
}

/* ---- Left nav drawer (Pages/Shared/_Layout.cshtml + _LayoutCustomer.cshtml) ----
   Offcanvas-based app drawer opened by the .tt-hamburger button via the
   Bootstrap offcanvas API only (no custom toggle JS). Token-driven so
   light/dark (html[data-bs-theme]) works without extra rules. */
.tt-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tt-touch-target-min);
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2);
    border-radius: var(--tt-radius-md);
    color: var(--tt-color-text);
    font-size: var(--tt-font-size-xl);
    line-height: 1;
    text-decoration: none;
}

.tt-hamburger:hover {
    color: var(--tt-color-text);
    background-color: var(--tt-color-surface-sunken);
}

.tt-hamburger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15rem var(--tt-color-surface), 0 0 0 0.35rem var(--tt-color-focus-ring);
}

.tt-drawer {
    --bs-offcanvas-width: 300px;
    width: 300px;
    max-width: 85vw;
    background-color: var(--tt-color-surface);
    color: var(--tt-color-text);
    border-inline-end: 1px solid var(--tt-color-border);
    box-shadow: var(--tt-shadow-md);
    z-index: calc(var(--tt-z-bottom-nav) + 5);
}

.tt-drawer__header {
    border-bottom: 1px solid var(--tt-color-border);
    padding: var(--tt-space-3) var(--tt-space-4);
}

.tt-drawer__title {
    margin: 0;
    font-size: var(--tt-font-size-lg);
    font-weight: var(--tt-font-weight-semibold);
}

.tt-drawer__body {
    padding: var(--tt-space-3) var(--tt-space-4);
}

.tt-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-4);
}

.tt-drawer__section {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.tt-drawer__heading {
    margin: 0;
    padding-inline: var(--tt-space-3);
    font-size: var(--tt-font-size-xs);
    font-weight: var(--tt-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tt-color-text-muted);
}

.tt-drawer__links {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-1);
}

.tt-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--tt-space-2);
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-3);
    padding-inline-start: calc(var(--tt-space-3) + var(--tt-space-3));
    border-radius: var(--tt-radius-md);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-semibold);
    color: var(--tt-color-text-muted);
    text-decoration: none;
}

.tt-drawer__link:hover {
    color: var(--tt-color-text);
    background-color: var(--tt-color-surface-sunken);
}

.tt-drawer__link.active,
.tt-drawer__link[aria-current="page"] {
    color: var(--tt-color-primary);
    background-color: var(--tt-color-primary-subtle);
}

.tt-drawer__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15rem var(--tt-color-surface), 0 0 0 0.35rem var(--tt-color-focus-ring);
}

.tt-drawer__divider {
    margin: var(--tt-space-2) 0;
    border-color: var(--tt-color-border);
    opacity: 1;
}

/* ---- Touch / tap resets ---- */
a,
button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body.customer-order-page,
body.customer-tab-page,
body.customer-switch-table-page {
    --customer-shell-black: #090909;
    --customer-shell-paper: #ffffff;
    --customer-shell-fog: #f5f5f5;
    --customer-shell-green: #06c167;
    --customer-shell-green-hover: #05a959;
    --customer-shell-green-ink: #04140b;
    --customer-shell-green-subtle: #e7f8ef;
    --customer-shell-green-border: #a6e8c3;
    --customer-shell-topbar-bg: var(--customer-shell-paper);
    --customer-shell-topbar-text: var(--customer-shell-black);
    --customer-shell-muted: #62666d;
    --customer-shell-border: #e4e4e4;
    --customer-shell-hover: var(--customer-shell-fog);
    --customer-shell-active-bg: var(--customer-shell-green);
    --customer-shell-active-fg: var(--customer-shell-green-ink);
    --tt-color-focus-ring: rgba(6, 193, 103, 0.42);
    margin-bottom: 0;
}

html[data-bs-theme="dark"] body.customer-order-page,
html[data-bs-theme="dark"] body.customer-tab-page,
html[data-bs-theme="dark"] body.customer-switch-table-page {
    --tt-color-primary: #10d977;
    --tt-color-primary-hover: #05a959;
    --tt-color-primary-active: #05a959;
    --tt-color-primary-contrast: #04140b;
    --tt-color-primary-subtle: #0d2a1b;
    --tt-color-accent: #10d977;
    --tt-color-bg: #111827;
    --tt-color-surface: #1b2637;
    --tt-color-surface-raised: #243247;
    --tt-color-surface-sunken: #0f172a;
    --tt-color-text: #f8fafc;
    --tt-color-text-muted: #cbd5e1;
    --tt-color-text-subtle: #94a3b8;
    --tt-color-border: #334155;
    --tt-color-border-strong: #475569;
    --tt-color-success: #10d977;
    --tt-color-success-subtle: #0d2a1b;
    --tt-color-focus-ring: rgba(16, 217, 119, 0.5);
    --bs-body-bg: var(--tt-color-bg);
    --bs-body-bg-rgb: 17, 24, 39;
    --bs-body-color: var(--tt-color-text);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-emphasis-color: var(--tt-color-text);
    --bs-emphasis-color-rgb: 248, 250, 252;
    --bs-secondary-color: var(--tt-color-text-muted);
    --bs-secondary-color-rgb: 203, 213, 225;
    --bs-tertiary-bg: var(--tt-color-surface-sunken);
    --bs-tertiary-bg-rgb: 15, 23, 42;
    --bs-border-color: var(--tt-color-border);
    --bs-link-color: var(--tt-color-primary);
    --bs-link-color-rgb: 16, 217, 119;
    --bs-link-hover-color: var(--tt-color-primary-hover);
    --bs-link-hover-color-rgb: 5, 169, 89;
    --bs-primary: var(--tt-color-primary);
    --bs-primary-rgb: 16, 217, 119;
    --bs-success: var(--tt-color-success);
    --bs-success-rgb: 16, 217, 119;
    --bs-card-bg: var(--tt-color-surface);
    --bs-card-border-color: var(--tt-color-border);
    --bs-card-cap-bg: var(--tt-color-surface-raised);
    --bs-list-group-bg: var(--tt-color-surface);
    --bs-list-group-border-color: var(--tt-color-border);
    --bs-dropdown-bg: var(--tt-color-surface-raised);
    --bs-dropdown-border-color: var(--tt-color-border-strong);
    --bs-dropdown-link-hover-bg: var(--tt-color-surface-sunken);
    --bs-offcanvas-bg: var(--tt-color-surface);
    --bs-modal-bg: var(--tt-color-surface);
    --customer-shell-black: #0b1220;
    --customer-shell-paper: #f8fafc;
    --customer-shell-fog: #243247;
    --customer-shell-topbar-bg: var(--tt-color-bg);
    --customer-shell-topbar-text: var(--tt-color-text);
    --customer-shell-green: #10d977;
    --customer-shell-green-hover: #05a959;
    --customer-shell-green-ink: #04140b;
    --customer-shell-green-subtle: #0d2a1b;
    --customer-shell-green-border: #1f6a42;
    --customer-shell-muted: var(--tt-color-text-muted);
    --customer-shell-border: var(--tt-color-border);
    --customer-shell-hover: var(--tt-color-surface-raised);
    --customer-shell-active-bg: var(--customer-shell-green);
    --customer-shell-active-fg: var(--customer-shell-green-ink);
}

html[data-bs-theme="dark"] body.customer-order-page .card,
html[data-bs-theme="dark"] body.customer-tab-page .card,
html[data-bs-theme="dark"] body.customer-switch-table-page .card {
    --bs-card-bg: var(--tt-color-surface);
    --bs-card-border-color: var(--tt-color-border);
    --bs-card-cap-bg: var(--tt-color-surface-raised);
    background-color: var(--tt-color-surface);
    color: var(--tt-color-text);
}

html[data-bs-theme="dark"] body.customer-order-page .list-group,
html[data-bs-theme="dark"] body.customer-tab-page .list-group,
html[data-bs-theme="dark"] body.customer-switch-table-page .list-group {
    --bs-list-group-bg: var(--tt-color-surface);
    --bs-list-group-color: var(--tt-color-text);
    --bs-list-group-border-color: var(--tt-color-border);
    background-color: var(--tt-color-surface);
    color: var(--tt-color-text);
}

body.customer-order-page .tt-container,
body.customer-tab-page .tt-container,
body.customer-switch-table-page .tt-container {
    padding-top: var(--tt-space-5);
    padding-bottom: var(--tt-space-6);
}

body.customer-order-page .tt-btn--primary,
body.customer-tab-page .tt-btn--primary,
body.customer-switch-table-page .tt-btn--primary {
    border-color: var(--customer-shell-green);
    background-color: var(--customer-shell-green);
    color: var(--customer-shell-green-ink);
}

body.customer-order-page .tt-btn--primary:hover,
body.customer-tab-page .tt-btn--primary:hover,
body.customer-switch-table-page .tt-btn--primary:hover {
    border-color: var(--customer-shell-green-hover);
    background-color: var(--customer-shell-green-hover);
    color: var(--customer-shell-green-ink);
}

body.customer-order-page .tt-btn--primary:active,
body.customer-tab-page .tt-btn--primary:active,
body.customer-switch-table-page .tt-btn--primary:active {
    border-color: var(--customer-shell-green-hover);
    background-color: var(--customer-shell-green-hover);
    color: var(--customer-shell-green-ink);
}

body.customer-order-page .tt-btn--outline:hover,
body.customer-tab-page .tt-btn--outline:hover,
body.customer-switch-table-page .tt-btn--outline:hover {
    border-color: var(--customer-shell-topbar-text);
    color: var(--customer-shell-topbar-text);
}

body.customer-order-page .tt-pill--success,
body.customer-order-page .alert-success,
body.customer-tab-page .tt-pill--success,
body.customer-tab-page .alert-success,
body.customer-switch-table-page .tt-pill--success,
body.customer-switch-table-page .alert-success {
    border-color: var(--customer-shell-green-border);
    background-color: var(--customer-shell-green-subtle);
    color: var(--customer-shell-topbar-text);
}

body.customer-order-page .customer-tab-session i,
body.customer-tab-page .customer-tab-session i,
body.customer-switch-table-page .customer-tab-session i {
    color: var(--customer-shell-green);
}

body.customer-order-page .tt-topbar,
body.customer-tab-page .tt-topbar,
body.customer-switch-table-page .tt-topbar {
    background-color: var(--customer-shell-topbar-bg);
    border-block-end: 1px solid var(--customer-shell-border);
    box-shadow: none;
}

body.customer-order-page .tt-topbar__bar,
body.customer-tab-page .tt-topbar__bar,
body.customer-switch-table-page .tt-topbar__bar {
    max-width: 88rem;
    min-height: var(--tt-topbar-height);
}

body.customer-order-page .customer-brand,
body.customer-tab-page .customer-brand,
body.customer-switch-table-page .customer-brand {
    min-height: var(--tt-touch-target-min);
    color: var(--customer-shell-topbar-text);
    font-weight: var(--tt-font-weight-bold);
    letter-spacing: -0.02em;
}

body.customer-order-page .customer-brand:hover,
body.customer-tab-page .customer-brand:hover,
body.customer-switch-table-page .customer-brand:hover {
    color: var(--customer-shell-topbar-text);
}

body.customer-order-page .customer-brand-logo,
body.customer-tab-page .customer-brand-logo,
body.customer-switch-table-page .customer-brand-logo {
    width: auto;
    height: 1.6rem;
}

body.customer-order-page .tt-hamburger,
body.customer-tab-page .tt-hamburger,
body.customer-switch-table-page .tt-hamburger {
    border: 0;
    border-radius: var(--tt-radius-sm);
    color: var(--customer-shell-topbar-text);
}

body.customer-order-page .tt-hamburger:hover,
body.customer-tab-page .tt-hamburger:hover,
body.customer-switch-table-page .tt-hamburger:hover {
    color: var(--customer-shell-topbar-text);
    background-color: var(--customer-shell-hover);
}

body.customer-order-page .customer-topbar-nav,
body.customer-tab-page .customer-topbar-nav,
body.customer-switch-table-page .customer-topbar-nav {
    align-items: center;
    gap: var(--tt-space-1);
}

body.customer-order-page .customer-topbar-nav__link,
body.customer-tab-page .customer-topbar-nav__link,
body.customer-switch-table-page .customer-topbar-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-3);
    border-radius: var(--tt-radius-sm);
    color: var(--customer-shell-muted);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-semibold);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.customer-order-page .customer-topbar-nav__link:hover,
body.customer-tab-page .customer-topbar-nav__link:hover,
body.customer-switch-table-page .customer-topbar-nav__link:hover {
    color: var(--customer-shell-topbar-text);
    background-color: var(--customer-shell-green-subtle);
}

body.customer-order-page .customer-topbar-nav__link.active,
body.customer-order-page .customer-topbar-nav__link[aria-current="page"],
body.customer-tab-page .customer-topbar-nav__link.active,
body.customer-tab-page .customer-topbar-nav__link[aria-current="page"],
body.customer-switch-table-page .customer-topbar-nav__link.active,
body.customer-switch-table-page .customer-topbar-nav__link[aria-current="page"] {
    color: var(--customer-shell-active-fg);
    background-color: var(--customer-shell-active-bg);
}

body.customer-order-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link,
body.customer-tab-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link,
body.customer-switch-table-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tt-touch-target-min);
    padding: var(--tt-space-2) var(--tt-space-3);
    border-radius: var(--tt-radius-sm);
    color: var(--customer-shell-topbar-text);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-semibold);
    text-decoration: none;
}

body.customer-order-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link:hover,
body.customer-tab-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link:hover,
body.customer-switch-table-page .tt-topbar__bar > .navbar-nav > .nav-item > .nav-link:hover {
    color: var(--customer-shell-topbar-text);
    background-color: var(--customer-shell-hover);
}

body.customer-order-page #userDropdown,
body.customer-tab-page #userDropdown,
body.customer-switch-table-page #userDropdown {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.customer-order-page .tt-topbar .dropdown-menu,
body.customer-tab-page .tt-topbar .dropdown-menu,
body.customer-switch-table-page .tt-topbar .dropdown-menu {
    border-color: var(--customer-shell-border);
    border-radius: var(--tt-radius-md);
    box-shadow: none;
}

html[data-bs-theme="dark"] body.customer-order-page .tt-topbar .dropdown-menu,
html[data-bs-theme="dark"] body.customer-tab-page .tt-topbar .dropdown-menu,
html[data-bs-theme="dark"] body.customer-switch-table-page .tt-topbar .dropdown-menu {
    --bs-dropdown-bg: var(--tt-color-surface-raised);
    --bs-dropdown-color: var(--tt-color-text);
    --bs-dropdown-border-color: var(--tt-color-border-strong);
    --bs-dropdown-link-color: var(--tt-color-text);
    --bs-dropdown-link-hover-color: var(--tt-color-text);
    --bs-dropdown-link-hover-bg: var(--tt-color-surface-sunken);
    background-color: var(--tt-color-surface-raised);
    color: var(--tt-color-text);
}

body.customer-order-page .tt-topbar .dropdown-item,
body.customer-tab-page .tt-topbar .dropdown-item,
body.customer-switch-table-page .tt-topbar .dropdown-item {
    min-height: var(--tt-touch-target-min);
}

body.customer-order-page .tt-topbar .dropdown-item.active,
body.customer-order-page .tt-topbar .dropdown-item:active,
body.customer-tab-page .tt-topbar .dropdown-item.active,
body.customer-tab-page .tt-topbar .dropdown-item:active,
body.customer-switch-table-page .tt-topbar .dropdown-item.active,
body.customer-switch-table-page .tt-topbar .dropdown-item:active {
    color: var(--customer-shell-active-fg);
    background-color: var(--customer-shell-active-bg);
}

body.customer-order-page .tt-drawer,
body.customer-tab-page .tt-drawer,
body.customer-switch-table-page .tt-drawer {
    border-color: var(--customer-shell-border);
    background-color: var(--tt-color-surface);
    box-shadow: none;
}

body.customer-order-page .tt-drawer__header,
body.customer-tab-page .tt-drawer__header,
body.customer-switch-table-page .tt-drawer__header {
    border-color: var(--customer-shell-border);
}

body.customer-order-page .tt-drawer__link,
body.customer-tab-page .tt-drawer__link,
body.customer-switch-table-page .tt-drawer__link {
    border-radius: var(--tt-radius-sm);
}

body.customer-order-page .tt-drawer__link:hover,
body.customer-tab-page .tt-drawer__link:hover,
body.customer-switch-table-page .tt-drawer__link:hover {
    background-color: var(--customer-shell-green-subtle);
}

body.customer-order-page .tt-drawer__link.active,
body.customer-order-page .tt-drawer__link[aria-current="page"],
body.customer-tab-page .tt-drawer__link.active,
body.customer-tab-page .tt-drawer__link[aria-current="page"],
body.customer-switch-table-page .tt-drawer__link.active,
body.customer-switch-table-page .tt-drawer__link[aria-current="page"] {
    color: var(--customer-shell-active-fg);
    background-color: var(--customer-shell-active-bg);
}

body.customer-order-page .tt-bottom-nav,
body.customer-tab-page .tt-bottom-nav,
body.customer-switch-table-page .tt-bottom-nav {
    border-block-start: 1px solid var(--customer-shell-border);
    background-color: var(--tt-color-surface);
    box-shadow: none;
}

body.customer-order-page .tt-bottom-nav__segment,
body.customer-tab-page .tt-bottom-nav__segment,
body.customer-switch-table-page .tt-bottom-nav__segment {
    min-height: calc(var(--tt-touch-target-min) + var(--tt-space-2));
    color: var(--customer-shell-muted);
    font-weight: var(--tt-font-weight-semibold);
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

body.customer-order-page .tt-bottom-nav__segment:hover,
body.customer-tab-page .tt-bottom-nav__segment:hover,
body.customer-switch-table-page .tt-bottom-nav__segment:hover {
    color: var(--customer-shell-topbar-text);
}

body.customer-order-page .tt-bottom-nav__segment.active,
body.customer-order-page .tt-bottom-nav__segment[aria-current="page"],
body.customer-tab-page .tt-bottom-nav__segment.active,
body.customer-tab-page .tt-bottom-nav__segment[aria-current="page"],
body.customer-switch-table-page .tt-bottom-nav__segment.active,
body.customer-switch-table-page .tt-bottom-nav__segment[aria-current="page"] {
    color: var(--customer-shell-topbar-text);
    box-shadow: inset 0 3px 0 var(--customer-shell-active-bg);
}

body.customer-switch-table-page .customer-switch-table-shell {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 36rem;
    min-height: calc(100dvh - var(--tt-topbar-height) - var(--tt-space-6));
    padding-top: 0;
}

body.customer-switch-table-page .customer-switch-table-card {
    width: 100%;
    overflow: hidden;
    border-color: var(--customer-shell-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: none;
}

body.customer-switch-table-page .customer-switch-table-card__header {
    padding: var(--tt-space-5) var(--tt-space-4) var(--tt-space-3);
    border-block-end: 1px solid var(--customer-shell-border);
    background-color: var(--tt-color-surface);
}

body.customer-switch-table-page .customer-switch-table-card__title {
    font-size: clamp(1.6rem, 7vw, 2rem);
    font-weight: var(--tt-font-weight-bold);
    letter-spacing: -0.03em;
    color: var(--tt-color-text);
}

body.customer-switch-table-page .customer-switch-table-card__body {
    padding: var(--tt-space-4);
}

body.customer-switch-table-page .customer-switch-table-card__body > .alert {
    border-radius: var(--tt-radius-md);
}

body.customer-switch-table-page .table-switch-info {
    padding: var(--tt-space-2);
    border: 1px solid var(--customer-shell-border);
    border-radius: var(--tt-radius-md);
    background-color: var(--tt-color-surface-sunken);
}

body.customer-switch-table-page .table-switch-info__comparison {
    display: grid;
    gap: var(--tt-space-2);
}

body.customer-switch-table-page .table-switch-info__table {
    min-width: 0;
    padding: var(--tt-space-3);
    border-radius: var(--tt-radius-sm);
    background-color: var(--tt-color-surface);
}

body.customer-switch-table-page .table-switch-info__label {
    margin: 0 0 var(--tt-space-1);
    color: var(--customer-shell-muted);
    font-size: var(--tt-font-size-xs);
    font-weight: var(--tt-font-weight-semibold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body.customer-switch-table-page .table-switch-info__name {
    overflow-wrap: anywhere;
    color: var(--tt-color-text);
    font-size: var(--tt-font-size-lg);
    font-weight: var(--tt-font-weight-bold);
    line-height: var(--tt-line-height-tight);
}

body.customer-switch-table-page .table-switch-info__arrow {
    justify-self: center;
    color: var(--customer-shell-muted);
    font-size: var(--tt-font-size-lg);
    line-height: 1;
}

body.customer-switch-table-page .table-switch-info__warning {
    margin: var(--tt-space-2) 0 0;
    border-radius: var(--tt-radius-sm);
}

body.customer-switch-table-page .customer-switch-table-transfer {
    margin: var(--tt-space-4) 0;
    color: var(--customer-shell-muted);
    font-size: var(--tt-font-size-sm);
}

body.customer-switch-table-page .customer-switch-table-actions {
    display: grid;
    gap: var(--tt-space-2);
}

body.customer-switch-table-page .customer-switch-table-actions .tt-btn {
    width: 100%;
}

body.customer-switch-table-page .customer-switch-table-primary {
    border-color: var(--customer-shell-green);
    background-color: var(--customer-shell-green);
    color: var(--customer-shell-green-ink);
}

body.customer-switch-table-page .customer-switch-table-primary:hover:not(:disabled) {
    border-color: var(--customer-shell-green-hover);
    background-color: var(--customer-shell-green-hover);
    color: var(--customer-shell-green-ink);
}

body.customer-switch-table-page .customer-switch-table-secondary {
    border-color: var(--customer-shell-border);
    background-color: transparent;
    color: var(--tt-color-text);
}

body.customer-switch-table-page .customer-switch-table-secondary:hover {
    border-color: var(--tt-color-border-strong);
    background-color: var(--customer-shell-hover);
    color: var(--tt-color-text);
}

body.customer-switch-table-page .customer-switch-table-primary:disabled {
    border-color: var(--customer-shell-green);
    background-color: var(--customer-shell-green);
    color: var(--customer-shell-green-ink);
}

@media (min-width: 480px) {
    body.customer-switch-table-page .table-switch-info__comparison {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
    }

    body.customer-switch-table-page .table-switch-info__arrow {
        align-self: center;
    }

    body.customer-switch-table-page .customer-switch-table-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 768px) {
    body.customer-order-page .tt-container,
    body.customer-tab-page .tt-container,
    body.customer-switch-table-page .tt-container {
        padding-top: var(--tt-space-6);
    }

    body.customer-order-page .customer-brand-logo,
    body.customer-tab-page .customer-brand-logo,
    body.customer-switch-table-page .customer-brand-logo {
        height: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.customer-order-page .customer-topbar-nav__link,
    body.customer-order-page .tt-topbar .nav-link,
    body.customer-order-page .tt-bottom-nav__segment,
    body.customer-order-page .tt-btn,
    body.customer-tab-page .customer-topbar-nav__link,
    body.customer-tab-page .tt-topbar .nav-link,
    body.customer-tab-page .tt-bottom-nav__segment,
    body.customer-tab-page .tt-btn,
    body.customer-switch-table-page .customer-topbar-nav__link,
    body.customer-switch-table-page .tt-topbar .nav-link,
    body.customer-switch-table-page .tt-bottom-nav__segment,
    body.customer-switch-table-page .tt-btn {
        transition-duration: 0.01ms;
    }
}

main.customer-view-enter-right {
    animation: customer-view-enter-right 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

main.customer-view-enter-left {
    animation: customer-view-enter-left 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

#kineticMobileCartBar.customer-view-enter-right {
    animation: customer-view-enter-right 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

#kineticMobileCartBar.customer-view-enter-left {
    animation: customer-view-enter-left 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

#kineticMobileCartBar.customer-order-bar-exit-left {
    bottom: calc(var(--tt-touch-target-min) + var(--tt-space-2) + 1px + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--tt-space-2);
    animation: customer-order-bar-exit-left 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

html:has(body.customer-view-navigation),
body.customer-view-navigation {
    overflow-x: hidden;
    overflow-x: clip;
}

@keyframes customer-view-enter-right {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes customer-view-enter-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes customer-order-bar-exit-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    main.customer-view-enter-right,
    main.customer-view-enter-left {
        animation: none;
    }

    #kineticMobileCartBar.customer-view-enter-right,
    #kineticMobileCartBar.customer-view-enter-left,
    #kineticMobileCartBar.customer-order-bar-exit-left {
        animation: none;
    }
}