/*
 * Waiter head-waiter and manager pages: role navigation, dashboard, stock and approvals.
 * Mobile first; tablets get two columns and desktops a 12-column grid with a side rail.
 * Colors come from the theme tokens; chart series use one fixed categorical palette
 * (validated for colour-vision deficiencies) and never color text.
 */

.waiter-app-shell {
    --wm-surface: #ffffff;
    --wm-page: var(--color-background, #f5f5f5);
    --wm-ink: var(--color-primary-text, #1f2937);
    --wm-ink-2: var(--color-secondary-text, #52514e);
    --wm-ink-3: var(--color-tertiary-text, #898781);
    --wm-accent: var(--color-primary-employee, #7c3aed);
    --wm-accent-soft: color-mix(in srgb, var(--wm-accent) 14%, #ffffff);
    --wm-accent-tint: color-mix(in srgb, var(--wm-accent) 30%, #ffffff);
    --wm-grid: #ecebe6;
    --wm-baseline: #d5d3cb;
    --wm-good: #0f8a0f;
    --wm-good-bg: #e8f6e8;
    --wm-bad: #c63535;
    --wm-bad-bg: #fcebeb;
    --wm-warn: #b86e00;
    --wm-warn-bg: #fff4dc;
    --wm-series-1: #2a78d6;
    --wm-series-2: #eb6834;
    --wm-series-3: #1baf7a;
    --wm-series-4: #eda100;
    --wm-series-5: #e87ba4;
    --wm-series-6: #008300;
    --wm-series-7: #4a3aa7;
    --wm-series-8: #e34948;
    --wm-series-other: #a3a19a;
    --wm-radius: 20px;
    --wm-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* ---------- Role shell: bottom tab bar on phones/tablets, side rail on desktops ---------- */

.wm-shell {
    --wm-bottom-clearance: calc(76px + var(--nexus-safe-bottom-inset, 0px));
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.wm-shell__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.wm-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    position: absolute;
    right: 16px;
    bottom: calc(12px + var(--nexus-safe-bottom-inset, 0px));
    left: 16px;
    width: min(calc(100% - 32px), 360px);
    margin-inline: auto;
    padding: 4px 6px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 10px 28px rgba(20, 27, 56, 0.16), 0 2px 8px rgba(20, 27, 56, 0.08);
    z-index: 20;
}

.wm-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(160%) blur(30px);
    -webkit-backdrop-filter: saturate(160%) blur(30px);
    pointer-events: none;
    z-index: -1;
}

.wm-nav::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: calc((100% - 12px - (var(--wm-tab-count) - 1) * 4px) / var(--wm-tab-count));
    height: 46px;
    border-radius: 999px;
    background: var(--wm-accent-soft);
    opacity: var(--wm-indicator-opacity, 0);
    pointer-events: none;
    transform: translateX(calc(var(--wm-tab-index) * (100% + 4px)));
    animation: wm-nav-slide var(--wm-motion-duration, 0ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wm-nav-slide {
    0% { transform: translateX(calc(var(--wm-tab-from) * (100% + 4px))) scale(1); }
    65% { transform: translateX(calc(var(--wm-tab-index) * (100% + 4px) + var(--wm-tab-direction) * 1.5px)) scale(1.025, 0.985); }
    85% { transform: translateX(calc(var(--wm-tab-index) * (100% + 4px) - var(--wm-tab-direction) * 0.25px)) scale(0.995, 1.005); }
    100% { transform: translateX(calc(var(--wm-tab-index) * (100% + 4px))) scale(1); }
}

@keyframes wm-nav-slide-vertical {
    0% { transform: translateY(calc(var(--wm-tab-from) * (100% + 4px))) scale(1); }
    65% { transform: translateY(calc(var(--wm-tab-index) * (100% + 4px) + var(--wm-tab-direction) * 1.5px)) scale(0.985, 1.025); }
    85% { transform: translateY(calc(var(--wm-tab-index) * (100% + 4px) - var(--wm-tab-direction) * 0.25px)) scale(1.005, 0.995); }
    100% { transform: translateY(calc(var(--wm-tab-index) * (100% + 4px))) scale(1); }
}

@keyframes wm-nav-icon-bounce {
    0% { transform: translateY(0) scale(0.98); }
    42% { transform: translateY(-1px) scale(1.035); }
    72% { transform: translateY(0.25px) scale(0.995); }
    100% { transform: translateY(0) scale(1); }
}

.wm-nav__item--active .wm-nav__icon {
    animation: wm-nav-icon-bounce var(--wm-motion-duration, 0ms) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 639px) {
    html:has(.wm-shell--rail:not(.wm-shell--desktop-only)) {
        --nexus-waiter-shell-viewport-height: 100lvh;
        --wm-browser-bottom-overlap: max(0px, calc(var(--nexus-waiter-shell-viewport-height, 100lvh) - var(--nexus-visible-viewport-height, 100dvh) - var(--nexus-visible-viewport-offset-top, 0px)));
        --wm-nav-safe-bottom: max(0px, calc(var(--nexus-safe-bottom-inset, env(safe-area-inset-bottom, 0px)) - var(--wm-browser-bottom-overlap)));
    }

    .wm-shell--rail {
        --wm-bottom-clearance: calc(76px + var(--wm-browser-bottom-overlap) + var(--wm-nav-safe-bottom));
    }

    .wm-nav {
        position: fixed;
        top: calc(var(--nexus-visible-viewport-offset-top, 0px) + var(--nexus-visible-viewport-height, 100dvh) - 8px - var(--wm-nav-safe-bottom, 0px));
        right: 12px;
        bottom: auto;
        left: 12px;
        width: min(calc(100% - 24px), 400px);
        translate: 0 -100%;
        box-shadow: 0 0 18px -5px rgba(20, 27, 56, 0.12), 0 2px 8px -3px rgba(20, 27, 56, 0.10);
    }
}
.wm-nav__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin-inline: auto;
    border-radius: 999px;
    color: var(--wm-ink-2);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    transition: color 140ms ease, background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.wm-nav__item:not(.wm-nav__item--active):hover {
    color: var(--wm-accent);
    background: var(--wm-accent-soft);
}

.wm-nav__item:focus-visible {
    outline: 2px solid var(--wm-accent);
    outline-offset: 2px;
}

.wm-nav__item--active {
    color: var(--wm-accent);
    background: transparent;
}

.wm-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    transition: background-color 160ms ease;
}

.wm-nav__icon svg {
    width: 23px;
    height: 23px;
}

.wm-nav__label {
    display: none;
}

.wm-nav__badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-secondary-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #ffffff;
}

@media (min-width: 1024px) {
    .wm-shell--rail {
        --wm-bottom-clearance: 16px;
        flex-direction: row;
    }

    .wm-shell--rail > .wm-shell__content {
        padding-bottom: 0;
    }

    .wm-shell--rail > .wm-nav {
        position: static;
        order: -1;
        grid-auto-flow: row;
        grid-auto-rows: min-content;
        grid-auto-columns: auto;
        align-content: start;
        width: 92px;
        margin: 0;
        flex: 0 0 92px;
        padding: 16px 10px;
        border-top: 0;
        border-radius: 0;
        border-right: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .wm-shell--rail > .wm-nav::before {
        display: none;
    }

    .wm-shell--rail > .wm-nav::after {
        top: 16px;
        left: 10px;
        width: 72px;
        height: 68px;
        border-radius: 14px;
        transform: translateY(calc(var(--wm-tab-index) * (100% + 4px)));
        animation-name: wm-nav-slide-vertical;
    }

    .wm-shell--rail .wm-nav__item {
        width: 72px;
        height: 68px;
        min-height: 68px;
        border-radius: 14px;
        border: 0;
        gap: 3px;
        background: transparent;
        color: var(--wm-ink-3);
        font-size: 11px;
    }

    .wm-shell--rail .wm-nav__item:not(.wm-nav__item--active):hover {
        color: var(--wm-ink-2);
        background: rgba(15, 23, 42, 0.04);
    }

    .wm-shell--rail .wm-nav__item--active {
        color: var(--wm-accent);
        background: transparent;
    }

    .wm-shell--rail .wm-nav__label {
        display: block;
    }

    .wm-shell--rail .wm-nav__icon {
        width: 44px;
        height: 28px;
    }

    .wm-shell--rail .wm-nav__icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ---------- Page scaffold ---------- */

.wm-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--wm-page);
}

.wm-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px var(--nexus-waiter-page-gutter, 12px) 10px;
}

.wm-page__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wm-ink);
}

.wm-page__subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--wm-ink-2);
}

.wm-page__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px var(--nexus-waiter-page-gutter, 12px) max(var(--wm-bottom-clearance, 24px), var(--nexus-safe-bottom-inset, 0px));
    scrollbar-width: none;
}

.wm-page__body::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1023px) {
    .wm-page__body {
        padding-bottom: calc(var(--wm-bottom-clearance) + 20px);
    }
}

.wm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 var(--nexus-waiter-page-gutter, 12px) 12px;
}

.wm-segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
}

.wm-segmented__option {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wm-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.wm-segmented__option--active {
    background: #ffffff;
    color: var(--wm-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.wm-segmented__option:focus-visible,
.wm-chip:focus-visible,
.wm-icon-button:focus-visible,
.wm-link:focus-visible {
    outline: 2px solid var(--wm-accent);
    outline-offset: 2px;
}

.wm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: var(--wm-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.wm-chip--active {
    border-color: transparent;
    background: var(--wm-accent);
    color: #ffffff;
}

.wm-date-input {
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: var(--wm-ink);
    font-size: 13px;
    font-weight: 600;
}

.wm-select {
    height: 34px;
    max-width: 100%;
    padding: 0 30px 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: var(--wm-ink);
    font-size: 13px;
    font-weight: 600;
}

.wm-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 0;
    background: #ffffff;
    color: var(--wm-ink-2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.wm-icon-button--spinning svg {
    animation: wm-spin 900ms linear infinite;
}

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

.wm-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--wm-accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Grid & cards ---------- */

.wm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    transition: opacity 200ms ease;
}

.wm-grid--refreshing {
    opacity: 0.55;
}

.wm-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) {
    .wm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .wm-span-full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .wm-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
    }

    .wm-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .wm-span-4 { grid-column: span 4; }
    .wm-span-5 { grid-column: span 5; }
    .wm-span-6 { grid-column: span 6; }
    .wm-span-7 { grid-column: span 7; }
    .wm-span-8 { grid-column: span 8; }
    .wm-span-12 { grid-column: 1 / -1; }
}

.wm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--wm-radius);
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
    animation: wm-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 1024px) {
    .wm-card {
        padding: 20px;
    }
}

@keyframes wm-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.wm-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wm-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wm-ink);
}

.wm-card__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--wm-ink-3);
}

.wm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 12px;
    text-align: center;
    color: var(--wm-ink-3);
    font-size: 13px;
}

/* ---------- Stat tiles ---------- */

.wm-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
    animation: wm-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 1024px) {
    .wm-tile {
        padding: 18px;
    }
}

.wm-tile__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wm-ink-2);
}

.wm-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
    flex: 0 0 auto;
}

.wm-tile__value {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wm-ink);
    overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
    .wm-tile__value {
        font-size: 28px;
    }
}

.wm-tile__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--wm-ink-3);
}

.wm-tile--hero {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(140deg, var(--wm-accent) 0%, color-mix(in srgb, var(--wm-accent) 72%, #0b0b1a) 100%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--wm-accent) 32%, transparent);
}

.wm-tile--hero .wm-tile__label,
.wm-tile--hero .wm-tile__foot {
    color: rgba(255, 255, 255, 0.82);
}

.wm-tile--hero .wm-tile__value {
    color: #ffffff;
}

.wm-tile--hero .wm-tile__icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.wm-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.wm-delta--up {
    background: var(--wm-good-bg);
    color: var(--wm-good);
}

.wm-delta--down {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

.wm-delta--flat {
    background: rgba(15, 23, 42, 0.06);
    color: var(--wm-ink-2);
}

.wm-tile--hero .wm-delta {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ---------- Column chart (orders per hour) ---------- */

.wm-columns {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
}

.wm-columns__axis {
    position: relative;
    height: 200px;
    font-size: 11px;
    color: var(--wm-ink-3);
    font-variant-numeric: tabular-nums;
}

.wm-columns__axis span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
}

.wm-columns__plot {
    position: relative;
    height: 200px;
}

@media (min-width: 1024px) {
    .wm-columns__axis,
    .wm-columns__plot {
        height: 240px;
    }
}

.wm-columns__gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--wm-grid);
}

.wm-columns__gridline--base {
    background: var(--wm-baseline);
}

.wm-columns__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.wm-column {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    outline: none;
    cursor: default;
}

.wm-column__bar {
    width: min(24px, 72%);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--wm-accent);
    transform-origin: bottom;
    animation: wm-grow 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: filter 120ms ease, background-color 120ms ease;
}

.wm-column--current .wm-column__bar {
    box-shadow: 0 0 0 3px var(--wm-accent-soft);
}

.wm-column--empty .wm-column__bar {
    background: transparent;
}

.wm-column__previous {
    position: absolute;
    left: 50%;
    width: min(28px, 84%);
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--wm-ink-2);
    opacity: 0.55;
    pointer-events: none;
}

@keyframes wm-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.wm-column:hover .wm-column__bar,
.wm-column:focus-visible .wm-column__bar {
    filter: brightness(1.12) saturate(1.1);
}

.wm-columns__labels {
    grid-column: 2;
    display: flex;
    gap: 2px;
    font-size: 11px;
    color: var(--wm-ink-3);
    font-variant-numeric: tabular-nums;
}

.wm-columns__labels span {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.wm-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    display: none;
    min-width: 150px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.wm-tooltip strong {
    display: block;
    font-size: 14px;
}

.wm-tooltip__row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.78);
}

.wm-tooltip__key {
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.wm-column:hover .wm-tooltip,
.wm-column:focus-visible .wm-tooltip,
.wm-hover:hover > .wm-tooltip,
.wm-hover:focus-visible > .wm-tooltip {
    display: block;
}

.wm-column--edge-start .wm-tooltip {
    left: 0;
    transform: none;
}

.wm-column--edge-end .wm-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

.wm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--wm-ink-2);
}

.wm-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wm-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.wm-legend__line {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--wm-ink-2);
    opacity: 0.7;
}

/* ---------- Donut + breakdown list ---------- */

.wm-donut {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

@media (min-width: 420px) {
    .wm-donut {
        grid-template-columns: 150px minmax(0, 1fr);
    }
}

.wm-donut__figure {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.wm-donut__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.wm-donut__segment {
    fill: none;
    stroke-width: 5.2;
    stroke-linecap: butt;
    animation: wm-donut-draw 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: stroke-width 140ms ease;
}

.wm-donut__segment:hover {
    stroke-width: 6.4;
}

@keyframes wm-donut-draw {
    from { stroke-dasharray: 0 100; }
}

.wm-donut__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.wm-donut__total {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wm-ink);
}

.wm-donut__caption {
    font-size: 11px;
    color: var(--wm-ink-3);
}

.wm-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-breakdown__row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wm-ink);
}

/* Names wrap to a second line instead of hiding the channel ("Ridicare personală"). */
.wm-breakdown__name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.wm-breakdown__value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.wm-breakdown__meta {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--wm-ink-3);
}

.wm-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.wm-split__cell {
    padding: 10px;
    border-radius: 14px;
    background: var(--wm-page);
}

.wm-split__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--wm-ink);
}

.wm-split__label {
    font-size: 11px;
    color: var(--wm-ink-2);
}

/* ---------- Stacked 100% bar ---------- */

.wm-stack {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    overflow: visible;
}

.wm-stack__segment {
    position: relative;
    min-width: 4px;
    height: 100%;
    transform-origin: left;
    animation: wm-grow-x 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-stack__segment:first-child {
    border-radius: 7px 0 0 7px;
}

.wm-stack__segment:last-child {
    border-radius: 0 7px 7px 0;
}

.wm-stack__segment:only-child {
    border-radius: 7px;
}

@keyframes wm-grow-x {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---------- Ranked bars ---------- */

.wm-ranks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-rank {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.wm-rank__position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--wm-page);
    font-size: 11px;
    font-weight: 800;
    color: var(--wm-ink-2);
}

.wm-rank:first-child .wm-rank__position {
    background: var(--wm-accent);
    color: #ffffff;
}

.wm-rank__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.wm-rank__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.wm-rank__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--wm-ink);
}

.wm-rank__value {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--wm-ink);
    font-variant-numeric: tabular-nums;
}

.wm-rank__meta {
    font-size: 11px;
    color: var(--wm-ink-3);
}

.wm-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--wm-accent-soft);
    overflow: hidden;
}

.wm-track__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--wm-accent);
    transform-origin: left;
    animation: wm-grow-x 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Stock meters ---------- */

.wm-stock-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wm-stock {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wm-stock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.wm-stock__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--wm-ink);
}

.wm-stock__meter {
    display: flex;
    gap: 2px;
    height: 12px;
}

.wm-stock__used,
.wm-stock__left {
    height: 100%;
    transform-origin: left;
    animation: wm-grow-x 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-stock__used {
    border-radius: 6px 0 0 6px;
    background: var(--wm-accent);
}

.wm-stock__left {
    border-radius: 0 6px 6px 0;
    background: var(--wm-accent-soft);
}

.wm-stock__used:only-child,
.wm-stock__left:only-child {
    border-radius: 6px;
}

.wm-stock--low .wm-stock__used {
    background: var(--wm-warn);
}

.wm-stock--depleted .wm-stock__used {
    background: var(--wm-bad);
}

.wm-stock__numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--wm-ink-2);
    font-variant-numeric: tabular-nums;
}

.wm-stock__numbers strong {
    color: var(--wm-ink);
}

.wm-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.wm-status--low {
    background: var(--wm-warn-bg);
    color: var(--wm-warn);
}

.wm-status--depleted {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

.wm-status--healthy {
    background: var(--wm-good-bg);
    color: var(--wm-good);
}

.wm-status--untracked {
    background: rgba(15, 23, 42, 0.06);
    color: var(--wm-ink-2);
}

/* Stock table on wide screens */
.wm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.wm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: #fbfbfa;
    color: var(--wm-ink-2);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid var(--wm-grid);
    white-space: nowrap;
}

.wm-table th button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.wm-table td {
    padding: 12px;
    border-bottom: 1px solid var(--wm-grid);
    color: var(--wm-ink);
    vertical-align: middle;
}

.wm-table tr:hover td {
    background: #fafaf8;
}

.wm-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: 0;
    flex: 1 1 220px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    color: var(--wm-ink-3);
}

.wm-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--wm-ink);
}

.wm-only-wide {
    display: none;
}

@media (min-width: 900px) {
    .wm-only-wide {
        display: block;
    }

    .wm-only-narrow {
        display: none;
    }
}

/* ---------- Occupancy ---------- */

.wm-occupancy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wm-mini-columns {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}

.wm-mini-column {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    outline: none;
}

.wm-mini-column__bar {
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--wm-accent);
    transform-origin: bottom;
    animation: wm-grow 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-mini-labels {
    display: flex;
    gap: 6px;
    font-size: 10px;
    color: var(--wm-ink-3);
}

.wm-mini-labels span {
    flex: 1 1 0;
    text-align: center;
    white-space: nowrap;
}

/* ---------- Approvals ---------- */

.wm-approvals {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 900px) {
    .wm-approvals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wm-request {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--wm-radius);
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
    overflow: hidden;
    animation: wm-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wm-request--pending {
    box-shadow: var(--wm-shadow), inset 0 0 0 2px color-mix(in srgb, var(--wm-accent) 35%, transparent);
}

.wm-request__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wm-request__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}

.wm-request__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--wm-ink);
}

.wm-request__detail {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--wm-ink);
}

.wm-request__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wm-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--wm-page);
    color: var(--wm-ink-2);
    font-size: 12px;
    font-weight: 600;
}

.wm-request__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    border-radius: 14px;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease, background-color 120ms ease;
}

.wm-button:active {
    transform: scale(0.98);
}

.wm-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.wm-button--approve {
    background: var(--wm-accent);
    color: #ffffff;
}

.wm-button--approve:hover:not(:disabled) {
    filter: brightness(1.08);
}

.wm-button--reject {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

.wm-button--secondary {
    background: var(--wm-page);
    color: var(--wm-ink);
}

.wm-countdown {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--wm-accent);
    transform-origin: left;
    animation-name: wm-countdown;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

@keyframes wm-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.wm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wm-ink-3);
}

.wm-history {
    display: flex;
    flex-direction: column;
    border-radius: var(--wm-radius);
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
    overflow: hidden;
}

.wm-history__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wm-grid);
    font-size: 13px;
}

.wm-history__row:last-child {
    border-bottom: 0;
}

.wm-history__title {
    font-weight: 700;
    color: var(--wm-ink);
}

.wm-history__meta {
    font-size: 12px;
    color: var(--wm-ink-3);
}

/* ---------- Approval prompt (requesting waiter) ---------- */

.wm-prompt {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 16px 12px;
}

.wm-prompt__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: var(--wm-page);
}

.wm-prompt__waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0 4px;
    text-align: center;
}

.wm-radar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wm-radar::before,
.wm-radar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid var(--wm-accent);
    opacity: 0;
    animation: wm-radar 2.2s ease-out infinite;
}

.wm-radar::after {
    animation-delay: 1.1s;
}

/* Empty states and final outcomes keep the icon still: no pulsing rings past the card. */
.wm-radar--still::before,
.wm-radar--still::after {
    content: none;
}

@keyframes wm-radar {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

.wm-approvers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .wm-card,
    .wm-tile,
    .wm-request,
    .wm-column__bar,
    .wm-mini-column__bar,
    .wm-track__fill,
    .wm-stock__used,
    .wm-stock__left,
    .wm-stack__segment,
    .wm-donut__segment,
    .wm-radar::before,
    .wm-radar::after,
    .wm-nav__badge,
    .wm-nav::after,
    .wm-nav__item--active .wm-nav__icon {
        animation: none !important;
    }
}

.waiter-desktop-conversation {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.waiter-desktop-tables {
    display: none;
}

@keyframes waiter-conversation-panel-open {
    from {
        flex-basis: 100%;
    }

    to {
        flex-basis: var(--waiter-desktop-tables-width);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .waiter-desktop-conversation:not(.waiter-desktop-conversation--open) > .waiter-desktop-tables:not(.waiter-tables-motion-ready) {
        flex-basis: 100%;
    }

    .waiter-desktop-conversation:not(.waiter-desktop-conversation--open) > .waiter-desktop-tables.waiter-tables-motion-ready {
        animation: waiter-conversation-panel-open 250ms linear backwards;
    }
}

@media (max-width: 1023px) {
    .wm-shell--desktop-only {
        --wm-bottom-clearance: 0px;
    }

    .wm-shell--desktop-only > .wm-nav {
        display: none;
    }

    .wm-shell--desktop-only > .wm-shell__content {
        padding-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .waiter-desktop-conversation {
        --waiter-desktop-tables-width: clamp(340px, 28vw, 400px);
    }

    .waiter-app-shell:has(.waiter-desktop-conversation) {
        max-width: none;
        border-radius: 0;
    }

    .waiter-desktop-tables {
        container-type: inline-size;
        container-name: waiter-tables;
        display: flex;
        flex: 0 0 var(--waiter-desktop-tables-width);
        min-width: 0;
        min-height: 0;
        border-right: 1px solid var(--Text---Captions, #CCCCCC);
    }

    .waiter-app-shell .waiter-desktop-tables [data-testid="waiter-dashboard-table-list"] {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 12px;
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-root"] {
        min-width: 0;
        width: 100%;
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-salon-chips"] > div {
        padding-inline: 12px;
    }

    .waiter-app-shell .waiter-desktop-tables [data-testid="waiter-dashboard-table-list"]:has(> [data-testid="waiter-dashboard-empty-state"]) {
        display: flex !important;
    }

    .waiter-settings-page > header {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-settings-page > main {
        align-self: center;
        width: 100%;
        max-width: 960px;
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-salon-chips"] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    @container waiter-tables (min-width: 680px) {
        .waiter-app-shell .waiter-desktop-tables [data-testid="waiter-dashboard-table-list"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            padding-inline: var(--nexus-waiter-page-gutter);
        }
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-root"] > header {
        padding-inline: 12px;
    }

    .waiter-desktop-tables [aria-current="page"] {
        background: var(--wm-accent-soft);
        box-shadow: inset 3px 0 0 var(--wm-accent);
    }

    .waiter-desktop-conversation > [data-testid="waiter-table-root"] {
        flex: 0 0 calc(100% - var(--waiter-desktop-tables-width));
        min-width: 0;
    }

    .waiter-app-shell .waiter-desktop-conversation [data-testid="waiter-table-root"] > header,
    .waiter-app-shell .waiter-desktop-conversation [data-testid="waiter-conversation-filter-chips"],
    .waiter-app-shell .waiter-desktop-conversation [data-testid="waiter-table-root"] .waiter-chat-scroll {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell .waiter-desktop-conversation [data-testid="waiter-table-root"] > header,
    .waiter-app-shell .waiter-desktop-conversation [data-testid="waiter-conversation-filter-chips"],
    .waiter-app-shell .waiter-desktop-conversation .waiter-chat-scroll,
    .waiter-app-shell .waiter-desktop-conversation .waiter-bottom-bar > * {
        width: 100%;
        max-width: none;
    }
}

.waiter-desktop-flow-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    container: waiter-order-flow / inline-size;
}

[data-testid="waiter-cart-root"] {
    container: waiter-cart / inline-size;
}

[data-testid="waiter-product-root"] {
    container: waiter-product / inline-size;
}

.waiter-product-option-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@container waiter-product (min-width: 800px) {
    .waiter-product-option-groups {
        display: block;
        columns: 2;
        column-gap: 48px;
    }

    .waiter-app-shell [data-option-category-id] {
        min-width: 0;
        break-inside: avoid;
        margin-bottom: 16px;
    }

    .waiter-app-shell [data-option-category-id] [style*="--nexus-list-subheader-divider-color"] > div > div > p {
        min-height: 1lh;
    }
}

@container waiter-product (min-width: 1300px) {
    .waiter-product-option-groups {
        column-count: 3;
    }
}

.waiter-cart-order-column,
.waiter-cart-checkout-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex-shrink: 0;
}

.waiter-cart-content {
    display: flex;
    flex-direction: column;
}

@container waiter-cart (min-width: 900px) {
    [data-testid="waiter-cart-content"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
        align-items: start;
        align-content: start;
        column-gap: 24px;
    }
}

@media (min-width: 1024px) {
    .waiter-desktop-flow-content {
        position: relative;
    }

    .waiter-desktop-flow-content .waiter-floating-cart {
        position: absolute;
        max-width: 100%;
    }

    .waiter-app-shell .waiter-desktop-flow-content .waiter-discount-page {
        position: absolute;
    }

    .waiter-app-shell .waiter-desktop-flow-content .waiter-discount-page > :is(header, main, footer) {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-desktop-flow-content > * {
        max-width: 100%;
    }

    .waiter-app-shell .waiter-desktop-flow-content [data-testid="waiter-cart-root"] > main {
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
    }

    .waiter-app-shell [data-testid="waiter-table-transfer-page"] .waiter-chat-header,
    .waiter-app-shell [data-testid="waiter-table-transfer-page"] [data-testid="move-order-description"],
    .waiter-app-shell [data-testid="waiter-table-transfer-page"] .register-table-transfer__body,
    .waiter-app-shell [data-testid="waiter-table-transfer-page"] .register-table-transfer__footer {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell .waiter-desktop-flow-content [data-testid="waiter-catalog-product-list"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container waiter-order-flow (min-width: 1100px) {
    .waiter-app-shell .waiter-desktop-flow-content [data-testid="waiter-catalog-product-list"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .waiter-desktop-tables [data-testid="waiter-dashboard-salon-chips"] {
        scrollbar-width: none;
        cursor: grab;
        user-select: none;
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-salon-chips"]:active {
        cursor: grabbing;
    }

    .waiter-desktop-tables [data-testid="waiter-dashboard-salon-chips"]::-webkit-scrollbar {
        display: none;
    }
}

/*
 * Dark theme: the employee colour stays the fill, while text and icons in the accent use its readable variant. The
 * tab bar is a solid raised bar with light icons and a tinted pill behind the active one, like native dark tab bars.
 */
:root[data-theme="dark"] .waiter-app-shell {
    --wm-accent: #4A54C8;
    --wm-accent-text: #A3AAFF;
    --wm-accent-soft: rgb(163 170 255 / 0.14);
    --wm-accent-tint: rgb(163 170 255 / 0.24);
    /* Status colours colour text on their tinted backgrounds, so they take readable variants. */
    --wm-good: #5FCB83;
    --wm-bad: #F27A7A;
    --wm-warn: #F2B24D;
}

:root[data-theme="dark"] .wm-nav {
    border-color: rgb(255 255 255 / 0.08);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.35);
}

:root[data-theme="dark"] .wm-nav::before {
    background: rgb(30 33 40 / 0.92);
}

:root[data-theme="dark"] .wm-nav::after {
    background: rgb(163 170 255 / 0.16);
}

:root[data-theme="dark"] .wm-nav__item {
    color: #C9CDD6;
}

:root[data-theme="dark"] .wm-nav__item--active,
:root[data-theme="dark"] .wm-nav__item:not(.wm-nav__item--active):hover,
:root[data-theme="dark"] .wm-link,
:root[data-theme="dark"] .wm-radar,
:root[data-theme="dark"] .wm-request__icon,
:root[data-theme="dark"] .wm-tile__icon {
    color: var(--wm-accent-text);
}

:root[data-theme="dark"] .wm-nav__badge {
    background: #D93636;
    box-shadow: 0 0 0 2px #1E2128;
}

/* dark-theme:generated — dark variants of the colours above, written by Nexus.Retail.Server/TailwindAssets/dark-theme-sync.mjs.
   Edit the light rules and rerun the script; do not edit this block. */

:where(:root[data-theme="dark"]) .waiter-app-shell {
    --wm-surface: #1A1D23;
    --wm-accent-soft: color-mix(in srgb, var(--wm-accent) 14%, #1A1D23);
    --wm-accent-tint: color-mix(in srgb, var(--wm-accent) 30%, #1A1D23);
    --wm-grid: #282B30;
    --wm-baseline: #373A3F;
    --wm-good-bg: #1E311F;
    --wm-bad-bg: #3C2425;
    --wm-warn-bg: #362909;
    --wm-series-7: #A7A6FE;
    --wm-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06);
}

:where(:root[data-theme="dark"]) .wm-nav {
    border: 1px solid rgba(26,29,35,0.82);
    background: transparent;
    box-shadow: 0 10px 56px rgba(20,27,56,0.16), 0 2px 16px rgba(20,27,56,0.08);
}

:where(:root[data-theme="dark"]) .wm-nav::before {
    background: rgba(26,29,35,0.78);
}

:where(:root[data-theme="dark"]) .wm-nav::after {
    background: var(--wm-accent-soft);
}

@media (max-width: 639px) {
    :where(:root[data-theme="dark"]) .wm-nav {
        box-shadow: 0 0 36px -5px rgba(20,27,56,0.12), 0 2px 16px -3px rgba(20,27,56,0.1);
    }

}

:where(:root[data-theme="dark"]) .wm-nav__item {
    color: var(--wm-ink-2);
    border: 0;
    background: transparent;
}

:where(:root[data-theme="dark"]) .wm-nav__item:not(.wm-nav__item--active):hover {
    color: var(--wm-accent);
    background: var(--wm-accent-soft);
}

:where(:root[data-theme="dark"]) .wm-nav__item--active {
    color: var(--wm-accent);
    background: transparent;
}

:where(:root[data-theme="dark"]) .wm-nav__badge {
    background: #FF7171;
    color: #FFFFFF;
    box-shadow: 0 0 0 2px #1A1D23;
}

@media (min-width: 1024px) {
    :where(:root[data-theme="dark"]) .wm-shell--rail > .wm-nav {
        border-right: 1px solid rgba(147,158,184,0.07);
        box-shadow: none;
        background: transparent;
    }

    :where(:root[data-theme="dark"]) .wm-shell--rail .wm-nav__item {
        border: 0;
        background: transparent;
        color: var(--wm-ink-3);
    }

    :where(:root[data-theme="dark"]) .wm-shell--rail .wm-nav__item:not(.wm-nav__item--active):hover {
        color: var(--wm-ink-2);
        background: rgba(165,177,203,0.05);
    }

    :where(:root[data-theme="dark"]) .wm-shell--rail .wm-nav__item--active {
        color: var(--wm-accent);
        background: transparent;
    }

}

:where(:root[data-theme="dark"]) .wm-page {
    background: var(--wm-page);
}

:where(:root[data-theme="dark"]) .wm-page__title {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-page__subtitle {
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-segmented {
    background: rgba(165,177,203,0.075);
}

:where(:root[data-theme="dark"]) .wm-segmented__option {
    border: 0;
    background: transparent;
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-segmented__option--active {
    background: #363C47;
    color: var(--wm-ink);
    box-shadow: 0 1px 6px rgba(15,23,42,0.14);
}

:where(:root[data-theme="dark"]) .wm-chip {
    border: 1px solid rgba(147,158,184,0.1);
    background: #1A1D23;
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-chip--active {
    background: var(--wm-accent);
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-date-input {
    border: 1px solid rgba(147,158,184,0.1);
    background: #1A1D23;
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-select {
    border: 1px solid rgba(147,158,184,0.1);
    background: #1A1D23;
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-icon-button {
    border: 0;
    background: #1A1D23;
    color: var(--wm-ink-2);
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}

:where(:root[data-theme="dark"]) .wm-link {
    border: 0;
    background: transparent;
    color: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-card {
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
}

:where(:root[data-theme="dark"]) .wm-card__title {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-card__subtitle {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-empty {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-tile {
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
}

:where(:root[data-theme="dark"]) .wm-tile__label {
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-tile__icon {
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-tile__value {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-tile__foot {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-tile--hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(26,29,35,0.22) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(140deg, var(--wm-accent) 0%, color-mix(in srgb, var(--wm-accent) 72%, #0B0B1A) 100%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--wm-accent) 32%, transparent);
}

:where(:root[data-theme="dark"]) .wm-tile--hero .wm-tile__label,
:where(:root[data-theme="dark"]) .wm-tile--hero .wm-tile__foot {
    color: rgba(255,255,255,0.82);
}

:where(:root[data-theme="dark"]) .wm-tile--hero .wm-tile__value {
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-tile--hero .wm-tile__icon {
    background: rgba(26,29,35,0.18);
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-delta--up {
    background: var(--wm-good-bg);
    color: var(--wm-good);
}

:where(:root[data-theme="dark"]) .wm-delta--down {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

:where(:root[data-theme="dark"]) .wm-delta--flat {
    background: rgba(165,177,203,0.075);
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-tile--hero .wm-delta {
    background: rgba(26,29,35,0.2);
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-columns__axis {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-columns__gridline {
    background: var(--wm-grid);
}

:where(:root[data-theme="dark"]) .wm-columns__gridline--base {
    background: var(--wm-baseline);
}

:where(:root[data-theme="dark"]) .wm-column__bar {
    background: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-column--current .wm-column__bar {
    box-shadow: 0 0 0 3px var(--wm-accent-soft);
}

:where(:root[data-theme="dark"]) .wm-column--empty .wm-column__bar {
    background: transparent;
}

:where(:root[data-theme="dark"]) .wm-column__previous {
    background: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-columns__labels {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-tooltip {
    background: #111827;
    color: #FFFFFF;
    box-shadow: 0 10px 48px rgba(15,23,42,0.25);
}

:where(:root[data-theme="dark"]) .wm-tooltip__row {
    color: rgba(255,255,255,0.78);
}

:where(:root[data-theme="dark"]) .wm-tooltip__key {
    background: currentColor;
}

:where(:root[data-theme="dark"]) .wm-legend {
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-legend__line {
    background: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-donut__total {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-donut__caption {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-breakdown__row {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-breakdown__meta {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-split__cell {
    background: var(--wm-page);
}

:where(:root[data-theme="dark"]) .wm-split__value {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-split__label {
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-rank__position {
    background: var(--wm-page);
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-rank:first-child .wm-rank__position {
    background: var(--wm-accent);
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-rank__name {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-rank__value {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-rank__meta {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-track {
    background: var(--wm-accent-soft);
}

:where(:root[data-theme="dark"]) .wm-track__fill {
    background: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-stock__name {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-stock__used {
    background: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-stock__left {
    background: var(--wm-accent-soft);
}

:where(:root[data-theme="dark"]) .wm-stock--low .wm-stock__used {
    background: var(--wm-warn);
}

:where(:root[data-theme="dark"]) .wm-stock--depleted .wm-stock__used {
    background: var(--wm-bad);
}

:where(:root[data-theme="dark"]) .wm-stock__numbers {
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-stock__numbers strong {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-status--low {
    background: var(--wm-warn-bg);
    color: var(--wm-warn);
}

:where(:root[data-theme="dark"]) .wm-status--depleted {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

:where(:root[data-theme="dark"]) .wm-status--healthy {
    background: var(--wm-good-bg);
    color: var(--wm-good);
}

:where(:root[data-theme="dark"]) .wm-status--untracked {
    background: rgba(165,177,203,0.075);
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-table th {
    background: #212429;
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-table th button {
    border: 0;
    background: transparent;
    color: inherit;
}

:where(:root[data-theme="dark"]) .wm-table td {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-table tr:hover td {
    background: #222429;
}

:where(:root[data-theme="dark"]) .wm-search {
    background: #1A1D23;
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-search input {
    border: 0;
    background: transparent;
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-mini-column__bar {
    background: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-mini-labels {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-request {
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
}

:where(:root[data-theme="dark"]) .wm-request--pending {
    box-shadow: var(--wm-shadow), inset 0 0 0 2px color-mix(in srgb, var(--wm-accent) 35%, transparent);
}

:where(:root[data-theme="dark"]) .wm-request__icon {
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-request__title {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-request__detail {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-pill {
    background: var(--wm-page);
    color: var(--wm-ink-2);
}

:where(:root[data-theme="dark"]) .wm-button {
    border: 0;
}

:where(:root[data-theme="dark"]) .wm-button--approve {
    background: var(--wm-accent);
    color: #FFFFFF;
}

:where(:root[data-theme="dark"]) .wm-button--reject {
    background: var(--wm-bad-bg);
    color: var(--wm-bad);
}

:where(:root[data-theme="dark"]) .wm-button--secondary {
    background: var(--wm-page);
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-countdown {
    background: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-section-title {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-history {
    background: var(--wm-surface);
    box-shadow: var(--wm-shadow);
}

:where(:root[data-theme="dark"]) .wm-history__title {
    color: var(--wm-ink);
}

:where(:root[data-theme="dark"]) .wm-history__meta {
    color: var(--wm-ink-3);
}

:where(:root[data-theme="dark"]) .wm-prompt__summary {
    background: var(--wm-page);
}

:where(:root[data-theme="dark"]) .wm-radar {
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}

:where(:root[data-theme="dark"]) .wm-radar::before,
:where(:root[data-theme="dark"]) .wm-radar::after {
    border: 2px solid var(--wm-accent);
}

@media (min-width: 1024px) {
    :where(:root[data-theme="dark"]) .waiter-desktop-tables {
        border-right: 1px solid var(--Text---Captions, #3A404A);
    }

    :where(:root[data-theme="dark"]) .waiter-desktop-tables [aria-current="page"] {
        background: var(--wm-accent-soft);
        box-shadow: inset 3px 0 0 var(--wm-accent);
    }

}

/* dark-theme:generated:end */