@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Components/Cards/MenuDisplayCard.razor.rz.scp.css */
    /* Search + view controls on ONE row. The toolbar used to sit on its own line below the
       search bar, which spent a full line on two short controls — on a tablet that is a line of
       the list the operator cannot see. */
    .menu-listbar[b-26vwipkkos] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    /* Menu item search bar */
    .menu-search-bar[b-26vwipkkos] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
        background: var(--surface-color);
        border: 2px solid var(--border-color);
        border-radius: 0;

        /* Takes the row; the controls beside it are intrinsically sized. */
        flex: 1;
        min-width: 0;

        /* Shares the control height so the row reads as one line rather than three things that
           nearly line up — the button/input height pairing UI consistency guide §5 asks for. */
        min-height: var(--pt-control-min-height);
    }

    .menu-search-bar:focus-within[b-26vwipkkos] {
        border-color: var(--pt-coral, #ec607e);
    }

    .menu-search-icon[b-26vwipkkos] {
        color: var(--text-secondary);
        font-size: 1rem;
        flex-shrink: 0;
    }

    .menu-search-input[b-26vwipkkos] {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.95rem;
        min-width: 0;
    }

    .menu-search-input[b-26vwipkkos]::placeholder {
        color: var(--text-secondary);
    }

    .menu-search-clear[b-26vwipkkos] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 0;
        flex-shrink: 0;
    }

    .menu-search-clear:hover[b-26vwipkkos] {
        color: var(--pt-coral, #ec607e);
    }

    /* Active Menu Styling - Prominent green border.
       The border is 3px on all four sides. There used to be an ::before laying a 4px green
       gradient bar across the top edge as well; because it was the same green family as the
       border it did not read as an accent, it read as an uneven border — 3+4=7px on top
       against 3px on the other three sides. Removed.
       The active state is still carried by: this border, the green focus ring below, the green
       header gradient, and the "Activo" badge — the bar was the fourth redundant signal. */
    .menu-tab-section.active-menu[b-26vwipkkos] {
        border: 3px solid #28a745 !important;
        box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.15), var(--shadow-md);
        position: relative;
    }

    .menu-tab-section.active-menu .menu-tab-header[b-26vwipkkos] {
        background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    }
    
    /* The menu icon is deliberately state-independent — same glyph, same colour, active or not.
       It used to recolour green (and pulse) on the active menu, which read as a status light and made
       the plain --primary-color of every other row look like a second status. Status now lives in one
       place only: the Activo / Inactivo badge below the title. */

    /* Menu badges */
    .menu-badges[b-26vwipkkos] {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }

    .category-badges[b-26vwipkkos] {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 0.375rem;
    }

    .menu-badge[b-26vwipkkos] {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
    }

    .menu-badge i[b-26vwipkkos] {
        font-size: 0.875rem;
    }

    .active-menu-badge[b-26vwipkkos] {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    }

    /* Muted on purpose: "inactive" is the resting state of most menus, so it must not compete with
       the green Activo badge or the amber inactive-items warning. */
    .inactive-menu-badge[b-26vwipkkos] {
        background-color: #e2e8f0;
        color: #475569;
    }

    .inactive-items-badge[b-26vwipkkos] {
        background-color: #f59e0b;
        color: white;
    }
    
    /* iPad #10 — flat --pt-tag instead of an indigo→violet gradient, so this badge is
       the same purple as every other tag in the app. */
    .schedule-badge[b-26vwipkkos] {
        background: var(--pt-tag, #8b5cf6);
        color: white;
    }
    
    /* Dark mode for active menu */
    @media (prefers-color-scheme: dark) {
        .menu-tab-section.active-menu[b-26vwipkkos] {
            border-color: #22c55e !important;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2), var(--shadow-md);
        }
        
        /* (the ::before top bar was removed — see the light-mode rule above; this dark
           recolour of it went with it rather than being left as a rule with no content) */

        .menu-tab-section.active-menu .menu-tab-header[b-26vwipkkos] {
            background: linear-gradient(135deg, #052e16 0%, #064e3b 100%);
        }
        
        .active-menu-badge[b-26vwipkkos] {
            background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
        }

        .inactive-menu-badge[b-26vwipkkos] {
            background-color: #334155;
            color: #cbd5e1;
        }
        
        .schedule-badge[b-26vwipkkos] {
            background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
        }
    }
/* /Components/Cards/RestaurantFeatureFlagsCard.razor.rz.scp.css */
    .current-font-badge[b-s8f8k05emh] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        padding: 3px 8px;
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
        border-radius: 0;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .current-font-badge i[b-s8f8k05emh] {
        font-size: 0.75rem;
    }
    
    .feature-icon.font-icon[b-s8f8k05emh] {
        background: linear-gradient(135deg, #6f42c1, #9b59b6) !important;
    }

    .feature-icon.call-waiter[b-s8f8k05emh] {
        background: linear-gradient(135deg, #ec607e, #e74c6f) !important;
    }

    .feature-icon.kitchen-ready[b-s8f8k05emh] {
        background: linear-gradient(135deg, #17a2b8, #138496) !important;
    }

    .feature-icon.kitchen-capacity[b-s8f8k05emh] {
        background: linear-gradient(135deg, #000075, #2c2ca3) !important;
    }

    .feature-icon.fee-system[b-s8f8k05emh] {
        background: linear-gradient(135deg, #28a745, #218838) !important;
    }

    .feature-icon.guest-approval[b-s8f8k05emh] {
        background: linear-gradient(135deg, #ec607e, #b8456a) !important;
    }

    .feature-icon.coursing[b-s8f8k05emh] {
        background: linear-gradient(135deg, #6f42c1, #5a32a3) !important;
    }

    .feature-icon.incremental-course-payment[b-s8f8k05emh] {
        background: linear-gradient(135deg, #fd7e14, #d96911) !important;
    }

    .feature-icon.cfdi-invoicing[b-s8f8k05emh] {
        background: linear-gradient(135deg, #000075, #ec607e) !important;
    }

    .feature-icon.require-fulfillment[b-s8f8k05emh] {
        background: linear-gradient(135deg, #28a745, #1e7e34) !important;
    }

    .feature-icon.order-scheduling[b-s8f8k05emh] {
        background: linear-gradient(135deg, #000075, #ec607e) !important;
    }

    .feature-icon.require-open-shift[b-s8f8k05emh] {
        background: linear-gradient(135deg, #ec607e, #000075) !important;
    }

    .mutex-hint[b-s8f8k05emh] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-top: 8px;
        padding: 8px 10px;
        background: rgba(108, 117, 125, 0.1);
        color: #6c757d;
        border-left: 3px solid #6c757d;
        border-radius: 0;
        font-size: 0.82rem;
        font-style: italic;
    }

    .mutex-hint i[b-s8f8k05emh] {
        font-size: 0.95rem;
        margin-top: 1px;
    }

    @media (prefers-color-scheme: dark) {
        .mutex-hint[b-s8f8k05emh] {
            background: rgba(173, 181, 189, 0.12);
            color: #adb5bd;
            border-left-color: #adb5bd;
        }
    }
    
    @media (prefers-color-scheme: dark) {
        .current-font-badge[b-s8f8k05emh] {
            background: rgba(40, 167, 69, 0.25);
        }
    }
/* /Components/Closeout/CashReconciliationCard.razor.rz.scp.css */
/* =============================================================================
   CashReconciliationCard — component-scoped CSS (isolation, #52)
   =============================================================================
   Moved verbatim from this component's inline <style>; every selector's first
   compound is markup this component authors, so all 31 rules scope cleanly and
   no ::deep is needed.

   WHAT THIS FIXES. These rules were global while the component was mounted, so
   on /closeout they restyled classes owned by nobody in particular:

       .card-body     32 other components render it
       .card-header   30
       .is-invalid     9   (Bootstrap's validation class)
       .input-group    8
       .exact / .positive / .negative   6 / 4 / 3

   .card-header and .card-body are Bootstrap's. This is the same mechanism that
   made .summary-card break /closeout during the first extraction attempt — a
   component-local rule silently restyling a shared class page-wide. Scoping
   confines them by construction.
   ============================================================================= */

    .cash-reconciliation-card[b-d4q040a22u] {
        background: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .cash-reconciliation-card .card-header[b-d4q040a22u] {
        padding: 1rem 1.25rem;
        background: var(--background-color);
        border-bottom: 1px solid var(--border-color);
    }

    .cash-reconciliation-card .card-header h5[b-d4q040a22u] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .cash-reconciliation-card .card-header h5 i[b-d4q040a22u] {
        color: var(--pt-navy-fg);
    }

    .cash-reconciliation-card .card-body[b-d4q040a22u] {
        padding: 1.25rem;
    }

    .help-text[b-d4q040a22u] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .expected-cash[b-d4q040a22u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--background-color);
        border-radius: var(--radius-md);
        margin-bottom: 1.25rem;
    }

    .expected-label[b-d4q040a22u] {
        font-weight: 500;
        color: var(--text-secondary);
    }

    .expected-value[b-d4q040a22u] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--pt-navy-fg);
    }

    .input-section[b-d4q040a22u] {
        margin-bottom: 1.25rem;
    }

    .input-label[b-d4q040a22u] {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .input-group[b-d4q040a22u] {
        display: flex;
        align-items: center;
        max-width: 300px;
    }

    .input-prefix[b-d4q040a22u] {
        padding: 0.75rem 1rem;
        background: var(--background-color);
        border: 1px solid var(--border-color);
        border-right: none;
        border-radius: 0;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .cash-input[b-d4q040a22u] {
        border-radius: 0;
        font-size: 1.25rem;
        font-weight: 600;
        padding: 0.75rem 1rem;
    }

    .cash-input.is-invalid[b-d4q040a22u] {
        border-color: var(--danger-color);
    }

    .input-hint[b-d4q040a22u] {
        display: block;
        margin-top: 0.375rem;
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    .variance-display[b-d4q040a22u] {
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1.25rem;
    }

    .variance-display.positive[b-d4q040a22u] {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid var(--success-color);
    }

    .variance-display.negative[b-d4q040a22u] {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid var(--danger-color);
    }

    .variance-display.exact[b-d4q040a22u] {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid var(--primary-color);
    }

    .variance-row[b-d4q040a22u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .variance-label[b-d4q040a22u] {
        font-weight: 500;
        color: var(--text-primary);
    }

    .variance-value[b-d4q040a22u] {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .variance-display.positive .variance-value[b-d4q040a22u] {
        color: var(--success-color);
    }

    .variance-display.negative .variance-value[b-d4q040a22u] {
        color: var(--danger-color);
    }

    .variance-display.exact .variance-value[b-d4q040a22u] {
        color: var(--pt-navy-fg);
    }

    .variance-message[b-d4q040a22u] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
    }

    .variance-display.positive .variance-message[b-d4q040a22u] {
        color: var(--success-color);
    }

    .variance-display.negative .variance-message[b-d4q040a22u] {
        color: var(--danger-color);
    }

    .variance-message.exact[b-d4q040a22u] {
        color: var(--pt-navy-fg);
    }

    .notes-section textarea[b-d4q040a22u] {
        resize: vertical;
        min-height: 80px;
    }
/* /Components/Closeout/TabDetailPanel.razor.rz.scp.css */
    .tab-detail-panel[b-u5ao1xgpd8] {
        background: var(--surface-color);
        border: 2px solid var(--primary-color);
        border-radius: var(--radius-lg);
        overflow: hidden;
        animation: slideIn-b-u5ao1xgpd8 0.3s ease;
    }

    @keyframes slideIn-b-u5ao1xgpd8 {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .tdp-panel-header[b-u5ao1xgpd8] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        background: var(--primary-color);
        color: white;
    }

    .tdp-panel-header h5[b-u5ao1xgpd8] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tdp-btn-close-panel[b-u5ao1xgpd8] {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .tdp-btn-close-panel:hover[b-u5ao1xgpd8] {
        background: rgba(255, 255, 255, 0.3);
    }

    .tdp-panel-body[b-u5ao1xgpd8] {
        padding: 1.25rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    .tdp-detail-section[b-u5ao1xgpd8] {
        margin-bottom: 1.5rem;
    }

    .tdp-detail-section:last-child[b-u5ao1xgpd8] {
        margin-bottom: 0;
    }

    .tdp-detail-section h6[b-u5ao1xgpd8] {
        margin: 0 0 0.75rem 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tdp-detail-section h6 i[b-u5ao1xgpd8] {
        color: var(--pt-navy-fg);
    }

    .order-count[b-u5ao1xgpd8] {
        font-weight: 400;
        opacity: 0.7;
    }

    /* Customer Header */
    .customer-header[b-u5ao1xgpd8] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1rem;
        background: var(--background-color);
        border-radius: var(--radius-md);
    }

    .customer-info[b-u5ao1xgpd8] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .customer-name[b-u5ao1xgpd8] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .customer-name .anonymous[b-u5ao1xgpd8] {
        font-weight: 400;
        font-style: italic;
        opacity: 0.6;
    }

    .tab-id[b-u5ao1xgpd8] {
        font-family: monospace;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .tab-status[b-u5ao1xgpd8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .tab-status.paid[b-u5ao1xgpd8] {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success-color);
    }

    .tab-status.open[b-u5ao1xgpd8] {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning-color);
    }

    /* Info Grid */
    .info-grid[b-u5ao1xgpd8] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .info-item[b-u5ao1xgpd8] {
        display: flex;
        flex-direction: column;
        padding: 0.75rem;
        background: var(--background-color);
        border-radius: var(--radius-md);
    }

    .info-item .label[b-u5ao1xgpd8] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
    }

    .info-item .value[b-u5ao1xgpd8] {
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Orders List
       GH-62: the old markup wrapped every order in an Orders.razor-style card — coloured
       left border, tinted header strip, duplicate status icon, per-order footer total.
       Stacked three deep inside an already-nested drawer that read as chrome around the
       one thing being reviewed. This is the tab modal's line language instead: a quiet
       time + status caption, then plain item rows.

       All selectors are tdp-prefixed. These component style blocks are GLOBAL (no Blazor
       CSS isolation in this project) and the previous names — .order-card, .order-item,
       .item-name, .item-price, .order-header, .order-total — are defined by several other
       components, so the old rules were reaching well outside this panel. */
    .orders-list[b-u5ao1xgpd8] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .tdp-order-caption[b-u5ao1xgpd8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.375rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .tdp-order-time[b-u5ao1xgpd8] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .tdp-item-list[b-u5ao1xgpd8] {
        display: flex;
        flex-direction: column;
    }

    .tdp-item-row[b-u5ao1xgpd8] {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0.3rem 0;
        align-items: baseline;
    }

    /* The component's own count, beside its name rather than in the quantity column -- the two
       mean different things, and sharing a column made them read as one. */
    .tdp-child-count[b-u5ao1xgpd8] {
        margin-left: 0.375rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .tdp-item-qty[b-u5ao1xgpd8] {
        font-weight: 600;
        color: var(--pt-navy-fg);
        font-variant-numeric: tabular-nums;
    }

    .tdp-item-name[b-u5ao1xgpd8] {
        color: var(--text-primary);
        overflow-wrap: anywhere;
    }

    .tdp-item-price[b-u5ao1xgpd8] {
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Package rows: the header states the package and carries the rolled-up price; its
       components sit indented beneath it, marked "Incluido" rather than $0.00 — a price
       column full of zeroes reads as a pricing fault rather than as "part of the combo". */
    .tdp-item-row.is-package-child .tdp-item-name[b-u5ao1xgpd8] {
        padding-left: 0.75rem;
        color: var(--text-secondary);
    }

    .tdp-package-arrow[b-u5ao1xgpd8] {
        margin-right: 0.25rem;
        opacity: 0.6;
    }

    .tdp-package-chip[b-u5ao1xgpd8] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-right: 0.35rem;
        padding: 0.1rem 0.35rem;
        background: rgba(59, 130, 246, 0.12);
        color: var(--pt-navy-fg);
        border-radius: 0;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .tdp-included[b-u5ao1xgpd8] {
        font-size: 0.75rem;
        font-weight: 500;
        font-style: italic;
        color: var(--text-secondary);
    }

    .tdp-item-modifier[b-u5ao1xgpd8] {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        padding-left: 2.75rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
        font-style: italic;
    }

    .tdp-item-modifier.is-package-child[b-u5ao1xgpd8] {
        padding-left: 3.5rem;
    }

    .tdp-mod-price[b-u5ao1xgpd8] {
        font-style: normal;
        white-space: nowrap;
    }

    .tdp-item-note[b-u5ao1xgpd8] {
        padding-left: 2.75rem;
        font-size: 0.8rem;
        color: var(--warning-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tdp-item-note.is-package-child[b-u5ao1xgpd8] {
        padding-left: 3.5rem;
    }

    .no-orders[b-u5ao1xgpd8] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        color: var(--text-secondary);
        gap: 0.5rem;
    }

    .no-orders i[b-u5ao1xgpd8] {
        font-size: 2rem;
        opacity: 0.5;
    }

    /* Totals Section */
    .totals-breakdown[b-u5ao1xgpd8] {
        background: var(--background-color);
        border-radius: var(--radius-md);
        padding: 1rem;
    }

    .total-row[b-u5ao1xgpd8] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

    .total-row.tip[b-u5ao1xgpd8] {
        color: var(--text-secondary);
    }

    .total-row.grand-total[b-u5ao1xgpd8] {
        border-top: 2px solid var(--border-color);
        margin-top: 0.5rem;
        padding-top: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--pt-navy-fg);
    }

    /* Panel Footer */
    .tdp-panel-footer[b-u5ao1xgpd8] {
        padding: 1rem 1.25rem;
        background: var(--background-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    .tdp-panel-footer .btn[b-u5ao1xgpd8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    @media (max-width: 576px) {
        .info-grid[b-u5ao1xgpd8] {
            grid-template-columns: 1fr;
        }

        .customer-header[b-u5ao1xgpd8] {
            flex-direction: column;
            gap: 1rem;
        }

        .tdp-panel-footer[b-u5ao1xgpd8] {
            flex-direction: column;
        }

        .tdp-panel-footer .btn[b-u5ao1xgpd8] {
            width: 100%;
            justify-content: center;
        }
    }
/* /Components/Modals/DeviceRegistrationModal.razor.rz.scp.css */
/* =============================================================================
   DeviceRegistrationModal — component-scoped CSS (isolation pilot, #52)
   =============================================================================
   Every rule here styles markup THIS component authors, so the compiler rewrites
   each selector with the generated scope attribute and it can no longer reach
   any other component.

   That includes the footer buttons: content passed to PtModal as ChildContent /
   FooterContent is AUTHORED here, so Blazor stamps this component's scope onto
   it even though PtModal renders it. Scope follows where markup is written, not
   where it ends up in the DOM.

   FIVE RULES COULD NOT COME ACROSS — they style PtModal's shell (.modal-overlay,
   .custom-modal, .modal-header-custom/-body-custom/-footer-custom), which are
   ANCESTORS of this component's content. `::deep` compiles to `[b-xxx] .foo`, a
   DESCENDANT combinator, so it structurally cannot reach upward. Those rules stay
   in the component's inline <style> with an explanation. See the note there.

   Razor's `@@media` escapes are single `@` here — a .css file needs real at-rules.
   ============================================================================= */

/* Intro subtitle (moved from the old custom header into the PtModal body).
   Green registration header now comes from PtModal HeaderClass="bg-success". */
.device-reg-subtitle[b-bh3euhfl1l] {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--modal-text-secondary, #6c757d);
}

/* Body content styles */
.registering-state[b-bh3euhfl1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--text-secondary, #6c757d);
}

.device-form[b-bh3euhfl1l] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-bh3euhfl1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-bh3euhfl1l] {
    font-weight: 600;
    color: var(--text-primary, #212529);
    font-size: 0.9rem;
}

.form-control[b-bh3euhfl1l] {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color, #dee2e6);
    border-radius: 0;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-bh3euhfl1l] {
    outline: none;
    border-color: var(--primary-color, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-control.is-invalid[b-bh3euhfl1l] {
    border-color: #dc3545;
}

.invalid-feedback[b-bh3euhfl1l] {
    color: #dc3545;
    font-size: 0.8rem;
}

.form-text[b-bh3euhfl1l] {
    color: var(--text-muted, #6c757d);
    font-size: 0.75rem;
}

/* Suggested Names */
.suggested-names[b-bh3euhfl1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.suggested-label[b-bh3euhfl1l] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6c757d);
    font-weight: 500;
}

.suggested-buttons[b-bh3euhfl1l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suggested-btn[b-bh3euhfl1l] {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0;
    background: var(--surface-color, #ffffff);
    color: var(--text-secondary, #6c757d);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.suggested-btn:hover[b-bh3euhfl1l] {
    border-color: var(--primary-color, #10b981);
    color: var(--primary-color, #10b981);
}

.suggested-btn.active[b-bh3euhfl1l] {
    background: var(--primary-color, #10b981);
    border-color: var(--primary-color, #10b981);
    color: white;
}

/* Device Info Section */
.device-info-section[b-bh3euhfl1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 0;
    margin-top: 0.5rem;
}

.info-row[b-bh3euhfl1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.info-label[b-bh3euhfl1l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #6c757d);
}

.info-label i[b-bh3euhfl1l] {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
}

.info-value[b-bh3euhfl1l] {
    font-weight: 600;
    color: var(--text-primary, #212529);
}

.info-value.device-id[b-bh3euhfl1l] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
}

/* Footer button overrides. These are safe to scope: the buttons are authored in
   this component's FooterContent, so they carry this component's scope attribute.
   Before isolation these three rules restyled EVERY .btn on the page while this
   modal was mounted. */
.btn[b-bh3euhfl1l] {
    padding: 0.625rem 1.25rem;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary[b-bh3euhfl1l] {
    background: transparent;
    border: 2px solid var(--border-color, #dee2e6);
    color: var(--text-secondary, #6c757d);
}

.btn-secondary:hover[b-bh3euhfl1l] {
    border-color: var(--text-secondary, #6c757d);
    background: var(--bg-secondary, #f8f9fa);
}

.btn-primary[b-bh3euhfl1l] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-bh3euhfl1l] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-primary:disabled[b-bh3euhfl1l] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .form-control[b-bh3euhfl1l] {
        background: var(--surface-color, #343a40);
        color: var(--text-primary, #ffffff);
    }

    .form-control:focus[b-bh3euhfl1l] {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    }
}

/* Responsive — the shell half of this breakpoint stays inline (see the note in
   the .razor); only the button rule owns markup this component authors. */
@media (max-width: 480px) {
    .btn[b-bh3euhfl1l] {
        width: 100%;
        justify-content: center;
    }
}

/* Reduced motion — likewise split. .modal-overlay / .custom-modal are PtModal's
   and remain inline; these three are ours. */
@media (prefers-reduced-motion: reduce) {
    .form-control[b-bh3euhfl1l],
    .suggested-btn[b-bh3euhfl1l],
    .btn[b-bh3euhfl1l] {
        transition: none;
    }
}
/* /Components/Modals/TabDetailModal.razor.rz.scp.css */
    /* Release-gate holds — surfaces active PendingGuestApproval +
       PendingWalletReAuth rows at the top of the tab-detail body. Mirrors
       the per-component pill styling used on the mesero side (memory:
       blazor-css-no-isolation — reuse pill/override-button classes,only
       lay out the row container here). Straight edges per PayTable 2025
       branding. */
    .release-gate-holds[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 12px 0;
    }

    .release-gate-hold-row[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 12px;
        background: var(--modal-bg);
        border: 1px solid var(--modal-border, rgba(0, 0, 117, 0.12));
        border-left: 4px solid var(--pt-coral, #ec607e);
        border-radius: 0;
    }

    /* Tab Detail Panel - Slide-in from right */
    .tab-detail-panel[b-m3f01laonm] {
        position: fixed;
        top: 0;
        left: 72px; /* Sidebar width */
        right: 0;
        bottom: 0;
        background: var(--modal-bg);
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .tab-detail-panel.active[b-m3f01laonm] {
        transform: translateX(0);
    }

    /* Panel Header */
    .tab-detail-panel .panel-header[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        background: var(--modal-header-bg);
        border-bottom: 2px solid var(--modal-border);
        flex-shrink: 0;
    }

    .tab-detail-panel .panel-back-btn[b-m3f01laonm] {
        width: 44px;
        height: 44px;
        border-radius: 0;
        border: 2px solid var(--modal-border);
        background: var(--modal-bg);
        color: var(--modal-text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .tab-detail-panel .panel-back-btn:hover[b-m3f01laonm] {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        transform: scale(1.05);
    }

    .tab-detail-panel .panel-back-btn i[b-m3f01laonm] {
        font-size: 1.25rem;
    }

    .tab-detail-panel .panel-title[b-m3f01laonm] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--modal-text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .tab-detail-panel .panel-title i[b-m3f01laonm] {
        color: var(--pt-navy-fg);
    }

    .tab-detail-panel .panel-badges[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: 0.5rem;
    }

    .tab-detail-panel .panel-table-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        border-radius: 0;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .tab-detail-panel .panel-waiter-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, var(--pt-navy, #000075) 0%, #000060 100%);
        color: white;
        border-radius: 0;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .tab-detail-panel .panel-waiter-badge i[b-m3f01laonm] {
        font-size: 0.65rem;
    }

    .tab-detail-panel .panel-waiter-badge-static[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, var(--pt-navy, #000075) 0%, #000060 100%);
        color: white;
        border-radius: 0;
        font-size: 0.75rem;
        font-weight: 600;
        margin-left: auto;
    }

    .tab-detail-panel .panel-waiter-badge-static i[b-m3f01laonm] {
        font-size: 0.65rem;
    }

    /* Waiter Reassignment Section */
    .waiter-reassign-section[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
        padding: 0.25rem 0.5rem;
        background: rgba(0, 0, 117, 0.1);
        border-radius: 0;
        border: 1px solid rgba(0, 0, 117, 0.2);
    }

    .waiter-select-label[b-m3f01laonm] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
        white-space: nowrap;
    }

    .waiter-select[b-m3f01laonm] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
        border: 1px solid rgba(0, 0, 117, 0.3);
        border-radius: 0;
        background: var(--modal-bg);
        color: var(--modal-text);
        cursor: pointer;
        min-width: 140px;
        transition: all 0.2s ease;
    }

    .waiter-select:hover:not(:disabled)[b-m3f01laonm] {
        border-color: var(--pt-navy, #000075);
    }

    .waiter-select:focus[b-m3f01laonm] {
        outline: none;
        border-color: var(--pt-navy, #000075);
        box-shadow: 0 0 0 2px rgba(0, 0, 117, 0.2);
    }

    .waiter-select:disabled[b-m3f01laonm] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Panel Body */
    .tab-detail-panel .panel-body[b-m3f01laonm] {
        flex: 1;
        overflow: hidden;
        padding: 1rem 1.5rem;
    }

    .tab-detail-content[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Two-Column Layout */
    .tab-detail-columns[b-m3f01laonm] {
        display: flex;
        gap: 1.5rem;
        flex: 1;
        min-height: 0;
    }

    .tab-column-left[b-m3f01laonm] {
        flex: 3;
        overflow-y: auto;
        min-height: 0;
        padding-right: 0.5rem;
    }

    .tab-column-right[b-m3f01laonm] {
        flex: 2;
        overflow-y: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-right: 0.25rem;
    }

    /* Toolbar for comp/remake buttons */
    .section-actions-toolbar[b-m3f01laonm] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--modal-border);
    }

    /* #82 / #83 — the action buttons are ONE set: navy outline, filling navy on hover.
       Rehacer / Cortesía / Descuento / Mover in this toolbar, and Imprimir / Fusionar in the
       actions card, all now carry `.btn-outline-primary` (solid `.btn-primary` when a mode is on).

       This block previously did the OPPOSITE. Three of the four toolbar buttons rendered
       BORDERLESS — app.css `.btn` declares `border: 2px solid transparent` and loads after
       Bootstrap (index.html: app.css after bootstrap), so at equal specificity it won on source
       order and flattened the variable-driven outline for -info / -warning / -secondary. Only
       `.btn-outline-primary` escaped, because app.css:770-773 pins `border-color: #000075
       !important`. Descuento therefore drew a hard navy box its three neighbours did not, and this
       rule stripped that border to make the odd one out match the flattened three.

       Levelling DOWN is what #82 asked us to undo ("add borders"). With every button on
       `.btn-outline-primary` the escape now applies to all of them, so deleting the strip is the
       whole fix: borders return, the four colours collapse to navy, the gray Mover/Fusionar go, and
       fill-on-hover comes free from app.css:777-781 (white on #000075).

       Theme-safe without a dark override: the label uses `--pt-navy-fg`, which app.css:338 remaps
       to #a5b4fc in dark (~7.6:1 on this modal's surface), while the border stays #000075 in both.
       The 2px width is unchanged from `.btn`, so no box shifts. */

    /* Category-based blended items */
    /* UX #48: give the items table left/right breathing room from the panel edge. */
    .blended-items-list[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
    }

    .category-group[b-m3f01laonm] {
        margin-bottom: 0.5rem;
    }

    /* UX #47: closed-account section header. Uses a component-scoped class (NOT the global
       ".category-header" from app.css,which is the clickable menu-management header) so it
       does NOT inherit that rule's gray background,pointer cursor,or hover-swap — the
       "gray bar that disappears on hover" the reviewer flagged. Horizontal padding keeps the
       label from sitting flush against the edge and aligns it with the item rows below. */
    .blended-category-header[b-m3f01laonm] {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--modal-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.375rem 0.25rem;
        margin-bottom: 0.125rem;
        border-bottom: 1px solid var(--modal-border);
    }

    /* UX #49: fixed line-height so the qty / name / price / status-chip share one baseline
       and the item text reads as vertically centered within the row. */
    .blended-item-row[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.25rem;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .blended-item-row:hover[b-m3f01laonm] {
        background: rgba(0, 0, 117, 0.03);
    }

    /* Right Column Cards */
    .right-card[b-m3f01laonm] {
        background: var(--modal-header-bg);
        border: 1px solid var(--modal-border);
        border-radius: 0;
        padding: 0.75rem;
    }

    .right-card-header[b-m3f01laonm] {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--modal-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .right-card-header i[b-m3f01laonm] {
        color: var(--pt-navy-fg);
        font-size: 0.7rem;
    }

    .right-card-body[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Client Info Card */
    .client-info-row[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
    }

    .client-info-label[b-m3f01laonm] {
        font-size: 0.75rem;
        color: var(--modal-text-secondary);
    }

    .client-info-value[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
    }

    /* Totals Card */
    .totals-card[b-m3f01laonm] {
        background: var(--modal-header-bg);
        border: 2px solid var(--modal-border);
    }

    .totals-row[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
    }

    .totals-final[b-m3f01laonm] {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--success-color);
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 2px solid var(--modal-border);
    }

    .totals-closed-badge[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.5rem;
        padding: 0.375rem 0.5rem;
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
        justify-content: center;
    }

    /* Actions Card */
    .actions-card[b-m3f01laonm] {
        display: flex;
        gap: 0.5rem;
    }

    .btn-action-right[b-m3f01laonm] {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0;
        font-weight: 500;
        font-size: 0.8rem;
    }

    /* Panel Footer */
    .tab-detail-panel .panel-footer[b-m3f01laonm] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        background: var(--modal-footer-bg);
        border-top: 2px solid var(--modal-border);
        flex-shrink: 0;
    }

    .footer-actions[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    /* Hero Add Order Button */
    .footer-actions-hero[b-m3f01laonm] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .btn-add-order[b-m3f01laonm] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        background: linear-gradient(135deg, var(--pt-coral, #ec607e) 0%, #d94a68 100%);
        border: none;
        border-radius: 0;
        color: var(--pt-on-coral);
        font-size: 1.125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(236, 96, 126, 0.3);
    }

    .btn-add-order:hover[b-m3f01laonm] {
        background: linear-gradient(135deg, #d94a68 0%, #c73d5a 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(236, 96, 126, 0.4);
        color: white;
    }

    .btn-add-order:active[b-m3f01laonm] {
        transform: translateY(0);
    }

    .btn-add-order i[b-m3f01laonm] {
        font-size: 1.25rem;
    }

    .footer-actions-primary[b-m3f01laonm] {
        display: flex;
        gap: 0.75rem;
    }

    .footer-actions .btn-action[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        font-weight: 500;
        font-size: 0.875rem;
    }

    .footer-actions .btn-close-tab[b-m3f01laonm] {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        border-radius: 0;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.2s ease;
    }

    .btn-cash[b-m3f01laonm] {
        background: transparent;
        border: 2px solid var(--pt-coral, #ec607e);
        color: var(--pt-coral, #ec607e);
    }

    .btn-cash:hover:not(:disabled)[b-m3f01laonm] {
        background: rgba(236, 96, 126, 0.1);
        border-color: var(--pt-coral, #ec607e);
        color: var(--pt-coral, #ec607e);
        transform: translateY(-2px);
    }

    .btn-paytable[b-m3f01laonm] {
        background: linear-gradient(135deg, var(--pt-navy, #000075) 0%, #000060 100%);
        border: none;
        color: white;
    }

    .btn-paytable:hover:not(:disabled)[b-m3f01laonm] {
        background: linear-gradient(135deg, #000060 0%, #000050 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 117, 0.4);
    }

    /* Paid Info */
    .paid-info[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        color: var(--success-color);
        font-weight: 500;
        width: 100%;
    }

    .paid-info i[b-m3f01laonm] {
        font-size: 1.5rem;
    }

    .paid-tip[b-m3f01laonm],.paid-total[b-m3f01laonm] {
        padding: 0.25rem 0.75rem;
        background: rgba(16, 185, 129, 0.1);
        border-radius: 0;
    }

    .paid-total[b-m3f01laonm] {
        font-weight: 700;
    }

    /* Payment Intent Banner */
    .payment-intent-banner[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0;
        margin-bottom: 0.75rem;
        flex-shrink: 0;
    }

    .payment-banner-cash[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
        border: 2px solid #dc3545;
    }

    .payment-banner-paytable[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
        border: 2px solid #10b981;
    }

    .banner-icon[b-m3f01laonm] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 0;
        flex-shrink: 0;
    }

    .payment-banner-cash .banner-icon[b-m3f01laonm] {
        background: #dc3545;
        color: white;
    }

    .payment-banner-paytable .banner-icon[b-m3f01laonm] {
        background: #10b981;
        color: white;
    }

    .banner-icon i[b-m3f01laonm] {
        font-size: 1.25rem;
    }

    .banner-content[b-m3f01laonm] {
        flex: 1;
    }

    .banner-title[b-m3f01laonm] {
        font-weight: 700;
        font-size: 1rem;
    }

    .payment-banner-cash .banner-title[b-m3f01laonm] {
        color: #dc3545;
    }

    .payment-banner-paytable .banner-title[b-m3f01laonm] {
        color: #10b981;
    }

    .banner-subtitle[b-m3f01laonm] {
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
        margin-top: 0.25rem;
    }

    .summary-balance[b-m3f01laonm] {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #d97706 !important;
    }

    .item-qty[b-m3f01laonm] {
        color: var(--pt-navy-fg);
        font-weight: 600;
        min-width: 35px;
    }

    .item-name[b-m3f01laonm] {
        flex: 1;
        color: var(--modal-text);
    }

    .item-price[b-m3f01laonm] {
        color: var(--modal-text-secondary);
        font-weight: 500;
        min-width: 64px;
        text-align: right;
        font-variant-numeric: tabular-nums; /* prices form a right-aligned, digit-aligned column */
    }

    .empty-orders[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: var(--modal-text-secondary);
        text-align: center;
        background: var(--modal-header-bg);
        border-radius: 0;
        border: 2px dashed var(--modal-border);
    }

    .empty-orders i[b-m3f01laonm] {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        opacity: 0.5;
    }

    .empty-orders p[b-m3f01laonm] {
        margin: 0;
        font-weight: 500;
    }

    .tip-options[b-m3f01laonm] {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .tip-option-btn[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 1rem;
        min-width: 85px;
        border: 2px solid var(--modal-border);
        border-radius: 0;
        background: var(--modal-bg);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tip-option-btn:hover[b-m3f01laonm] {
        border-color: var(--primary-color);
        background: rgba(59, 130, 246, 0.05);
    }

    .tip-option-btn.active[b-m3f01laonm] {
        border-color: var(--success-color);
        background: rgba(16, 185, 129, 0.1);
    }

    .tip-percent[b-m3f01laonm] {
        font-weight: 700;
        font-size: 1rem;
        color: var(--modal-text);
    }

    .tip-calculated[b-m3f01laonm] {
        font-size: 0.875rem;
        color: var(--success-color);
        font-weight: 600;
        margin-top: 0.25rem;
    }

    .tip-custom-btn[b-m3f01laonm] {
        min-width: 120px;
    }

    .tip-custom-input[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .tip-symbol[b-m3f01laonm] {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
    }

    .tip-input[b-m3f01laonm] {
        max-width: 150px;
        text-align: right;
        font-size: 1.25rem;
        font-weight: 600;
    }

    .tip-currency[b-m3f01laonm] {
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
    }

    .btn-clear-tip[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        margin-top: 0.75rem;
        padding: 0.375rem 0.5rem;
        background: none;
        border: none;
        color: var(--danger-color);
        font-size: 0.875rem;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .btn-clear-tip:hover[b-m3f01laonm] {
        opacity: 0.8;
    }

    /* Dark mode adjustments */
    @media (prefers-color-scheme: dark) {
        .tab-detail-panel[b-m3f01laonm] {
            box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
        }

    .summary-balance[b-m3f01laonm] {
            color: #fbbf24 !important;
        }

    .payment-banner-cash[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(248, 113, 113, 0.05) 100%);
            border-color: #f87171;
        }

    .payment-banner-cash .banner-title[b-m3f01laonm] {
            color: #f87171;
        }

    .payment-banner-cash .banner-icon[b-m3f01laonm] {
            background: #ef4444;
        }

    .tab-detail-panel .panel-waiter-badge[b-m3f01laonm] {
            background: linear-gradient(135deg, #4040b0 0%, var(--pt-navy, #000075) 100%);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .tab-detail-panel[b-m3f01laonm] {
            left: 0; /* Full width on mobile */
        }

    .tab-detail-panel .panel-body[b-m3f01laonm] {
            overflow-y: auto;
        }

    .tab-detail-columns[b-m3f01laonm] {
            flex-direction: column;
        }

    .tab-column-left[b-m3f01laonm],.tab-column-right[b-m3f01laonm] {
            flex: none;
            overflow-y: visible;
        }

    .tab-detail-panel .panel-footer[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .footer-actions-primary[b-m3f01laonm] {
            flex-direction: column;
        }

    .footer-actions .btn-close-tab[b-m3f01laonm] {
            width: 100%;
            justify-content: center;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .tab-detail-panel[b-m3f01laonm] {
            transition: none;
        }

    .panel-back-btn[b-m3f01laonm] {
            transition: none;
        }

    }

    /* #82/#83 — ONE PayTable surface for every action panel.
       Cortesia was gold (#f59e0b), Rehacer sky blue (#0ea5e9), Descuento and Fusionar navy, and
       Mover inherited Cortesia's gold because it never had a rule of its own — so two panels were
       indistinguishable and the set read as four unrelated features. They are one feature family:
       an action opened from the toolbar above them. Navy is the brand, and it is the colour the
       buttons in these panels now use. */
    .comp-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(0, 0, 117, 0.10) 0%, rgba(0, 0, 117, 0.04) 100%);
        border: 2px solid var(--pt-navy, #000075);
        border-radius: 0;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Whole-tab discount panel — PayTable navy accent to distinguish from the gold Cortesía panel. */
    .discount-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(0, 0, 117, 0.10) 0%, rgba(0, 0, 117, 0.04) 100%);
        border-color: #000075;
    }

    .comp-panel-header[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --pt-navy-fg is #000075 in light and #a5b4fc in dark (app.css), so one declaration covers
       both schemes and the per-panel dark overrides below become unnecessary. */
    .comp-panel-title[b-m3f01laonm] {
        font-weight: 700;
        color: var(--pt-navy-fg);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .comp-selection-info[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
        background: var(--modal-bg);
        padding: 0.25rem 0.75rem;
        border-radius: 0;
    }

    .comp-panel-body[b-m3f01laonm] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .comp-actions[b-m3f01laonm] {
        display: flex;
        gap: 0.5rem;
    }

    .comp-category-select[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .comp-category-select label[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
    }

    .comp-category-select select[b-m3f01laonm] {
        min-width: 180px;
    }

    .comp-reason-input[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 200px;
    }

    .comp-reason-input label[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
    }

    .comp-reason-input input[b-m3f01laonm] {
        flex: 1;
    }

    .btn-apply-comp[b-m3f01laonm] {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Comp checkbox */
    .comp-checkbox[b-m3f01laonm] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        margin-right: 0.25rem;
    }

    .comp-checkbox input[b-m3f01laonm] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .comp-checkbox .checkmark[b-m3f01laonm] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 0;
        background: var(--modal-bg);
        transition: all 0.2s ease;
    }

    .comp-checkbox input:checked ~ .checkmark[b-m3f01laonm] {
        background: var(--pt-navy, #000075);
        border-color: var(--pt-navy, #000075);
    }

    /* P2c-B: granular single-upcharge comp rows under an item */
    .comp-upcharge-list[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 2px 0 6px 2.25rem;
    }

    .comp-upcharge-row[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 32px;
        padding: 2px 6px;
        cursor: pointer;
        border-left: 2px solid var(--border-color);
        font-size: 0.85rem;
    }

    .comp-upcharge-row input[b-m3f01laonm] {
        width: 16px;
        height: 16px;
        accent-color: var(--pt-navy, #000075);
        cursor: pointer;
    }

    .comp-upcharge-row.upcharge-selected[b-m3f01laonm] {
        border-left-color: var(--pt-navy, #000075);
        background: rgba(0, 0, 117, 0.08);
    }

    .comp-upcharge-name[b-m3f01laonm] {
        flex: 1;
        color: var(--text-secondary, #6b7280);
    }

    .comp-upcharge-price[b-m3f01laonm] {
        font-weight: 600;
        color: var(--pt-navy-fg);
    }

    .comp-checkbox .checkmark[b-m3f01laonm]::after {
        content: '';
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .comp-checkbox input:checked ~ .checkmark[b-m3f01laonm]::after {
        display: block;
    }

    /* Comp item states */
    .blended-item-row.item-selected[b-m3f01laonm] {
        background: rgba(245, 158, 11, 0.15);
        border-radius: 0;
        padding: 0.375rem 0.5rem;
        margin: 0.125rem -0.5rem;
    }

    .blended-item-row.item-comped[b-m3f01laonm] {
        opacity: 0.7;
    }

    .text-strikethrough[b-m3f01laonm] {
        text-decoration: line-through;
        color: var(--modal-text-secondary) !important;
    }

    .comp-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: var(--pt-navy, #000075);
        color: white;
        border-radius: 0;
        font-size: 0.625rem;
        margin-right: 0.25rem;
        flex-shrink: 0;
    }

    /* Dark mode comp adjustments */
    @media (prefers-color-scheme: dark) {
        .comp-panel[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(0, 0, 117, 0.28) 0%, rgba(0, 0, 117, 0.12) 100%);
        }

    .blended-item-row.item-selected[b-m3f01laonm] {
            background: rgba(245, 158, 11, 0.2);
        }

    }

    .remake-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(0, 0, 117, 0.10) 0%, rgba(0, 0, 117, 0.04) 100%);
        border: 2px solid var(--pt-navy, #000075);
        border-radius: 0;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .remake-panel-header[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .remake-panel-title[b-m3f01laonm] {
        font-weight: 700;
        color: var(--pt-navy-fg);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .remake-selection-info[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
        background: var(--modal-bg);
        padding: 0.25rem 0.75rem;
        border-radius: 0;
    }

    .remake-panel-body[b-m3f01laonm] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .remake-actions[b-m3f01laonm] {
        display: flex;
        gap: 0.5rem;
    }

    .remake-category-select[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .remake-category-select label[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
    }

    .remake-category-select select[b-m3f01laonm] {
        min-width: 180px;
    }

    .remake-reason-input[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 200px;
    }

    .remake-reason-input label[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
    }

    .remake-reason-input input[b-m3f01laonm] {
        flex: 1;
    }

    .btn-apply-remake[b-m3f01laonm] {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Remake checkbox */
    .remake-checkbox[b-m3f01laonm] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        margin-right: 0.25rem;
    }

    .remake-checkbox input[b-m3f01laonm] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .remake-checkbox .checkmark[b-m3f01laonm] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 0;
        background: var(--modal-bg);
        transition: all 0.2s ease;
    }

    .remake-checkbox input:checked ~ .checkmark[b-m3f01laonm] {
        background: var(--pt-navy, #000075);
        border-color: var(--pt-navy, #000075);
    }

    .remake-checkbox .checkmark[b-m3f01laonm]::after {
        content: '';
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .remake-checkbox input:checked ~ .checkmark[b-m3f01laonm]::after {
        display: block;
    }

    /* Move-items (partial tab split) — mirrors the remake checkbox,coral accent so
       staff can tell the three selection modes apart at a glance. Class names are
       move-* prefixed because inline styles in a .razor file are GLOBAL,not scoped. */
    .move-checkbox[b-m3f01laonm] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        margin-right: 0.25rem;
    }

    .move-checkbox input[b-m3f01laonm] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .move-checkbox .checkmark[b-m3f01laonm] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 0;
        background: var(--modal-bg);
        transition: all 0.2s ease;
    }

    .move-checkbox input:checked ~ .checkmark[b-m3f01laonm] {
        background: var(--pt-navy, #000075);
        border-color: var(--pt-navy, #000075);
    }

    .move-checkbox .checkmark[b-m3f01laonm]::after {
        content: '';
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .move-checkbox input:checked ~ .checkmark[b-m3f01laonm]::after {
        display: block;
    }

    .blended-item-row.item-move-selected[b-m3f01laonm] {
        background: rgba(236, 96, 126, 0.15);
        border-radius: 0;
        padding: 0.375rem 0.5rem;
        margin: 0.125rem -0.5rem;
    }

    /* Comped / already-paid lines: visibly inert while move mode is on. */
    .blended-item-row.item-not-movable[b-m3f01laonm] {
        opacity: 0.5;
    }

    .move-blocked-badge[b-m3f01laonm],.move-package-child-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: var(--text-muted, #94a3b8);
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }

    .move-package-child-badge[b-m3f01laonm] {
        color: var(--pt-navy-fg);
        opacity: 0.65;
    }

    /* Package identity in the blended item list (all modes) */
    .package-header-chip[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.0625rem 0.375rem;
        margin-right: 0.375rem;
        background: rgba(0, 0, 117, 0.1);
        color: #000075;
        border-radius: 0;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .package-child-arrow[b-m3f01laonm] {
        color: var(--text-muted, #94a3b8);
        margin-right: 0.25rem;
    }

    .item-name.item-package-child[b-m3f01laonm] {
        padding-left: 0.5rem;
    }

    /* The component's own count, beside its name. Weightier than the affiliation text next to it
       -- it is a number the operator acts on -- but lighter than the .item-qty badge, which means a
       different thing. Tabular so 2 and 12 do not shift the name. */
    .package-child-count[b-m3f01laonm] {
        margin-left: 0.375rem;
        color: var(--modal-text);
        font-weight: 600;
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;
    }

    /* A component's price column. Matches TabDetailPanel's .tdp-included, because the two components
       render the same tab and an operator moving between them should not have to notice which one
       they are looking at. Italic and muted: it is a statement about the row, not a figure. */
    .package-child-included[b-m3f01laonm] {
        font-size: 0.75rem;
        font-weight: 500;
        font-style: italic;
        color: var(--text-secondary, #64748b);
    }

    /* What a zero-priced line is paying for. Same muted, italic treatment as the child affiliation
       above it — both are statements ABOUT the row rather than part of its name, and a reader should
       be able to tell them apart from the dish at a glance. */
    .item-cost-driver[b-m3f01laonm] {
        margin-left: 0.375rem;
        color: var(--text-muted, #94a3b8);
        font-size: 0.75rem;
        font-style: italic;
        white-space: nowrap;
    }

    .package-child-affiliation[b-m3f01laonm] {
        margin-left: 0.375rem;
        color: var(--text-muted, #94a3b8);
        font-size: 0.75rem;
        font-style: italic;
        white-space: nowrap;
    }

    @media (max-width: 640px) {
        .package-child-affiliation[b-m3f01laonm] {
            display: none;
        }

    }

    /* Mover was coral — a fifth accent, and 3.21:1 on white (the #46 white-on-coral defect).
       --pt-navy-fg carries the family colour and flips to #a5b4fc in dark. */
    .move-panel .comp-panel-title[b-m3f01laonm],.move-panel .comp-selection-info[b-m3f01laonm] {
        color: var(--pt-navy-fg);
    }

    .move-empty-warning[b-m3f01laonm] {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;
        margin-top: 0.5rem;
        background: rgba(0, 0, 117, 0.12);
        border-left: 3px solid var(--pt-navy, #000075);
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .qty-selector.move-qty .qty-value.qty-active[b-m3f01laonm] {
        color: var(--pt-navy-fg);
        font-weight: 700;
    }

    /* Remake item states */
    .blended-item-row.item-remake-selected[b-m3f01laonm] {
        background: rgba(14, 165, 233, 0.15);
        border-radius: 0;
        padding: 0.375rem 0.5rem;
        margin: 0.125rem -0.5rem;
    }

    .blended-item-row.item-remake[b-m3f01laonm] {
        opacity: 0.85;
    }

    .remake-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        background: var(--pt-navy, #000075);
        color: white;
        border-radius: 0;
        font-size: 0.625rem;
        margin-right: 0.25rem;
        flex-shrink: 0;
    }

    .text-zero[b-m3f01laonm] {
        color: #0ea5e9 !important;
        font-weight: 600;
    }

    /* Dark mode remake adjustments */
    @media (prefers-color-scheme: dark) {
        .remake-panel[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(0, 0, 117, 0.28) 0%, rgba(0, 0, 117, 0.12) 100%);
        }

    .blended-item-row.item-remake-selected[b-m3f01laonm] {
            background: rgba(14, 165, 233, 0.2);
        }
    }

    /* Responsive remake adjustments */
    @media (max-width: 768px) {
        .remake-panel-body[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .remake-actions[b-m3f01laonm] {
            justify-content: center;
        }

    .remake-category-select[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .remake-category-select select[b-m3f01laonm] {
            width: 100%;
        }

    .remake-reason-input[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .btn-apply-remake[b-m3f01laonm] {
            width: 100%;
            justify-content: center;
            margin-left: 0;
            margin-top: 0.5rem;
        }
    }

    /* Responsive comp adjustments */
    @media (max-width: 768px) {
        .comp-panel-body[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .comp-actions[b-m3f01laonm] {
            justify-content: center;
        }

    .comp-category-select[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .comp-category-select select[b-m3f01laonm] {
            width: 100%;
        }

    .comp-reason-input[b-m3f01laonm] {
            flex-direction: column;
            align-items: stretch;
        }

    .btn-apply-comp[b-m3f01laonm] {
            width: 100%;
            justify-content: center;
            margin-left: 0;
            margin-top: 0.5rem;
        }
    }

    /* The merge panel is `class="right-card merge-panel"`, and a dark-mode `.right-card`
       rule sets border-color from --modal-border. Both are (0,1,0), so it won on source order and
       the panel went grey in dark while its four siblings stayed navy. Match on BOTH classes to
       outrank it without an !important. */
    .right-card.merge-panel[b-m3f01laonm] {
        border-color: var(--pt-navy, #000075);
    }

    /* Merge Panel Styles */
    .merge-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(0, 0, 117, 0.10) 0%, rgba(0, 0, 117, 0.04) 100%);
        border: 2px solid var(--pt-navy, #000075);
        border-radius: 0;
        padding: 0.75rem;
    }

    .merge-panel-header[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --pt-navy-fg, NOT --pt-navy: the latter is #000075 in BOTH schemes, which measured 1.14:1
       on the dark modal surface once its dark-mode override was removed. */
    .merge-panel-title[b-m3f01laonm] {
        font-weight: 700;
        color: var(--pt-navy-fg);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .merge-info[b-m3f01laonm] {
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
    }

    .merge-panel-body[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .merge-target-select[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .merge-target-select label[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
    }

    .merge-target-select select[b-m3f01laonm] {
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 0;
    }

    .merge-preview[b-m3f01laonm] {
        background: var(--modal-bg);
        border: 1px solid var(--modal-border);
        border-radius: 0;
        padding: 1rem;
    }

    .merge-preview-header[b-m3f01laonm] {
        font-weight: 600;
        color: var(--pt-navy, #000075);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .merge-preview-content[b-m3f01laonm] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0.75rem;
        align-items: center;
    }

    .merge-source[b-m3f01laonm],.merge-target[b-m3f01laonm],.merge-result[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .merge-result[b-m3f01laonm] {
        grid-column: 1 / -1;
        text-align: center;
        padding-top: 0.75rem;
        border-top: 1px solid var(--modal-border);
        margin-top: 0.5rem;
    }

    .merge-label[b-m3f01laonm] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
        text-transform: uppercase;
    }

    .merge-value[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
    }

    .merge-total[b-m3f01laonm] {
        font-size: 1.25rem;
        color: var(--success-color);
    }

    .merge-arrow[b-m3f01laonm] {
        color: var(--pt-navy, #000075);
        font-size: 1.25rem;
    }

    .merge-no-tabs[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem;
        background: var(--modal-bg);
        border-radius: 0;
        color: var(--modal-text-secondary);
    }

    .btn-apply-merge[b-m3f01laonm] {
        align-self: flex-end;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Dark mode merge adjustments */
    @media (prefers-color-scheme: dark) {
        .merge-panel[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(0, 0, 117, 0.28) 0%, rgba(0, 0, 117, 0.12) 100%);
        }

    .merge-preview-header[b-m3f01laonm] {
            color: var(--pt-navy-fg);
        }

    .merge-arrow[b-m3f01laonm] {
            color: var(--pt-navy-fg);
        }
    }

    /* Responsive merge adjustments */
    @media (max-width: 768px) {
        .merge-preview-content[b-m3f01laonm] {
            grid-template-columns: 1fr;
        }

    .merge-arrow[b-m3f01laonm] {
            transform: rotate(90deg);
            justify-self: center;
        }

    .merge-result[b-m3f01laonm] {
            grid-column: 1;
        }

    .btn-apply-merge[b-m3f01laonm] {
            width: 100%;
            justify-content: center;
        }
    }

    /* Quantity Selector Styles */
    .qty-selector[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-right: 0.5rem;
        background: var(--modal-bg);
        border: 2px solid #f59e0b;
        border-radius: 0;
        padding: 0.125rem;
    }

    .qty-selector.remake-qty[b-m3f01laonm] {
        border-color: var(--pt-navy, #000075);
    }

    .qty-btn[b-m3f01laonm] {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--modal-text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
        padding: 0;
    }

    .qty-btn:hover:not(:disabled)[b-m3f01laonm] {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.1);
    }

    .remake-qty .qty-btn:hover:not(:disabled)[b-m3f01laonm] {
        color: var(--pt-navy, #000075);
        background: rgba(0, 0, 117, 0.1);
    }

    .qty-btn:disabled[b-m3f01laonm] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .qty-btn i[b-m3f01laonm] {
        font-size: 0.625rem;
    }

    .qty-value[b-m3f01laonm] {
        min-width: 24px;
        text-align: center;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text-secondary);
    }

    .qty-value.qty-active[b-m3f01laonm] {
        color: #f59e0b;
    }

    .remake-qty .qty-value.qty-active[b-m3f01laonm] {
        color: var(--pt-navy, #000075);
    }

    /* Staff-Added Item Styles */
    .blended-item-row.item-staff-added[b-m3f01laonm] {
        background: rgba(236, 96, 126, 0.08);
        border-left: 3px solid var(--pt-coral, #ec607e);
        padding-left: 0.5rem;
        margin-left: -0.5rem;
    }

    .staff-added-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.375rem;
        background: rgba(236, 96, 126, 0.15);
        border: 1px solid var(--pt-coral, #ec607e);
        color: var(--pt-coral, #ec607e);
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        margin-right: 0.375rem;
        flex-shrink: 0;
    }

    .staff-added-badge i[b-m3f01laonm] {
        font-size: 0.5rem;
    }

    /* Scheduled Orders (v1): held-future-order chip — navy on tinted navy,square edges (brand). */
    .tab-detail-scheduled-chip[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.375rem;
        background: rgba(0, 0, 117, 0.10);
        border: 1px solid var(--pt-navy, #000075);
        color: var(--pt-navy, #000075);
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 0.375rem;
    }

    .tab-detail-scheduled-chip i[b-m3f01laonm] {
        font-size: 0.5rem;
    }

    .staff-added-text[b-m3f01laonm] {
        white-space: nowrap;
    }

    /* Dark mode staff-added adjustments */
    @media (prefers-color-scheme: dark) {
        .blended-item-row.item-staff-added[b-m3f01laonm] {
            background: rgba(236, 96, 126, 0.12);
        }

    .staff-added-badge[b-m3f01laonm] {
            background: rgba(236, 96, 126, 0.2);
        }
    }

    /* Dark mode qty selector */
    @media (prefers-color-scheme: dark) {
        .qty-selector[b-m3f01laonm] {
            border-color: #fbbf24;
        }

    .qty-selector.remake-qty[b-m3f01laonm] {
            border-color: var(--pt-navy-fg);
        }

    .qty-btn:hover:not(:disabled)[b-m3f01laonm] {
            color: #fbbf24;
        }

    .remake-qty .qty-btn:hover:not(:disabled)[b-m3f01laonm] {
            color: var(--pt-navy-fg);
        }

    .qty-value.qty-active[b-m3f01laonm] {
            color: #fbbf24;
        }

    .remake-qty .qty-value.qty-active[b-m3f01laonm] {
            color: var(--pt-navy-fg);
        }
    }

    /* Cash-close / abandoned-tab confirm modals (migrated to PtModal). Overlay + shell
       now come from the canonical shell; only the body content styles below are local. */
    .cash-confirm-message[b-m3f01laonm] {
        font-size: 1rem;
        color: var(--modal-text);
        margin: 0 0 1.25rem 0;
        line-height: 1.5;
    }

    .cash-confirm-info[b-m3f01laonm] {
        background: var(--modal-header-bg);
        border: 1px solid var(--modal-border);
        border-left: 4px solid var(--pt-coral, #ec607e);
        padding: 1rem;
    }

    .cash-confirm-info .info-row[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
    }

    .cash-confirm-info .info-label[b-m3f01laonm] {
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
    }

    .cash-confirm-info .info-value[b-m3f01laonm] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--modal-text);
    }

    .cash-confirm-info .info-total[b-m3f01laonm] {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--success-color);
    }

    

    /* Responsive cash confirm modal */
    @media (max-width: 576px) {
    }

    /* Partial Payments Section Styles */
    .partial-payments-loading[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        background: var(--modal-header-bg);
        border-radius: 0;
        color: var(--modal-text-secondary);
    }

    .partial-payments-section[b-m3f01laonm] {
        border-radius: 0;
        padding: 0.75rem;
        border: 2px solid;
    }

    .partial-payments-section.has-balance[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
        border-color: #f59e0b;
    }

    .partial-payments-section.fully-paid[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
        border-color: #10b981;
    }

    .partial-payments-header[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .partial-payments-title[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }

    .has-balance .partial-payments-title[b-m3f01laonm] {
        color: #f59e0b;
    }

    .fully-paid .partial-payments-title[b-m3f01laonm] {
        color: #10b981;
    }

    .balance-due-badge[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #f59e0b;
        color: white;
        border-radius: 0;
        font-weight: 700;
    }

    .balance-label[b-m3f01laonm] {
        font-size: 0.75rem;
        text-transform: uppercase;
        opacity: 0.9;
    }

    .balance-amount[b-m3f01laonm] {
        font-size: 1.125rem;
    }

    .partial-payments-body[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .payments-list[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .payment-item[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--modal-bg);
        border: 1px solid var(--modal-border);
        border-radius: 0;
    }

    .payment-item-icon[b-m3f01laonm] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        flex-shrink: 0;
    }

    .has-balance .payment-item-icon[b-m3f01laonm] {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .fully-paid .payment-item-icon[b-m3f01laonm] {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
    }

    .payment-item-details[b-m3f01laonm] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
    }

    .payment-payer[b-m3f01laonm] {
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payment-method[b-m3f01laonm] {
        font-size: 0.75rem;
        color: var(--modal-text-secondary);
    }

    .payment-item-amount[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.125rem;
    }

    .payment-amount[b-m3f01laonm] {
        font-weight: 700;
        color: var(--success-color);
    }

    .payment-tip[b-m3f01laonm] {
        font-size: 0.7rem;
        color: var(--modal-text-secondary);
    }

    .payments-summary[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--modal-border);
    }

    .payments-summary .summary-row[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        color: var(--modal-text-secondary);
    }

    .payments-summary .paid-amount[b-m3f01laonm] {
        font-weight: 600;
        color: var(--success-color);
    }

    .payments-summary .summary-balance[b-m3f01laonm] {
        font-weight: 700;
        font-size: 1rem;
        color: #f59e0b;
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        border-top: 1px dashed var(--modal-border);
    }

    .payments-summary .summary-balance .balance-amount[b-m3f01laonm] {
        color: #f59e0b;
    }

    /* Dark mode partial payments adjustments */
    @media (prefers-color-scheme: dark) {
        .partial-payments-section.has-balance[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
            border-color: #fbbf24;
        }

    .partial-payments-section.fully-paid[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
            border-color: #34d399;
        }

    .has-balance .partial-payments-title[b-m3f01laonm] {
            color: #fbbf24;
        }

    .fully-paid .partial-payments-title[b-m3f01laonm] {
            color: #34d399;
        }

    .balance-due-badge[b-m3f01laonm] {
            background: #d97706;
        }

    .has-balance .payment-item-icon[b-m3f01laonm] {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
        }

    .fully-paid .payment-item-icon[b-m3f01laonm] {
            background: rgba(52, 211, 153, 0.2);
            color: #34d399;
        }

    .payments-summary .summary-balance[b-m3f01laonm],.payments-summary .summary-balance .balance-amount[b-m3f01laonm] {
            color: #fbbf24;
        }
    }

    /* Authorized Payment Styles */
    .payment-item.payment-authorized[b-m3f01laonm] {
        border: 1px dashed var(--pt-navy, #000075);
        background: rgba(0, 0, 117, 0.05);
    }

    .payment-icon-authorized[b-m3f01laonm] {
        background: rgba(0, 0, 117, 0.15) !important;
        color: var(--pt-navy, #000075) !important;
    }

    .payment-wallet-badge[b-m3f01laonm] {
        display: inline-block;
        margin-right: 0.375rem;
        padding: 0.125rem 0.375rem;
        background: #1a1a2e;
        color: white;
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    /* "Terminal propia" (TPV propia) chip — restaurant's own bank terminal,a
       record-only tender. Coral to read distinctly from cash (green icon) and
       card. Straight edges per brand. */
    .payment-terminal-badge[b-m3f01laonm] {
        display: inline-block;
        padding: 0.125rem 0.375rem;
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    .payment-terminal-badge i[b-m3f01laonm] {
        margin-right: 0.25rem;
    }

    /* "Transferencia" (SPEI) chip. Navy rather than the terminal chip's coral, so the two
       non-card tenders read distinctly when both appear on one tab. Navy + white matches
       .payment-status-badge, including its dark-mode lightening below — navy on a dark
       surface does not clear contrast on its own. */
    .payment-transfer-badge[b-m3f01laonm] {
        display: inline-block;
        padding: 0.125rem 0.375rem;
        background: var(--pt-navy, #000075);
        color: white;
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    .payment-transfer-badge i[b-m3f01laonm] {
        margin-right: 0.25rem;
    }

    .payment-status-badge[b-m3f01laonm] {
        display: inline-block;
        margin-left: 0.5rem;
        padding: 0.125rem 0.375rem;
        background: var(--pt-navy, #000075);
        color: white;
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .payment-amount-authorized[b-m3f01laonm] {
        color: var(--pt-navy, #000075) !important;
    }

    .summary-authorized[b-m3f01laonm] {
        color: var(--pt-navy, #000075);
    }

    .authorized-amount[b-m3f01laonm] {
        font-weight: 600;
        color: var(--pt-navy, #000075);
    }

    /* Dark mode authorized payment adjustments */
    @media (prefers-color-scheme: dark) {
        .payment-item.payment-authorized[b-m3f01laonm] {
            border-color: #6060c0;
            background: rgba(96, 96, 192, 0.1);
        }

    .payment-icon-authorized[b-m3f01laonm] {
            background: rgba(96, 96, 192, 0.2) !important;
            color: #8080d0 !important;
        }

    .payment-wallet-badge[b-m3f01laonm] {
            background: #4040a0;
        }

    .payment-status-badge[b-m3f01laonm] {
            background: #6060c0;
        }

    .payment-transfer-badge[b-m3f01laonm] {
            background: #6060c0;
        }

    /* The 10%-navy tint disappears against a dark surface; lift it the same way the
       authorized rows are lifted just above. */
    .pending-bank-transfers-section[b-m3f01laonm] {
            background: rgba(96, 96, 192, 0.12);
            border-color: #6060c0;
        }

    .payment-amount-authorized[b-m3f01laonm] {
            color: #8080d0 !important;
        }

    .summary-authorized[b-m3f01laonm],.authorized-amount[b-m3f01laonm] {
            color: #8080d0;
        }
    }

    /* Responsive partial payments */
    @media (max-width: 576px) {
        .partial-payments-header[b-m3f01laonm] {
            flex-direction: column;
            align-items: flex-start;
        }

    .balance-due-badge[b-m3f01laonm] {
            width: 100%;
            justify-content: space-between;
        }

    .payment-item[b-m3f01laonm] {
            flex-wrap: wrap;
        }

    .payment-item-amount[b-m3f01laonm] {
            order: 3;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            padding-top: 0.5rem;
            margin-top: 0.5rem;
            border-top: 1px dashed var(--modal-border);
        }
    }

    /* Pending Cash Claims Section Styles */
    .pending-cash-claims-section[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(236, 96, 126, 0.1) 0%, rgba(236, 96, 126, 0.05) 100%);
        border: 2px solid var(--pt-coral, #ec607e);
        border-radius: 0;
        padding: 0.75rem;
    }

    /* Live SPEI reference. Navy-tinted to match the transfer chip and to sit apart from the
       coral cash-claim block, which can legitimately appear on the same tab at the same time. */
    .pending-bank-transfers-section[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(0, 0, 117, 0.1) 0%, rgba(0, 0, 117, 0.05) 100%);
        border: 2px solid var(--pt-navy, #000075);
        border-radius: 0;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .pending-cash-claims-footer[b-m3f01laonm] {
        margin-top: 0.5rem;
        color: var(--pt-text-muted);
        line-height: 1.3;
    }

    .pending-cash-claims-header[b-m3f01laonm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }

    .pending-cash-claims-title[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--pt-coral, #ec607e);
    }

    .pending-count-badge[b-m3f01laonm] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 0.5rem;
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        border-radius: 0;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .pending-cash-claims-body[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pending-claim-item[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--modal-bg);
        border: 1px solid var(--modal-border);
        border-left: 3px solid var(--pt-coral, #ec607e);
        border-radius: 0;
        transition: all 0.2s ease;
    }

    /* Hover edge uses --pt-hover-border (navy in light,light silver in dark). The glow
       follows the border — a coral halo around a navy edge reads as two competing states. */
    .pending-claim-item:hover[b-m3f01laonm] {
        border-color: var(--pt-hover-border);
        box-shadow: 0 2px 8px rgba(0, 0, 117, 0.15);
    }

    .claim-item-icon[b-m3f01laonm] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(236, 96, 126, 0.15);
        color: var(--pt-coral, #ec607e);
        border-radius: 0;
        flex-shrink: 0;
    }

    .claim-item-details[b-m3f01laonm] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
    }

    .claim-payer[b-m3f01laonm] {
        font-weight: 600;
        color: var(--modal-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .claim-method[b-m3f01laonm] {
        font-size: 0.75rem;
        color: var(--modal-text-secondary);
    }

    .claim-item-amount[b-m3f01laonm] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.125rem;
    }

    .claim-amount[b-m3f01laonm] {
        font-weight: 700;
        color: var(--pt-coral, #ec607e);
    }

    .claim-tip[b-m3f01laonm] {
        font-size: 0.7rem;
        color: var(--modal-text-secondary);
    }

    .claim-item-actions[b-m3f01laonm] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .btn-claim-confirm[b-m3f01laonm],.btn-claim-cancel[b-m3f01laonm] {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
    }

    .btn-claim-confirm[b-m3f01laonm] {
        background: #10b981;
        border-color: #10b981;
    }

    .btn-claim-confirm:hover:not(:disabled)[b-m3f01laonm] {
        background: #059669;
        border-color: #059669;
    }

    .btn-claim-cancel[b-m3f01laonm] {
        border-width: 2px;
    }

    /* Dark mode pending cash claims adjustments */
    @media (prefers-color-scheme: dark) {
        .pending-cash-claims-section[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(236, 96, 126, 0.15) 0%, rgba(236, 96, 126, 0.05) 100%);
        }

    .claim-item-icon[b-m3f01laonm] {
            background: rgba(236, 96, 126, 0.2);
        }

        /* Silver glow to match --pt-hover-border in dark (#cbd5e1). */
    .pending-claim-item:hover[b-m3f01laonm] {
            box-shadow: 0 2px 8px rgba(203, 213, 225, 0.25);
        }
    }

    /* Responsive pending cash claims */
    @media (max-width: 576px) {
        .pending-claim-item[b-m3f01laonm] {
            flex-wrap: wrap;
        }

    .claim-item-amount[b-m3f01laonm] {
            order: 3;
            flex-direction: row;
            gap: 0.5rem;
            width: calc(100% - 80px);
            padding-top: 0.5rem;
            margin-top: 0.5rem;
            border-top: 1px dashed var(--modal-border);
        }

    .claim-item-actions[b-m3f01laonm] {
            order: 4;
        }
    }

    /* Split Payment Badge Styles */
    .payment-split-badge[b-m3f01laonm] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-left: 0.5rem;
        padding: 0.125rem 0.5rem;
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        vertical-align: middle;
    }

    .payment-split-badge i[b-m3f01laonm] {
        font-size: 0.5rem;
    }

    /* Divide mode badge - purple/violet color */
    .payment-split-divide[b-m3f01laonm] {
        /* iPad #10 — one flat tag purple (--pt-tag), no gradient. */
        background: var(--pt-tag-bg, rgba(139, 92, 246, 0.12));
        border: 1px solid var(--pt-tag, #8b5cf6);
        color: var(--pt-tag, #8b5cf6);
    }

    /* Links mode badge - teal color */
    .payment-split-links[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.1) 100%);
        border: 1px solid #14b8a6;
        color: #14b8a6;
    }

    /* Split payment item styling */
    .payment-item.payment-split[b-m3f01laonm] {
        border-left: 3px solid var(--pt-tag, #8b5cf6);
    }

    .payment-item.payment-split.payment-authorized[b-m3f01laonm] {
        border-left: 3px solid var(--pt-tag, #8b5cf6);
    }

    .pending-claim-item.claim-split[b-m3f01laonm] {
        border-left-color: var(--pt-tag, #8b5cf6);
    }

    /* Dark mode split payment adjustments */
    @media (prefers-color-scheme: dark) {
        .payment-split-divide[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.1) 100%);
            border-color: #a78bfa;
            color: #a78bfa;
        }

    .payment-split-links[b-m3f01laonm] {
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%);
            border-color: #2dd4bf;
            color: #2dd4bf;
        }

    .payment-item.payment-split[b-m3f01laonm] {
            border-left-color: #a78bfa;
        }

    .pending-claim-item.claim-split[b-m3f01laonm] {
            border-left-color: #a78bfa;
        }
    }

    /* Responsive split payment badges */
    @media (max-width: 576px) {
        .payment-split-badge[b-m3f01laonm] {
            display: block;
            margin-left: 0;
            margin-top: 0.25rem;
            width: fit-content;
        }
    }

    /* Column scrollbar styling */
    .tab-column-left[b-m3f01laonm]::-webkit-scrollbar,.tab-column-right[b-m3f01laonm]::-webkit-scrollbar {
        width: 4px;
    }

    .tab-column-left[b-m3f01laonm]::-webkit-scrollbar-track,.tab-column-right[b-m3f01laonm]::-webkit-scrollbar-track {
        background: transparent;
    }

    .tab-column-left[b-m3f01laonm]::-webkit-scrollbar-thumb,.tab-column-right[b-m3f01laonm]::-webkit-scrollbar-thumb {
        background: var(--modal-border);
        border-radius: 0;
    }

    .tab-column-left[b-m3f01laonm]::-webkit-scrollbar-thumb:hover,.tab-column-right[b-m3f01laonm]::-webkit-scrollbar-thumb:hover {
        background: var(--modal-text-secondary);
    }

    /* Dark mode for new elements */
    @media (prefers-color-scheme: dark) {
        .blended-item-row:hover[b-m3f01laonm] {
            background: rgba(255, 255, 255, 0.03);
        }

    .right-card[b-m3f01laonm] {
            background: var(--modal-header-bg);
            border-color: var(--modal-border);
        }

    .totals-closed-badge[b-m3f01laonm] {
            background: rgba(52, 211, 153, 0.15);
            color: #34d399;
        }

    .blended-category-header[b-m3f01laonm] {
            border-bottom-color: var(--modal-border);
        }
    }

    /* PR 2 (course-as-Order,2026-05-19) — abandoned-tab recovery callout.
       Amber informational warning (NOT destructive red); per
       mesero-ui-modernization-plan §1 (semantic color). Sits above the
       primary close-actions row in the panel footer. */
    .abandoned-tab-callout[b-m3f01laonm] {
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        border-radius: 0;
        padding: 12px 16px;
        margin: 0 0 12px 0;
        font-family: 'Montserrat', sans-serif;
    }

    .abandoned-tab-callout__head[b-m3f01laonm] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-weight: 600;
        font-size: 0.9rem;
        color: #92400e;
        margin-bottom: 4px;
    }

    .abandoned-tab-callout__body[b-m3f01laonm] {
        font-size: 0.85rem;
        color: #78350f;
        margin-bottom: 10px;
    }

    .abandoned-tab-callout__actions[b-m3f01laonm] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .abandoned-tab-btn[b-m3f01laonm] {
        min-height: 44px;
        padding: 8px 14px;
        border-radius: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
    }

    .abandoned-tab-btn--mark[b-m3f01laonm] {
        background: transparent;
        color: var(--pt-navy, #000075);
        border: 1px solid var(--pt-navy, #000075);
    }

    .abandoned-tab-btn--mark:hover:not(:disabled)[b-m3f01laonm] {
        background: var(--pt-navy, #000075);
        color: #ffffff;
    }

    .abandoned-tab-btn--charge[b-m3f01laonm] {
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        border: 1px solid var(--pt-coral, #ec607e);
    }

    .abandoned-tab-btn--charge:hover:not(:disabled)[b-m3f01laonm] { filter: brightness(0.95); }

    .abandoned-tab-btn:disabled[b-m3f01laonm] { opacity: 0.5; cursor: not-allowed; }

    @media (prefers-color-scheme: dark) {
        .abandoned-tab-callout[b-m3f01laonm] {
            background: rgba(245, 158, 11, 0.12);
        }

    .abandoned-tab-callout__head[b-m3f01laonm] { color: #fbbf24; }

    .abandoned-tab-callout__body[b-m3f01laonm] { color: #fcd34d; }

    .abandoned-tab-btn--mark[b-m3f01laonm] { color: #ffffff; border-color: #ffffff; }
    }
/* /Components/Splash/SplashScreen.razor.rz.scp.css */
    .splash-screen[b-fx5dot0ubr] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        overflow: hidden;
        background: var(--pt-navy, #000075);
        transition: opacity 0.5s ease-out;
    }
    
    .splash-screen.fade-out[b-fx5dot0ubr] {
        opacity: 0;
        pointer-events: none;
    }
    
    /* Grid container */
    .squares-grid[b-fx5dot0ubr] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(var(--cols), var(--cell-size));
        grid-template-rows: repeat(var(--rows), var(--cell-size));
        width: calc(var(--cols) * var(--cell-size));
        height: calc(var(--rows) * var(--cell-size));
        gap: 0;
    }
    
    /* Individual square - all same size */
    .square[b-fx5dot0ubr] {
        position: relative;
        width: var(--cell-size);
        height: var(--cell-size);
    }
    
    .square-navy[b-fx5dot0ubr],
    .square-coral[b-fx5dot0ubr] {
        position: absolute;
        inset: -1px;
    }
    
    .square-navy[b-fx5dot0ubr] {
        background: var(--pt-navy, #000075);
    }
    
    .square-coral[b-fx5dot0ubr] {
        background: var(--pt-coral, #ec607e);
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        transition-delay: var(--delay);
    }
    
    .square.animate .square-coral[b-fx5dot0ubr] {
        opacity: 1;
    }
    
    /* Logo tile - same size as all other squares */
    .logo-tile[b-fx5dot0ubr] {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    
    .logo-bg-navy[b-fx5dot0ubr],
    .logo-bg-coral[b-fx5dot0ubr] {
        position: absolute;
        inset: -1px;
    }
    
    .logo-bg-navy[b-fx5dot0ubr] {
        background: var(--pt-navy, #000075);
    }
    
    .logo-bg-coral[b-fx5dot0ubr] {
        background: var(--pt-coral, #ec607e);
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
        transition-delay: 1.2s;
    }
    
    .logo-tile.animate .logo-bg-coral[b-fx5dot0ubr] {
        opacity: 1;
    }
    
    /* iPad #1: 85% of --cell-size is what the static loading splash in
       wwwroot/index.html (.loading-logo-img) pins its widths to, so the wordmark
       does not change size the instant Blazor replaces that markup. Changing this
       percentage or --cell-size means updating those widths too. */
    .logo-img[b-fx5dot0ubr] {
        position: absolute;
        width: 85%;
        height: auto;
        max-height: 60%;
        object-fit: contain;
        z-index: 2;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    }
    
    /* Coral logo (visible initially on navy bg) */
    .logo-coral[b-fx5dot0ubr] {
        opacity: 1;
        transition: opacity 0.6s ease-in-out;
        transition-delay: 1.2s;
    }
    
    .logo-tile.animate .logo-coral[b-fx5dot0ubr] {
        opacity: 0;
    }
    
    /* Navy logo (fades in on coral bg) */
    .logo-navy[b-fx5dot0ubr] {
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
        transition-delay: 1.4s;
    }
    
    .logo-tile.animate .logo-navy[b-fx5dot0ubr] {
        opacity: 1;
    }
    
    /* Mobile adjustments - smaller cells on smaller screens */
    @media (max-width: 768px) {
        .squares-grid[b-fx5dot0ubr] {
            --cell-size: 150px !important;
        }
    }
    
    @media (max-width: 480px) {
        .squares-grid[b-fx5dot0ubr] {
            --cell-size: 120px !important;
        }
    }
/* /Components/Util/AwaitingWalletReAuthPill.razor.rz.scp.css */
    /* Re-uses the .awaiting-approval-pill-* tone classes defined on
       AwaitingApprovalPill so the two pills are visually consistent.
       Only the extra amount chip needs its own rule. */
    .awaiting-approval-pill-amount[b-if6hun9015] {
        margin-left: 6px;
        padding: 2px 6px;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 0;
        font-size: 12px;
        font-weight: 600;
    }
/* /Components/Util/CoursePlanPreview.razor.rz.scp.css */
    /* PayTable 2025 branding: Navy #000075 · Coral #ec607e · White
       · straight edges · touch-friendly · Montserrat body / Poppins headings. */
    .course-plan-preview[b-w82tq0630a] {
        font-family: 'Montserrat', sans-serif;
        background: rgba(0, 0, 117, 0.04);
        border-left: 4px solid var(--pt-navy, #000075);
        border-radius: 0;
        padding: 12px 16px;
        margin: 12px 0;
    }

    .course-plan-preview__header[b-w82tq0630a] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
    }

    .course-plan-preview__title-row[b-w82tq0630a] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .course-plan-preview__title[b-w82tq0630a] {
        font-family: 'Poppins', 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: var(--pt-navy, #000075);
    }

    .course-plan-preview__edited-tag[b-w82tq0630a] {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 0;
        font-family: 'Montserrat', sans-serif;
    }

    .course-plan-preview__edited-tag.auto[b-w82tq0630a] {
        background: rgba(0, 0, 117, 0.08);
        color: var(--pt-navy, #000075);
    }

    .course-plan-preview__edited-tag.edited[b-w82tq0630a] {
        background: rgba(236, 96, 126, 0.12);
        color: var(--pt-coral, #ec607e);
    }

    /* Outline-navy pill — UI plan §3.4 (no coral except for the page's
       primary CTA). Stays visible per locked decision UI-3. */
    .course-plan-preview__flatten[b-w82tq0630a] {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 14px;
        background: transparent;
        color: var(--pt-navy, #000075);
        border: 1px solid var(--pt-navy, #000075);
        border-radius: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .course-plan-preview__flatten:hover:not(:disabled)[b-w82tq0630a] {
        background: var(--pt-navy, #000075);
        color: #ffffff;
    }

    .course-plan-preview__course[b-w82tq0630a],
    .course-plan-preview__bar[b-w82tq0630a] {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 117, 0.12);
        border-radius: 0;
        padding: 10px 12px;
        margin-bottom: 8px;
    }

    .course-plan-preview__course-header[b-w82tq0630a] {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .course-plan-preview__course-num[b-w82tq0630a] {
        font-weight: 600;
        font-size: 13px;
        color: var(--pt-navy, #000075);
    }

    .course-plan-preview__course-mode[b-w82tq0630a] {
        font-size: 12px;
        color: var(--ion-color-medium-shade, #4a4a52);
        flex: 1;
    }

    .course-plan-preview__edit[b-w82tq0630a] {
        min-height: 44px;
        min-width: 44px;
        padding: 6px 12px;
        background: transparent;
        color: var(--pt-navy, #000075);
        border: 1px solid var(--pt-navy, #000075);
        border-radius: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .course-plan-preview__edit:hover:not(:disabled)[b-w82tq0630a] {
        background: var(--pt-navy, #000075);
        color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        .course-plan-preview[b-w82tq0630a] {
            background: rgba(255, 255, 255, 0.04);
            border-left-color: var(--pt-coral, #ec607e);
        }
        .course-plan-preview__title[b-w82tq0630a] { color: #ffffff; }
        .course-plan-preview__edited-tag.auto[b-w82tq0630a] { color: #ffffff; background: rgba(255, 255, 255, 0.10); }
        .course-plan-preview__course[b-w82tq0630a],
        .course-plan-preview__bar[b-w82tq0630a] {
            background: #1f2937;
            border-color: rgba(255, 255, 255, 0.12);
        }
        .course-plan-preview__course-num[b-w82tq0630a] { color: #ffffff; }
        .course-plan-preview__course-mode[b-w82tq0630a] { color: #c8c8d0; }
        .course-plan-preview__edit[b-w82tq0630a] {
            color: #ffffff;
            border-color: #ffffff;
        }
        .course-plan-preview__flatten[b-w82tq0630a] {
            color: #ffffff;
            border-color: #ffffff;
        }
    }
/* /Components/Util/MobileWaiterCallBadge.razor.rz.scp.css */
    /* ==========================================================================
       Bell icon trigger — matches mobile header icon-button sizing.
       ========================================================================== */
    .mwc-badge[b-ieuqb2p6zb] {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 4px; /* 36px visual bg inside 44px tap target — brand 44px rule */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        background-clip: content-box;
        border: none;
        color: white;
        cursor: pointer;
        transition: background 0.15s ease;
        border-radius: 0;
    }

    .mwc-badge:hover[b-ieuqb2p6zb],
    .mwc-badge:focus-visible[b-ieuqb2p6zb] {
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }

    /* ::deep -- see WaiterCallBadge.razor.css. PtIcon owns the <i>. */
    .mwc-badge[b-ieuqb2p6zb]  > i {
        font-size: 0.95rem;
    }

    .mwc-count[b-ieuqb2p6zb] {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        font-size: 0.625rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--pt-navy, #000075);
        animation: mwcPulse-b-ieuqb2p6zb 2s ease-in-out infinite;
        font-variant-numeric: tabular-nums;
    }

    @keyframes mwcPulse-b-ieuqb2p6zb {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.12); }
    }

    /* ==========================================================================
       Bottom-sheet overlay + panel.
       ========================================================================== */
    .mwc-overlay[b-ieuqb2p6zb] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 250;
        display: flex;
        align-items: flex-end;
        animation: mwcFadeIn-b-ieuqb2p6zb 0.2s ease;
    }

    @keyframes mwcFadeIn-b-ieuqb2p6zb {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .mwc-sheet[b-ieuqb2p6zb] {
        width: 100%;
        max-height: 80vh;
        background: white;
        display: flex;
        flex-direction: column;
        animation: mwcSlideUp-b-ieuqb2p6zb 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-top: 3px solid var(--pt-coral, #ec607e);
    }

    @keyframes mwcSlideUp-b-ieuqb2p6zb {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    .mwc-sheet-header[b-ieuqb2p6zb] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .mwc-sheet-header h3[b-ieuqb2p6zb] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--pt-navy, #000075);
    }

    .mwc-close[b-ieuqb2p6zb] {
        width: 44px;
        height: 44px;
        padding: 6px; /* 32px icon box inside 44px tap target — brand 44px rule */
        border: none;
        background: #f3f4f6;
        color: var(--pt-navy, #000075);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background-clip: content-box;
    }

    /* ==========================================================================
       Empty / actions / list.
       ========================================================================== */
    .mwc-empty[b-ieuqb2p6zb] {
        padding: 2rem 1rem;
        text-align: center;
        color: #6b7280;
        font-size: 0.875rem;
    }

    .mwc-empty i[b-ieuqb2p6zb] {
        color: #10b981;
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .mwc-actions[b-ieuqb2p6zb] {
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        justify-content: flex-end;
    }

    .mwc-dismiss-all[b-ieuqb2p6zb] {
        background: none;
        border: none;
        color: var(--pt-coral, #ec607e);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .mwc-list[b-ieuqb2p6zb] {
        overflow-y: auto;
        max-height: 60vh;
    }

    .mwc-row[b-ieuqb2p6zb] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 1rem;
        border-bottom: 1px solid #f3f4f6;
        border-left: 3px solid var(--pt-coral, #ec607e);
    }

    .mwc-row:last-child[b-ieuqb2p6zb] {
        border-bottom: none;
    }

    .mwc-row-main[b-ieuqb2p6zb] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .mwc-row-table[b-ieuqb2p6zb] {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text-primary, #1f2937);
        font-variant-numeric: tabular-nums;
    }

    .mwc-row-meta[b-ieuqb2p6zb] {
        font-size: 0.75rem;
        color: var(--text-secondary, #6b7280);
    }

    .mwc-row-dot[b-ieuqb2p6zb] {
        margin: 0 0.3rem;
        color: #d1d5db;
    }

    .mwc-dismiss[b-ieuqb2p6zb] {
        width: 44px;
        height: 44px;
        padding: 6px; /* 32px icon box inside 44px tap target — brand 44px rule */
        border: none;
        background: #f3f4f6;
        color: #6b7280;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        flex-shrink: 0;
        background-clip: content-box;
    }

    .mwc-dismiss:hover[b-ieuqb2p6zb] {
        background: rgba(236, 96, 126, 0.15);
        color: var(--pt-coral, #ec607e);
    }

    /* ==========================================================================
       Dark mode.
       ========================================================================== */
    @media (prefers-color-scheme: dark) {
        .mwc-sheet[b-ieuqb2p6zb] {
            background: #1e293b;
        }

        .mwc-sheet-header[b-ieuqb2p6zb] {
            border-bottom-color: #334155;
        }

        .mwc-sheet-header h3[b-ieuqb2p6zb] {
            color: #f9fafb;
        }

        .mwc-close[b-ieuqb2p6zb] {
            background: #334155;
            color: #f9fafb;
        }

        .mwc-row[b-ieuqb2p6zb] {
            border-bottom-color: #334155;
        }

        .mwc-row-table[b-ieuqb2p6zb] {
            color: #f9fafb;
        }

        .mwc-actions[b-ieuqb2p6zb] {
            border-bottom-color: #334155;
        }

        .mwc-dismiss[b-ieuqb2p6zb] {
            background: #334155;
            color: #cbd5e1;
        }
    }

    /* Notched-phone safe area for the sheet bottom. */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mwc-sheet[b-ieuqb2p6zb] {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
/* /Components/Util/OrderRowKebab.razor.rz.scp.css */
    /* Inline-positioned wrapper so the kebab sits in the per-order action
       row alongside Marcar entregado / Liberar ahora. The overlay covers the
       full viewport (outside-click closes the menu) while the menu itself
       is anchored under the trigger via the wrap's relative positioning. */
    .orow-kebab-wrap[b-bvdaoxwynm] {
        position: relative;
        display: inline-flex;
    }

    .orow-kebab-trigger[b-bvdaoxwynm] {
        width: 44px;
        height: 44px;
        padding: 10px; /* 24px visual icon area inside a 44px tap target. */
        border: 1px solid rgba(0, 0, 117, 0.15);
        background: #ffffff;
        background-clip: padding-box;
        color: var(--pt-navy, #000075);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        transition: background 0.15s ease;
        flex-shrink: 0;
    }

    .orow-kebab-trigger:hover:not(:disabled)[b-bvdaoxwynm] {
        background: rgba(0, 0, 117, 0.05);
    }

    .orow-kebab-trigger:disabled[b-bvdaoxwynm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .orow-kebab-trigger > i[b-bvdaoxwynm] {
        font-size: 0.875rem;
    }

    .orow-kebab-overlay[b-bvdaoxwynm] {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 200;
    }

    .orow-kebab-menu[b-bvdaoxwynm] {
        position: absolute;
        /* Anchor ABOVE the trigger (bottom edge of menu = top edge of trigger
           with a 4px gap). The kebab lives in the per-order action row, which
           is at the bottom of each order block; opening downward (`top: 48px`)
           clipped the menu off the viewport when the trigger was on the last
           visible row. Opening upward keeps the menu visible regardless of
           the trigger's vertical position. */
        bottom: 48px;
        right: 0;
        min-width: 200px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 117, 0.12);
        border-bottom: 4px solid var(--pt-destructive, #ef4444);
        border-radius: 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
        z-index: 210;
        display: flex;
        flex-direction: column;
    }

    .orow-kebab-item[b-bvdaoxwynm] {
        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(--pt-navy, #000075);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .orow-kebab-item:last-child[b-bvdaoxwynm] {
        border-bottom: none;
    }

    .orow-kebab-item:hover:not(:disabled)[b-bvdaoxwynm] {
        background: rgba(0, 0, 117, 0.05);
    }

    .orow-kebab-item:disabled[b-bvdaoxwynm] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .orow-kebab-item-destructive[b-bvdaoxwynm] {
        color: var(--pt-destructive-hover, #dc2626);
    }

    .orow-kebab-item-destructive:hover:not(:disabled)[b-bvdaoxwynm] {
        background: var(--pt-destructive-bg, #fee2e2);
        color: var(--pt-destructive-hover, #dc2626);
    }

    @media (prefers-color-scheme: dark) {
        .orow-kebab-trigger[b-bvdaoxwynm] {
            background: #1f2937;
            border-color: rgba(255, 255, 255, 0.12);
            color: #f9fafb;
        }
        .orow-kebab-trigger:hover:not(:disabled)[b-bvdaoxwynm] {
            background: rgba(255, 255, 255, 0.05);
        }
        .orow-kebab-menu[b-bvdaoxwynm] {
            background: #1f2937;
            border-color: rgba(255, 255, 255, 0.12);
        }
        .orow-kebab-item[b-bvdaoxwynm] {
            color: #f9fafb;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        .orow-kebab-item:hover:not(:disabled)[b-bvdaoxwynm] {
            background: rgba(255, 255, 255, 0.05);
        }
        .orow-kebab-item-destructive[b-bvdaoxwynm] {
            color: #f87171;
        }
        .orow-kebab-item-destructive:hover:not(:disabled)[b-bvdaoxwynm] {
            background: rgba(248, 113, 113, 0.15);
            color: #fca5a5;
        }
    }
/* /Components/Util/ViewToggle.razor.rz.scp.css */
/* ViewToggle — canonical two-state view switch.

   Scoped sidecar rather than app.css: nothing outside this component renders these classes, so
   there is no shared vocabulary to publish. Classes still carry the pt- prefix per the consistency
   guide ("follow the pt-/component-prefix rule for all new primitives").

   Geometry is 44x44 literal, NOT var(--touch-target-min) — that token is 40px (app.css:310),
   below the brand floor. Tabs' .lc-view-btn already hardcoded 44 for this reason; the menu's
   .mi-view-btn did too. Once .btn is repointed at --pt-control-min-height (plan step 2) this
   becomes a candidate to fold into .btn + a modifier. */

.pt-view-toggle[b-jhk6uk6txu] {
    display: inline-flex;
}

.pt-view-toggle-btn[b-jhk6uk6txu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pt-control-min-height);
    height: var(--pt-control-min-height);
    border: 2px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-muted);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-base, 0.2s ease);
}

/* Collapse the shared edge so the pair reads as one control, not two buttons. */
.pt-view-toggle-btn + .pt-view-toggle-btn[b-jhk6uk6txu] {
    border-left: none;
}

.pt-view-toggle-btn:hover:not(:disabled):not(.active)[b-jhk6uk6txu] {
    color: var(--text-primary);
    border-color: var(--pt-hover-border, var(--border-color));
}

.pt-view-toggle-btn.active[b-jhk6uk6txu] {
    background: var(--pt-navy, #000075);
    border-color: var(--pt-navy, #000075);
    color: #fff;
}

.pt-view-toggle-btn:disabled[b-jhk6uk6txu] {
    opacity: 0.55;
    cursor: not-allowed;
}

.pt-view-toggle-btn:focus-visible[b-jhk6uk6txu] {
    outline: 3px solid var(--pt-coral, #ec607e);
    outline-offset: -3px;
}

/* The active fill is navy in both themes; navy on a dark surface still clears contrast against
   white glyphs, and swapping it to coral here would put white-on-coral at 3.21:1 — the exact
   below-AA combination #46 is cleaning up across ~79 fills. */
@media (prefers-color-scheme: dark) {
    .pt-view-toggle-btn[b-jhk6uk6txu] {
        background: var(--surface-color);
        border-color: var(--border-color);
    }
}
/* /Components/Util/WaiterCallBadge.razor.rz.scp.css */
    .waiter-badge-container[b-m0ggupwu85] {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    .waiter-badge-container:hover[b-m0ggupwu85] {
        color: #ffffff;
    }

    /* ::deep, because the <i> is now PtIcon's own element and does not carry
       this component's scope attribute. Without it the rule matches nothing. */
    .waiter-badge-container[b-m0ggupwu85]  > i {
        font-size: 1.375rem;
    }

    .waiter-call-count[b-m0ggupwu85] {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 18px;
        height: 18px;
        background: var(--pt-coral, #ec607e);
        color: var(--pt-on-coral);
        border-radius: 0;
        font-size: 0.625rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--pt-navy, #000075);
        padding: 0 4px;
    }

    .waiter-call-count-pulse[b-m0ggupwu85] {
        animation: waiterCallCountPulse-b-m0ggupwu85 2s ease-in-out infinite;
    }

    @keyframes waiterCallCountPulse-b-m0ggupwu85 {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
    }

    /* Dropdown */
    .waiter-call-overlay[b-m0ggupwu85] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1099;
    }

    .waiter-call-dropdown[b-m0ggupwu85] {
        position: fixed;
        left: 80px;
        bottom: 120px;
        width: 320px;
        max-height: 400px;
        background: white;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        z-index: 1100;
        display: flex;
        flex-direction: column;
        border: 2px solid var(--pt-navy, #000075);
    }

    .waiter-call-dropdown-header[b-m0ggupwu85] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--pt-navy, #000075);
    }

    .waiter-call-dismiss-all[b-m0ggupwu85] {
        background: none;
        border: none;
        color: var(--pt-coral, #ec607e);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        font-family: inherit;
    }

    .waiter-call-dismiss-all:hover[b-m0ggupwu85] {
        text-decoration: underline;
    }

    .waiter-call-empty[b-m0ggupwu85] {
        padding: 2rem 1rem;
        text-align: center;
        color: #94a3b8;
        font-size: 0.8125rem;
    }

    .waiter-call-list[b-m0ggupwu85] {
        overflow-y: auto;
        max-height: 340px;
    }

    .waiter-call-item[b-m0ggupwu85] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
    }

    .waiter-call-item:hover[b-m0ggupwu85] {
        background: #f8fafc;
    }

    .waiter-call-info[b-m0ggupwu85] {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .waiter-call-table[b-m0ggupwu85] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
    }

    .waiter-call-waiter[b-m0ggupwu85] {
        font-size: 0.75rem;
        color: #64748b;
    }

    .waiter-call-time[b-m0ggupwu85] {
        font-size: 0.6875rem;
        color: #94a3b8;
    }

    .waiter-call-dismiss[b-m0ggupwu85] {
        background: none;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease;
    }

    .waiter-call-dismiss:hover[b-m0ggupwu85] {
        color: var(--pt-coral, #ec607e);
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .waiter-call-dropdown[b-m0ggupwu85] {
            background: #1e293b;
            border-color: #334155;
        }

        .waiter-call-dropdown-header[b-m0ggupwu85] {
            border-bottom-color: #334155;
            color: #f1f5f9;
        }

        .waiter-call-item[b-m0ggupwu85] {
            border-bottom-color: #334155;
        }

        .waiter-call-item:hover[b-m0ggupwu85] {
            background: #0f172a;
        }

        .waiter-call-table[b-m0ggupwu85] {
            color: #f1f5f9;
        }

        .waiter-call-waiter[b-m0ggupwu85] {
            color: #94a3b8;
        }
    }
/* /Layout/EmptyLayout.razor.rz.scp.css */
    .empty-layout[b-3ogeovuuf7] {
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }
/* /Layout/MainLayout.razor.rz.scp.css */
/* =============================================================================
   BLAZOR CSS ISOLATION — SMOKE TEST
   =============================================================================
   This is the FIRST .razor.css in the WebApp. It exists to prove the isolation
   mechanism works end to end before any real CSS is migrated onto it:

     1. the compiler generates payTable.WebApp.styles.css with content
     2. index.html references it and it is actually served
     3. the generated scope attribute (b-xxxxxxxxxx) lands on MainLayout's own
        markup, so the rule below matches .app-layout

   DELIBERATELY VISUALLY INERT. It sets one custom property that nothing reads,
   so a failure at any step above changes nothing on screen — it just makes the
   probe below return empty. Nothing about the app's appearance depends on it.

   To verify on a deployed environment, in the browser console:

       getComputedStyle(document.querySelector('.app-layout'))
         .getPropertyValue('--pt-isolation-smoke')

   Expected: " ok". Empty string means isolation is NOT working — either the
   bundle was not generated, or index.html is not loading it, or the scope
   attribute did not match.

   Also worth checking in the same session:
       document.querySelector('.app-layout').attributes    -> expect a b-* attribute
       [...document.styleSheets].map(s => s.href)          -> expect the bundle

   REMOVE THIS FILE once real component CSS has migrated and the mechanism is
   proven — it has no purpose beyond the pilot. See #52.
   ============================================================================= */

.app-layout[b-htylljkzxu] {
    --pt-isolation-smoke: ok;
}

/* ---- migrated from the component's inline <style> ---- */
    /* App Layout with Sidebar */
    .app-layout[b-htylljkzxu] {
        display: flex;
        min-height: 100vh;
        background: var(--background-color);
    }
    
    /* Main Content Area */
    .main-content[b-htylljkzxu] {
        flex: 1;
        margin-left: 72px;
        padding: 1.5rem;
        padding-bottom: 2rem;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    
    /* Public Layout (Login, Register, etc.) */
    .public-layout[b-htylljkzxu] {
        min-height: 100vh;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .main-content[b-htylljkzxu] {
            padding: 1rem;
        }
    }
/* /Pages/Cfd/CfdIdle.razor.rz.scp.css */
    .cfd-idle[b-8hkdb9x670] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .cfd-idle-content[b-8hkdb9x670] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        position: relative;
        z-index: 1;
    }

    /* ── Restaurant name ── */
    .idle-restaurant-name[b-8hkdb9x670] {
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--cfd-text-primary);
        text-align: center;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        animation: cfd-fade-in-b-8hkdb9x670 2s ease-out;
    }

    /* ── Ambient glow ── */
    .idle-glow[b-8hkdb9x670] {
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(236, 96, 126, 0.08) 0%, transparent 70%);
        animation: cfd-glow-pulse-b-8hkdb9x670 6s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes cfd-glow-pulse-b-8hkdb9x670 {
        0%, 100% { transform: scale(1); opacity: 0.6; }
        50% { transform: scale(1.15); opacity: 1; }
    }

    /* ── Logo ── */
    .idle-logo[b-8hkdb9x670] {
        animation: cfd-logo-breathe-b-8hkdb9x670 8s ease-in-out infinite;
    }

    .idle-logo img[b-8hkdb9x670] {
        width: 320px;
        height: auto;
        filter: drop-shadow(0 0 40px rgba(236, 96, 126, 0.15));
    }

    /* Restaurant logo: larger, constrained to fit various aspect ratios */
    .idle-restaurant-logo img[b-8hkdb9x670] {
        width: auto;
        max-width: 400px;
        max-height: 240px;
        object-fit: contain;
        filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.2));
    }

    @keyframes cfd-logo-breathe-b-8hkdb9x670 {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }

    /* ── Welcome text ── */
    .idle-welcome[b-8hkdb9x670] {
        display: flex;
        align-items: center;
        gap: 1rem;
        animation: cfd-fade-in-b-8hkdb9x670 2s ease-out;
    }

    .welcome-text[b-8hkdb9x670] {
        font-size: 1.5rem;
        font-weight: 300;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--cfd-text-secondary);
    }

    .welcome-divider[b-8hkdb9x670] {
        font-size: 1.5rem;
        color: var(--cfd-accent);
        opacity: 0.6;
    }

    @keyframes cfd-fade-in-b-8hkdb9x670 {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ── Animated line ── */
    .idle-line[b-8hkdb9x670] {
        width: 200px;
        height: 2px;
        background: var(--cfd-border);
        border-radius: 0;
        overflow: hidden;
    }

    .idle-line-fill[b-8hkdb9x670] {
        width: 60px;
        height: 100%;
        background: linear-gradient(90deg, transparent, var(--cfd-accent), transparent);
        animation: cfd-line-sweep-b-8hkdb9x670 4s ease-in-out infinite;
    }

    @keyframes cfd-line-sweep-b-8hkdb9x670 {
        0% { transform: translateX(-60px); }
        100% { transform: translateX(200px); }
    }

    /* ── Powered by footer ── */
    .idle-powered-by[b-8hkdb9x670] {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8rem;
        font-weight: 300;
        letter-spacing: 0.04em;
        color: var(--cfd-text-muted);
        opacity: 0.5;
    }

    .idle-powered-by strong[b-8hkdb9x670] {
        font-weight: 600;
        color: var(--cfd-accent);
        opacity: 1;
    }

    /* ── Clock ── */
    .idle-clock[b-8hkdb9x670] {
        position: absolute;
        bottom: 2rem;
        right: 2.5rem;
        font-size: 1.1rem;
        font-weight: 300;
        letter-spacing: 0.05em;
        color: var(--cfd-text-muted);
    }