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

/* /Components/Cards/MenuDisplayCard.razor.rz.scp.css */
    /* Menu item search bar */
    .menu-search-bar[b-26vwipkkos] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
        margin-bottom: 1rem;
        background: var(--surface-color);
        border: 2px solid var(--border-color);
        border-radius: 0;
    }

    .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;
    }

    .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: white;
        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);
    }

    /* All four mode buttons (Rehacer / Cortesía / Descuento / Mover) must read as one set.
       Three already render borderless: app.css `.btn` declares `border: 2px solid transparent`
       and is loaded AFTER Bootstrap (index.html — app.css line 146,bootstrap line 119),so at
       equal specificity it wins on source order and flattens the variable-driven outline border
       for -info / -warning / -secondary. `.btn-outline-primary` escapes it because app.css:621
       pins `border-color: #000075 !important`,so Descuento alone drew a hard navy box.

       Matched here rather than globally — that navy outline is load-bearing elsewhere in the
       admin (view toggles,action bars). Scoped to this toolbar the selector outranks the global
       one,so its !important loses. `transparent` is theme-agnostic: it holds in light AND dark,where the only other difference is the label color (--pt-navy-fg -> #a5b4fc),untouched.
       The 2px transparent border from `.btn` stays,so the box keeps the same size as its three
       neighbours and nothing shifts. Hover/focus/active included so the fill-on-hover behaviour
       matches the other three too. */
    .section-actions-toolbar .btn-outline-primary[b-m3f01laonm],.section-actions-toolbar .btn-outline-primary:hover[b-m3f01laonm],.section-actions-toolbar .btn-outline-primary:focus[b-m3f01laonm],.section-actions-toolbar .btn-outline-primary:active[b-m3f01laonm] {
        border-color: transparent !important;
    }

    /* 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: white;
        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;
        }

    }

    .comp-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
        border: 2px solid #f59e0b;
        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;
    }

    .discount-panel .comp-panel-title[b-m3f01laonm] {
        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;
    }

    .comp-panel-title[b-m3f01laonm] {
        font-weight: 700;
        color: #f59e0b;
        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: #f59e0b;
        border-color: #f59e0b;
    }

    /* 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: #f59e0b;
        cursor: pointer;
    }

    .comp-upcharge-row.upcharge-selected[b-m3f01laonm] {
        border-left-color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
    }

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

    .comp-upcharge-price[b-m3f01laonm] {
        font-weight: 600;
        color: #ec607e;
    }

    .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: #f59e0b;
        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(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
        }

    .comp-panel-title[b-m3f01laonm] {
            color: #fbbf24;
        }

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

    }

    .remake-panel[b-m3f01laonm] {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
        border: 2px solid #0ea5e9;
        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: #0ea5e9;
        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: #0ea5e9;
        border-color: #0ea5e9;
    }

    .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: #ec607e;
        border-color: #ec607e;
    }

    .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: #ec607e;
        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;
    }

    .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;
        }

    }

    .move-panel .comp-panel-title[b-m3f01laonm],.move-panel .comp-selection-info[b-m3f01laonm] {
        color: #ec607e;
    }

    .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(236, 96, 126, 0.12);
        border-left: 3px solid #ec607e;
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .qty-selector.move-qty .qty-value.qty-active[b-m3f01laonm] {
        color: #ec607e;
        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: #0ea5e9;
        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(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.05) 100%);
        }

    .remake-panel-title[b-m3f01laonm] {
            color: #38bdf8;
        }

    .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;
        }
    }

    /* Merge Panel Styles */
    .merge-panel[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;
    }

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

    .merge-panel-title[b-m3f01laonm] {
        font-weight: 700;
        color: var(--pt-navy, #000075);
        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.15) 0%, rgba(0, 0, 117, 0.05) 100%);
        }

    .merge-panel-title[b-m3f01laonm] {
            color: #6060c0;
        }

    .merge-preview-header[b-m3f01laonm] {
            color: #6060c0;
        }

    .merge-arrow[b-m3f01laonm] {
            color: #6060c0;
        }
    }

    /* 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: #0ea5e9;
    }

    .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: #0ea5e9;
        background: rgba(14, 165, 233, 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: #0ea5e9;
    }

    /* 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: #38bdf8;
        }

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

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

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

    .remake-qty .qty-value.qty-active[b-m3f01laonm] {
            color: #38bdf8;
        }
    }

    /* 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: white;
        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;
    }

    .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-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;
    }

    .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: white;
        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: #ffffff;
        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;
    }

    .mwc-badge > i[b-ieuqb2p6zb] {
        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: white;
        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/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;
    }

    .waiter-badge-container > i[b-m0ggupwu85] {
        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: white;
        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);
    }