/* =========================================================================
   Goa Parking dark theme (2026-08-24, client direction: "map the UI like the
   mobile app, same theme, same look and feel" -- this is the Web sibling of
   RestaurantKOT.Mobile's own 2026-08-24 re-theme, both ported from the same
   Samples/goa-parking.html reference). Variable names below are the SAME
   names goa-parking.html itself uses (--bg/--surface/--yellow/--text/...),
   not renamed to match the old earthy theme's --brand-mud, --ink, and
   --neutral- prefixed names -- this keeps the palette trivially diffable against the reference
   file rather than hiding it behind unrelated legacy names. Same
   architecture as the earthy theme this replaces: bootstrap.min.css is
   precompiled (no Sass build step), so its component classes bake colors in
   as literal hex at build time -- every Bootstrap class below is overridden
   explicitly, scoped to exactly the classes actually used across this app.
   Loads after bootstrap.min.css (see App.razor), so plain cascade order
   wins without needing !important anywhere here except where Bootstrap's
   own utility classes carry !important themselves (matched below).

   Fonts are self-hosted (wwwroot/fonts/*.ttf, copied from the same files
   Mobile already bundles) rather than goa-parking.html's own Google Fonts
   @import -- this project's own LAN-only design principle (see the vendored
   jsQR note elsewhere in this app) applies here too.
   ========================================================================= */

@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url('fonts/ShareTechMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
    --bg: #121317;
    --surface: #1c1e25;
    --surface-2: #262931;
    --line: #34373f;
    --yellow: #f4c21c;
    --yellow-dim: #8a6f14;
    --on-accent: #1a1500; /* dark text sitting on a yellow/amber fill */
    --green: #34d399;
    --green-dim: #0f3d30;
    --red: #f65a5a;
    --red-dim: #3d1616;
    --amber: #f4a52c;
    --amber-dim: #4d3212;
    --text: #eceef0;
    --text-dim: #9ba0ac;

    --font-display: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-led: 'Share Tech Mono', monospace;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 20px;
}

html, body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-display);
    letter-spacing: .3px;
}

a, .btn-link {
    color: var(--yellow);
}

    a:hover, .btn-link:hover {
        color: var(--amber);
    }

.btn {
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Button taxonomy inverted to match goa-parking.html's own .btn/.action-btn
   split (2026-08-24, mirrors the same change already made in Mobile's
   Styles.xaml): only the primary CTA is a solid fill; every semantic
   button (success/danger/warning/info) is a colored outline on a dark
   surface, not a solid color block. Every solid .btn-* still redeclares
   Bootstrap 5's own --bs-btn-disabled-* custom properties (not just
   background-color/border-color directly) -- Bootstrap's disabled-state
   rule beats a plain single-class override regardless of source order,
   same gap the earthy theme already had to work around. */
.btn-primary {
    color: var(--on-accent);
    background-color: var(--yellow);
    border-color: var(--yellow);
    --bs-btn-disabled-color: var(--on-accent);
    --bs-btn-disabled-bg: var(--yellow);
    --bs-btn-disabled-border-color: var(--yellow);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--amber) !important;
        border-color: var(--amber) !important;
        color: var(--on-accent) !important;
    }

.btn-outline-primary {
    color: var(--yellow);
    border-color: var(--yellow);
    --bs-btn-disabled-color: var(--yellow);
    --bs-btn-disabled-border-color: var(--yellow);
}

    .btn-outline-primary:hover {
        background-color: var(--yellow);
        border-color: var(--yellow);
        color: var(--on-accent);
    }

.btn-secondary {
    color: var(--text);
    background-color: var(--surface-2);
    border-color: var(--line);
    --bs-btn-disabled-color: var(--text-dim);
    --bs-btn-disabled-bg: var(--surface-2);
    --bs-btn-disabled-border-color: var(--line);
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        background-color: var(--line) !important;
        border-color: var(--line) !important;
        color: var(--text) !important;
    }

.btn-outline-secondary {
    color: var(--text-dim);
    border-color: var(--line);
    --bs-btn-disabled-color: var(--text-dim);
    --bs-btn-disabled-border-color: var(--line);
}

    .btn-outline-secondary:hover {
        background-color: var(--surface-2);
        border-color: var(--line);
        color: var(--text);
    }

.btn-success {
    color: var(--green);
    background-color: transparent;
    border-color: var(--green);
    --bs-btn-disabled-color: var(--green);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--green);
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        background-color: var(--green-dim) !important;
        border-color: var(--green) !important;
        color: var(--green) !important;
    }

.btn-danger, .btn-outline-danger {
    color: var(--red);
    background-color: transparent;
    border-color: var(--red);
    --bs-btn-disabled-color: var(--red);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--red);
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
    .btn-outline-danger:hover {
        background-color: var(--red-dim) !important;
        border-color: var(--red) !important;
        color: var(--red) !important;
    }

/* goa-parking.html has no separate teal/"info" hue -- info reuses amber,
   same choice already made for Mobile's InfoButton/WarningButton. */
.btn-warning, .btn-info {
    color: var(--amber);
    background-color: transparent;
    border-color: var(--amber);
    --bs-btn-disabled-color: var(--amber);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--amber);
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active,
    .btn-info:hover, .btn-info:focus, .btn-info:active {
        background-color: var(--amber-dim) !important;
        border-color: var(--amber) !important;
        color: var(--amber) !important;
    }

.bg-primary { background-color: var(--yellow) !important; color: var(--on-accent) !important; }
.bg-secondary { background-color: var(--surface-2) !important; }
.bg-success { background-color: var(--green-dim) !important; color: var(--green) !important; }
.bg-danger { background-color: var(--red-dim) !important; color: var(--red) !important; }
.bg-warning { background-color: var(--amber-dim) !important; color: var(--amber) !important; }
.bg-info { background-color: var(--amber-dim) !important; color: var(--amber) !important; }
.bg-dark { background-color: var(--bg) !important; }
.bg-light { background-color: var(--surface) !important; }
/* Missed in the original theme audit (2026-09-10, client report: Vendors'
   category-linking panel showed a white box with white text) -- every other
   .bg-* utility actually used in the app was remapped here, this one alone
   wasn't, so it fell through to Bootstrap's own near-white default with
   --text's light color sitting on top of it. */
.bg-body-tertiary { background-color: var(--surface-2) !important; }

.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-dark { color: var(--text) !important; }
.text-muted { color: var(--text-dim) !important; }
/* Bootstrap's .form-text defaults to a near-black color meant for a light
   background -- invisible against this theme's dark surfaces. No page used
   this class until the Ingredients UOM-lock note (2026-09-11) surfaced the
   gap, same class of bug as the earlier .modal/.btn-close ones. */
.form-text { color: var(--text-dim) !important; }

.border-success { border-color: var(--green) !important; }

.table-danger, .table-danger > * { --bs-table-bg: var(--red-dim); --bs-table-color: var(--text); }
.table-warning, .table-warning > * { --bs-table-bg: var(--amber-dim); --bs-table-color: var(--text); }
.table-secondary, .table-secondary > * { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text); }
/* Bootstrap 5.3's real striping/hover mechanism reads --bs-table-striped-*
   and --bs-table-hover-* (layered via --bs-table-*-type, see bootstrap.css)
   -- --bs-table-accent-bg is a legacy fallback that box-shadow only reaches
   when neither of those is set, so overriding it alone did nothing. Left
   unset, --bs-table-striped-color/--bs-table-hover-color default to
   --bs-emphasis-color (#000, Bootstrap's own :root default -- this app never
   sets [data-bs-theme=dark]) -- black text on a background just 5% off the
   page's own near-black --bg, i.e. invisible (confirmed live, 2026-08-29,
   client report: alternating rows unreadable on Menu Categories). */
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: var(--surface); --bs-table-striped-color: var(--text); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); }
/* .table-active (a "this row is selected" marker, used on RFQs/Purchase Orders/
   Stock/ItemDetailsPanel row-pickers) reads --bs-table-active-bg/-color directly,
   not the striped/hover -type layering above -- left unset it defaulted to
   Bootstrap's own black-text assumption on a background this app never lightens,
   i.e. black text on a near-black row (client report, 2026-09-16). */
/* Its still NOT WORKING (client directly marking this  for YOU to read, 2026-09-16 12:56 PM*/
/* There I did it, now it has a yellow text after its selected, clearly visisble, Saved a LOT of Tokens*/
.table-active > * {
    --bs-table-active-bg: var(--surface-2);
    --bs-table-active-color: var(--text);
    color: var(--text);
    color: #ffeb3b !important; /* Force white text */
}
/* Selected row styles */
/*.table-active > * {
    --bs-table-active-color: #ffeb3b;*/ /* Yellow text via Bootstrap variable */
    /*color: #ffeb3b !important;*/ /* Force yellow text */
/*}*/

/* Hover effect for selected row */
.table-active:hover > * {
    background-color: #333 !important; /* Dark grey hover background */
    color: #ffeb3b !important; /* Keep yellow text on hover */
}


.table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--line);
}
.table tbody tr:hover > * {
    background-color: #333 !important; /* Dark grey hover background */
    color: var(--text)
}
.alert-success { color: var(--green); background-color: var(--green-dim); border-color: var(--green-dim); }
.alert-danger { color: var(--red); background-color: var(--red-dim); border-color: var(--red-dim); }
.alert-warning { color: var(--amber); background-color: var(--amber-dim); border-color: var(--amber-dim); }
.alert-info { color: var(--amber); background-color: var(--amber-dim); border-color: var(--amber-dim); }
.alert-secondary { color: var(--text-dim); background-color: var(--surface-2); border-color: var(--line); }

.alert {
    border-radius: var(--radius-md);
}

.card {
    background-color: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
}

.card-header {
    background-color: var(--surface-2);
    border-color: var(--line);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.card-body {
    padding: 1.25rem 1.35rem;
}

/* Bootstrap's own .form-control/.form-select bake in a white background +
   near-black text at build time -- unlike the earthy (light) theme, which
   could get away with only overriding border-radius, a dark theme MUST
   also override background-color/color explicitly here or every input
   renders as a jarring white box. */
.form-control, .form-select {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--text);
    border-radius: var(--radius-sm);
}

    .form-control:focus, .form-select:focus {
        background-color: var(--surface-2);
        border-color: var(--yellow);
        color: var(--text);
        box-shadow: 0 0 0 0.2rem rgba(244, 194, 28, 0.25);
    }

    .form-control::placeholder {
        color: var(--text-dim);
    }

    .form-control:disabled, .form-select:disabled {
        background-color: var(--surface);
        color: var(--text-dim);
    }

.form-check-input {
    background-color: var(--surface-2);
    border-color: var(--line);
}

    .form-check-input:checked {
        background-color: var(--yellow);
        border-color: var(--yellow);
    }

.input-group-text {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--text-dim);
}

.dropdown-menu {
    background-color: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-dropdown-link-active-color: var(--on-accent);
    --bs-dropdown-link-active-bg: var(--yellow);
    --bs-dropdown-header-color: var(--text-dim);
    --bs-dropdown-divider-bg: var(--line);
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
}

.badge {
    border-radius: var(--radius-sm);
}

.modal-content {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
}

.modal-header, .modal-footer {
    border-color: var(--line);
}

/* 2026-09-10: Bootstrap's .btn-close bakes in a dark-tinted X (built for a
   light modal header) -- ItemDetailsPanel.razor already had this same
   pre-existing bug (near-invisible close button against --surface), never
   flagged until the new master-page Add/Edit modals surfaced the same
   .modal-header pairing again. Bootstrap's own .btn-close-white recipe,
   applied globally rather than per usage so every current and future modal
   in this app gets a visible close button for free. */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.nav-tabs {
    border-color: var(--line);
    --bs-nav-tabs-link-active-color: var(--on-accent);
    --bs-nav-tabs-link-active-bg: var(--yellow);
    --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--yellow);
}

    .nav-tabs .nav-link {
        color: var(--text-dim);
    }

    .nav-tabs .nav-link:hover {
        border-color: var(--line);
        color: var(--text);
    }

.list-group-item {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg), 0 0 0 0.25rem var(--yellow);
}

.content {
    padding-top: 1.25rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--green);
}

.invalid {
    outline: 1px solid var(--red);
}

.validation-message {
    color: var(--red);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--line);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-dim);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================================
   Goa Parking component classes, ported close to verbatim from
   Samples/goa-parking.html so pages can adopt the exact same visual
   vocabulary Mobile already uses (chip rows instead of <select> dropdowns,
   the LED occupancy board, the parking-bay-style status grid). Not
   Bootstrap overrides -- new utility classes pages opt into directly.
   ========================================================================= */

/* chip row -- goa-parking's .mode-switch/.duration-chip pattern, used for
   order-type / section / category / station selectors instead of a
   <select>, mirroring Mobile's ChipViewModel chip strip exactly. */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
}

    .chip:hover {
        border-color: var(--yellow-dim);
    }

    .chip.active {
        background: var(--yellow);
        border-color: var(--yellow);
        color: var(--on-accent);
    }

/* status tile grid -- goa-parking's .grid/.cell (parking bays), reused here
   for the table-picker grid: same always-solid-fill-by-status + a
   selection ring, not a fill-toggle, exactly like Mobile's
   StatusTileViewModel/TakeOrderPage table grid. */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.status-cell {
    aspect-ratio: 1.4 / 1;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    color: var(--on-accent);
    text-align: center;
    padding: 4px;
}

    .status-cell .sub {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 9px;
        opacity: .85;
        margin-top: 2px;
    }

    .status-cell.free { background: var(--green); }
    .status-cell.occupied { background: var(--red); color: #fff; }
    .status-cell.reserved { background: var(--amber); }
    .status-cell.muted { background: var(--line); color: var(--text-dim); }
    .status-cell:active { transform: scale(.94); }
    /* !important: Bootstrap's own button:focus:not(:focus-visible){outline:0}
       has higher specificity (an element + two pseudo-classes) than this
       two-class selector, and would otherwise suppress the ring right after
       a mouse click -- exactly when a just-tapped selection needs to be
       visible, not hidden by an unrelated focus-outline reset. */
    .status-cell.selected { outline: 3px solid var(--yellow) !important; outline-offset: 1px; }

/* LED occupancy board -- goa-parking's signature element, reused on Kitchen
   Display for live pending/preparing/ready counts, same as Mobile's LED
   counts board on KitchenBoardPage. */
.board {
    background: #0b0c0f;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    margin-bottom: 18px;
}

.board-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.board-row {
    display: flex;
    gap: 10px;
}

.board-cell {
    flex: 1;
    background: #050506;
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #26282f;
}

    .board-cell .num {
        font-family: var(--font-led);
        font-size: 32px;
        line-height: 1;
        text-shadow: 0 0 8px currentColor;
    }

    .board-cell.free .num, .board-cell.ready .num { color: var(--green); }
    .board-cell.full .num { color: var(--red); }
    .board-cell.reserved .num, .board-cell.pending .num { color: var(--amber); }
    .board-cell.preparing .num { color: var(--yellow); }

    .board-cell .lbl {
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--text-dim);
        margin-top: 6px;
        text-transform: uppercase;
    }

/* semantic outline pill, mirrors goa-parking's .action-btn.checkin/checkout
   -- used where a page wants a labeled status/action pill rather than a
   solid Bootstrap badge. */
.action-btn {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
}

    .action-btn.ok { border-color: var(--green); color: var(--green); }
    .action-btn.warn { border-color: var(--amber); color: var(--amber); }
    .action-btn.danger { border-color: var(--red); color: var(--red); }
    .action-btn:active { transform: scale(.98); }

.field-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 6px;
}

.mono {
    font-family: var(--font-mono);
}

/* Reports.razor's Re-Print Bills panel keeps a .print-area off-screen at all
   times (it's a re-print target, not part of the report list itself) and only
   wants it to actually appear on the printed page. Plain inline
   position:absolute;left:-9999px would stay in effect during print too since
   the print rules below only ever touch `display`, so this has to be a class
   the print media query can explicitly reset. */
.print-staging-area {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Print-friendly views (Billing.razor's #printable-bill, StaffManagement.razor's
   #printable-badge) -- hides everything except the current page's .print-area so a
   cashier/manager can print just the bill/badge, not the whole app chrome (B3/S3).
   The receipt itself always prints on white paper regardless of the on-screen
   theme -- see .print-area's own light-background rule below, matching
   goa-parking.html's own .receipt (light card even inside the dark app). */
@media print {
    .print-staging-area {
        position: static;
        left: auto;
        top: auto;
    }

    @page {
        margin: 8mm;
    }

    body {
        font-size: 11px;
        background: #fff;
    }

    body :not(.print-area):not(.print-area *):not(:has(.print-area)) {
        display: none !important;
    }

    /* A .no-print element nested INSIDE a .print-area (e.g. StaffManagement.razor's
       badge-page instructional text) still needs to stay hidden even though its
       ancestor is exempted from the rule above. */
    .no-print {
        display: none !important;
    }

    /* Redefine the theme's own custom properties inside .print-area's scope
       (not just a flat color:/background: on the element itself) -- table
       cells, card borders, and every other rule below reference var(--text)/
       var(--line)/etc. directly, and those would otherwise keep resolving
       to their light-on-dark screen values (e.g. --text: #eceef0, near-
       invisible on white paper) since custom properties aren't overridden
       by a plain `color` declaration on an ancestor. */
    .print-area {
        --bg: #fff;
        --surface: #fff;
        --surface-2: #f4f1e8;
        --line: #ccc;
        --text: #1a1a1a;
        --text-dim: #555;
        width: 100%;
        background: #fff;
        color: var(--text);
    }

    /* Condensed for a small/thermal printer (O5): tighter table rows and
       heading sizes than the on-screen Bootstrap defaults. */
    .print-area table {
        margin-top: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }

    .print-area .table > :not(caption) > * > * {
        padding: 0.15rem 0.35rem;
    }

    .print-area h4 {
        font-size: 1.05rem;
        margin-bottom: 0.15rem;
    }

    .print-area p {
        margin-bottom: 0.25rem;
    }
}

/* Take Order's table grid (2026-09-25). Fixed box on purpose: the tiles used to be sized by their
   content with a min-width, so seating one table added a line, widened that button and re-flowed the
   whole row (client report: "the moment you select 2 the formation changes for that row and it become 4
   pushing 1 down"). A fixed width and height means nothing a tile displays can ever move its
   neighbours. The table number is the biggest thing on it; the status is carried by the fill colour and
   a drawn mark, so the number no longer competes with a status word for space. */
.table-tile {
    width: 5.4rem;
    height: 4.9rem;
    padding: 0.3rem 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    overflow: hidden;
}

.table-tile-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    line-height: 1;
}

.table-tile-status {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Spelled out rather than left to the icon alone, but quiet enough that the number still leads. */
.table-tile-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}

.table-tile-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}

.table-tile-note {
    font-size: 0.7rem;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 2026-10-13 UI pass ------------------------------------------------------------------------ */

/* Bootstrap's own outline-success/warning greens and yellows were tuned for a white page; on this
   background the green measured about 4:1. Same hues as the rest of the theme instead. */
.btn-outline-success {
    color: var(--green);
    border-color: var(--green);
    --bs-btn-disabled-color: var(--green);
    --bs-btn-disabled-border-color: var(--green);
}

    .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
        background-color: var(--green-dim) !important;
        border-color: var(--green) !important;
        color: var(--green) !important;
    }

.btn-outline-warning {
    color: var(--amber);
    border-color: var(--amber);
}

    .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
        background-color: var(--amber-dim) !important;
        border-color: var(--amber) !important;
        color: var(--amber) !important;
    }

/* Table tiles carry their state as a FILL, so a seated table can be told from a free one across the
   room: green = free, amber = party seated but nothing ordered yet (or held for a reservation),
   red = an order is open, grey = blocked. Before this a seated table and a free one were the same
   green outline and only a small timer told them apart. The selected table gets a yellow ring on top
   of its own colour instead of changing colour, so selecting never hides the state. */
.table-tile.tile-free {
    color: var(--green);
    background-color: var(--green-dim);
    border-color: var(--green);
}

.table-tile.tile-seated {
    color: var(--amber);
    background-color: var(--amber-dim);
    border-color: var(--amber);
}

.table-tile.tile-occupied {
    color: #ffb4b4;
    background-color: var(--red-dim);
    border-color: var(--red);
}

.table-tile.tile-blocked {
    color: var(--text-dim);
    background-color: var(--surface-2);
    border-color: var(--line);
    opacity: 0.75;
}

.table-tile:hover {
    filter: brightness(1.2);
}

.table-tile.tile-selected {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

.table-tile-label {
    font-size: 0.68rem;
    opacity: 0.9;
}

.table-tile-note {
    font-size: 0.75rem;
}

.tile-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.tile-legend-swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    border: 1px solid;
    margin-right: 0.3rem;
    vertical-align: -0.1rem;
}

/* Quantity steppers: big enough to hit with a thumb (were 27 x 31 px). */
.qty-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.qty-input {
    width: 3.4rem;
    min-height: 2.5rem;
}

/* Take Order on a phone or small tablet: the cart column drops below the whole menu, so a bar pinned
   to the bottom of the screen keeps the running total and the way to the Send button in reach. */
.cart-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .cart-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        background: var(--surface-2);
        border-top: 1px solid var(--yellow);
    }

    .has-cart-bar {
        padding-bottom: 4.5rem;
    }

    .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1 {
        font-size: 1.6rem;
    }
}

@media print {
    .cart-bar {
        display: none !important;
    }
}

/* ---- Kitchen Display and Billing (2026-10-13 UI pass) ------------------------------------------ */

/* A ticket's left edge says how it stands: plain while fresh, amber once it has waited 10 minutes,
   red after 20, green when every item is ready and it is waiting to be picked up. */
.kds-ticket {
    border-left: 5px solid var(--line);
}

    .kds-ticket.kds-slow {
        border-left-color: var(--amber);
    }

    .kds-ticket.kds-late {
        border-left-color: var(--red);
        box-shadow: 0 0 0 1px var(--red);
    }

    .kds-ticket.kds-ready {
        border-left-color: var(--green);
    }

.kds-age {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.kds-slow .kds-age {
    color: var(--amber);
}

.kds-late .kds-age {
    color: var(--red);
    font-weight: 700;
}

/* Read from a step back: the quantity and the dish are the two things the cook needs. */
.kds-qty {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--yellow);
}

.kds-name {
    font-size: 1.05rem;
    font-weight: 600;
}

.kds-item-preparing {
    background-color: var(--amber-dim);
}

.kds-item-ready .kds-name, .kds-item-ready .kds-qty {
    color: var(--green);
}

.kds-item-cancelled .kds-name, .kds-item-cancelled .kds-qty {
    color: var(--text-dim);
    text-decoration: line-through;
}

.kds-action {
    min-height: 2.75rem;
    min-width: 5rem;
    font-weight: 700;
}

.kds-cancel {
    min-height: 2.75rem;
    min-width: 2.25rem;
    padding: 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-dim);
}

    .kds-cancel:hover {
        color: var(--red) !important;
        border-color: var(--red) !important;
    }

/* Billing */
.pay-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 1rem;
    max-width: 34rem;
}

.pay-balance {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--yellow);
}

.bill-row-selected {
    box-shadow: inset 4px 0 0 var(--yellow);
    background-color: var(--surface-2);
}

.empty-hint {
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    color: var(--text-dim);
}

.input-group-text {
    background-color: var(--surface-2);
    color: var(--text-dim);
    border-color: var(--line);
}

/* A guest's request on a kitchen ticket ("no onions"): the one line a cook must not miss. */
.kds-note {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-left: 3px solid var(--yellow);
    background: var(--surface-2);
    color: var(--yellow);
    font-weight: 700;
}