/* index.html */
html, body, #app {
    margin: 0;
    padding: 0;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
    overflow: hidden;
    --app-bg: #0f172a;
    --app-fg: #e5e7eb;
}

/* Small scrollbars app-wide.
   - Load app.css after Webjala.ServeGhost.styles.css (see index.html).
   - Use !important so reboot/Fluent/Blazor bundles cannot reset size.
   - Fallback colors: Fluent tokens may not exist until design-system-provider hydrates. */
:root {
    --wj-scrollbar-thickness: 2px;
    --wj-scrollbar-thumb: rgba(120, 120, 128, 0.45);
    --wj-scrollbar-thumb-hover: rgba(120, 120, 128, 0.72);
}

/* Firefox / standard track: thin + color (ignored on non-scrollable elements). */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--neutral-stroke-strong-rest, #888888) transparent;
}

*::-webkit-scrollbar {
    width: var(--wj-scrollbar-thickness) !important;
    height: var(--wj-scrollbar-thickness) !important;
}

*::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-strong-rest, var(--wj-scrollbar-thumb)) !important;
    border-radius: 1px !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-strong-rest, var(--wj-scrollbar-thumb-hover)) !important;
}

*::-webkit-scrollbar-track {
    background: transparent !important;
}

*::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* MainLayout.razor */

/* Root fills the viewport */
.app-shell {
    width: 100vw;
    height: 100dvh; /* better with mobile chrome */
    overflow: hidden;
    /* Default nav width; can be overridden by inline style on MainLayout */
    --nav-w: 230px;
}

/* Column layout: header (50), footer (40), middle flexes */
.shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0; /* allow children to shrink for scrolling */
}

/* Fixed header/footer heights; z-index so header dropdowns (e.g. settings) appear above page content */
.header {
    flex: 0 0 50px;
    height: 50px;
    width: 100%;
    text-wrap: nowrap;
    position: relative;
    z-index: 10;
}

    .header .header-gutters {
        margin: 0 5px !important;
    }

.footer {
    margin: 0;
    padding: 0;
    flex: 0 0 20px;
    height: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
    padding-right: 10px;
}

/* Middle area consumes remaining height between header & footer */
.main {
    display: flex; /* horizontal row */
    flex: 1 1 auto; /* <-- this is the key */
    min-height: 0; /* allow internal scrolling */
    min-width: 0; /* allow row to shrink so .content respects viewport (wide children don't expand shell) */
    overflow: hidden; /* keep scrollbars in children */
}

/* Default (expanded) */
.nav {
    /* Use the variable from ancestors; fallback to 230px */
    flex: 0 0 var(--nav-w, 230px);
    width: var(--nav-w, 230px);
    min-width: var(--nav-w, 230px);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transition: width .2s ease, flex-basis .2s ease, min-width .2s ease;
    /* Remove unconditional padding; will be added only when needed */
    /* padding-inline-end: 8px; */
    box-sizing: content-box;
}

    /* Add padding only when vertical scrollbar actually present */
    .nav.has-v-scrollbar {
        margin-inline-end: 8px;
    }

    /* When nav is collapsed � support common patterns */
    .nav.collapsed { /* if the component adds 'collapsed' on itself */
        --nav-w: 50px;
    }

/* Right content pane: fills the rest, scrolls vertically */
.content {
    flex: 1 1 auto;
    width: 100%; /* prevent overflow from long content */
    min-width: 0; /* critical: flex default min-width:auto lets wide descendants expand pane past viewport */
    max-width: 100%;
    min-height: 100%; /* enable scrolling correctly inside flex */
    height: 100%;
    overflow: hidden;
}

/* Console report pages: fill the body pane; grid area flexes so scrollbars sit on the pane bottom */
.report-page {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* Product Sales (and similar): plain flex row inside FluentToolbar — nested FluentStack + flex:1 often collapses to 0 width */
.report-page__toolbar-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    overflow: visible;
}

.report-page__toolbar-row__product-types {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.report-page__scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sticky column headers while scrolling report grids (scroll parent: .report-page__scroll) */
.report-page__scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--neutral-fill-rest);
}

fluent-number-field::part(control) {
    text-align: right;
}

.filter-search-input::part(clear-button) {
    min-width: 20px;
    width: 20px;
    padding: 3px;
    margin: 0;
}

.filter-search-input::part(control) {
    padding-inline-end: 0px;
}

.wbj-round-button {
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

    /* Hover effect � invert shading */
    .wbj-round-button:hover {
        background: rgba(0,0,0,0.8);
    }

.wbj-button-medium {
    height: 25px;
    width: 25px;
}

#TableMaster tbody tr {
    background: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-base-color);
    cursor: pointer;
}

    #TableMaster tbody tr:focus {
        outline: none;
    }

    #TableMaster tbody tr.approved {
        color: var(--neutral-base-color);
    }

    #TableMaster tbody tr.activated {
        color: var(--accent-fill-rest);
    }

    #TableMaster tbody tr.choosen {
        background: var(--neutral-layer-2);
    }

    #TableMaster tbody tr.focused {
        background: var(--neutral-layer-3);
        border-bottom: 1px solid var(--accent-base-color);
    }

    #TableMaster tbody tr:hover {
        background: var(--neutral-layer-4);
    }

.body-content > p {
    display: inline-block;
    width: calc(100% - 100px);
    text-align: center;
    padding: 1.5rem;
    color: var(--fill-color);
    font-weight: 700;
    background: var(--info);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 50px;
}

    .body-content > p:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Card inside authentication overlay */
.splash-card-auth:focus,
.splash-card-auth:focus-visible {
    outline: none;
    box-shadow: 0 12px 30px rgba(96, 165, 250, .15), 0 1px 3px rgba(0, 0, 0, .25); /* keep your nice shadow */
}

/* Just in case the H1 itself is being focused by some script */
.splash-card-title:focus,
.splash-card-title:focus-visible {
    outline: none;
}


.pattern-svg-lines {
    background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>\
<defs>\
<pattern id='diag' width='10' height='10' patternUnits='userSpaceOnUse' patternTransform='rotate(60)'>\
<rect width='5' height='10' fill='rgba(255,255,255,0.15)' />\
</pattern>\
</defs>\
<rect width='100%' height='100%' fill='url(#diag)'/>\
</svg>") repeat, linear-gradient(120deg, #000d1a, #003366);
}


/* IconView styles*/

.product-icon-root {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    width:30px;
    height:30px;
}

/* Make base icon fill the container nicely */
.product-icon-base {
    inline-size: 100%;
    block-size: 100%;
}

/* Overlay container */
.product-icon-overlay {
    position: absolute;
    inset-inline-end: 4px;
    inset-block-end: 4px;
    inline-size: 16px;
    block-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Text badge overlay (M/I/O etc.) */
.product-icon-overlay-text {
    font-weight: 800;
    height: 10px;
    width: 10px;
    font-size: 8px;
    color: var(--accent-fill-rest);
    background: var(--info);
}

/* Navigation button styles */
.nav-button {
    justify-content: flex-start !important;
    text-align: left !important;
}

    .nav-button::part(control) {
        justify-content: flex-start !important;
    }

    /* Home page styles */

/* === Home page layout === */

/* Group container � now a stack, styled like a card */
.home-section {
    padding: 16px 18px 20px;
    border-radius: 16px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.06);
}

/* circle behind group icon */
.home-section-icon {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.home-section-title {
    margin: 0;
}

/* inner grid */
.home-section-grid {
    width: 100%;
    margin-top: 8px;
}

/* feature cards (inner FluentCard) */
.feature-card {
    padding: 12px 14px 10px;
    border-radius: 14px;
    background: var(--neutral-layer-2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
    height: 100%;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
        border-color: var(--accent-stroke-control-default);
        background: color-mix( in srgb, var(--neutral-layer-2) 85%, var(--accent-fill-rest) 15% );
    }

    .feature-card:active {
        transform: translateY(0);
        box-shadow: 0 4px 18px rgb(0 0 0 / 0.14);
    }

/* icon square inside the feature card */
.feature-card-icon {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-layer-3);
}

.feature-card-subtitle {
    color: var(--neutral-foreground-hint);
}

.feature-card-tag {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-hint);
}

.feature-card-cta {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

/* ------------------------------------------------------- */
/* CHIP INPUT SHELL (MIMICS fluent-text-field :host)       */
/* ------------------------------------------------------- */

.tag-shell {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 32px;
    padding: 4px 4px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: calc(var(--control-corner-radius) * 1px);
    font-family: var(--body-font);
    color: var(--neutral-foreground-rest);
    cursor: text;
    /* INPUT REST COLORS */
    background: var(--neutral-fill-input-rest); /* #333333 */
    border: 1px solid var(--neutral-stroke-layer-rest); /* #383838 */
}

    /* underline (rest) uses the same gradient as other inputs */
    .tag-shell::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--neutral-stroke-input-rest); /* gradient line */
        border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
        border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
    }

    /* HOVER: use the hover tokens from your dump */
    .tag-shell:hover {
        background: var(--neutral-fill-input-hover); /* #383838 */
        border-color: var(--neutral-stroke-layer-hover); /* #383838 (same, but token-correct) */
    }

        .tag-shell:hover::before {
            background: var(--neutral-stroke-input-hover); /* hover gradient */
        }

/* FOCUS / ACTIVE: mimic fluent-text-field underline & focus stroke */
@media (forced-colors: none) {
    .tag-shell:focus-within::after,
    .tag-shell:not(:disabled):active::after {
        content: "";
        position: absolute;
        bottom: 0;
        height: calc(var(--focus-stroke-width) * 1px);
        /* accent focus underline */
        background: var(--accent-fill-rest); /* #a2c2e2 */
        border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
        border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
        z-index: 2;
        transition: 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
    }

    .tag-shell:not(:disabled):active::after {
        left: 50%;
        width: 40%;
        transform: translateX(-50%);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .tag-shell:focus-within:not(:active)::after {
        left: 0;
        width: 100%;
        transform: none;
    }
}

/* FOCUS BACKGROUND � use input-focus token */
.tag-shell:focus-within {
    background: var(--neutral-fill-input-focus); /* #272727 */
}

/* ------------------------------------------------------- */
/* CHIP STYLING                                            */
/* ------------------------------------------------------- */

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--type-ramp-minus-1-font-size); /* 12px */
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest); /* #505050 */
}

.tag-chip-text {
    white-space: nowrap;
}

/* Fluent-ish close button */
.tag-chip-remove {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 9px;
    line-height: 1;
    opacity: 0.7;
    color: var(--neutral-foreground-rest); /* #ffffff */
}

    .tag-chip-remove:hover {
        opacity: 1;
        background: var(--neutral-fill-stealth-hover); /* #383838 */
    }

    .tag-chip-remove:focus {
        outline: none;
    }

/* ------------------------------------------------------- */
/* INNER INPUT                                             */
/* ------------------------------------------------------- */

.tag-input-core {
    flex: 1 1 60px;
    min-width: 40px;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    padding: 2px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--neutral-foreground-rest);
}

    /* placeholder colors from dump */
    .tag-input-core::placeholder {
        color: var(--input-placeholder-rest); /* #9e9e9e */
    }

.tag-shell:hover .tag-input-core::placeholder {
    color: var(--input-placeholder-hover); /* #a2a2a2 */
}

/* Product grid container */
.pos-grid {
    height: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    gap: 10px;
    overflow-y: auto; /* smooth scroll inside panel */
}

/* Card tile */
.pos-product-card {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--neutral-layer-1);
    border: 1px solid transparent;
    cursor: pointer;
    height: 100%;
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}

    .pos-product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0,0,0,0.18);
        border-color: var(--accent-stroke-control-default);
        background: color-mix(in srgb, var(--neutral-layer-1) 80%, var(--accent-fill-rest) 20%);
    }

    .pos-product-card:active {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    }

/* Icon chip */
.pos-product-icon {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent);
}

/* Subtitles / footer text */
.pos-product-subtitle {
    opacity: .8;
}

.pos-product-footer {
    margin-top: 4px;
}

/* Order page: allow autocomplete/combobox dropdowns to show when inside the scrollable filters row.
   Scroll container clips dropdowns; when any dropdown is open, allow overflow so the list is visible. */
.order-filters-row:has([aria-expanded="true"]),
.order-filters-row:has(fluent-combobox[open]) {
    overflow: visible;
}
.order-filters-row:has([aria-expanded="true"]) > *,
.order-filters-row:has([aria-expanded="true"]) fluent-horizontal-scroll,
.order-filters-row:has([aria-expanded="true"]) [class*="horizontal-scroll"],
.order-filters-row:has(fluent-combobox[open]) > *,
.order-filters-row:has(fluent-combobox[open]) fluent-horizontal-scroll,
.order-filters-row:has(fluent-combobox[open]) [class*="horizontal-scroll"] {
    overflow: visible !important;
}

/* Settings (theme) popover: above all page content and opaque so badges/sticky bars don't show through */
.app-settings-popover,
fluent-popover.app-settings-popover {
    z-index: 9999 !important;
    isolation: isolate;
    background: var(--neutral-layer-1) !important;
}

/* Popover panel: stack rows vertically (header flex row was collapsing FluentGrid to a single row). */
.app-settings-popover .settings-popover-body,
fluent-popover.app-settings-popover .settings-popover-body,
.settings-popover-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 280px;
    width: 100%;
    box-sizing: border-box;
}

.app-settings-popover .settings-popover-body > *,
fluent-popover.app-settings-popover .settings-popover-body > *,
.settings-popover-body > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* App bar: notification / settings / profile — even gaps and aligned hit targets */
.app-bar-end-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: auto;
}

.app-bar-end-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    flex: 0 0 auto;
}

.app-bar-login-display {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Order experience refresh — soft accent atmosphere (theme tokens, works light/dark) */
.order-workspace {
    --order-radius: 12px;
    --order-radius-card: 10px;
    --order-shadow-soft: 0 4px 16px rgb(0 0 0 / 0.08);
    --order-shadow-sticky: 0 8px 20px rgb(0 0 0 / 0.18);
    --order-group-card-w: 216px;
    --order-surface-bar: color-mix(in srgb, var(--neutral-layer-2) 90%, var(--accent-fill-rest) 10%);
    --order-surface-elevated: color-mix(in srgb, var(--neutral-layer-3) 88%, var(--accent-fill-rest) 12%);
    --order-edge-accent: color-mix(in srgb, var(--neutral-stroke-layer-rest) 78%, var(--accent-fill-rest) 22%);
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px 0;
    background:
        radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--accent-fill-rest) 14%, transparent) 0%, transparent 52%),
        radial-gradient(80% 55% at 0% 100%, color-mix(in srgb, var(--accent-fill-rest) 9%, transparent) 0%, transparent 48%),
        linear-gradient(165deg, var(--neutral-layer-1) 0%, color-mix(in srgb, var(--neutral-layer-2) 96%, var(--accent-fill-rest) 4%) 45%, var(--neutral-layer-2) 100%);
}

.order-workspace .order-command-bar,
.order-workspace .order-filter-bar,
.order-workspace .order-secondary-toolbar {
    padding: 6px !important;
    margin-bottom: 4px;
    background: var(--order-surface-bar) !important;
    border-bottom: calc(var(--stroke-width) * 1px) solid var(--order-edge-accent) !important;
    box-shadow: var(--order-shadow-soft), inset 0 1px 0 color-mix(in srgb, var(--accent-fill-rest) 16%, transparent);
}

/* Stay above sticky order-top-panel if stacking contexts ever overlap (filter must not cover group cards) */
.order-workspace .order-filter-bar {
    position: relative;
    z-index: 2;
}

.order-workspace .order-queue-group-card {
    padding: 1px 5px !important;
}

.order-workspace .order-queue-group-card fluent-label {
    font-size: 11px;
}

.order-workspace .order-opened-summary-sticky {
    margin-bottom: 2px;
}

.order-workspace .order-opened-summary-strip {
    border-radius: 8px !important;
    padding: 3px 6px !important;
}

.order-workspace .order-opened-summary-actions {
    gap: 3px;
}

.order-workspace .order-pay-queue-scroll {
    background: var(--order-surface-bar);
    box-sizing: border-box;
}

.order-command-bar,
.order-filter-bar,
.order-secondary-toolbar {
    border-radius: var(--order-radius);
    margin: 0 0 6px;
    padding: 8px !important;
    box-shadow: var(--order-shadow-soft);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}

.order-filter-bar {
    margin-top: 0;
    margin-bottom: 4px;
}

.order-command-bar fluent-counter-badge,
.order-filter-bar fluent-counter-badge,
.order-secondary-toolbar fluent-counter-badge {
    flex-shrink: 0;
}

.order-command-bar fluent-spacer,
.order-filter-bar fluent-spacer,
.order-secondary-toolbar fluent-spacer {
    flex-shrink: 1;
    min-width: 8px;
}

.order-command-bar fluent-button::part(control),
.order-filter-bar fluent-button::part(control),
.order-secondary-toolbar fluent-button::part(control) {
    border-radius: 10px;
}

.order-top-panel {
    border-radius: var(--order-radius);
    margin: 0 0 8px;
    padding-top: 4px; /* clear visual gap below filter bar; avoids cards looking tucked under it */
    /* Do not mix overflow-x: hidden with overflow-y: visible — spec forces overflow-y to auto (extra vertical scrollbar). */
    overflow: visible;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.order-payment-card {
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 88%, var(--accent-fill-rest) 12%) !important;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.order-payment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
}

.order-order-card {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 85%, var(--accent-fill-rest) 15%);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
}

.order-order-card fluent-label {
    min-width: 0;
}

.order-order-card .fluent-stack,
.order-order-card fluent-stack {
    min-width: 0;
}

.order-empty-state {
    color: var(--neutral-foreground-hint);
}

/* Console entity list + editor — shared across all /console/* masters and editors */
.console-entity-page {
    height: 100%;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.console-entity-shell {
    height: 100%;
    border-radius: 14px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-layer-rest);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    overflow: hidden;
}

/* TableMaster sticky toolbar strip (first child inside #TableMaster) */
.console-entity-shell #TableMaster > div:first-child {
    padding: 6px 8px;
    border-bottom: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-2);
}

.console-entity-editor {
    padding: 8px !important;
    gap: 8px;
}

.console-entity-editor-header {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
}

.console-entity-editor-toolbar {
    padding: 6px 8px;
}

.console-entity-editor-close {
    border-radius: 8px;
}

/* Order queue: group strip uses order-secondary-toolbar (same chrome as product/tag strips); this class only tweaks layout */
.order-queue-strip {
    align-items: flex-start; /* cards align to top of bar; avoids extra gap above horizontal scroll affordance */
    min-height: 0;
    height: fit-content;
    max-height: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Space / walk-in cards scroller: width + flex like outlet row; surface matches pay queue via .order-pay-queue-scroll */
.order-queue-strip .order-queue-group-strip-scroll {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: fit-content;
    max-height: none;
    box-sizing: border-box;
}

/* Inside sticky top panel: bar sits on neutral surface like pay queue strip */
.order-workspace .order-top-panel .order-queue-strip.order-secondary-toolbar {
    margin-top: 0;
    margin-bottom: 6px;
}

.order-queue-group-card {
    min-height: 0 !important;
    padding: 2px 6px !important;
    box-sizing: border-box;
}

/* Strip cards: don't shrink below content (min-height:0 was clipping the two-line layout) */
.order-queue-strip .order-queue-group-card {
    min-height: min-content !important;
}

.order-queue-group-card fluent-label {
    line-height: 1.2;
}

.order-queue-orders-rail {
    flex: 0 0 clamp(260px, 26vw, 280px);
    width: clamp(260px, 26vw, 280px);
    max-width: 280px;
    min-width: 260px;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 75%, var(--accent-fill-rest) 25%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--neutral-layer-2) 90%, var(--accent-fill-rest) 10%) 0%, var(--neutral-layer-2) 55%);
    scrollbar-gutter: stable;
}

.order-queue-group-card-host {
    flex-shrink: 0;
    align-self: center;
    width: var(--order-group-card-w);
    min-width: var(--order-group-card-w);
    max-width: var(--order-group-card-w);
}

.order-opened-summary-card fluent-stack,
.order-opened-summary-strip fluent-stack {
    min-width: 0;
}

.order-opened-panel {
    width: 100%;
    min-width: 0;
}

.order-opened-summary-sticky {
    position: sticky;
    top: 0;
    z-index: 6;
    padding-bottom: 0;
    margin-bottom: calc(var(--design-unit) * 1px);
    background: color-mix(in srgb, var(--neutral-layer-1) 94%, var(--accent-fill-rest) 6%);
}

.order-opened-summary-strip {
    background: color-mix(in srgb, var(--neutral-layer-3) 86%, var(--accent-fill-rest) 14%) !important;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 80%, var(--accent-fill-rest) 20%) !important;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.1), inset 0 1px 0 color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.order-opened-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    align-items: center;
}

.order-opened-summary-actions fluent-button {
    flex: 1 1 132px;
    min-width: min(108px, 100%);
}

.order-opened-summary-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 3px 8px;
    width: 100%;
    align-items: start;
}

.order-opened-summary-meta-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-opened-summary-meta-total {
    align-items: flex-end;
    text-align: right;
}

.order-opened-summary-fill {
    flex: 1 1 auto;
    min-height: 8px;
    width: 100%;
}

.order-item-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    width: 100%;
    align-items: baseline;
}

.order-item-card-metrics .order-item-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    border-bottom: 1px dashed var(--neutral-stroke-layer-rest);
    padding: 4px 0;
}

.order-item-card-metrics .order-item-metric-label {
    font-size: 11px;
    opacity: 0.85;
    white-space: nowrap;
    color: var(--neutral-foreground-rest);
    flex: 0 0 auto;
}

.order-item-card-metrics .order-item-metric-value {
    font-size: 13px;
    font-weight: 750;
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-item-notes-block {
    padding: 6px 10px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: color-mix(in srgb, var(--neutral-layer-2) 92%, var(--accent-fill-rest) 8%);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 85%, var(--accent-fill-rest) 15%);
    border-left: 3px solid color-mix(in srgb, var(--accent-fill-rest) 45%, var(--neutral-stroke-layer-rest));
    width: 100%;
    box-sizing: border-box;
}

/* Production experience refresh — warm accent + success hint on ready lane */
.production-workspace {
    --production-toolbar-radius: 12px;
    --production-toolbar-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
    --production-ready-pane-width: 340px;
    --production-surface-bar: color-mix(in srgb, var(--neutral-layer-2) 89%, var(--accent-fill-rest) 11%);
    --production-edge: color-mix(in srgb, var(--neutral-stroke-layer-rest) 76%, var(--accent-fill-rest) 24%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding: 6px 8px 0;
    box-sizing: border-box;
    background:
        radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--success-fill-rest) 10%, transparent) 0%, transparent 50%),
        radial-gradient(70% 50% at 100% 80%, color-mix(in srgb, var(--accent-fill-rest) 11%, transparent) 0%, transparent 45%),
        linear-gradient(195deg, var(--neutral-layer-1) 0%, color-mix(in srgb, var(--neutral-layer-2) 95%, var(--accent-fill-rest) 5%) 100%);
}

.production-toolbar {
    border-radius: var(--production-toolbar-radius);
    margin: 0 0 4px;
    padding: 8px !important;
    box-shadow: var(--production-toolbar-shadow);
    overflow-x: auto;
    overflow-y: visible;
}

.production-workspace .production-toolbar {
    flex-shrink: 0;
    padding: 6px !important;
    background: var(--production-surface-bar) !important;
    border-bottom: calc(var(--stroke-width) * 1px) solid var(--production-edge) !important;
    box-shadow: var(--production-toolbar-shadow), inset 0 1px 0 color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
}

.production-main-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}

.production-workspace .production-ready-pane {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--neutral-layer-4) 82%, var(--success-fill-rest) 18%) 0%,
        color-mix(in srgb, var(--neutral-layer-4) 94%, var(--success-fill-rest) 6%) 42%,
        var(--neutral-layer-4) 100%);
    border-right: calc(var(--stroke-width) * 1px) solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 65%, var(--success-fill-rest) 35%);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.production-workspace .production-ready-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.production-workspace .production-ready-list-inner {
    padding: 0 10px 10px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.production-workspace .production-ready-header {
    background: color-mix(in srgb, var(--neutral-layer-4) 88%, var(--success-fill-rest) 12%) !important;
    border-bottom: calc(var(--stroke-width) * 1px) solid color-mix(in srgb, var(--neutral-stroke-layer-rest) 70%, var(--success-fill-rest) 30%) !important;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--success-fill-rest) 18%, transparent);
}

.production-workspace .production-active-band {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--neutral-layer-4) 91%, var(--accent-fill-rest) 9%) 0%,
        var(--neutral-layer-4) 70%);
    border-bottom: calc(var(--stroke-width) * 1px) solid var(--production-edge);
    box-sizing: border-box;
}

.production-toolbar fluent-button::part(control) {
    border-radius: 10px;
}

.production-workspace .order-item-card {
    min-height: 130px;
}