/* =============================================================================
   mesero.css — the Mesero surface's own stylesheet (#54, phase 2 of #52)
   =============================================================================

   The stated goal of the extraction is "one master sheet for the WebApp, one for
   the Mesero UX". This is the second sheet. It did not exist before, which is why
   #54 was blocked: there was nowhere to move Mesero's 3,700 inline lines TO.

   `mobile.css` is NOT this file, despite the name. All 10 of its rules are scoped
   `body.mobile-layout .app-layout` — it is admin-on-a-small-screen, and its own
   comment says it is scoped so it can never reach the Mesero pages' deliberately
   smaller inputs. The two surfaces are unrelated.

   ---------------------------------------------------------------------------
   SCOPE: `.empty-layout`, and why that is the right boundary
   ---------------------------------------------------------------------------
   Every Mesero page declares `@layout EmptyLayout`, which renders
   `<div class="empty-layout">` (Layout/EmptyLayout.razor:18). Admin pages get
   MainLayout's `.app-layout` / `.public-layout`. That split is what
   docs/architecture/webapp-surface-boundary-contract.md governs, and it is
   already how app.css keeps the admin field primitives off this surface
   (app.css ~:3074, GH-26).

   Declaring the token layer ON `.empty-layout` rather than at `:root` means these
   names simply do not exist on the admin surface. A Mesero token cannot leak into
   admin, and an admin page that tries to consume one gets nothing rather than
   something plausible-but-wrong.

   Seven pages are in scope — note this is TWO MORE than #54 originally listed:

       Pages/Mobile/MobileTabDetail.razor      1275 css lines
       Pages/Mobile/MobileOrders.razor          910
       Pages/Mobile/MobileNewOrder.razor        757
       Pages/MobileAuthLink.razor               372   <- omitted from #54
       Pages/Mobile/MobileShiftEnd.razor        264
       Pages/Mobile/MobileLogout.razor           63
       Pages/MobileAuthCancelled.razor           63   <- omitted from #54

   ---------------------------------------------------------------------------
   THE TOKENS BELOW ARE RATIFIED, NOT INVENTED
   ---------------------------------------------------------------------------
   Light values are copied from docs/architecture/mesero-ui-guide.md §1.2. Dark
   values come from its §1.3 semantic table, which is the 2026-08-08 ruling:
   **navy is the light-theme brand, coral is the dark-theme brand.** Navy #000075
   is near-black and cannot carry emphasis on a dark surface; coral is a mid-tone
   that reads on both but stays reserved in light.

   Three rules from that guide govern every consumer:
     1. No bare hex in a Mesero <style> block — consume a token.
     2. Never write `var(--m-x, #fallback)`. A missing token must break loudly.
     3. Never declare a custom property in a page <style>. Declaration lives here.

   ---------------------------------------------------------------------------
   WHY THE DARK SURFACES ARE SLATE
   ---------------------------------------------------------------------------
   Mesero currently ships TWO dark palettes, which is a defect this file resolves:

       MobileOrders + MobileTabDetail   --bg-primary #0f172a  --text-primary #f9fafb
                                        --text-secondary #9ca3af        (slate)
       MobileShiftEnd                   --pt-bg #0e0e1c  --pt-card-bg #1a1a2e
                                        --pt-text #f0f0f5  --pt-border #2e2e44  (violet)

   Slate wins: it is the majority (two files to one) and it is the same family as
   app.css's own dark palette (--background-color #0f172a), so the two surfaces
   stay recognisably one product. MobileShiftEnd's violet is the outlier and gets
   reconciled when that file moves.

   Both of those sets are also declared INSIDE page <style> blocks, violating rule
   3 above, and they shadow real app.css globals (`--text-primary`,
   `--text-secondary`) with DIFFERENT values. Worse, six of MobileShiftEnd's names
   (`--pt-text`, `--pt-bg`, `--pt-border`, `--pt-card-bg`, `--pt-input-bg`,
   `--pt-text-muted`) squat the shared `--pt-` namespace on names app.css does not
   define — so that page renders its entire LIGHT theme from inline fallbacks, and
   the day app.css defines `--pt-bg` at :root, its light mode silently flips while
   dark keeps working. Renaming those to `--m-*` as the file moves is the fix.

   ---------------------------------------------------------------------------
   STATUS: this file currently declares ONLY. No page consumes it yet, so adding
   it is a no-op — nothing renders differently until a page is migrated. That is
   deliberate: the token layer has to exist before anything can move onto it.
   ============================================================================= */

.empty-layout {
    /* ---- Brand — SWAPS BY THEME (guide §1.3). Navy in light, coral in dark. ----
       One token, consumed by every primary CTA and every emphasis foreground, so
       the theme swap happens here rather than at ~54 call sites. */
    --m-brand:        #000075;
    --m-brand-hover:  #1a1a8f;
    --m-on-brand:     #ffffff;

    /* ---- Chrome — structural navy that does NOT swap ----
       Top-bar and sheet-header BACKGROUNDS, structural borders. A navy background
       stays navy in dark; only navy-as-a-foreground swaps. */
    --m-chrome:       #000075;
    --m-on-chrome:    #ffffff;

    /* Secondary action (outline / inverted). Coral in light. */
    --m-secondary-fg: var(--m-coral);

    /* Coral as a literal, for the light-mode secondary only. */
    --m-coral:        #ec607e;
    --m-coral-hover:  #d94d6a;

    /* ---- State. Guide §1 values, deliberately NOT app.css's. ----

       --m-warn is the FILL: state pills, borders, the tint's own colour. It is not
       usable as a foreground ON that tint — #f59e0b on #fef3c7 is 1.93:1 and the
       glyph nearly vanishes. --m-warn-fg exists for that, mirroring --m-danger-fg,
       and measures 4.60:1 so it is safe for text as well as icons (#78).

       Before this token, MobileAuthLink's expired icon carried a hardcoded #d97706
       at 2.86:1 — kept only because the token was worse. Both were wrong. */
    --m-warn:         #f59e0b;
    --m-warn-fg:      #996206;
    --m-warn-bg:      #fef3c7;
    --m-danger:       #dc2626;
    --m-danger-fg:    #dc2626;
    --m-danger-bg:    #fee2e2;
    /* Added for MobileTabDetail (#54 Phase B). Its --pt-destructive (#ef4444) and
       --pt-destructive-hover (#dc2626) are base and hover; --m-danger is #dc2626,
       so mapping both onto it would make hover identical to base and silently
       delete the state. Completes the pattern --m-brand-hover / --m-coral-hover
       already establish. */
    --m-danger-hover: #b91c1c;
    --m-positive:     #16a34a;
    --m-positive-fg:  #16a34a;
    --m-positive-bg:  #dcfce7;

    /* ---- Surfaces ---- */
    --m-bg:           #f8fafc;
    --m-surface:      #ffffff;
    --m-surface-2:    #f1f5f9;
    --m-border:       #e5e7eb;

    /* ---- Text. Named --m-fg, NOT --text-primary: that is an app.css global
       (app.css:278) and Mesero shadows it with a different value today, which is
       precisely the collision this namespace removes.

       MEASURED, because a token layer that quietly licenses unreadable text is
       worse than no token layer (contrast against --m-surface / --m-bg / --m-surface-2):

           --m-fg          17.74 / 16.96 / 16.19   body text, fine anywhere
           --m-fg-muted     4.98 /  4.76 /  4.55   AA on all three

       --m-fg-muted was the guide's #6b7280, which measured 4.41:1 on --m-surface-2
       — under AA on one of the three surfaces, so the token could not be used where
       its name said it could. #69707d clears all three and is imperceptibly
       different (#78). Dark is unchanged; #9ca3af was already 4.95–7.03 there.

       THE THIRD TEXT GREY IS GONE. The guide's --m-fg-subtle (#9ca3af) measured
       2.54 / 2.43 / 2.32 — it failed even the 3:1 non-text floor, so no size of
       text could legally use it, and darkening it to reach 4.5:1 landed on #677180,
       which is --m-fg-muted with extra steps. It is renamed --m-hairline below and
       is no longer part of the text scale. ---- */
    --m-fg:           #111827;
    --m-fg-muted:     #69707d;

    /* ---- Decorative rules only. NOT a text or icon colour. ----
       2.54 / 2.43 / 2.32:1 against the three surfaces. That clears nothing: body
       text needs 4.5, and an icon or control boundary that carries meaning needs
       3:1 under WCAG 1.4.11. The one thing it IS legal for is a purely decorative
       separator, which that success criterion explicitly exempts — hence the name.

       Distinct from --m-border (#e5e7eb, 1.24:1) on purpose: that is a container
       edge you are not meant to notice, this is a divider you are. If you find
       yourself reaching for this for a glyph, you want --m-fg-muted. (#78) ---- */
    --m-hairline:     #9ca3af;

    /* ---- Geometry. Straight edges are the brand rule; 44px is the touch floor
       this surface is held to (app.css's --touch-target-min is 40px and is NOT
       the same commitment — see the note at --pt-field-min-height). ---- */
    --m-radius:       0;
    --m-touch-min:    44px;
}

@media (prefers-color-scheme: dark) {
    .empty-layout {
        /* The ruling: coral becomes the brand in dark. Navy cannot carry emphasis
           against a dark surface — #000075 on #0f172a is 1.2:1. */
        --m-brand:        #ec607e;
        --m-brand-hover:  #d94d6a;
        --m-on-brand:     #ffffff;

        /* Chrome does not swap — a navy bar stays a navy bar. */
        --m-chrome:       #000075;
        --m-on-chrome:    #ffffff;

        /* Secondary in dark is navy, and ONLY on a light surface. Measured: 16.71:1
           on white, but **1.14:1 on --m-surface**. Consuming this against a dark
           Mesero surface is an accessibility bug, not a style choice — it is the
           one token here that is unsafe by default in its own theme. */
        --m-secondary-fg: #000075;

        /* State — lightened so they read against a dark surface. */
        --m-danger:       #f87171;
        --m-danger-fg:    #f87171;
        --m-danger-bg:    rgba(220, 38, 38, 0.18);
        /* Hover LIGHTENS in dark, the mirror of darkening in light. */
        --m-danger-hover: #fca5a5;
        --m-positive:     #34d399;
        --m-positive-fg:  #34d399;
        --m-positive-bg:  rgba(22, 163, 74, 0.18);
        --m-warn:         #f59e0b;
        /* The foreground SWAPS, like --m-danger does. #996206 is 4.60:1 on the light
           tint but only 2.15:1 on the dark one; #f59e0b is 5.11:1 there. A single
           value cannot serve both, which is why this is its own token. */
        --m-warn-fg:      #f59e0b;
        --m-warn-bg:      rgba(245, 158, 11, 0.18);

        /* Surfaces — the slate family, matching what MobileOrders and
           MobileTabDetail already ship and app.css's own dark palette. */
        --m-bg:           #0f172a;
        --m-surface:      #1e293b;
        /* Deliberately the same value as --m-bg, and NOT a mistake. --m-surface-2 is
           the RECESSED tone: in light it is #f1f5f9, darker than the #ffffff surface.
           Keeping it recessed in dark means going darker than the #1e293b card, which
           lands on the page colour. An earlier draft here used #263449 — lighter than
           the card — which inverted the relationship and made the same token raised in
           dark and recessed in light. It also measured worse (--m-fg-muted 4.95:1 vs
           7.03:1). Matches mesero-ui-guide.md §1.2's dark block. */
        --m-surface-2:    #0f172a;
        --m-border:       #334155;

        --m-fg:           #f9fafb;
        --m-fg-muted:     #9ca3af;
        --m-hairline:     #64748b;
    }
}

/* =============================================================================
   PATTERNS
   =============================================================================
   Rules move here from page <style> blocks as each page is migrated (#54 step 2).
   Everything below consumes the token layer above; nothing declares.

   Class names carry the `m-` prefix (guide rule M-0.1). The prefix IS the
   namespace — these are plain (0,1,0) selectors rather than `.empty-layout X`,
   because a name that cannot collide does not need scoping to defend it. The
   TOKENS are scoped to `.empty-layout`, so if one of these classes is ever used
   on the admin surface it renders unstyled rather than half-styled. That is the
   guide's "a missing token must break loudly", inherited for free.
   ============================================================================= */

/* ---- Full-screen status page ------------------------------------------------
   The /m/logout and /m/cancelled screens. They were two near-identical copies:
   same structure, same box-shadow, same type scale, differing only in a class
   prefix (`logout-` / `cancelled-`), the icon glyph, and the icon tint. Both
   also styled bare `h2` and `p` selectors from a global inline block.

   ONE deliberate appearance change, and it is a fix: `.hint` shipped
   `color: #9ca3af`, which is 2.54:1 on the white card in light and 3.04:1 in
   dark. That is hint TEXT failing AA in both themes on both pages. It now takes
   --m-fg-muted: 4.83:1 and 5.76:1. Everything else is within a hex digit or two
   of what shipped (h2 #1f2937 -> --m-fg #111827, card #1f2937 -> --m-surface
   #1e293b in dark) — both imperceptible, both moving onto the shared palette. */
.m-status-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--m-chrome);
}

.m-status-card {
    background: var(--m-surface);
    border-radius: var(--m-radius);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    padding: 3rem 2rem;
    text-align: center;
    border-bottom: 4px solid var(--m-coral);
}

.m-status-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--m-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    background: var(--m-surface-2);
}

.m-status-icon i {
    font-size: 2.5rem;
    color: var(--m-fg-muted);
}

/* Accent variant — the logout screen's coral. The tint is a literal rather than a
   token because the vocabulary has no alpha-tint entry; adding --m-coral-tint is
   a vocabulary decision for the guide, not one to take here. */
.m-status-icon--accent {
    background: rgba(236, 96, 126, 0.15);
}

.m-status-icon--accent i {
    color: var(--m-coral);
}

.m-status-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: var(--m-fg);
}

/* GROUPED ON PURPOSE, and this is the trap in migrating a bare element selector.
   The originals styled `p { margin: 0 0 .5rem 0; line-height: 1.5 }` and then
   `.hint { font-size; color }` on top — and the hint was a `<p class="hint">`, so
   it inherited the paragraph rule. Splitting them into two explicit classes drops
   that inheritance silently: `.m-status-hint` alone gets the UA default `1em 0`
   margin and default line-height, which is visibly more space around the hint.
   Nothing errors, nothing fails a build, the page just spreads out.

   Rule for the remaining five files: when a bare element selector goes away, its
   declarations have to be re-homed onto EVERY class that was relying on it, not
   only the one that obviously replaces it. */
.m-status-text,
.m-status-hint {
    margin: 0 0 0.5rem 0;
    color: var(--m-fg-muted);
    line-height: 1.5;
}

/* Was `.hint { color: #9ca3af }` — 2.54:1. See the note above. */
.m-status-hint {
    font-size: 0.85rem;
}

@media (prefers-color-scheme: dark) {
    /* The surface and text tokens already swap, so only the accent tint needs a
       dark value — it was bumped 0.15 -> 0.2 in the original to hold up against
       the darker card. */
    .m-status-icon--accent {
        background: rgba(236, 96, 126, 0.2);
    }
}

/* ---- Shift-end screen (/m/shift-end) ---------------------------------------
   Migrated from MobileShiftEnd.razor (#54 step 2). 264 inline lines.

   WHY THIS FILE WENT SECOND despite not being the smallest: it carried the
   poisoned --pt-* declarations. Its dark block declared six names ON
   `.mobile-shift-end` — --pt-bg, --pt-card-bg, --pt-text, --pt-text-muted,
   --pt-border, --pt-input-bg — none of which app.css defines, while its own
   comment claimed they were "tokenised vars set on :root by the theme switcher".
   They were not. Two consequences, both now gone:

     - LIGHT mode had no declarations at all, so every one of those var() calls
       fell through to its inline fallback. The page rendered its entire light
       theme from `var(--pt-text, #111)`-style defaults.
     - The names squat the shared --pt- namespace. The day app.css defines
       --pt-bg at :root, this page's light mode silently flips while dark keeps
       working.

   It also carried the second of Mesero's two dark palettes — violet (#0e0e1c,
   #1a1a2e, #2e2e44) against the slate every other page uses. Now on the shared
   --m-* layer, so that split is closed.

   CLASS NAMES are `m-se-*`: the `m-` prefix per guide rule M-0.1, `se` keeping
   this page's existing namespace. Seven of its old names — spinner,
   loading-state, error-state, btn-back, btn-retry, header-title, warn — are also
   defined by two or three OTHER Mesero pages. That is invisible today because an
   inline <style> exists only while its page renders, but the moment two of those
   pages share this sheet the copies would fight. Prefixing keeps each move a
   no-op; unifying is a later pass, once more than one version is in here to
   compare. See the note at the end of this block.

   NAVY MAPS TO --m-chrome THROUGHOUT, deliberately. Guide §1.3 would have a
   primary CTA and an emphasis foreground take --m-brand, which swaps to coral in
   dark — so by that reading `.m-se-cta` and `.m-se-table-num` should swap. They
   do not swap today (this page has no dark override for navy), so mapping them to
   --m-brand would change how the screen looks in dark mode. That is a design
   change and does not belong inside a file move. Raised on #54 instead. */

.m-se-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-fg);
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
}

.m-se-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--m-chrome);
    color: var(--m-on-chrome);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.m-se-btn-back {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--m-on-chrome);
    border-radius: var(--m-radius);
    cursor: pointer;
}

.m-se-header-title h1 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--m-on-chrome);
}

.m-se-header-spacer {
    flex: 1;
}

.m-se-content {
    flex: 1;
    padding: 0.75rem 0.75rem 6rem; /* bottom-pad clears the sticky footer */
}

.m-se-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--m-fg-muted);
}

.m-se-summary {
    background: var(--m-surface);
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--m-chrome);
}

.m-se-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.m-se-summary-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.m-se-summary-row.m-se-warn {
    color: var(--m-coral);
    font-weight: 600;
}

.m-se-summary-row i {
    width: 16px;
    text-align: center;
}

.m-se-empty {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--m-surface);
    color: var(--m-fg-muted);
}

.m-se-empty i {
    font-size: 2.5rem;
    color: var(--m-coral);
    margin-bottom: 0.75rem;
}

.m-se-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

.m-se-notes-help {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--m-fg-muted);
}

.m-se-tab-row {
    background: var(--m-surface);
    padding: 0.75rem;
    margin-bottom: 0.625rem;
    border-left: 3px solid transparent;
}

.m-se-tab-row:has(.m-se-badge-cash) {
    border-left-color: var(--m-coral);
}

.m-se-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.m-se-tab-id {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.m-se-table-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--m-chrome);
}

.m-se-customer-name {
    font-size: 0.8125rem;
    color: var(--m-fg-muted);
}

.m-se-badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* `color: var(--m-chrome)` is navy ink, which is exactly what --pt-on-coral
   resolved to (app.css defines it as var(--pt-navy)). Navy on coral is the
   branded pairing ratified in #46 at 5.20:1. */
.m-se-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--m-radius);
    background: var(--m-coral);
    color: var(--m-chrome);
}

.m-se-badge.m-se-badge-call {
    background: var(--m-chrome);
    color: var(--m-on-chrome);
}

.m-se-textarea {
    width: 100%;
    min-height: 72px;
    padding: 0.5rem;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    font-family: 'Montserrat', sans-serif;
    /* >= 16px or iOS auto-zooms the webview on focus and never zooms back out —
       see the note on .instructions-section textarea in MobileNewOrder. */
    font-size: 16px;
    background: var(--m-surface);
    color: var(--m-fg);
    resize: vertical;
}

.m-se-textarea:focus {
    outline: 2px solid var(--m-chrome);
    outline-offset: -1px;
}

.m-se-textarea.m-se-over-limit {
    border-color: var(--m-coral);
}

.m-se-textarea:disabled {
    opacity: 0.6;
}

.m-se-char-counter {
    text-align: right;
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
    margin-top: 0.25rem;
}

.m-se-footer {
    position: sticky;
    bottom: 0;
    background: var(--m-surface);
    padding: 0.625rem 0.75rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    z-index: 90;
}

.m-se-progress {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--m-fg-muted);
    margin-bottom: 0.375rem;
}

.m-se-cta {
    width: 100%;
    min-height: 48px;
    background: var(--m-chrome);
    color: var(--m-on-chrome);
    border: none;
    border-radius: var(--m-radius);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.m-se-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.m-se-loading,
.m-se-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--m-fg-muted);
}

.m-se-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--m-border);
    border-top-color: var(--m-chrome);
    border-radius: 50%;
    animation: m-spin 0.8s linear infinite;
    margin-bottom: 0.75rem;
}

/* Keyframe names are scoped by NOTHING — not by Blazor isolation, not by a class
   prefix — so a page-local `spin` collides with every other Mesero page's `spin`
   the moment they share this sheet. Prefixed for the same reason the classes are. */
@keyframes m-spin {
    to { transform: rotate(360deg); }
}

.m-se-error i {
    font-size: 2.5rem;
    color: var(--m-coral);
    margin-bottom: 0.5rem;
}

.m-se-btn-retry {
    margin-top: 0.75rem;
    min-height: var(--m-touch-min);
    padding: 0.5rem 1rem;
    background: var(--m-chrome);
    color: var(--m-on-chrome);
    border: none;
    border-radius: var(--m-radius);
    font-weight: 600;
    cursor: pointer;
}

/* UNIFICATION CANDIDATES, measured across all four pages before this move:

     .loading-state   7/7/8/7 declarations, every one opening `flex:1; display:flex;
                      flex-direction:column; align-items:center` — the same concept
                      four times. Unify when a second page lands here.
     .error-state     same shape, same conclusion.
     .btn-retry       MobileOrders and MobileShiftEnd are identical; MobileTabDetail
                      differs (10 decls, different layout). Two of three unify.
     .spinner         DIVERGES, and one branch is a defect: MobileOrders and
                      MobileTabDetail set border-top-color #3b82f6 — a blue that
                      appears nowhere in the Mesero palette. Reconcile onto a token
                      rather than picking a winner.
     .btn-back        MobileNewOrder/MobileTabDetail are 14 declarations, this page 7.
                      Genuinely different buttons sharing a name.
     .header-title    MobileNewOrder/MobileTabDetail identical; this page only ever
                      styled the descendant h1. */

/* ---- Waiter auth-link screen (/m/link) --------------------------------------
   Migrated from MobileAuthLink.razor (#54 step 2). 372 inline lines — the file
   this issue omitted entirely from its table.

   Four of its class names collided with **app.css**, not just with other Mesero
   pages: `btn`, `btn-success`, `info-label`, `info-value`. The first two are
   Bootstrap's and are RENDERED as Bootstrap classes, so they cannot be renamed —
   they stay as ancestor-scoped overrides (`.m-al-actions .btn`), which is how the
   page already wrote them and which keeps them off every other surface.
   `info-label` / `info-value` are the page's own and are renamed.

   `error-icon`, `expired-icon` and `waiter-avatar` collide with MobileOrders and
   MobileTabDetail — the same seven-way problem recorded on the shift-end block.
   Namespaced rather than unified, for the same reason.

   BOTH @keyframes are prefixed. `shake` and `successPop` are scoped by nothing at
   all, and `shake` in particular is the kind of generic name a second page will
   define. */

.m-al-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--m-chrome);
}

.m-al-card {
    background: var(--m-surface);
    border-radius: var(--m-radius);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    border-bottom: 4px solid var(--m-coral);
}

/* ---- loading ---- */
.m-al-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--m-fg-muted);
}

.m-al-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ---- error / expired ---- */
.m-al-error,
.m-al-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
}

.m-al-error-icon,
.m-al-expired-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--m-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.m-al-error-icon {
    background: var(--m-danger-bg);
}

.m-al-error-icon i {
    font-size: 2.5rem;
    color: var(--m-danger);
}

.m-al-expired-icon {
    background: var(--m-warn-bg);
}

/* Was a hardcoded #d97706 at 2.86:1 — under the 3:1 non-text floor, kept only
   because --m-warn was worse at 1.93:1. --m-warn-fg (#78) exists for exactly this
   position and measures 4.60:1 light / 5.11:1 dark. */
.m-al-expired-icon i {
    font-size: 2.5rem;
    color: var(--m-warn-fg);
}

.m-al-error h2,
.m-al-expired h2 {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: var(--m-fg);
}

.m-al-error p,
.m-al-expired p {
    margin: 0 0 1.5rem 0;
    color: var(--m-fg-muted);
    line-height: 1.5;
}

.m-al-lockout {
    background: var(--m-danger-bg);
    color: var(--m-danger);
    padding: 0.75rem 1rem;
    border-radius: var(--m-radius);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* ---- confirm / PIN ---- */
.m-al-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.m-al-logo {
    margin-bottom: 1.5rem;
}

.m-al-logo img {
    height: 40px;
    width: auto;
}

.m-al-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.m-al-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--m-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--m-on-chrome);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid var(--m-coral);
}

.m-al-welcome h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--m-fg);
}

/* Back on --m-fg-muted, which is what this secondary line always wanted. It was
   forced onto --m-fg because muted measured 4.41:1 on --m-surface-2 — the one
   pairing in the layer that missed AA. #78 darkened muted to #69707d, so the
   exception is gone and the semantic choice is available again. */
.m-al-restaurant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--m-surface-2);
    border-radius: var(--m-radius);
    font-size: 0.9rem;
    color: var(--m-fg-muted);
    margin-bottom: 1.5rem;
}

.m-al-restaurant i {
    color: var(--m-coral);
}

.m-al-confirm-message {
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    color: var(--m-fg-muted);
    line-height: 1.5;
}

.m-al-pin-entry {
    margin-bottom: 1.5rem;
    width: 100%;
}

.m-al-pin-inputs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* width is --m-touch-min: these are the PIN boxes and they are the touch target. */
.m-al-pin-digit {
    width: var(--m-touch-min);
    height: 56px;
    border: 2px solid var(--m-border);
    border-radius: var(--m-radius);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-fg);
    background: var(--m-surface);
    transition: all 0.2s ease;
    -webkit-text-security: disc;
}

.m-al-pin-digit:focus {
    outline: none;
    border-color: var(--m-coral);
    box-shadow: 0 0 0 3px rgba(236, 96, 126, 0.2);
}

.m-al-pin-digit.m-al-pin-error {
    border-color: var(--m-danger);
    animation: m-al-shake 0.4s ease;
}

@keyframes m-al-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.m-al-pin-error-message {
    margin: 0.75rem 0 0 0;
    color: var(--m-danger);
    font-size: 0.9rem;
}

/* ---- actions. The .btn / .btn-success overrides stay ancestor-scoped because
   the markup renders Bootstrap's classes and they cannot be renamed. Scoping is
   what keeps them off every other Mesero screen. ---- */
.m-al-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.m-al-actions .btn {
    padding: 0.875rem 1.5rem;
    border-radius: var(--m-radius);
    font-weight: 600;
}

.m-al-actions .btn-success {
    background: var(--m-coral);
    border: none;
}

.m-al-actions .btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.m-al-security-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 117, 0.1);
    border-radius: var(--m-radius);
    font-size: 0.8rem;
    color: var(--m-chrome);
}

/* ---- success ---- */
.m-al-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
}

.m-al-success-icon {
    width: 100px;
    height: 100px;
    background: var(--m-coral);
    border-radius: var(--m-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    animation: m-al-success-pop 0.5s ease-out;
}

.m-al-success-icon i {
    font-size: 3rem;
    color: var(--m-on-chrome);
}

@keyframes m-al-success-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.m-al-success h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--m-fg);
}

.m-al-success p {
    margin: 0 0 1.5rem 0;
    color: var(--m-fg-muted);
}

.m-al-session {
    width: 100%;
    background: var(--m-bg);
    border-radius: var(--m-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.m-al-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.m-al-info-row:not(:last-child) {
    border-bottom: 1px solid var(--m-border);
}

.m-al-info-label {
    color: var(--m-fg-muted);
    font-size: 0.9rem;
}

.m-al-info-value {
    color: var(--m-fg);
    font-weight: 600;
    font-size: 0.9rem;
}

.m-al-success .btn-lg {
    padding: 1rem 2rem;
    border-radius: var(--m-radius);
    font-weight: 600;
    width: 100%;
    background: var(--m-chrome);
    border: none;
}

/* ---- dark ----
   Nine of the original's fifteen dark rules are gone: card surface, headings,
   body copy, restaurant strip, PIN field, session panel, dividers and both info
   lines all now track --m-* and need no override. What remains is genuinely
   theme-specific. */
@media (prefers-color-scheme: dark) {
    /* Surface-2 in dark is darker than the card, so the tinted strips need to
       lift rather than recede — the light values were the other way round. */
    .m-al-restaurant,
    .m-al-session {
        background: var(--m-surface-2);
    }

    .m-al-pin-digit {
        background: var(--m-surface-2);
        border-color: var(--m-border);
    }

    /* Coral on a dark surface, matching the ruling: navy ink would be 1.14:1. */
    .m-al-security-note {
        background: rgba(236, 96, 126, 0.2);
        color: var(--m-coral);
    }
}

/* ---- responsive ---- */
@media (max-width: 480px) {
    .m-al-screen {
        padding: 0;
    }

    .m-al-card {
        max-width: 100%;
        min-height: 100vh;
        border-radius: var(--m-radius);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-al-confirm,
    .m-al-success,
    .m-al-error,
    .m-al-expired {
        width: 100%;
    }

    .m-al-pin-digit {
        width: 40px;
        height: 48px;
        font-size: 1.1rem;
    }
}

/* ---- iOS safe areas ---- */
@supports (padding-top: env(safe-area-inset-top)) {
    .m-al-screen {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* =============================================================================
   SHARED MESERO COMPONENTS (#54 Phase A)
   =============================================================================
   The vocabulary the last three pages will consume. Defined BEFORE those pages
   migrate, on purpose: each page keeps its own inline copy until it moves, and an
   inline <style> wins on source order, so nothing below renders yet. Phase A is a
   no-op you can land and validate as such.

   WHICH NAMES BELONG HERE, AND WHY IT IS SEVEN AND NOT TWELVE

   Twelve class names are defined by two or more of MobileTabDetail, MobileOrders
   and MobileNewOrder. A first pass compared them by which PROPERTIES each version
   set and concluded seven should unify. That measure was wrong: it counts whether
   both versions set `color`, not whether they set it to the same thing. Re-measured
   on VALUE agreement:

       .header-title   100%   .btn-icon    93%   .error-state 75%   .btn-back  75%   -> unify
       .loading-state   56%   .btn-action  54%   .spinner     43%              -> merge, below
       .btn-retry       33%   .tabs-list   33%   .order-header 22%
       .item-price      20%   .item-name    0%                                 -> NOT shared

   The bottom five are different components that collided on a generic name. They
   get page-local `m-<page>-*` names in Phase B and never appear here. `.item-name`
   at 0% is the case the guide already calls out under M-0.1; `.item-price` at 20%
   is the same story — a small muted secondary price in one page, a bold coral
   primary price in the other.
   ============================================================================= */

/* ---- Identical in every page that defines it. Verbatim. ---- */
.m-header-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* 13 of 14 declarations identical; TabDetail additionally set `flex-shrink: 0`,
   which is kept — it stops the button collapsing in a tight header row and is
   inert where it was not set. */
.m-btn-icon {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
    padding: 4px;
    border: none;
    border-radius: var(--m-radius);
    background: rgba(255, 255, 255, 0.1);
    background-clip: content-box;
    color: var(--m-on-chrome);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

/* Same as .m-btn-icon plus the two single-page extras: NewOrder's `font-size` and
   `position: relative` (it anchors a badge). Kept rather than dropped — both are
   inert on a page that does not use them, and losing `position` would detach that
   badge. */
.m-btn-back {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
    padding: 4px;
    border: none;
    border-radius: var(--m-radius);
    background: rgba(255, 255, 255, 0.1);
    background-clip: content-box;
    color: var(--m-on-chrome);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

/* 6 of 8 agreed. The two that did not:
     padding  2rem (TabDetail, NewOrder) vs `2rem 1rem` (Orders) -> 2rem, the majority
     color    only Orders set it, as var(--text-secondary) — one of the shadowed
              app.css globals. Taken as --m-fg-muted, which is what it meant. */
.m-error-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--m-fg-muted);
}

/* ---- Merged, with the differences decided rather than averaged ---- */

/* All three agree on the flex column; they differ on padding and colour only.
   Same treatment as .m-error-state, which is its sibling — the two occupy the same
   slot and swap, so they must match. */
.m-loading-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--m-fg-muted);
}

/* THREE DECISIONS, none of them a compromise between the two versions:

   size        40px (TabDetail, Orders) over NewOrder's 36px — majority, and the
               larger reads better as a full-screen loading indicator.
   track       #e5e7eb -> --m-border.
   head        **this is a defect fix, not a merge.** TabDetail and Orders set
               border-top-color: #3b82f6 — a blue that appears in NO Mesero palette,
               admin's or otherwise. NewOrder used coral. Neither wins: it takes
               --m-brand, the emphasis token, which is navy in light and coral in
               dark per the 2026-08-08 ruling.
   margin      TabDetail's `margin-bottom: 1rem` is NOT included; spacing belongs to
               the container, and .m-loading-state already has the padding.

   Consumes the existing `m-spin` keyframe rather than declaring another. Duration
   stays on the animation shorthand, so 1s here and 0.8s elsewhere coexist. */
.m-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--m-border);
    border-top-color: var(--m-brand);
    border-radius: 50%;
    animation: m-spin 1s linear infinite;
}

/* 7 of 13 agreed — the flex centring, gap, borderless fill, weight and cursor. The
   six that did not are all SIZING: TabDetail is a compact in-row action
   (flex: 1, .75rem .5rem, .8125rem) and NewOrder is a full-width sheet button
   (.875rem 1.5rem, 1rem). That is a real difference and averaging it would make
   both wrong, so only the shared identity lives here; each page adds its own
   padding, font-size and flex behaviour as a modifier in Phase B.

   min-height and border-radius are added rather than merged: both pages are on the
   Mesero surface, which is held to a 44px touch floor and square edges. TabDetail
   already declared both; NewOrder simply never did. */
.m-btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--m-touch-min);
    border: none;
    border-radius: var(--m-radius);
    font-weight: 600;
    cursor: pointer;
}

/* ---- Shared keyframes ----
   `spin` is defined by all three pages and `slideUp` by two. Keyframe names are
   scoped by nothing — not by isolation, not by a class prefix — so they collide the
   moment two pages share this sheet. `m-spin` already exists above; this is the
   other one. `fadeIn` and `mobileToastIn` are single-page and get namespaced with
   their page in Phase B. */
@keyframes m-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ---- Orders screen (/m/orders) ------------------------------------------------
   Migrated from MobileOrders.razor (#54 Phase B). 930 inline lines.

   Consumes the Phase A vocabulary: .m-btn-icon, .m-error-state, .m-loading-state and
   .m-spinner are gone from here entirely — this page's copies were four of the seven
   that unified. Only their descendant and modifier rules survive, renamed.

   NAVY SPLIT BY ROLE, which is the one judgement in this migration. A navy BACKGROUND
   is chrome and does not swap (.m-mo-mobile-header, .m-mo-fab); a navy FOREGROUND is
   emphasis and becomes coral in dark per the 2026-08-08 ruling. That fixes three live
   defects — .tc-scheduled-chip, .stat-icon and .pickup-banner i had navy text with NO
   dark override, rendering ~1.14:1 against the dark surface. Three others
   (.tc-table, .tc-bill-chip, .shift-time) already had overrides and are unaffected,
   since those still win on source order.

   The three shadowing declarations are gone: --bg-primary, --text-primary and
   --text-secondary were declared in this page's dark block over names app.css defines
   globally with DIFFERENT values. They map to --m-bg / --m-fg / --m-fg-muted.

   Keyframes: spin and slideUp were page-local copies of shared animations and are
   dropped for m-spin / m-slide-up; fadeIn is page-local and becomes m-mo-fade-in. */

.m-mo-mobile-orders-container.m-mo-hidden {
    visibility: hidden;
}

.m-mo-mobile-orders-container {
    height: 100vh;
    height: 100dvh;
    background: var(--m-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: none;
    padding-bottom: 72px;
    font-variant-numeric: tabular-nums;
}

.m-mo-mobile-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--m-chrome);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.m-mo-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.m-mo-waiter-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.m-mo-waiter-avatar {
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    border-bottom: 2px solid var(--m-coral);
    flex-shrink: 0;
}

.m-mo-waiter-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.m-mo-waiter-name {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-mo-restaurant-name {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-mo-header-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.m-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.m-btn-icon > i {
    font-size: 0.875rem;
}

.m-mo-session-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
}

.m-mo-connection-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: rgba(236, 96, 126, 0.12);
    color: var(--m-coral);
    font-size: 0.75rem;
    font-weight: 600;
}

.m-mo-btn-retry-inline {
    margin-left: auto;
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
}

.m-error-state i {
    font-size: 2.5rem;
    color: var(--m-coral);
    margin-bottom: 0.5rem;
}

.m-mo-btn-retry {
    margin-top: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    background: var(--m-chrome);
    color: #fff;
    border: none;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
}

.m-mo-session-expired {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.m-mo-expired-icon {
    width: 80px;
    height: 80px;
    background: #fef3c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.m-mo-expired-icon i {
    font-size: 2.5rem;
    color: #d97706;
}

.m-mo-session-expired h2 {
    margin: 0 0 0.5rem;
    color: var(--m-fg);
}

.m-mo-session-expired p {
    margin: 0;
    color: var(--m-fg-muted);
    line-height: 1.5;
}

.m-mo-tab-filters {
    position: relative;
    display: flex;
    gap: 0;
    padding: 0;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
}

.m-mo-filter-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border: none;
    border-radius: 0;
    background: white;
    cursor: pointer;
    transition: color 0.2s ease;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.m-mo-filter-btn.m-mo-active .m-mo-filter-count {
    color: var(--m-brand);
}

.m-mo-filter-btn.m-mo-active .m-mo-filter-label {
    color: var(--m-brand);
    font-weight: 700;
}

.m-mo-filter-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-fg);
    transition: color 0.2s ease;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.m-mo-filter-label {
    font-size: 0.6875rem;
    color: var(--m-fg);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.m-mo-filter-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% / 3);
    height: 3px;
    background: var(--m-brand);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
}

.m-mo-swipe-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.m-mo-swipe-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.m-mo-swipe-panel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.m-mo-tabs-list {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-height: 100%;
}

.m-mo-tab-card {
    background: white;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: 3px solid var(--m-coral);
    padding: 0.625rem 0.75rem 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.m-mo-tab-card:active {
    transform: scale(0.99);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.m-mo-tab-card.m-mo-paid {
    opacity: 0.65;
    border-left-color: #9ca3af;
}

.m-mo-tc-row1 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.m-mo-tc-table {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--m-brand);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-customer {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--m-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-mo-tc-time {
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-row2 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.m-mo-tc-stat {
    color: var(--m-fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-stat-label {
    color: var(--m-fg-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

.m-mo-tc-total {
    color: var(--m-brand);
    font-weight: 700;
}

.m-mo-tc-dot {
    color: #d1d5db;
    font-weight: 400;
}

.m-mo-tc-spacer {
    flex: 1;
}

.m-mo-tc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.m-mo-tc-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.m-mo-tc-pill.m-mo-pending {
    color: #b45309;
}

.m-mo-tc-pill.m-mo-queued {
    color: #6f42c1;
}

.m-mo-tc-pill.m-mo-ready {
    color: #0c5460;
}

.m-mo-tc-pill.m-mo-delivered {
    color: #065f46;
}

.m-mo-tc-pill.m-mo-paid {
    color: #1e40af;
}

.m-mo-tc-chev {
    color: #d1d5db;
    font-size: 0.6875rem;
    margin-left: 0.125rem;
}

.m-mo-tc-cash-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--m-coral);
    color: var(--m-chrome);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-cash-badge i {
    font-size: 0.625rem;
}

.m-mo-tc-silence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(107, 114, 128, 0.10);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.30);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-silence-chip i {
    font-size: 0.5625rem;
    opacity: 0.8;
}

.m-mo-tc-scheduled-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 117, 0.10);
    color: var(--m-brand);
    border: 1px solid rgba(0, 0, 117, 0.30);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-scheduled-chip i {
    font-size: 0.5625rem;
    opacity: 0.85;
}

.m-mo-tc-bill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 117, 0.08);
    color: var(--m-brand);
    border: 1px solid rgba(0, 0, 117, 0.30);
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.m-mo-tc-bill-chip i {
    font-size: 0.5625rem;
    opacity: 0.85;
}

.m-mo-tc-bill-chip.m-mo-urgent {
    background: var(--m-warn-bg);
    color: #92400e;
    border-color: var(--m-warn);
}

.m-mo-tc-subpill.m-mo-partial-pay {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.45);
    margin-left: 0.25rem;
}

.m-mo-pickup-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 117, 0.04);
    border-left: 3px solid var(--m-chrome);
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--m-fg);
}

.m-mo-pickup-banner i {
    color: var(--m-brand);
    font-size: 0.875rem;
}

.m-mo-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--m-fg-muted);
}

.m-mo-empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.m-mo-empty-state h3 {
    margin: 0 0 0.5rem;
    color: var(--m-fg);
}

.m-mo-empty-state p {
    margin: 0;
}

.m-mo-empty-state .m-mo-coming-soon {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

.m-mo-fab {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    width: 52px;
    height: 52px;
    border-radius: 0;
    border: none;
    background: var(--m-chrome);
    color: white;
    font-size: 1.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 117, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.m-mo-fab.m-mo-fab--shifted {
    bottom: 14rem;
}

.m-mo-fab.m-mo-fab--above-calls-sheet {
    bottom: calc(var(--m-calls-sheet-h, 80vh) + 1rem);
    z-index: 260;
    transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.m-mo-fab:active {
    transform: scale(0.94);
}

.m-mo-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    animation: m-mo-fade-in 0.2s ease;
}

@keyframes m-mo-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.m-mo-menu-sheet {
    width: 100%;
    background: white;
    border-radius: 0;
    animation: m-slide-up 0.3s ease;
}

.m-mo-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.m-mo-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.m-mo-btn-close-menu {
    width: 32px;
    height: 32px;
    border-radius: 0;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-mo-menu-items {
    padding: 0.5rem 0;
}

.m-mo-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--m-fg);
    text-align: left;
}

.m-mo-menu-item:active {
    background: #f3f4f6;
}

.m-mo-menu-item i {
    width: 24px;
    text-align: center;
    color: #6b7280;
}

.m-mo-menu-item.m-mo-logout {
    color: #dc2626;
}

.m-mo-menu-item.m-mo-logout i {
    color: #dc2626;
}

.m-mo-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}

.m-mo-shift-summary-sheet {
    width: 100%;
    background: white;
    border-radius: 0;
    animation: m-slide-up 0.3s ease;
    max-height: 85vh;
    overflow-y: auto;
}

.m-mo-shift-summary-sheet .m-mo-menu-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m-mo-shift-summary-sheet .m-mo-menu-header h3 i {
    color: var(--m-coral);
}

.m-mo-shift-summary-content {
    padding: 1.25rem;
}

.m-mo-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.m-mo-summary-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0;
}

.m-mo-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: rgba(0, 0, 117, 0.1);
    color: var(--m-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.m-mo-stat-icon.m-mo-active {
    background: #d1fae5;
    color: #059669;
}

.m-mo-stat-icon.m-mo-pending {
    background: #fef3c7;
    color: #d97706;
}

.m-mo-stat-icon.m-mo-orders {
    background: rgba(236, 96, 126, 0.15);
    color: var(--m-coral);
}

.m-mo-stat-details {
    display: flex;
    flex-direction: column;
}

.m-mo-stat-details .m-mo-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-fg);
    line-height: 1.2;
}

.m-mo-stat-details .m-mo-stat-label {
    font-size: 0.75rem;
    color: var(--m-fg-muted);
}

.m-mo-summary-totals {
    background: #f8fafc;
    border-radius: 0;
    padding: 1rem;
    margin-bottom: 1rem;
}

.m-mo-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.m-mo-total-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.m-mo-total-label {
    color: var(--m-fg-muted);
}

.m-mo-total-value {
    font-weight: 600;
    color: var(--m-fg);
}

.m-mo-total-row.m-mo-highlight {
    padding-top: 0.75rem;
}

.m-mo-total-row.m-mo-highlight .m-mo-total-label {
    font-weight: 600;
    color: var(--m-fg);
}

.m-mo-total-row.m-mo-highlight .m-mo-total-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-coral);
}

.m-mo-shift-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 117, 0.1);
    border-radius: 0;
    font-size: 0.9rem;
    color: var(--m-brand);
}

@media (prefers-color-scheme: dark) {
    .m-mo-tab-filters {
        background: #1e293b;
        border-bottom-color: #334155;
    }

    .m-mo-filter-btn {
        background: #1e293b;
    }

    .m-mo-filter-count {
        color: #f9fafb;
    }

    .m-mo-tab-card {
        background: #1e293b;
    }

    .m-mo-tc-table {
        color: #e0e7ff;
    }

    .m-mo-tc-customer {
        color: #f9fafb;
    }

    .m-mo-tc-stat {
        color: #f9fafb;
    }

    .m-mo-tc-total {
        color: var(--m-brand);
    }

    .m-mo-tc-stat-label {
        color: #94a3b8;
    }

    .m-mo-tc-dot {
        color: #475569;
    }

    .m-mo-tc-chev {
        color: #475569;
    }

    .m-mo-tc-pill.m-mo-pending {
        color: #fbbf24;
    }

    .m-mo-tc-pill.m-mo-queued {
        color: #c4b5fd;
    }

    .m-mo-tc-pill.m-mo-ready {
        color: #7dd3fc;
    }

    .m-mo-tc-pill.m-mo-delivered {
        color: #34d399;
    }

    .m-mo-tc-pill.m-mo-paid {
        color: #93c5fd;
    }

    .m-mo-tc-subpill.m-mo-partial-pay {
        background: rgba(245, 158, 11, 0.18);
        color: #fcd34d;
        border-color: rgba(245, 158, 11, 0.45);
    }

    .m-mo-tc-silence-chip {
        background: rgba(255, 255, 255, 0.06);
        color: #9ca3af;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .m-mo-tc-bill-chip {
        background: rgba(255, 255, 255, 0.08);
        color: #c0c2c8;
        border-color: rgba(255, 255, 255, 0.20);
    }

    .m-mo-menu-sheet {
        background: #1e293b;
    }

    .m-mo-menu-header {
        border-bottom-color: #334155;
    }

    .m-mo-btn-close-menu {
        background: #334155;
        color: white;
    }

    .m-mo-menu-divider {
        background: #334155;
    }

    .m-mo-menu-item:active {
        background: #334155;
    }

    .m-mo-expired-icon {
        background: rgba(217, 119, 6, 0.2);
    }

    .m-mo-shift-summary-sheet {
        background: #1e293b;
    }

    .m-mo-summary-stat {
        background: #0f172a;
    }

    .m-mo-summary-totals {
        background: #0f172a;
    }

    .m-mo-total-row:not(:last-child) {
        border-bottom-color: #334155;
    }

    .m-mo-shift-time {
        background: rgba(236, 96, 126, 0.2);
        color: var(--m-coral);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .m-mo-mobile-header {
        padding-top: calc(0.625rem + env(safe-area-inset-top));
    }

    .m-mo-fab {
        bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    .m-mo-fab.m-mo-fab--shifted {
        bottom: calc(14rem + env(safe-area-inset-bottom));
    }

    .m-mo-fab.m-mo-fab--above-calls-sheet {
        bottom: calc(80vh + 1rem + env(safe-area-inset-bottom));
    }
}

/* ---- New-order screen (/m/new-order) -------------------------------------------
   Migrated from MobileNewOrder.razor (#54 Phase B). 753 inline lines, 100 classes —
   the largest class count of the seven pages.

   Six Phase A names lived here: .btn-back .btn-action .error-state .header-title
   .loading-state .spinner. Their base rules are gone; descendants and modifiers stay,
   renamed. Four generics that LOOK shared are not — .item-name (0% value agreement
   with TabDetail's), .item-price (20%), .order-header (22%) and .tabs-list (33%) are
   different components that collided on a name, so they take page-local m-no- names.

   Navy split by role as elsewhere: six backgrounds and borders take --m-chrome; the
   single foreground (.mobile-toast--info's icon) takes --m-brand.

   --pt-font-body is deliberately left as-is. It is a font family, not a palette
   value, and the Mesero vocabulary has no font token to move it onto — inventing one
   to avoid a --pt- reference would be worse than the reference.

   This page declared NO custom properties, so there was no shadowing to unwind. */

/* REMOVED — a dead rule carried over honestly and then deleted deliberately.

   MobileNewOrder's inline block contained:

       :global(html), :global(body) {
           overscroll-behavior: none; overflow: hidden;
           position: fixed; width: 100%; height: 100%;
       }

   `:global()` is Blazor CSS-ISOLATION syntax, meaningful only inside a
   Component.razor.css that the build rewrites. This lived in an inline <style>,
   which Blazor emits into the DOM verbatim, so the browser saw an unknown
   pseudo-class, rejected the selector and dropped the whole rule. **It has never
   done anything** — the scroll lock it was written for was never in effect.

   It is not carried forward, and it must not be "fixed" by dropping the :global()
   wrapper. mesero.css is a real global stylesheet: `html, body { position: fixed }`
   here would apply to the ENTIRE app, freezing scrolling on every admin page. If
   the new-order screen genuinely needs a scroll lock, it wants a body class the
   page toggles on mount and removes on dispose, not a rule in a shared sheet.
   Raised on #54. */

.m-no-mobile-new-order {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    font-variant-numeric: tabular-nums;
}

.m-no-order-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--m-chrome);
    color: white;
    flex-shrink: 0;
}

.m-btn-back,
.m-no-btn-cart {
    width: 44px;
    height: 44px;
    padding: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    background-clip: content-box;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s ease;
}

.m-btn-back:hover,
.m-no-btn-cart:hover {
    background: rgba(255, 255, 255, 0.2);
}

.m-header-title h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-no-header-subtitle {
    font-size: 0.6875rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-no-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--m-coral);
    color: var(--m-chrome);
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--m-chrome);
    font-variant-numeric: tabular-nums;
}

.m-no-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--m-coral);
    border-radius: 50%;
    animation: m-spin 1s linear infinite;
}

.m-no-loading-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: #6b7280;
}

.m-no-step-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.m-no-step-header {
    margin-bottom: 1.25rem;
}

.m-no-step-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    color: #1f2937;
}

.m-no-step-header p {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.m-no-tabs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.m-no-tab-option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-left: 4px solid var(--m-coral);
    cursor: pointer;
    text-align: left;
}

.m-no-tab-option:active {
    background: var(--m-surface-2);
}

.m-no-tab-option-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.m-no-tab-table {
    font-weight: 600;
    color: #1f2937;
}

.m-no-tab-customer {
    font-size: 0.85rem;
    color: #6b7280;
}

.m-no-tab-option-meta {
    text-align: right;
    font-size: 0.8rem;
    color: #6b7280;
}

.m-no-tab-total {
    display: block;
    font-weight: 600;
    color: var(--m-coral);
}

.m-no-empty-tabs {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    background: #f9fafb;
    margin-bottom: 1rem;
}

.m-no-btn-new-tab {
    width: 100%;
    padding: 1rem;
    background: var(--m-chrome);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.m-no-form-section {
    margin-bottom: 1rem;
}

.m-no-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.m-no-required {
    color: #dc2626;
}

.m-no-form-select,
.m-no-form-input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    background: white;
    color: #1f2937;
}

.m-no-form-select:focus,
.m-no-form-input:focus {
    outline: none;
    border-color: var(--m-coral);
}

.m-no-info-banner {
    padding: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.m-no-btn-primary {
    background: var(--m-chrome);
    color: white;
}

.m-no-btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.m-no-btn-full {
    width: 100%;
}

.m-btn-action.m-no-loading {
    background: #6b7280;
}

.m-no-menu-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
}

/* Menu switcher (P5): a level ABOVE the category tabs, and styled to read that way — filled when
   active, where a category tab only tints. The two strips sit together, so the difference in weight
   is what says one selects within the other. */
.m-no-menu-switch {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: white;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.m-no-menu-switch::-webkit-scrollbar {
    display: none;
}

.m-no-menu-chip {
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    background: white;
    color: #6b7280;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.m-no-menu-chip.m-no-active {
    border-color: var(--m-coral);
    background: var(--m-coral);
    color: white;
}

.m-no-category-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.m-no-category-tabs::-webkit-scrollbar {
    display: none;
}

.m-no-category-tab {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    border: 1.5px solid #e5e7eb;
    background: white;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.m-no-category-tab.m-no-active {
    border-color: var(--m-coral);
    background: rgba(236, 96, 126, 0.08);
    color: var(--m-coral);
}

/* #145 - a ported menu fetches its items when first opened; this says so rather than showing an
   empty list, which reads as a menu with nothing on it. */
.m-no-menu-loading {
    padding: 1rem 0.75rem;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* Package rows on the tab detail. Mirrors TabDetailPanel's .tdp-* treatment, because the two render
   the same tab and a waiter moving between them should not have to notice which one they are on. */
.m-td-package-child {
    padding-left: 0.75rem;
}

.m-td-package-arrow {
    margin-right: 0.25rem;
    color: #9ca3af;
}

.m-td-package-chip {
    display: inline-block;
    margin-right: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.m-td-child-count {
    margin-left: 0.25rem;
    color: #6b7280;
    font-weight: 600;
}

/* "Incluido" is a statement about the row, not a figure — italic and muted so it cannot be read as
   a second charge beside the header that already counts it. */
.m-td-included {
    font-size: 0.75rem;
    font-weight: 500;
    font-style: italic;
    color: #6b7280;
}

/* What an option normally costs, struck: muted, and never mistakable for the number charged. */
/* Per-unit context, never the charge: muted, and lighter than the contribution beside it. */
.m-no-option-price-unit {
    margin-left: 0.25rem;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.m-no-option-price-catalog {
    margin-left: 0.25rem;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.m-no-menu-items-list {
    flex: 1;
    padding: 0.5rem;
    padding-bottom: 88px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.m-no-menu-item-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background: white;
    margin-bottom: 0.375rem;
    border-left: 3px solid var(--m-coral);
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease;
}

.m-no-menu-item-card:not(.m-no-sold-out):active {
    transform: scale(0.995);
    background: var(--m-surface-2);
}

.m-no-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.m-no-item-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-no-item-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.m-no-item-price {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--m-coral);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* What the dish costs elsewhere, struck through beside the price on THIS menu. Muted and lighter
   than the live price: the comparison is context, and a waiter reading the row quickly must not
   mistake it for the number to charge. */
.m-no-item-price-catalog {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--m-text-secondary, #64748b);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.m-no-stock-pill {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.m-no-stock-pill.m-no-sold-out {
    background: rgba(236, 96, 126, 0.15);
    color: var(--m-coral);
}

.m-no-stock-pill.m-no-low-stock {
    background: #fef3c7;
    color: #92400e;
}

.m-no-menu-item-card.m-no-sold-out {
    opacity: 0.6;
    filter: grayscale(0.3);
    cursor: not-allowed;
    border-left-color: #9ca3af;
}

.m-no-btn-add-quick {
    width: 36px;
    height: 36px;
    background: var(--m-chrome);
    color: white;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
}

.m-no-btn-add-quick:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-no-cart-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--m-coral);
    color: var(--m-chrome);
    cursor: pointer;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.m-no-cart-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.m-no-cart-count {
    font-size: 0.6875rem;
    opacity: 0.9;
}

.m-no-cart-total {
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.m-no-cart-action {
    font-weight: 600;
    font-size: 0.8125rem;
}

.m-no-m-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

.m-no-m-sheet {
    width: 100%;
    max-height: 85vh;
    background: white;
    display: flex;
    flex-direction: column;
    animation: m-slide-up 0.25s ease;
}

.m-no-m-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.m-no-m-sheet-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.m-no-m-sheet-close {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.m-no-m-sheet-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.m-no-m-sheet-footer {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.m-no-item-description {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 0.75rem;
}

.m-no-item-price-display {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--m-coral);
    margin: 0 0 1rem;
}

.m-no-modifiers-section {
    margin-bottom: 1rem;
}

.m-no-modifier-group {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.m-no-modifier-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.m-no-modifier-name {
    font-weight: 600;
    color: #1f2937;
}

.m-no-modifier-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    font-weight: 600;
}

.m-no-modifier-badge.m-no-required {
    background: #fee2e2;
    color: #dc2626;
}

.m-no-modifier-badge.m-no-optional {
    background: #f3f4f6;
    color: #6b7280;
}

.m-no-modifier-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.m-no-modifier-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    text-align: left;
}

.m-no-modifier-option.m-no-selected {
    border-color: var(--m-coral);
    background: rgba(236, 96, 126, 0.08);
}

.m-no-option-check {
    color: #d1d5db;
}

.m-no-modifier-option.m-no-selected .m-no-option-check {
    color: var(--m-coral);
}

.m-no-option-name {
    flex: 1;
    color: #1f2937;
}

.m-no-option-price {
    color: var(--m-coral);
    font-weight: 600;
    font-size: 0.85rem;
}

.m-no-quantity-section,
.m-no-instructions-section {
    margin-bottom: 1rem;
}

.m-no-quantity-section label,
.m-no-instructions-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.m-no-quantity-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.m-no-qty-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #e5e7eb;
    background: white;
    font-size: 1.25rem;
    cursor: pointer;
}

.m-no-qty-btn:disabled {
    opacity: 0.5;
}

.m-no-qty-value {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

.m-no-instructions-section textarea {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e5e7eb;
    resize: none;
    font-family: inherit;
    font-size: 16px;
}

.m-no-cart-body {
    min-height: 150px;
}

.m-no-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.m-no-cart-item-info {
    display: flex;
    gap: 0.5rem;
}

.m-no-cart-item-qty {
    font-weight: 700;
    color: var(--m-coral);
}

.m-no-cart-item-details {
    display: flex;
    flex-direction: column;
}

.m-no-cart-item-name {
    font-weight: 500;
}

.m-no-cart-item-mods {
    font-size: 0.75rem;
    color: #6b7280;
}

.m-no-cart-item-notes {
    font-size: 0.75rem;
    color: #f59e0b;
    font-style: italic;
}

.m-no-cart-item-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.m-no-cart-item-price {
    font-weight: 600;
}

.m-no-cart-item-course-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 6px 10px;
    background: transparent;
    color: var(--m-coral);
    border: 1px solid var(--m-coral);
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.m-no-cart-item-course-chip:hover:not(:disabled) {
    background: var(--m-coral);
    color: var(--m-chrome);
}

.m-no-btn-remove {
    width: 44px;
    height: 44px;
    background: #fee2e2;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b91c1c;
    font-size: 0.95rem;
}

.m-no-empty-cart {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

.m-no-cart-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.m-no-cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.m-no-total-amount {
    font-weight: 700;
    color: var(--m-coral);
    font-size: 1.15rem;
}

.m-no-mobile-toast {
    position: fixed;
    top: calc(0.75rem + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 240px;
    max-width: calc(100vw - 1.5rem);
    padding: 0.75rem 0.875rem;
    background: #ffffff;
    color: var(--m-fg);
    border-left: 4px solid var(--m-coral);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 117, 0.18),
                    0 2px 6px rgba(0, 0, 117, 0.08);
    font-family: var(--pt-font-body, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 0.875rem;
    z-index: 300;
    animation: m-no-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-no-mobile-toast__icon {
    font-size: 1.125rem;
    flex-shrink: 0;
    color: var(--m-coral);
}

.m-no-mobile-toast__message {
    flex: 1;
    line-height: 1.35;
}

.m-no-mobile-toast--success {
    border-left-color: var(--m-coral);
}

.m-no-mobile-toast--success .m-no-mobile-toast__icon {
    color: var(--m-coral);
}

.m-no-mobile-toast--error {
    border-left-color: var(--m-danger);
}

.m-no-mobile-toast--error .m-no-mobile-toast__icon {
    color: var(--m-danger);
}

.m-no-mobile-toast--warning {
    border-left-color: var(--m-warn);
}

.m-no-mobile-toast--warning .m-no-mobile-toast__icon {
    color: var(--m-warn);
}

.m-no-mobile-toast--info {
    border-left-color: var(--m-chrome);
}

.m-no-mobile-toast--info .m-no-mobile-toast__icon {
    color: var(--m-brand);
}

@keyframes m-no-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, -0.5rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-color-scheme: dark) {
    .m-no-mobile-new-order {
        background: #0f172a;
    }

    .m-no-step-header h2 {
        color: #f9fafb;
    }

    .m-no-step-header p {
        color: #9ca3af;
    }

    .m-no-tab-option,
.m-no-menu-item-card {
        background: #1e293b;
        border-color: #334155;
    }

    .m-no-tab-table,
.m-no-item-name {
        color: #f9fafb;
    }

    .m-no-empty-tabs {
        background: #1e293b;
    }

    .m-no-form-select,
.m-no-form-input {
        background: #1e293b;
        border-color: #334155;
        color: #f9fafb;
    }

    .m-no-info-banner {
        background: rgba(251, 191, 36, 0.15);
        color: #fbbf24;
    }

    .m-no-category-tabs {
        background: #1e293b;
        border-bottom-color: #334155;
    }

    .m-no-category-tab {
        background: #1e293b;
        border-color: #334155;
        color: #9ca3af;
    }

    .m-no-m-sheet {
        background: #1e293b;
    }

    .m-no-m-sheet-header {
        background: #1e293b;
        border-bottom-color: #334155;
    }

    .m-no-m-sheet-header h2 {
        color: #f9fafb;
    }

    .m-no-m-sheet-close {
        background: #334155;
        color: #f9fafb;
    }

    .m-no-m-sheet-footer {
        border-top-color: #334155;
    }

    .m-no-modifier-group {
        border-bottom-color: #334155;
    }

    .m-no-modifier-name {
        color: #f9fafb;
    }

    .m-no-modifier-option {
        background: #1e293b;
        border-color: #334155;
    }

    .m-no-option-name {
        color: #f9fafb;
    }

    .m-no-qty-btn {
        background: #1e293b;
        border-color: #334155;
        color: #f9fafb;
    }

    .m-no-qty-value {
        color: #f9fafb;
    }

    .m-no-instructions-section textarea {
        background: #0f172a;
        border-color: #334155;
        color: #f9fafb;
    }

    .m-no-cart-item {
        border-bottom-color: #334155;
    }

    .m-no-cart-item-name {
        color: #f9fafb;
    }

    .m-no-form-label {
        color: #d1d5db;
    }

    .m-no-quantity-section label,
.m-no-instructions-section label {
        color: #d1d5db;
    }

    .m-no-mobile-toast {
        background: #1e293b;
        color: #f9fafb;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50),
                        0 2px 6px rgba(0, 0, 0, 0.30);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .m-no-order-header {
        padding-top: calc(0.875rem + env(safe-area-inset-top));
    }

    .m-no-cart-summary {
        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
    }

    .m-no-m-sheet-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ---- Tab-detail screen (/m/tab/{id}) -------------------------------------------
   Migrated from MobileTabDetail.razor (#54 Phase B). 1275 inline lines, 109 classes —
   the largest of the seven, and the money-path screen, which is why it went last.

   All SEVEN Phase A names lived here; their base rules are gone and only descendants
   and modifiers remain, renamed. This page also held the LAST of the shadowing
   custom-property declarations — --bg-primary, --text-primary, --text-secondary,
   which redefined app.css globals with different values. With this migration the
   guide's rule 3 (no custom property declared in a page <style>) holds across the
   whole Mesero surface.

   --pt-cta resolved to var(--pt-coral) and maps to --m-coral; --pt-chrome resolved to
   var(--pt-navy) and maps to --m-chrome; --pt-neutral (#64748b, secondary text) to
   --m-fg-muted and --pt-neutral-bg to --m-surface-2.

   --pt-destructive-hover needed a new token. It is #dc2626, which is exactly
   --m-danger, while --pt-destructive is the lighter #ef4444 — so mapping both onto
   --m-danger would have made hover identical to base and deleted the state silently.
   --m-danger-hover is added for it. */

.m-td-mobile-tab-detail {
    min-height: 100vh;
    background: var(--m-bg);
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
    font-variant-numeric: tabular-nums;
}

.m-td-detail-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--m-chrome);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.m-btn-back:hover {
    background: rgba(255, 255, 255, 0.2);
}

.m-header-title h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-header-title .m-td-customer-name {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

.m-btn-icon > i {
    font-size: 0.875rem;
}

.m-td-tab-position {
    padding: 0.15rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.m-td-position-hint {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.55);
}

.m-td-position-count {
    line-height: 1;
}

.m-td-error-icon {
    width: 64px;
    height: 64px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.m-td-error-icon i {
    font-size: 2rem;
    color: #dc2626;
}

.m-error-state h2 {
    margin: 0 0 0.5rem;
    color: var(--m-fg);
}

.m-error-state p {
    margin: 0 0 1.5rem;
    color: var(--m-fg-muted);
}

.m-td-btn-retry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0;
    background: #3b82f6;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.m-td-summary-card {
    margin: 0.5rem;
    background: white;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border-left: 3px solid var(--m-coral);
}

.m-td-summary-row {
    display: flex;
    justify-content: space-around;
    padding: 0.625rem 0.75rem;
}

.m-td-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.m-td-summary-label {
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.125rem;
}

.m-td-summary-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-fg);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.m-td-summary-value.m-td-highlight-pending {
    color: var(--m-warn);
}

.m-td-summary-value.m-td-highlight-total {
    color: var(--m-coral);
}

.m-td-paid-banner,
.m-td-cash-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.m-td-paid-banner {
    background: #dbeafe;
    color: #1e40af;
}

.m-td-cash-banner {
    background: #fef3c7;
    color: #92400e;
}

.m-td-orders-section {
    padding: 0 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.m-td-section-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--m-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0.75rem 0 0.375rem;
}

.m-td-section-title i {
    color: var(--m-coral);
    font-size: 0.75rem;
}

.m-td-order-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    background: white;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.375rem;
    overflow: hidden;
    border: none;
    border-left: 3px solid transparent;
}

.m-td-order-card:not(.m-td-fulfilled):not(.m-td-cancelled) {
    border-left-color: var(--m-coral);
}

.m-td-order-card.m-td-fulfilled {
    opacity: 0.7;
}

.m-td-order-card.m-td-cancelled {
    opacity: 0.5;
}

.m-td-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.m-td-order-lifecycle-row {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fdfdfe;
}

.m-td-order-elapsed {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    margin-left: 0.125rem;
}

.m-td-order-elapsed.m-td-normal {
    background: rgba(0, 0, 117, 0.06);
    color: #4a4a52;
    border-color: rgba(0, 0, 117, 0.18);
}

.m-td-order-elapsed.m-td-warn {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.5);
}

.m-td-order-elapsed.m-td-urgent {
    background: var(--m-coral);
    color: var(--m-chrome);
    border-color: var(--m-coral);
}

.m-td-order-elapsed.m-td-escalate {
    background: var(--m-coral);
    color: var(--m-chrome);
    border-color: var(--m-coral);
    box-shadow: 0 0 0 2px rgba(236, 96, 126, 0.25);
}

.m-td-order-card.m-td-escalated {
    border-left-width: 6px;
    border-left-color: var(--m-coral);
    box-shadow: 0 2px 8px rgba(236, 96, 126, 0.22);
}

.m-td-notification-permission-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin: 0.5rem;
    background: rgba(236, 96, 126, 0.08);
    border-left: 3px solid var(--m-coral);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    color: var(--m-fg);
}

.m-td-npb-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.m-td-npb-text i {
    color: var(--m-coral);
    flex-shrink: 0;
}

.m-td-npb-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.m-td-npb-btn {
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--m-fg-muted);
    color: var(--m-fg-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.m-td-npb-btn-primary {
    background: var(--m-chrome);
    border-color: var(--m-chrome);
    color: #fff;
}

.m-td-order-status-meta {
    font-weight: 700;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    margin-left: 0.125rem;
    opacity: 0.85;
}

.m-td-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid transparent;
    margin-left: 0.125rem;
}

.m-td-order-chip.m-td-remake {
    background: var(--m-chrome);
    color: #fff;
    border-color: var(--m-chrome);
}

.m-td-order-chip.m-td-remake i {
    font-size: 0.625rem;
}

.m-td-order-cancel-reason {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(153, 27, 27, 0.06);
    color: #991b1b;
    font-size: 0.75rem;
    line-height: 1.35;
    border-bottom: 1px solid rgba(153, 27, 27, 0.18);
}

.m-td-order-cancel-reason i {
    margin-top: 0.15rem;
    font-size: 0.7rem;
}

.m-td-order-approval-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px dashed rgba(0, 0, 117, 0.08);
}

@media (prefers-color-scheme: dark) {
    .m-td-order-approval-row {
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }
}

.m-td-summary-kpi {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin-top: 0.5rem;
    background: rgba(0, 0, 117, 0.04);
    font-size: 0.75rem;
    color: var(--m-fg-muted);
    border-left: 3px solid var(--m-chrome);
}

.m-td-summary-kpi i {
    color: var(--m-brand);
    font-size: 0.75rem;
}

.m-td-summary-kpi strong {
    color: var(--m-fg);
    font-variant-numeric: tabular-nums;
}

.m-td-order-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.m-td-order-time {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--m-fg);
    font-variant-numeric: tabular-nums;
}

.m-td-order-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.m-td-order-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.m-td-order-status.m-td-pending {
    color: #b45309;
}

.m-td-order-status.m-td-queued {
    color: #6f42c1;
}

.m-td-order-status.m-td-ready {
    color: #0c5460;
}

.m-td-order-status.m-td-fulfilled {
    color: #065f46;
}

.m-td-order-status.m-td-cancelled {
    color: #991b1b;
}

.m-td-order-status > i {
    display: none;
}

.m-td-order-total {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--m-coral);
    font-variant-numeric: tabular-nums;
}

.m-td-order-items {
    padding: 0.375rem 0.625rem;
}

.m-td-order-item {
    padding: 0.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.m-td-order-item:last-child {
    border-bottom: none;
}

.m-td-order-item.m-td-comp-item {
    opacity: 0.6;
    text-decoration: line-through;
}

.m-td-item-main {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.8125rem;
}

.m-td-item-qty {
    font-weight: 700;
    color: var(--m-coral);
    min-width: 22px;
    font-variant-numeric: tabular-nums;
}

.m-td-item-name {
    flex: 1;
    color: var(--m-fg);
}

.m-td-item-price {
    color: var(--m-fg-muted);
    font-weight: 500;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.m-td-item-modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.375rem;
    margin-top: 0.15rem;
    padding-left: 1.625rem;
}

.m-td-modifier {
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
}

.m-td-modifier + .m-td-modifier::before {
    content: "·";
    margin-right: 0.25rem;
    color: #d1d5db;
}

.m-td-item-notes {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.15rem;
    padding-left: 1.625rem;
    font-size: 0.6875rem;
    color: #f59e0b;
    font-style: italic;
}

.m-td-item-notes i {
    margin-top: 0.1rem;
    font-size: 0.625rem;
}

.m-td-order-actions {
    padding: 0.375rem 0.625rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.5rem;
}

.m-td-btn-fulfill,
.m-td-btn-cancel,
.m-td-btn-release-now {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.m-td-btn-fulfill {
    background: white;
    color: var(--m-coral);
    border: 1px solid var(--m-coral);
}

.m-td-btn-fulfill:hover:not(:disabled) {
    background: rgba(236, 96, 126, 0.08);
}

.m-td-btn-cancel {
    background: white;
    color: var(--m-danger);
    border: 1px solid var(--m-danger);
}

.m-td-btn-cancel:hover:not(:disabled) {
    background: var(--m-danger-bg);
}

.m-td-btn-release-now {
    background: white;
    color: #6f42c1;
    border: 1px solid #6f42c1;
}

.m-td-btn-release-now:hover:not(:disabled) {
    background: rgba(111, 66, 193, 0.08);
}

.m-td-btn-fulfill:disabled,
.m-td-btn-cancel:disabled,
.m-td-btn-release-now:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.m-td-btn-fulfill.m-td-loading,
.m-td-btn-cancel.m-td-loading,
.m-td-btn-release-now.m-td-loading {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
}

.m-td-orow-cancel-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--m-fg-muted);
    background: var(--m-surface-2);
    border: 1px solid rgba(0, 0, 117, 0.10);
    flex-shrink: 0;
}

.m-td-btn-repeat-order {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem;
    border: none;
    border-radius: 0;
    background: var(--m-chrome);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.m-td-btn-repeat-order:hover:not(:disabled) {
    background: #00005c;
}

.m-td-btn-repeat-order:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.m-td-btn-repeat-order.m-td-loading {
    background: #6b7280;
}

.m-td-btn-repeat-last {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--m-chrome);
    border-radius: 0;
    background: white;
    color: var(--m-brand);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.m-td-btn-repeat-last:hover:not(:disabled) {
    background: var(--m-chrome);
    color: white;
}

.m-td-btn-repeat-last:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.m-td-btn-mark-bill-requested {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--m-coral);
    border-radius: 0;
    background: white;
    color: var(--m-coral);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.m-td-btn-mark-bill-requested:hover:not(:disabled) {
    background: var(--m-coral);
    color: var(--m-chrome);
}

.m-td-btn-mark-bill-requested:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.m-td-bill-requested-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(0, 0, 117, 0.08);
    color: var(--m-brand);
    border: 1px solid rgba(0, 0, 117, 0.25);
}

.m-td-bill-requested-chip.m-td-urgent {
    background: var(--m-warn-bg);
    color: #92400e;
    border-color: var(--m-warn);
}

.m-td-empty-orders {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    color: var(--m-fg-muted);
}

.m-td-empty-orders i {
    font-size: 2.5rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.m-td-bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.m-btn-action.m-td-primary {
    background: var(--m-chrome);
    color: white;
}

.m-btn-action.m-td-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 117, 0.4);
}

.m-btn-action.m-td-secondary {
    background: white;
    color: var(--m-chrome);
    border: 1px solid var(--m-chrome);
}

.m-btn-action.m-td-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 117, 0.05);
}

.m-btn-action:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.m-btn-action.m-td-loading {
    background: #6b7280;
}

@media (prefers-color-scheme: dark) {
    .m-td-summary-card,
.m-td-order-card {
        background: #1e293b;
    }

    .m-td-order-header {
        background: #0f172a;
        border-bottom-color: #334155;
    }

    .m-td-order-item {
        border-bottom-color: #334155;
    }

    .m-td-order-actions {
        border-top-color: #334155;
    }

    .m-td-order-status.m-td-pending {
        color: #fbbf24;
    }

    .m-td-order-status.m-td-queued {
        color: #c4b5fd;
    }

    .m-td-order-status.m-td-ready {
        color: #7dd3fc;
    }

    .m-td-order-status.m-td-fulfilled {
        color: #34d399;
    }

    .m-td-order-status.m-td-cancelled {
        color: #f87171;
    }

    .m-td-order-lifecycle-row {
        background: #0b1426;
        border-bottom-color: #334155;
    }

    .m-td-order-elapsed.m-td-normal {
        background: rgba(255, 255, 255, 0.06);
        color: #c0c2c8;
        border-color: rgba(255, 255, 255, 0.16);
    }

    .m-td-order-elapsed.m-td-warn {
        background: rgba(245, 158, 11, 0.18);
        color: #fcd34d;
        border-color: rgba(245, 158, 11, 0.45);
    }

    .m-td-bill-requested-chip {
        background: rgba(255, 255, 255, 0.08);
        color: #c0c2c8;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .m-td-bill-requested-chip.m-td-urgent {
        background: rgba(245, 158, 11, 0.18);
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.45);
    }

    .m-td-btn-mark-bill-requested {
        background: #1e293b;
    }

    .m-td-order-card.m-td-escalated {
        box-shadow: 0 2px 8px rgba(236, 96, 126, 0.35);
    }

    .m-td-notification-permission-banner {
        background: rgba(236, 96, 126, 0.15);
        color: #f9fafb;
    }

    .m-td-npb-btn {
        border-color: #9ca3af;
        color: #c0c2c8;
    }

    .m-td-npb-btn-primary {
        color: #fff;
    }

    .m-td-order-cancel-reason {
        background: rgba(248, 113, 113, 0.10);
        color: #fca5a5;
        border-bottom-color: rgba(248, 113, 113, 0.22);
    }

    .m-td-summary-kpi {
        background: rgba(170, 178, 255, 0.08);
        color: #c0c2c8;
        border-left-color: #aab2ff;
    }

    .m-td-summary-kpi i {
        color: #aab2ff;
    }

    .m-td-summary-kpi strong {
        color: #f9fafb;
    }

    .m-td-modifier {
        color: #cbd5e1;
    }

    .m-td-modifier + .m-td-modifier::before {
        color: #475569;
    }

    .m-td-bottom-actions {
        background: #1e293b;
        border-top-color: #334155;
    }

    .m-btn-action.m-td-secondary {
        background: transparent;
        color: #c0c8ff;
        border-color: #c0c8ff;
    }

    .m-btn-action.m-td-secondary:hover:not(:disabled) {
        background: rgba(192, 200, 255, 0.10);
    }

    .m-td-btn-fulfill {
        background: transparent;
        color: var(--m-coral);
        border-color: var(--m-coral);
    }

    .m-td-btn-fulfill:hover:not(:disabled) {
        background: rgba(236, 96, 126, 0.14);
    }

    .m-td-btn-cancel {
        background: transparent;
        color: #f87171;
        border-color: #f87171;
    }

    .m-td-btn-cancel:hover:not(:disabled) {
        background: rgba(248, 113, 113, 0.14);
    }

    .m-td-btn-release-now {
        background: transparent;
        color: #a78bfa;
        border-color: #a78bfa;
    }

    .m-td-btn-release-now:hover:not(:disabled) {
        background: rgba(167, 139, 250, 0.14);
    }

    .m-td-btn-fulfill.m-td-loading,
.m-td-btn-cancel.m-td-loading,
.m-td-btn-release-now.m-td-loading {
        background: rgba(255, 255, 255, 0.06);
        color: #94a3b8;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .m-td-error-icon {
        background: rgba(220, 38, 38, 0.2);
    }

    .m-td-paid-banner {
        background: rgba(59, 130, 246, 0.2);
    }

    .m-td-cash-banner {
        background: rgba(245, 158, 11, 0.2);
    }
}

.m-td-pending-claims-section {
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.m-td-pending-claims-title {
    color: var(--m-coral) !important;
}

.m-td-pending-claims-title i {
    color: var(--m-coral);
}

.m-td-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.375rem;
    margin-left: 0.375rem;
    background: var(--m-coral);
    color: var(--m-chrome);
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.m-td-claim-card {
    background: white;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.375rem;
    overflow: hidden;
    border-left: 3px solid var(--m-coral);
    padding: 0.5rem 0.625rem;
}

.m-td-claim-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.m-td-claim-payer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--m-fg);
}

.m-td-claim-payer i {
    color: var(--m-coral);
    font-size: 0.75rem;
}

.m-td-claim-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
    font-variant-numeric: tabular-nums;
}

.m-td-claim-tender {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: white;
    width: fit-content;
}

.m-td-claim-tender.m-td-claim-tender-cash {
    background: var(--m-chrome);
}

.m-td-claim-tender.m-td-claim-tender-terminal {
    background: var(--m-coral);
}

.m-td-claim-amount-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.m-td-claim-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--m-coral);
    font-variant-numeric: tabular-nums;
}

.m-td-claim-tip {
    font-size: 0.6875rem;
    color: var(--m-fg-muted);
    font-variant-numeric: tabular-nums;
}

.m-td-claim-actions {
    display: flex;
    gap: 0.375rem;
}

.m-td-btn-claim-cancel,
.m-td-btn-claim-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    min-height: 40px;
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.m-td-btn-claim-cancel {
    background: #f3f4f6;
    color: var(--m-fg);
    border: 2px solid #e5e7eb;
}

.m-td-btn-claim-cancel:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

.m-td-btn-claim-confirm {
    background: #10b981;
    color: white;
}

.m-td-btn-claim-confirm:hover:not(:disabled) {
    background: #059669;
}

.m-td-btn-claim-cancel:disabled,
.m-td-btn-claim-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.m-td-btn-claim-confirm.m-td-loading {
    background: #6b7280;
}

@supports (padding-top: env(safe-area-inset-top)) {
    .m-td-detail-header {
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }

    .m-td-bottom-actions {
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom));
    }

    .m-td-mobile-tab-detail {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

@media (prefers-color-scheme: dark) {
    .m-td-claim-card {
        background: #1e293b;
    }

    .m-td-btn-claim-cancel {
        background: #334155;
        border-color: #475569;
        color: #f9fafb;
    }

    .m-td-btn-claim-cancel:hover:not(:disabled) {
        background: rgba(220, 38, 38, 0.2);
        border-color: #ef4444;
        color: #f87171;
    }
}

.m-td-handoff-banner {
    background: #ffffff;
    color: var(--m-brand);
    border-left: 4px solid var(--m-coral);
    padding: 0.75rem;
    margin: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.m-td-handoff-banner-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.375rem;
}

.m-td-handoff-banner-head i {
    color: var(--m-coral);
}

.m-td-handoff-banner-body {
    font-size: 0.9375rem;
    font-style: italic;
    margin-bottom: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.m-td-handoff-banner-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.m-td-handoff-banner-attr {
    font-size: 0.75rem;
    color: #555;
}

.m-td-handoff-banner-dismiss {
    min-height: 44px;
    min-width: 44px;
    padding: 0.375rem 0.875rem;
    background: var(--m-chrome);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

.m-td-handoff-banner-dismiss:hover {
    opacity: 0.92;
}

@media (prefers-color-scheme: dark) {
    .m-td-handoff-banner {
        background: #1a1a2e;
        color: #f0f0f5;
        border-left-color: var(--m-coral);
    }

    .m-td-handoff-banner-attr {
        color: #aaa;
    }
}

.m-td-course-row-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.m-td-course-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(236, 96, 126, 0.12);
    color: var(--m-coral);
    border: 1px solid var(--m-coral);
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

.m-td-course-status-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 0;
    font-weight: 500;
    background: #fef3c7;
    color: #92400e;
}

.m-td-course-status-pill[data-test-released="true"] {
    background: rgba(0, 0, 117, 0.08);
    color: var(--m-brand);
}

.m-td-btn-fire-course {
    min-height: 44px;
    padding: 6px 14px;
    background: var(--m-chrome);
    color: #ffffff;
    border: 1px solid var(--m-chrome);
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.m-td-btn-fire-course:hover:not(:disabled) {
    filter: brightness(0.95);
}

.m-td-btn-override-course {
    min-height: 44px;
    padding: 6px 12px;
    background: transparent;
    color: var(--m-danger);
    border: 1px solid var(--m-danger);
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.m-td-btn-override-course:hover:not(:disabled) {
    background: var(--m-danger-hover);
    color: #ffffff;
}

.m-td-kebab-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 200;
}

.m-td-kebab-menu {
    position: absolute;
    top: 56px;
    right: 8px;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 117, 0.12);
    border-top: 4px solid var(--m-chrome);
    border-radius: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    z-index: 210;
    display: flex;
    flex-direction: column;
}

.m-td-kebab-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 117, 0.06);
    color: var(--m-brand);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.m-td-kebab-item:last-child {
    border-bottom: none;
}

.m-td-kebab-item:hover:not(:disabled) {
    background: rgba(0, 0, 117, 0.05);
}

.m-td-kebab-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
    .m-td-kebab-menu {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .m-td-kebab-item {
        color: #f9fafb;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .m-td-kebab-item:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.05);
    }

    .m-td-course-status-pill {
        background: rgba(245, 158, 11, 0.18);
        color: #fbbf24;
    }

    .m-td-course-status-pill[data-test-released="true"] {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
    }
}