/* /Layout/AdminLayout.razor.rz.scp.css */
/* Admin Layout - Dark Theme */
.admin-layout[b-9butiq3wqh] {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: #0f172a;
    color: #e2e8f0;
}

/* ===== Sidebar ===== */
.admin-sidebar[b-9butiq3wqh] {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-right: 1px solid #334155;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.sidebar-collapsed .admin-sidebar[b-9butiq3wqh] {
    width: 72px;
}

.sidebar-header[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #334155;
    min-height: 64px;
}

.sidebar-brand[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #f8fafc;
    font-weight: 700;
    font-size: 1.25rem;
    overflow: hidden;
}

.brand-icon[b-9butiq3wqh] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.brand-text[b-9butiq3wqh] {
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.sidebar-collapsed .brand-text[b-9butiq3wqh] {
    opacity: 0;
    width: 0;
}

.sidebar-collapse-btn[b-9butiq3wqh] {
    width: 40px;
    height: 40px;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover[b-9butiq3wqh] {
    background: #475569;
    color: #f8fafc;
}

.sidebar-collapsed .sidebar-collapse-btn[b-9butiq3wqh] {
    margin: 0 auto;
}

/* Sidebar Navigation */
.sidebar-nav[b-9butiq3wqh] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav[b-9butiq3wqh]::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 2px;
}

.nav-section[b-9butiq3wqh] {
    margin-bottom: 24px;
}

/* Section title — now a button so the operator can collapse a group.
   Looks like the original span when at rest; chevron rotates 180° when
   collapsed. Whole row is the click target so it's discoverable
   without an icon-only mystery affordance. */
.nav-section-title[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: color 0.15s, background-color 0.15s;
}

.nav-section-title:hover[b-9butiq3wqh] {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.04);
}

.nav-section-chevron[b-9butiq3wqh] {
    flex-shrink: 0;
    transition: transform 0.15s ease;
    color: #475569;
}

/* Collapsed state — rotate chevron + hide all children except the
   title button. Anchors, divs, buttons inside the section all collapse;
   the title button is the only opt-out so it stays clickable. */
.nav-section.collapsed .nav-section-chevron[b-9butiq3wqh] {
    transform: rotate(-90deg);
}

.nav-section.collapsed > *:not(.nav-section-title)[b-9butiq3wqh] {
    display: none;
}

.sidebar-collapsed .nav-section-title[b-9butiq3wqh] {
    text-align: center;
    padding: 8px 0;
    font-size: 0.6rem;
    justify-content: center;
}

.sidebar-collapsed .nav-section-chevron[b-9butiq3wqh] {
    display: none;
}

.nav-item[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    /* 44px touch floor — padding alone left these primary nav links at ~42px. */
    min-height: 44px;
    box-sizing: border-box;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.nav-item:hover[b-9butiq3wqh] {
    color: #f8fafc;
    background: rgba(59, 130, 246, 0.1);
}

.nav-item.active[b-9butiq3wqh] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

.nav-item.active[b-9butiq3wqh]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #3b82f6;
    border-radius: 0 3px 3px 0;
}

.sidebar-collapsed .nav-item[b-9butiq3wqh] {
    padding: 12px;
    justify-content: center;
}

.nav-icon[b-9butiq3wqh] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-text[b-9butiq3wqh] {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.sidebar-collapsed .nav-text[b-9butiq3wqh] {
    opacity: 0;
    width: 0;
    position: absolute;
}

/* Subtitle line under the nav label (e.g. "Para el equipo" under TPV).
   Signals who uses that destination without making the main label longer. */
.nav-sub[b-9butiq3wqh] {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 1px;
    line-height: 1.2;
}

.nav-item.active .nav-sub[b-9butiq3wqh] {
    color: #93c5fd;
}

/* External-link indicator for sidebar entries that navigate OUT of the admin
   layout (TPV, KDS, and the footer "Ir al TPV"). Helps first-time owners tell
   "leaves admin" from "another admin section" at a glance without shouting. */
.nav-item--external[b-9butiq3wqh] {
    justify-content: flex-start;
}

.nav-item--external .nav-text[b-9butiq3wqh] {
    flex: 1;
    min-width: 0;
}

.nav-external[b-9butiq3wqh] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #64748b;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-item--external:hover .nav-external[b-9butiq3wqh] {
    opacity: 1;
    color: #a78bfa;
    transform: translate(2px, -2px);
}

.sidebar-collapsed .nav-external[b-9butiq3wqh],
.sidebar-collapsed .nav-sub[b-9butiq3wqh] {
    display: none;
}

/* TPV gets a warmer icon tint so it stands out from peer admin entries.
   Subtle, not flashy — an owner glancing at the sidebar should be able to
   find "where staff work" without reading every label. */
.nav-item--tpv .nav-icon[b-9butiq3wqh] {
    color: #a78bfa;
}

.nav-item--tpv:hover .nav-icon[b-9butiq3wqh] {
    color: #c4b5fd;
}

.nav-badge[b-9butiq3wqh] {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-left: auto;
}

.sidebar-collapsed .nav-badge[b-9butiq3wqh] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    padding: 0 4px;
}

/* Sidebar Footer */
.sidebar-footer[b-9butiq3wqh] {
    border-top: 1px solid #334155;
    padding: 12px 0;
}

/* ===== Main Content Area ===== */
.admin-main[b-9butiq3wqh] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

.sidebar-collapsed .admin-main[b-9butiq3wqh] {
    margin-left: 72px;
}

/* Top Bar */
.admin-topbar[b-9butiq3wqh] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: rgba(15, 23, 42, 0.95);
    /* No backdrop-filter blur: at 0.95 opacity it's visually imperceptible, but a
       persistent full-width backdrop-filter forces macOS/Safari to re-composite the
       blurred strip every frame during nav-drawer / modal animations — a needless
       cost behind the sluggish hamburger menu on Mac. */
    border-bottom: 1px solid #334155;
}

.topbar-left[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-btn[b-9butiq3wqh] {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: #1e293b;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.mobile-menu-btn:hover[b-9butiq3wqh] {
    background: #334155;
    color: #f8fafc;
}

.restaurant-info[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Allow the name to shrink + ellipsis instead of forcing the topbar wider
       than the viewport (which pushed signout off-screen on phones). */
    min-width: 0;
}

.restaurant-name[b-9butiq3wqh] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
}

.restaurant-badge[b-9butiq3wqh] {
    padding: 4px 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topbar-right[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Never let the controls (search/user/signout) be squeezed or pushed
       off-screen — the restaurant name truncates instead (flex-shrink above). */
    flex-shrink: 0;
}

.topbar-user[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: #1e293b;
    border-radius: 8px;
}

.user-avatar[b-9butiq3wqh] {
    width: 32px;
    height: 32px;
    background: #334155;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.user-name[b-9butiq3wqh] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* "Mi cuenta" account dropdown (topbar) — scoped to AdminLayout. */
.topbar-user-wrap[b-9butiq3wqh] {
    position: relative;
}
.topbar-user-wrap.open[b-9butiq3wqh] {
    z-index: 1001;   /* lift the chip + menu above the click-away backdrop (1000) */
}
.topbar-user[b-9butiq3wqh] {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.topbar-user:hover[b-9butiq3wqh] {
    background: #243349;
}
.user-caret[b-9butiq3wqh] {
    color: #94a3b8;
    flex-shrink: 0;
}
.mc-acct-backdrop[b-9butiq3wqh] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}
.mc-acct-menu[b-9butiq3wqh] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 14px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mc-acct-title[b-9butiq3wqh] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.mc-acct-row[b-9butiq3wqh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mc-acct-label[b-9butiq3wqh] {
    font-size: 0.7rem;
    color: #64748b;
}
.mc-acct-value[b-9butiq3wqh] {
    font-size: 0.875rem;
    color: #e2e8f0;
    word-break: break-all;
}
.mc-acct-link[b-9butiq3wqh] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a78bfa;
    text-decoration: none;
}
.mc-acct-link:hover[b-9butiq3wqh] {
    color: #c4b5fd;
    text-decoration: underline;
}

.topbar-btn[b-9butiq3wqh] {
    width: 40px;
    height: 40px;
    border: none;
    background: #1e293b;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.topbar-btn:hover[b-9butiq3wqh] {
    background: #334155;
    color: #f8fafc;
}

.logout-btn:hover[b-9butiq3wqh] {
    background: #dc2626;
    color: #fff;
}

/* Trial status pill (in-topbar, not a full-width bar).
   Default state is intentionally quiet — slate/neutral — so at day 85 of
   a 90-day trial the pill reads as "informational" rather than "act now".
   Graduated classes (trial-warning, trial-urgent) escalate the tone as
   the countdown approaches zero. */
.trial-pill[b-9butiq3wqh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.09);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.trial-pill:hover[b-9butiq3wqh] {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
}

.trial-pill-dot[b-9butiq3wqh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14);
    flex: 0 0 auto;
}
.trial-pill-label[b-9butiq3wqh] {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.trial-pill-sep[b-9butiq3wqh] {
    opacity: 0.5;
}
.trial-pill-days[b-9butiq3wqh] {
    opacity: 0.85;
}
.trial-pill-cta[b-9butiq3wqh] {
    margin-left: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #f1f5f9;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.trial-pill:hover .trial-pill-cta[b-9butiq3wqh] {
    background: rgba(148, 163, 184, 0.32);
    border-color: rgba(148, 163, 184, 0.48);
    color: #ffffff;
}

/* Warning (7-14 days): amber — makes the pill read as "trial is ending soon". */
.trial-pill.trial-warning[b-9butiq3wqh] {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}
.trial-pill.trial-warning:hover[b-9butiq3wqh] {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
}
.trial-pill.trial-warning .trial-pill-dot[b-9butiq3wqh] {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.trial-pill.trial-warning .trial-pill-cta[b-9butiq3wqh] {
    background: rgba(245, 158, 11, 0.22);
    color: #fde68a;
}
.trial-pill.trial-warning:hover .trial-pill-cta[b-9butiq3wqh] {
    background: rgba(245, 158, 11, 0.32);
    color: #fff;
}

/* Urgent (< 7 days): red — last-chance signal without being a marketing banner. */
.trial-pill.trial-urgent[b-9butiq3wqh] {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.trial-pill.trial-urgent:hover[b-9butiq3wqh] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
.trial-pill.trial-urgent .trial-pill-dot[b-9butiq3wqh] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.trial-pill.trial-urgent .trial-pill-cta[b-9butiq3wqh] {
    background: rgba(239, 68, 68, 0.22);
    color: #fecaca;
}
.trial-pill.trial-urgent:hover .trial-pill-cta[b-9butiq3wqh] {
    background: rgba(239, 68, 68, 0.32);
    color: #fff;
}

/* On narrow viewports collapse the prefix so only "N días restantes" + CTA show. */
@media (max-width: 720px) {
    .trial-pill-label[b-9butiq3wqh],
    .trial-pill-sep[b-9butiq3wqh] {
        display: none;
    }
}

/* Main Content */
.admin-content[b-9butiq3wqh] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* Mobile Overlay */
.mobile-overlay[b-9butiq3wqh] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.mobile-overlay.visible[b-9butiq3wqh] {
    opacity: 1;
    visibility: visible;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .admin-sidebar[b-9butiq3wqh] {
        transform: translateX(-100%);
    }

    .admin-layout.sidebar-open .admin-sidebar[b-9butiq3wqh] {
        transform: translateX(0);
    }

    .admin-main[b-9butiq3wqh] {
        margin-left: 0;
    }

    .sidebar-collapsed .admin-main[b-9butiq3wqh] {
        margin-left: 0;
    }

    .mobile-menu-btn[b-9butiq3wqh] {
        display: flex;
    }

    .mobile-overlay[b-9butiq3wqh] {
        display: block;
    }

    .sidebar-collapse-btn[b-9butiq3wqh] {
        display: none;
    }
}

@media (max-width: 640px) {
    .admin-topbar[b-9butiq3wqh] {
        padding: 0 16px;
    }

    .admin-content[b-9butiq3wqh] {
        padding: 16px;
    }

    /* Below 640px we keep the user-avatar (priority signal: "logged in
       as X") and drop the trial pill instead. Trial state is also reachable
       from /admin/billing; "who am I" is harder to discover without it.
       Pre-fix the order was reversed — trial pill stayed, user info hid.
       We also drop the name text on tiny screens to keep the row tidy:
       the avatar alone communicates session presence. */
    .topbar-user[b-9butiq3wqh] {
        display: flex;
    }

    .topbar-user .user-name[b-9butiq3wqh] {
        display: none;
    }

    .trial-pill[b-9butiq3wqh] {
        display: none;
    }

    .restaurant-name[b-9butiq3wqh] {
        font-size: 1rem;
    }
}

/* Touch-friendly nav items on mobile/tablet */
@media (max-width: 1024px) and (pointer: coarse) {
    .nav-item[b-9butiq3wqh] {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 0.95rem;
        gap: 14px;
    }

    .nav-icon[b-9butiq3wqh] {
        width: 22px;
        height: 22px;
    }

    .nav-section-title[b-9butiq3wqh] {
        font-size: 0.7rem;
        padding: 16px 20px 6px;
    }
}

/* ===== Tooltip for collapsed sidebar ===== */
.sidebar-collapsed .nav-item[b-9butiq3wqh] {
    position: relative;
}

.sidebar-collapsed .nav-item[b-9butiq3wqh]::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    padding: 6px 12px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    z-index: 1000;
    pointer-events: none;
}

.sidebar-collapsed .nav-item:hover[b-9butiq3wqh]::after {
    opacity: 1;
    visibility: visible;
}

/* ──────────────────────────────────────────────────────────────────
   Command palette (Ctrl/⌘+K). Centered modal that floats above
   .admin-topbar (z 50). Selectors prefixed .cmdk-* so they don't
   collide with anything else; this file is scoped so they wouldn't
   leak anyway, but the prefix keeps grep / future refactor clean.
   ────────────────────────────────────────────────────────────── */
.cmdk-backdrop[b-9butiq3wqh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9000;
    animation: cmdk-fade-in-b-9butiq3wqh 0.12s ease-out;
}

.cmdk-modal[b-9butiq3wqh] {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmdk-slide-in-b-9butiq3wqh 0.14s ease-out;
    color: #f1f5f9;
}

.cmdk-input-row[b-9butiq3wqh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #334155;
}

.cmdk-search-icon[b-9butiq3wqh] {
    color: #94a3b8;
    display: inline-flex;
    flex: 0 0 auto;
}

.cmdk-input[b-9butiq3wqh] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: #f1f5f9;
    font-family: inherit;
}

.cmdk-input[b-9butiq3wqh]::placeholder {
    color: #64748b;
}

.cmdk-esc-hint[b-9butiq3wqh] {
    font-size: 11px;
    color: #94a3b8;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: inherit;
}

.cmdk-results[b-9butiq3wqh] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    min-height: 80px;
}

.cmdk-section-label[b-9butiq3wqh] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 10px 16px 4px;
}

.cmdk-section-label:first-child[b-9butiq3wqh] {
    padding-top: 6px;
}

.cmdk-item[b-9butiq3wqh] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.cmdk-item.active[b-9butiq3wqh] {
    background: rgba(88, 166, 255, 0.16);
    color: #ffffff;
}

.cmdk-item-label[b-9butiq3wqh] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-item-hint[b-9butiq3wqh] {
    font-size: 12px;
    color: #93c5fd;
}

.cmdk-empty[b-9butiq3wqh] {
    padding: 28px 16px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.cmdk-footer[b-9butiq3wqh] {
    display: flex;
    gap: 18px;
    padding: 10px 16px;
    border-top: 1px solid #334155;
    font-size: 11px;
    color: #94a3b8;
}

.cmdk-footer kbd[b-9butiq3wqh] {
    background: #334155;
    border: 1px solid #475569;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
    font-size: 10px;
    font-family: inherit;
}

@keyframes cmdk-fade-in-b-9butiq3wqh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cmdk-slide-in-b-9butiq3wqh {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cmdk-backdrop[b-9butiq3wqh], .cmdk-modal[b-9butiq3wqh] { animation: none; }
}

/* Tighter layout on small screens */
@media (max-width: 600px) {
    .cmdk-modal[b-9butiq3wqh] {
        top: 10vh;
        max-height: 80vh;
    }
    .cmdk-footer[b-9butiq3wqh] {
        gap: 12px;
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Visible palette trigger in the admin topbar. Tablet + phone need a
   tappable affordance because Ctrl/⌘+K doesn't exist on touch
   devices. The ⌘K hint inside is desktop-only via the @media block
   below — on touch we just show the magnifier icon.
   ────────────────────────────────────────────────────────────── */
.topbar-search-trigger[b-9butiq3wqh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 10px;
}

.topbar-search-trigger:hover[b-9butiq3wqh] {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.4);
    color: #f1f5f9;
}

.topbar-search-trigger-label[b-9butiq3wqh] {
    font-weight: 500;
}

.topbar-search-trigger-kbd[b-9butiq3wqh] {
    font-size: 11px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
    color: #94a3b8;
}

/* On narrow widths (tablet portrait, phone) hide the text + kbd hint
   to keep the topbar compact — the magnifier icon alone is enough. */
@media (max-width: 768px) {
    .topbar-search-trigger[b-9butiq3wqh] {
        padding: 6px;
    }
    .topbar-search-trigger-label[b-9butiq3wqh],
    .topbar-search-trigger-kbd[b-9butiq3wqh] {
        display: none;
    }
}

/* Touch-only devices don't show the keyboard hint regardless of width
   (some tablets have wide landscape screens but no physical keyboard). */
@media (hover: none) and (pointer: coarse) {
    .topbar-search-trigger-kbd[b-9butiq3wqh] {
        display: none;
    }
}

/* Search match highlight inside palette result rows. Using <mark> so
   screen readers / search-extensions naturally pick up the emphasis. */
.cmdk-match[b-9butiq3wqh] {
    background: rgba(88, 166, 255, 0.25);
    color: #ffffff;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
/* /Layout/CustomerLayout.razor.rz.scp.css */
/* Mirrors PublicLayout's shell so customer pages keep the same dark, full-height
   base; the only intentional difference from PublicLayout is that there is no
   marketing header/footer. Pages with their own full-bleed background (QR /
   reservation / waitlist) paint over this; the online-order page is a centred
   480px column that relies on this shell colour filling the gutters on wider
   screens. */
.customer-shell[b-k2jklwrxx5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0f1117;
    color: #f1f5f9;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.customer-main[b-k2jklwrxx5] {
    flex: 1 0 auto;
    width: 100%;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-iluq4m9wgc] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #0f172a; /* dark background to prevent white gaps */
}

main[b-iluq4m9wgc] {
    flex: 1;
}

.sidebar[b-iluq4m9wgc] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-iluq4m9wgc] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-iluq4m9wgc]  a, .top-row[b-iluq4m9wgc]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-iluq4m9wgc]  a:hover, .top-row[b-iluq4m9wgc]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-iluq4m9wgc]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-iluq4m9wgc] {
        justify-content: space-between;
    }

    .top-row[b-iluq4m9wgc]  a, .top-row[b-iluq4m9wgc]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .top-row[b-iluq4m9wgc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* only pad articles on non�full-bleed pages */
    .page.has-edge article.content[b-iluq4m9wgc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }


}

@media (min-width: 641px) {
    .page.has-edge article.content.content--full[b-iluq4m9wgc] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* Emphasize the Orders entry a bit without being flashy */
.nav-cta[b-iluq4m9wgc] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform .04s ease, background-color .12s ease, box-shadow .12s ease;
}

    .nav-cta .bi[b-iluq4m9wgc] {
        font-size: 1rem;
    }

    .nav-cta:hover[b-iluq4m9wgc] {
        background: #f9fafb;
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
    }

    .nav-cta:active[b-iluq4m9wgc] {
        transform: translateY(1px);
    }




.page.with-tables.tables-docked article.content--full[b-iluq4m9wgc] {
    margin-right: 0 !important; /* Don't add extra margin */
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-scrollable[b-96tobgrds0] {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.nav-scrollable[b-96tobgrds0]::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.nav-vertical[b-96tobgrds0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    padding-top: 60px; /* Space for hamburger button */
}

.nav-group[b-96tobgrds0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* =============================================
   DARK SIDEBAR STYLES
   The sidebar has a dark gradient background,
   so all items need light text/icons
   ============================================= */

.nav-label[b-96tobgrds0] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font: 700 11px/1 system-ui;
    color: rgba(255,255,255,.7);
    padding: 10px 12px 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* First label doesn't need top border */
.nav-group:first-child .nav-label[b-96tobgrds0] {
    border-top: none;
    margin-top: 0;
}

/* Base nav-link styles for dark sidebar.
   ::deep is required so styles also reach <NavLink>-rendered <a> tags —
   NavLink is a child component, and Blazor CSS isolation does not apply the
   scope attribute to nested-component output. Without ::deep, only the
   <button> nav links (rendered directly by this component) get styled, while
   NavLinks fall back to the browser's default link color. The result is a
   misleading "everything looks blue" sidebar where the active-state
   highlighting is silently inert. ::deep makes both branches consistent. */
.nav-vertical[b-96tobgrds0]  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    /* 44px floor everywhere (not just the coarse-pointer ≤1024px block below):
       POS touchscreens often run ≥1025px, where padding alone left nav items
       at ~41px. Harmless for mouse users. */
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255,255,255,.9);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
}

/* Force color for both anchor and button elements */
.nav-vertical[b-96tobgrds0]  a.nav-link,
.nav-vertical[b-96tobgrds0]  a.nav-link:link,
.nav-vertical[b-96tobgrds0]  a.nav-link:visited,
.nav-vertical[b-96tobgrds0]  button.nav-link {
    color: rgba(255,255,255,.9);
}

.nav-vertical[b-96tobgrds0]  .nav-link [class^="bi"] {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: rgba(255,255,255,.6);
    transition: color 0.15s ease;
}

/* Hover state */
.nav-vertical[b-96tobgrds0]  .nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.nav-vertical[b-96tobgrds0]  .nav-link:hover [class^="bi"] {
    color: #60a5fa;
}

/* Active state (current page) — bg tint + left-rail accent + bold weight +
   coloured icon. Now actually applies to NavLink-rendered <a> tags thanks
   to ::deep, so the operator can see at a glance which route they're on. */
.nav-vertical[b-96tobgrds0]  a.nav-link.active {
    position: relative;
    background: rgba(59,130,246,.2);
    color: #fff;
    font-weight: 600;
}

.nav-vertical[b-96tobgrds0]  a.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: #60a5fa;
    border-radius: 0 4px 4px 0;
}

.nav-vertical[b-96tobgrds0]  a.nav-link.active [class^="bi"] {
    color: #60a5fa;
}

/* Download button */
.nav-download[b-96tobgrds0] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    position: relative;
}

.nav-vertical[b-96tobgrds0]  .nav-link.download [class^="bi"] {
    color: rgba(255, 255, 255, 0.9);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.nav-vertical[b-96tobgrds0]  .nav-link.download .badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* ========================================
   TOUCH-FRIENDLY NAV (mobile & tablet)
   Minimum 44px touch targets per Apple HIG
   ======================================== */
@media (max-width: 1024px) and (pointer: coarse) {
    .nav-vertical[b-96tobgrds0]  .nav-link {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 15px;
        gap: 14px;
        border-radius: 12px;
    }

    .nav-vertical[b-96tobgrds0]  .nav-link [class^="bi"] {
        font-size: 18px;
        width: 22px;
    }

    .nav-label[b-96tobgrds0] {
        font-size: 12px;
        padding: 12px 14px 6px;
    }

    .nav-group[b-96tobgrds0] {
        gap: 2px;
    }
}

/* Phone-specific: slightly more padding */
@media (max-width: 600px) {
    .nav-vertical[b-96tobgrds0] {
        padding: 10px;
        padding-top: 52px; /* Space for smaller hamburger */
        gap: 12px;
    }

    .nav-vertical[b-96tobgrds0]  .nav-link {
        min-height: 46px;
        padding: 13px 14px;
        font-size: 15px;
    }
}

/* Sign out: set apart from the navigation items with a divider + muted red
   tint so it reads as the terminal action, not just another destination. */
.nav-vertical[b-96tobgrds0]  .nav-logout {
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(248, 113, 113, .9);
}
.nav-vertical[b-96tobgrds0]  .nav-logout [class^="bi"] {
    color: rgba(248, 113, 113, .85);
}
.nav-vertical[b-96tobgrds0]  .nav-logout:hover {
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
}
.nav-vertical[b-96tobgrds0]  .nav-logout:hover [class^="bi"] {
    color: #fca5a5;
}
/* /Layout/PublicLayout.razor.rz.scp.css */
.public-shell[b-uuag429sqn] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0f1117;
    color: #f1f5f9;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.public-main[b-uuag429sqn] {
    flex: 1 0 auto;
    width: 100%;
}
/* /Pages/Admin/Acquirers.razor.rz.scp.css */
.acq-container[b-1rhuthoh6u] { padding: 1.5rem; }
.page-header[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-header h1[b-1rhuthoh6u] { font-size: 1.5rem; color: #f1f5f9; margin: 0; }
.subtitle[b-1rhuthoh6u] { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }

.btn[b-1rhuthoh6u] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-1rhuthoh6u] { background: #3b82f6; color: white; }
.btn.primary:hover[b-1rhuthoh6u] { background: #2563eb; }
.btn.outline[b-1rhuthoh6u] { background: transparent; border: 1px solid #334155; color: #e2e8f0; }
.btn.outline:hover[b-1rhuthoh6u] { border-color: #475569; }
.btn.danger-outline[b-1rhuthoh6u] { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
.btn.danger-outline:hover[b-1rhuthoh6u] { background: rgba(239,68,68,0.1); }
.btn:disabled[b-1rhuthoh6u] { opacity: 0.5; cursor: not-allowed; }

.acq-grid[b-1rhuthoh6u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.acq-card[b-1rhuthoh6u] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.acq-card.inactive[b-1rhuthoh6u] { opacity: 0.6; }
.acq-card-head[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; gap: 0.5rem; }
.acq-card-head h3[b-1rhuthoh6u] { color: #f1f5f9; margin: 0; font-size: 1rem; }
.badge[b-1rhuthoh6u] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.badge.active[b-1rhuthoh6u] { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge.inactive[b-1rhuthoh6u] { background: rgba(148,163,184,0.15); color: #94a3b8; }
.acq-info[b-1rhuthoh6u] { margin-bottom: 0.75rem; }
.detail-row[b-1rhuthoh6u] { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: #e2e8f0; padding: 0.15rem 0; }
.detail-row .label[b-1rhuthoh6u] { color: #94a3b8; flex-shrink: 0; }
.mono[b-1rhuthoh6u] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; word-break: break-all; }
.acq-actions[b-1rhuthoh6u] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.card[b-1rhuthoh6u] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.acq-mapping h3[b-1rhuthoh6u] { color: #f1f5f9; margin: 0 0 0.25rem; font-size: 1rem; }
.acq-mapping .subtitle[b-1rhuthoh6u] { margin: 0 0 1rem; }
.map-row[b-1rhuthoh6u] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid #0f172a; }
.map-label[b-1rhuthoh6u] { color: #e2e8f0; font-size: 0.875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.map-select[b-1rhuthoh6u] { max-width: 220px; }
.muted[b-1rhuthoh6u] { color: #64748b; font-size: 0.8rem; margin: 0.5rem 0 0; }

.acq-export[b-1rhuthoh6u] { margin-top: 1.5rem; }
.acq-export h3[b-1rhuthoh6u] { color: #f1f5f9; margin: 0 0 0.25rem; font-size: 1rem; }
.acq-export .subtitle[b-1rhuthoh6u] { margin: 0 0 1rem; }
.export-row[b-1rhuthoh6u] { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.export-row label[b-1rhuthoh6u] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #94a3b8; }
.export-row .form-input[b-1rhuthoh6u] { width: auto; }

.form-input[b-1rhuthoh6u] { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input:focus[b-1rhuthoh6u] { border-color: #3b82f6; outline: none; }

.modal-overlay[b-1rhuthoh6u] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-1rhuthoh6u] { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; width: 90%; max-width: 480px; }
.modal-header[b-1rhuthoh6u] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #334155; }
.modal-header h2[b-1rhuthoh6u] { font-size: 1.1rem; color: #f1f5f9; margin: 0; }
.close-btn[b-1rhuthoh6u] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.modal-body[b-1rhuthoh6u] { padding: 1.25rem; }
.form-group[b-1rhuthoh6u] { margin-bottom: 1rem; }
.form-group label[b-1rhuthoh6u] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.25rem; }
.modal-footer[b-1rhuthoh6u] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #334155; }

.loading-state[b-1rhuthoh6u] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-1rhuthoh6u] { width: 2rem; height: 2rem; border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin-b-1rhuthoh6u 0.8s linear infinite; }
@keyframes spin-b-1rhuthoh6u { to { transform: rotate(360deg); } }
.empty-state[b-1rhuthoh6u] { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state h2[b-1rhuthoh6u] { color: #e2e8f0; margin-bottom: 0.5rem; }

/* ===== 44px touch targets ===== */
.btn[b-1rhuthoh6u], .form-input[b-1rhuthoh6u] { min-height: 44px; }
.btn[b-1rhuthoh6u] { display: inline-flex; align-items: center; justify-content: center; }
.close-btn[b-1rhuthoh6u] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* /Pages/Admin/AiMenuImport.razor.rz.scp.css */
/* The whole AI-import UI now lives in AiMenuImportPanel (own scoped CSS).
   This page just provides a dark full-height backdrop so the standalone route
   matches the panel's dark theme. */
.aimi-page[b-ja568l3x9l] {
    min-height: 100%;
    background: #0d1117;
    padding: 8px 0 24px;
}
/* /Pages/Admin/AllergenReport.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-vfa3nag4xo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: #1e293b;
    color: #e2e8f0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-vfa3nag4xo] { background: #334155; }
.btn:active[b-vfa3nag4xo] { transform: scale(0.97); }
.btn.primary[b-vfa3nag4xo] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-vfa3nag4xo] { background: #1d4ed8; }
.btn.primary:active[b-vfa3nag4xo] { background: #1e40af; }
.btn.primary:disabled[b-vfa3nag4xo] { background: #475569; color: #94a3b8; cursor: not-allowed; }
.btn.secondary[b-vfa3nag4xo] { background: #334155; color: #e2e8f0; }
.btn.secondary:hover[b-vfa3nag4xo] { background: #475569; }
.btn.secondary:active[b-vfa3nag4xo] { background: #556677; }
.btn.secondary:disabled[b-vfa3nag4xo] { background: #475569; color: #64748b; cursor: not-allowed; }
.btn.outline[b-vfa3nag4xo] { background: transparent; border-color: #475569; color: #94a3b8; }
.btn.outline:hover[b-vfa3nag4xo] { border-color: #3b82f6; color: #e2e8f0; }
.btn.outline:active[b-vfa3nag4xo] { background: #1e293b; border-color: #3b82f6; }
.btn.outline:disabled[b-vfa3nag4xo] { color: #475569; border-color: #334155; cursor: not-allowed; }

.form-input[b-vfa3nag4xo], .form-select[b-vfa3nag4xo] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-vfa3nag4xo], .form-select:focus[b-vfa3nag4xo] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-input[b-vfa3nag4xo]::placeholder { color: #475569; }

.spinner[b-vfa3nag4xo] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-vfa3nag4xo 0.7s linear infinite;
    margin: 0 auto;
}

.loading-state[b-vfa3nag4xo] {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.allergen-report-page[b-vfa3nag4xo] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-vfa3nag4xo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.header-left[b-vfa3nag4xo] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.header-left h1[b-vfa3nag4xo] {
    margin: 0;
    font-size: 1.5rem;
    color: #f1f5f9;
}

.item-count[b-vfa3nag4xo] {
    font-size: 0.85rem;
    color: #64748b;
    background: #1e293b;
    padding: 4px 10px;
    border-radius: 12px;
}

.header-actions[b-vfa3nag4xo] {
    display: flex;
    gap: 8px;
}

.message-banner[b-vfa3nag4xo] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-vfa3nag4xo] {
    background: #7f1d1d;
    color: #fca5a5;
}

.message-banner.success[b-vfa3nag4xo] {
    background: #14532d;
    color: #86efac;
}

.message-banner .dismiss[b-vfa3nag4xo] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.filter-bar[b-vfa3nag4xo] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-vfa3nag4xo] {
    max-width: 280px;
}

.filter-toggle[b-vfa3nag4xo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
    min-height: 44px;
    padding: 4px 8px;
}

.filter-toggle input[b-vfa3nag4xo] {
    accent-color: #3b82f6;
}

.report-table-wrapper[b-vfa3nag4xo] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #1e293b;
}

.report-table[b-vfa3nag4xo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.report-table thead[b-vfa3nag4xo] {
    background: #0f172a;
    position: sticky;
    top: 0;
    z-index: 1;
}

.report-table th[b-vfa3nag4xo] {
    padding: 10px 8px;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 2px solid #1e293b;
    white-space: nowrap;
}

.report-table th.col-name[b-vfa3nag4xo],
.report-table td.col-name[b-vfa3nag4xo] {
    text-align: left;
    padding-left: 16px;
    min-width: 180px;
}

.report-table th.col-cat[b-vfa3nag4xo],
.report-table td.col-cat[b-vfa3nag4xo] {
    text-align: left;
    min-width: 120px;
}

.report-table th.col-allergen[b-vfa3nag4xo] {
    width: 40px;
    font-size: 1.1rem;
}

.report-table td[b-vfa3nag4xo] {
    padding: 8px;
    border-bottom: 1px solid #1e293b;
    text-align: center;
    color: #cbd5e1;
}

.report-table tbody tr:hover[b-vfa3nag4xo] {
    background: #1e293b40;
}

.col-allergen.has[b-vfa3nag4xo] {
    background: #451a0340;
}

.col-allergen .check[b-vfa3nag4xo] {
    color: #f59e0b;
    font-size: 0.7rem;
}

/* Precautionary "puede contener / trazas" — hollow amber ring, visibly
   weaker than the solid ● for "contiene" so the two never get confused. */
.col-allergen.trace[b-vfa3nag4xo] {
    background: #45200310;
}

.col-allergen .trace-mark[b-vfa3nag4xo] {
    color: #b4791e;
    font-size: 0.72rem;
}

.allergen-legend[b-vfa3nag4xo] {
    display: flex;
    gap: 18px;
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.allergen-legend .check[b-vfa3nag4xo] { color: #f59e0b; }
.allergen-legend .trace-mark[b-vfa3nag4xo] { color: #b4791e; }

.recipe-badge[b-vfa3nag4xo] {
    background: #1e3a5f;
    color: #93c5fd;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.col-recipe[b-vfa3nag4xo] {
    white-space: nowrap;
}

.no-recipe[b-vfa3nag4xo] {
    color: #475569;
}

/* E1: item whose recipe couldn't fully resolve → allergens may be
   UNDER-reported. Amber, not red — it's a "verify manually" prompt,
   not a hard error; hover shows ResolutionNote via title=. */
.resolution-warning[b-vfa3nag4xo] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(217, 119, 6, 0.18);
    color: #fcd34d;
    cursor: help;
}

.empty-state[b-vfa3nag4xo] {
    text-align: center;
    padding: 40px;
    color: #64748b;
}

.spinner-sm[b-vfa3nag4xo] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-vfa3nag4xo 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-vfa3nag4xo {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .allergen-report-page[b-vfa3nag4xo] {
        padding: 12px;
    }

    .filter-bar[b-vfa3nag4xo] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-vfa3nag4xo] {
        max-width: none;
    }
}

/* Phone: the allergen matrix (Artículo + Categoría + 14 allergen columns +
   Receta) is far wider than ~390px. Make the table reachable by horizontal
   scroll INSIDE its wrapper instead of letting it widen the whole page off
   the right edge.
   - The page is bounded to the viewport and clips its own horizontal
     overflow so the table can't push the layout wide (the flex ancestors in
     AdminLayout otherwise grow to the table's intrinsic width).
   - min-width:0 lets .report-table-wrapper shrink below content width within
     that flex chain, so its existing overflow-x:auto actually engages.
   - width:max-content (overriding the base width:100%) lets the table keep
     its natural column widths and overflow the bounded wrapper, which then
     scrolls. min-width:100% keeps it full-bleed when the menu is narrow. */
@media (max-width: 600px) {
    .allergen-report-page[b-vfa3nag4xo] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .report-table-wrapper[b-vfa3nag4xo] {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .report-table[b-vfa3nag4xo] {
        width: max-content;
        min-width: 100%;
    }

    /* Keep the first two columns readable without hogging the row; the
       allergen icon columns are reached by scrolling right. */
    .report-table th.col-name[b-vfa3nag4xo],
    .report-table td.col-name[b-vfa3nag4xo] {
        min-width: 150px;
    }

    .report-table th.col-cat[b-vfa3nag4xo],
    .report-table td.col-cat[b-vfa3nag4xo] {
        min-width: 100px;
    }
}
/* /Pages/Admin/AuditLog.razor.rz.scp.css */
/* Audit log — premium visual language to match the UserPermissions page:
   gradient surfaces, quiet labels, colored action badges, and expandable
   rows with JSON pretty-print for old/new value diffs. */

.audit-page[b-bufsfqq7u9] {
    padding: 1.5rem;
    max-width: 1240px;
}

.page-header[b-bufsfqq7u9] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-bufsfqq7u9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.page-header p[b-bufsfqq7u9] {
    margin: 0.3rem 0 0;
    color: #94a3b8;
    font-size: 0.88rem;
    max-width: 640px;
}

/* ----- Filter bar ----- */

.filter-bar[b-bufsfqq7u9] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.9fr auto;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #1f2a3d 0%, #1a2436 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    margin-bottom: 1.2rem;
}

.filter-group[b-bufsfqq7u9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.filter-group label[b-bufsfqq7u9] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.filter-input[b-bufsfqq7u9] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: #0e1624;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-input:focus[b-bufsfqq7u9] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.filter-actions[b-bufsfqq7u9] {
    display: flex;
    gap: 0.5rem;
}

/* ----- Buttons ----- */

.btn[b-bufsfqq7u9] {
    padding: 0.55rem 0.95rem;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-primary[b-bufsfqq7u9] {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(29, 78, 216, 0.35);
}

.btn-primary:hover[b-bufsfqq7u9] { filter: brightness(1.08); }
.btn-primary:active[b-bufsfqq7u9] { transform: translateY(1px); }
.btn-primary:disabled[b-bufsfqq7u9] { opacity: 0.5; cursor: not-allowed; }

.btn-ghost[b-bufsfqq7u9] {
    background: transparent;
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.18);
}

.btn-ghost:hover:not(:disabled)[b-bufsfqq7u9] {
    background: rgba(148, 163, 184, 0.08);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.3);
}

.btn-ghost:disabled[b-bufsfqq7u9] { opacity: 0.4; cursor: not-allowed; }

/* ----- Empty / loading / gated states (shared card shell) ----- */

.state-card[b-bufsfqq7u9] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 3rem 2rem;
    text-align: center;
    color: #cbd5e1;
}

.state-card h2[b-bufsfqq7u9] {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    color: #f1f5f9;
}

.state-card .muted[b-bufsfqq7u9] {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0;
}

.state-card.gated .gated-icon[b-bufsfqq7u9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    margin-bottom: 1rem;
}

.state-card.gated h2[b-bufsfqq7u9] {
    margin-bottom: 1.2rem;
}

.spinner[b-bufsfqq7u9] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-bufsfqq7u9 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-bufsfqq7u9 { to { transform: rotate(360deg); } }

/* ----- Table ----- */

.audit-table-wrap[b-bufsfqq7u9] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.audit-table[b-bufsfqq7u9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.audit-table th[b-bufsfqq7u9] {
    text-align: left;
    padding: 0.85rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #0f172a;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

.audit-table td[b-bufsfqq7u9] {
    padding: 0.8rem 1rem;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    vertical-align: top;
}

.audit-table tbody tr:last-child td[b-bufsfqq7u9] {
    border-bottom: none;
}

.audit-table tbody tr:hover[b-bufsfqq7u9] {
    background: rgba(51, 65, 85, 0.28);
}

.audit-table tbody tr.expanded[b-bufsfqq7u9] {
    background: rgba(51, 65, 85, 0.18);
}

/* Expand toggle */
.expand-cell[b-bufsfqq7u9] {
    padding: 0.65rem 0.5rem 0.65rem 1rem !important;
    width: 42px;
}

.expand-btn[b-bufsfqq7u9] {
    background: transparent;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    color: #64748b;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.expand-btn:hover[b-bufsfqq7u9] { background: rgba(148, 163, 184, 0.12); color: #e2e8f0; }
.expand-btn:focus-visible[b-bufsfqq7u9] { outline: 2px solid #3b82f6; outline-offset: 1px; }
.expand-btn svg[b-bufsfqq7u9] { transition: transform 0.18s cubic-bezier(.2,.8,.3,1); }
.expand-btn svg.rot[b-bufsfqq7u9] { transform: rotate(90deg); color: #93c5fd; }

/* Date two-line cell */
.date-cell[b-bufsfqq7u9] {
    white-space: nowrap;
}

.date-primary[b-bufsfqq7u9] {
    color: #e2e8f0;
    font-weight: 500;
    font-size: 0.88rem;
}

.date-secondary[b-bufsfqq7u9] {
    color: #64748b;
    font-size: 0.74rem;
    margin-top: 2px;
}

/* User cell with avatar */
.user-cell[b-bufsfqq7u9] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.user-avatar[b-bufsfqq7u9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #64748b, #334155);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}

/* Entity cell */
.entity-cell[b-bufsfqq7u9] {
    color: #cbd5e1;
}

.entity-type[b-bufsfqq7u9] {
    font-weight: 500;
}

.entity-id[b-bufsfqq7u9] {
    color: #64748b;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    margin-left: 0.3rem;
}

/* Details cell — muted, truncated */
.details-cell[b-bufsfqq7u9] {
    color: #94a3b8;
    font-size: 0.82rem;
    max-width: 280px;
}

/* ----- Action badges: category-colored pills ----- */

.action-badge[b-bufsfqq7u9] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

.action-badge.cat-crud[b-bufsfqq7u9] {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.action-badge.cat-money[b-bufsfqq7u9] {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}

.action-badge.cat-destructive[b-bufsfqq7u9] {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.action-badge.cat-config[b-bufsfqq7u9] {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.action-badge.cat-auth[b-bufsfqq7u9] {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

.action-badge.cat-neutral[b-bufsfqq7u9] {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

/* ----- Expanded row: JSON diff-style blocks ----- */

.expanded-row td[b-bufsfqq7u9] {
    background: #0f172a;
    border-bottom: 1px solid #334155;
    padding: 1rem 1rem 1.2rem !important;
}

.expanded-grid[b-bufsfqq7u9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.expanded-block[b-bufsfqq7u9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.expanded-block.expanded-ip[b-bufsfqq7u9] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    grid-column: 1 / -1;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.15);
}

.expanded-block.expanded-ip code[b-bufsfqq7u9] {
    background: rgba(148, 163, 184, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #cbd5e1;
}

.expanded-label[b-bufsfqq7u9] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.expanded-label.old[b-bufsfqq7u9] { color: #fca5a5; }
.expanded-label.new[b-bufsfqq7u9] { color: #6ee7b7; }

.json-block[b-bufsfqq7u9] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    background: #070b14;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow: auto;
}

.json-block.json-old[b-bufsfqq7u9] {
    border-left: 3px solid rgba(239, 68, 68, 0.6);
}

.json-block.json-new[b-bufsfqq7u9] {
    border-left: 3px solid rgba(16, 185, 129, 0.6);
}

/* ----- Pagination ----- */

.pagination[b-bufsfqq7u9] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0 1rem;
}

.page-info[b-bufsfqq7u9] {
    color: #cbd5e1;
    font-size: 0.88rem;
}

.page-info .muted[b-bufsfqq7u9] {
    color: #64748b;
    font-size: 0.82rem;
    margin-left: 0.2rem;
}

/* ----- Narrower viewports ----- */

@media (max-width: 1024px) {
    .filter-bar[b-bufsfqq7u9] {
        grid-template-columns: 1fr 1fr;
    }
    .filter-actions[b-bufsfqq7u9] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .expanded-grid[b-bufsfqq7u9] {
        grid-template-columns: 1fr;
    }
    .details-cell[b-bufsfqq7u9] {
        display: none;
    }
}
/* /Pages/Admin/AutoPurchaseOrders.razor.rz.scp.css */
.auto-po-container[b-xlxsb2owyj] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-title h1[b-xlxsb2owyj] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.subtitle[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
}

.header-actions[b-xlxsb2owyj] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-xlxsb2owyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled)[b-xlxsb2owyj] {
    transform: scale(0.98);
}

.btn.outline[b-xlxsb2owyj] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

.btn.outline:hover[b-xlxsb2owyj] {
    background: #334155;
}

.btn.primary[b-xlxsb2owyj] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-xlxsb2owyj] {
    background: #2563eb;
}

.btn.primary:disabled[b-xlxsb2owyj] {
    background: #475569;
    cursor: not-allowed;
}

.btn.large[b-xlxsb2owyj] {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-spinner[b-xlxsb2owyj] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-xlxsb2owyj 0.8s linear infinite;
}

.btn-link[b-xlxsb2owyj] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover[b-xlxsb2owyj] {
    text-decoration: underline;
}

.btn-icon[b-xlxsb2owyj] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-xlxsb2owyj] {
    background: #3b82f6;
    color: white;
}

.btn-icon:active[b-xlxsb2owyj] {
    transform: scale(0.95);
}

/* Status Card */
.status-card[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #1e293b;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border-left: 4px solid;
    border: 1px solid #334155;
}

.status-card.enabled[b-xlxsb2owyj] {
    border-left-color: #10b981;
    background: linear-gradient(to right, rgba(16, 185, 129, 0.1) 0%, #1e293b 100%);
}

.status-card.disabled[b-xlxsb2owyj] {
    border-left-color: #64748b;
}

.status-icon[b-xlxsb2owyj] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.status-card.enabled .status-icon[b-xlxsb2owyj] {
    background: rgba(16, 185, 129, 0.2);
    color: #4ade80;
}

.status-card.disabled .status-icon[b-xlxsb2owyj] {
    background: #334155;
    color: #94a3b8;
}

.status-content[b-xlxsb2owyj] {
    flex: 1;
}

.status-title[b-xlxsb2owyj] {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.status-detail[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Section */
.section[b-xlxsb2owyj] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #334155;
}

.section h2[b-xlxsb2owyj] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 1rem 0;
}

.section-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-xlxsb2owyj] {
    margin: 0;
}

.section-count[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Reorder Grid */
.reorder-grid[b-xlxsb2owyj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.reorder-card[b-xlxsb2owyj] {
    background: #0f172a;
    border-radius: 10px;
    padding: 1rem;
    border-left: 3px solid transparent;
}

.reorder-card.urgency-critical[b-xlxsb2owyj] {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.reorder-card.urgency-high[b-xlxsb2owyj] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.reorder-card.urgency-medium[b-xlxsb2owyj] {
    border-left-color: #3b82f6;
}

.reorder-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.reorder-header .item-name[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
}

.urgency-badge[b-xlxsb2owyj] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.urgency-badge.critical[b-xlxsb2owyj] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.urgency-badge.high[b-xlxsb2owyj] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.urgency-badge.medium[b-xlxsb2owyj] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.urgency-badge.low[b-xlxsb2owyj] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.reorder-stats[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.reorder-stats .stat[b-xlxsb2owyj] {
    text-align: center;
}

.reorder-stats .stat-value[b-xlxsb2owyj] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    display: block;
}

.reorder-stats .stat-label[b-xlxsb2owyj] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

.reorder-footer[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
    padding-top: 0.75rem;
    border-top: 1px solid #334155;
}

.show-more[b-xlxsb2owyj] {
    text-align: center;
    padding-top: 1rem;
}

/* Preview Section */
.preview-summary[b-xlxsb2owyj] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.preview-summary .total[b-xlxsb2owyj] {
    font-weight: 600;
    color: #f1f5f9;
}

.preview-list[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-card[b-xlxsb2owyj] {
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
}

.preview-header[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.preview-header:hover[b-xlxsb2owyj] {
    background: #334155;
}

.supplier-info[b-xlxsb2owyj] {
    flex: 1;
}

.supplier-name[b-xlxsb2owyj] {
    font-weight: 600;
    color: #f1f5f9;
}

.item-count[b-xlxsb2owyj] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-left: 0.5rem;
}

.preview-value[b-xlxsb2owyj] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-right: 1rem;
}

.expand-icon[b-xlxsb2owyj] {
    color: #94a3b8;
    transition: transform 0.2s;
}

.preview-card.expanded .expand-icon[b-xlxsb2owyj] {
    transform: rotate(180deg);
}

.preview-items[b-xlxsb2owyj] {
    border-top: 1px solid #334155;
    background: #0f172a;
}

.items-table[b-xlxsb2owyj] {
    width: 100%;
    border-collapse: collapse;
}

.items-table th[b-xlxsb2owyj] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.items-table td[b-xlxsb2owyj] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-top: 1px solid #334155;
}

.items-table .line-total[b-xlxsb2owyj] {
    font-weight: 500;
}

/* Action Bar */
.action-bar[b-xlxsb2owyj] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #334155;
}

/* Generate Section */
.generate-section[b-xlxsb2owyj] {
    background: #1e293b;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border: 1px solid #334155;
}

.generate-section .help-text[b-xlxsb2owyj] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 1rem 0 0 0;
}

/* Recent POs Table */
.recent-pos-table-container[b-xlxsb2owyj] {
    overflow-x: auto;
}

.recent-pos-table[b-xlxsb2owyj] {
    width: 100%;
    border-collapse: collapse;
}

.recent-pos-table th[b-xlxsb2owyj] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #0f172a;
}

.recent-pos-table td[b-xlxsb2owyj] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
}

.recent-pos-table tbody tr:hover[b-xlxsb2owyj] {
    background: #334155;
}

.recent-pos-table .po-number[b-xlxsb2owyj] {
    font-weight: 500;
    color: #3b82f6;
}

.recent-pos-table .total[b-xlxsb2owyj] {
    font-weight: 500;
}

.status-badge[b-xlxsb2owyj] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.draft[b-xlxsb2owyj] {
    background: #334155;
    color: #94a3b8;
}

.status-badge.sent[b-xlxsb2owyj] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.status-badge.received[b-xlxsb2owyj] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-badge.partialreceived[b-xlxsb2owyj] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-badge.cancelled[b-xlxsb2owyj] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

/* Empty State */
.empty-state[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    color: #94a3b8;
}

.empty-state svg[b-xlxsb2owyj] {
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.empty-state p[b-xlxsb2owyj] {
    margin: 0;
}

/* Loading State */
.loading-state[b-xlxsb2owyj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #94a3b8;
}

.spinner[b-xlxsb2owyj] {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-xlxsb2owyj 1s linear infinite;
}

@keyframes spin-b-xlxsb2owyj {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-xlxsb2owyj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal[b-xlxsb2owyj] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-xlxsb2owyj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-xlxsb2owyj] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.btn-close[b-xlxsb2owyj] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.btn-close:hover[b-xlxsb2owyj] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.btn-close:active[b-xlxsb2owyj] {
    transform: scale(0.95);
}

.modal-body[b-xlxsb2owyj] {
    padding: 1.5rem;
}

.modal-footer[b-xlxsb2owyj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #334155;
}

/* Form Elements */
.form-group[b-xlxsb2owyj] {
    margin-bottom: 1.25rem;
}

.form-group label[b-xlxsb2owyj] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.form-select[b-xlxsb2owyj],
.form-input[b-xlxsb2owyj] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #e2e8f0;
    background: #0f172a;
}

.form-select:focus[b-xlxsb2owyj],
.form-input:focus[b-xlxsb2owyj] {
    outline: none;
    border-color: #3b82f6;
}

.form-select[b-xlxsb2owyj] {
    appearance: none;
    background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-xlxsb2owyj] {
    background: #1e293b;
    color: #e2e8f0;
}

.form-row[b-xlxsb2owyj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-help[b-xlxsb2owyj] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.input-group[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
}

.input-prefix[b-xlxsb2owyj] {
    padding: 0.75rem;
    background: #334155;
    border: 1px solid #334155;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #94a3b8;
}

.input-group .form-input[b-xlxsb2owyj] {
    border-radius: 0 8px 8px 0;
}

.checkbox-label[b-xlxsb2owyj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #e2e8f0;
}

.checkbox-label input[type="checkbox"][b-xlxsb2owyj] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* Responsive */
@media (max-width: 768px) {
    .auto-po-container[b-xlxsb2owyj] {
        padding: 1rem;
    }

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

    .status-card[b-xlxsb2owyj] {
        flex-direction: column;
        text-align: center;
    }

    .reorder-grid[b-xlxsb2owyj] {
        grid-template-columns: 1fr;
    }

    .action-bar[b-xlxsb2owyj] {
        flex-direction: column;
    }

    .form-row[b-xlxsb2owyj] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Autorizacion.razor.rz.scp.css */
/* Authorization wizard — scoped (Blazor CSS isolation). No global selectors.
   Light + dark (:root[data-theme="dark"]) themed. */

.gauth[b-ifghvexhyf] {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 16px 64px;
    color: #0f172a;
}

.gauth-back[b-ifghvexhyf] {
    display: inline-block;
    margin: 4px 0 18px;
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.gauth-back:hover[b-ifghvexhyf] { color: #0f172a; }

/* ----- hero ----- */
.gauth-hero[b-ifghvexhyf] { text-align: center; margin-bottom: 28px; }
.gauth-hero-badge[b-ifghvexhyf] {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin: 0 auto 14px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .14);
}
.gauth-hero h1[b-ifghvexhyf] { font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.5px; }
.gauth-hero p[b-ifghvexhyf] { margin: 0 auto; max-width: 560px; color: #475569; line-height: 1.55; font-size: 15px; }

.gauth-skeleton[b-ifghvexhyf] { text-align: center; color: #94a3b8; padding: 40px 0; }

/* ----- locked / empty ----- */
.gauth-locked[b-ifghvexhyf] {
    background: #fff8e6; border: 1px solid #fde68a; color: #92600a;
    border-radius: 12px; padding: 16px 18px;
}
.gauth-locked a[b-ifghvexhyf] { color: #92600a; font-weight: 700; }

.gauth-empty[b-ifghvexhyf] {
    text-align: center; padding: 40px 24px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px;
}
.gauth-empty-icon[b-ifghvexhyf] { font-size: 40px; margin-bottom: 10px; }
.gauth-empty h2[b-ifghvexhyf] { font-size: 19px; margin: 0 0 6px; font-weight: 700; }
.gauth-empty p[b-ifghvexhyf] { color: #64748b; max-width: 420px; margin: 0 auto 18px; line-height: 1.5; }

/* ----- complete banner ----- */
.gauth-complete[b-ifghvexhyf] {
    display: flex; gap: 14px; align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border: 1px solid #a7f3d0; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 22px; color: #065f46; line-height: 1.5;
}
.gauth-complete-icon[b-ifghvexhyf] { font-size: 26px; }

/* ----- card ----- */
.gauth-card[b-ifghvexhyf] {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
    margin-bottom: 22px; overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gauth-card.is-done[b-ifghvexhyf] { border-color: #a7f3d0; background: #fbfffe; }

/* secondary (optional) card — apoderamiento */
.gauth-card-secondary[b-ifghvexhyf] { border-style: dashed; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); background: #fcfdff; }
.gauth-step.optional[b-ifghvexhyf] { background: #eef2f7; color: #94a3b8; font-weight: 700; }
.gauth-optional-tag[b-ifghvexhyf] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: #f1f5f9; color: #94a3b8; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

.gauth-card-head[b-ifghvexhyf] {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid #f1f5f9;
}
.gauth-step[b-ifghvexhyf] {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px;
    background: #eef2ff; color: #4338ca;
}
.gauth-step.done[b-ifghvexhyf] { background: #10b981; color: #fff; }

.gauth-card-title[b-ifghvexhyf] { flex: 1 1 auto; min-width: 0; }
.gauth-card-title h2[b-ifghvexhyf] { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.gauth-sub[b-ifghvexhyf] { font-size: 13px; color: #64748b; }

.gauth-pill[b-ifghvexhyf] {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 11px;
    border-radius: 999px; white-space: nowrap;
}
.gauth-pill.todo[b-ifghvexhyf] { background: #f1f5f9; color: #64748b; }
.gauth-pill.wait[b-ifghvexhyf] { background: #fef3c7; color: #92600a; }
.gauth-pill.ok[b-ifghvexhyf]   { background: #d1fae5; color: #047857; }

.gauth-card-body[b-ifghvexhyf] { padding: 20px 22px 22px; }
.gauth-lead[b-ifghvexhyf] { margin: 0 0 16px; color: #475569; line-height: 1.55; font-size: 14.5px; }

/* gestor chip */
.gauth-gestor-chip[b-ifghvexhyf] {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 9px 14px; margin-bottom: 16px;
}
.gauth-gestor-name[b-ifghvexhyf] { font-weight: 700; }
.gauth-gestor-meta[b-ifghvexhyf] { font-size: 13px; color: #64748b; font-family: ui-monospace, SFMono-Regular, monospace; }

/* signature pad */
.gauth-sig-label[b-ifghvexhyf] { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 8px; }
.gauth-sig[b-ifghvexhyf] {
    position: relative; border: 2px dashed #cbd5e1; border-radius: 12px;
    background: repeating-linear-gradient(0deg, #fff, #fff 27px, #f1f5f9 27px, #f1f5f9 28px);
    overflow: hidden;
}
.gauth-sig canvas[b-ifghvexhyf] {
    display: block; width: 100%; height: 170px;
    touch-action: none; cursor: crosshair;
}
.gauth-sig-clear[b-ifghvexhyf] {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255, 255, 255, .9); border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: #64748b; padding: 4px 10px; cursor: pointer;
}
.gauth-sig-clear:hover[b-ifghvexhyf] { color: #0f172a; border-color: #cbd5e1; }

.gauth-fineprint[b-ifghvexhyf] { margin: 12px 0 0; font-size: 12.5px; color: #94a3b8; line-height: 1.45; }

/* field */
.gauth-field[b-ifghvexhyf] { display: block; margin-bottom: 16px; }
.gauth-field > span[b-ifghvexhyf] { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.gauth-field input[b-ifghvexhyf] {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid #cbd5e1; border-radius: 10px; font-size: 15px; background: #fff; color: #0f172a;
}
.gauth-field input:focus[b-ifghvexhyf] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.gauth-field small[b-ifghvexhyf] { display: block; margin-top: 6px; font-size: 12.5px; color: #94a3b8; line-height: 1.4; }

/* how-to */
.gauth-how[b-ifghvexhyf] {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 4px 16px; margin-bottom: 16px;
}
.gauth-how summary[b-ifghvexhyf] { cursor: pointer; font-weight: 600; font-size: 14px; padding: 10px 0; color: #334155; }
.gauth-how ol[b-ifghvexhyf] { margin: 4px 0 10px; padding-left: 20px; color: #475569; line-height: 1.6; font-size: 14px; }
.gauth-how li[b-ifghvexhyf] { margin-bottom: 6px; }
.gauth-how-note[b-ifghvexhyf] { font-size: 13px; color: #64748b; margin: 0 0 10px; }

/* result block */
.gauth-result[b-ifghvexhyf] { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gauth-result-icon[b-ifghvexhyf] { font-size: 24px; line-height: 1.2; }
.gauth-result-text[b-ifghvexhyf] { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.gauth-result-text strong[b-ifghvexhyf] { font-size: 15px; }
.gauth-result-text span[b-ifghvexhyf] { color: #64748b; font-size: 14px; }

/* actions / buttons */
.gauth-actions[b-ifghvexhyf] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.gauth-btn[b-ifghvexhyf] {
    appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
    font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 11px; cursor: pointer;
    transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.gauth-btn:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: 0 4px 14px rgba(15, 23, 42, .1); }
.gauth-btn:active:not(:disabled)[b-ifghvexhyf] { transform: translateY(1px); }
.gauth-btn:disabled[b-ifghvexhyf] { opacity: .6; cursor: default; }
.gauth-btn.primary[b-ifghvexhyf] {
    border-color: transparent; color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.gauth-btn.primary:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: 0 8px 22px rgba(79, 70, 229, .38); }
.gauth-btn.ghost[b-ifghvexhyf] { border-color: transparent; background: transparent; color: #64748b; }
.gauth-btn.ghost:hover:not(:disabled)[b-ifghvexhyf] { box-shadow: none; color: #0f172a; background: #f1f5f9; }

.gauth-error[b-ifghvexhyf] {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font-size: 14px;
}

/* ===================== dark mode ===================== */
:root[data-theme="dark"] .gauth[b-ifghvexhyf] { color: #e2e8f0; }
:root[data-theme="dark"] .gauth-back[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-back:hover[b-ifghvexhyf] { color: #e2e8f0; }
:root[data-theme="dark"] .gauth-hero p[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-hero-badge[b-ifghvexhyf] { background: linear-gradient(135deg, #312e81, #075985); box-shadow: none; }

:root[data-theme="dark"] .gauth-empty[b-ifghvexhyf] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .gauth-empty p[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-complete[b-ifghvexhyf] { background: #0f2e23; border-color: #14532d; color: #6ee7b7; }

:root[data-theme="dark"] .gauth-card[b-ifghvexhyf] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .gauth-card.is-done[b-ifghvexhyf] { background: #14241f; border-color: #14532d; }
:root[data-theme="dark"] .gauth-card-secondary[b-ifghvexhyf] { background: #182234; border-color: #3a4658; }
:root[data-theme="dark"] .gauth-step.optional[b-ifghvexhyf] { background: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gauth-optional-tag[b-ifghvexhyf] { background: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gauth-card-head[b-ifghvexhyf] { border-bottom-color: #334155; }
:root[data-theme="dark"] .gauth-step[b-ifghvexhyf] { background: #312e81; color: #c7d2fe; }
:root[data-theme="dark"] .gauth-step.done[b-ifghvexhyf] { background: #10b981; color: #06241a; }
:root[data-theme="dark"] .gauth-sub[b-ifghvexhyf] { color: #94a3b8; }
:root[data-theme="dark"] .gauth-lead[b-ifghvexhyf] { color: #cbd5e1; }

:root[data-theme="dark"] .gauth-pill.todo[b-ifghvexhyf] { background: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gauth-pill.wait[b-ifghvexhyf] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .gauth-pill.ok[b-ifghvexhyf]   { background: #064e3b; color: #6ee7b7; }

:root[data-theme="dark"] .gauth-gestor-chip[b-ifghvexhyf] { background: #0f172a; border-color: #334155; }
:root[data-theme="dark"] .gauth-gestor-meta[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-sig[b-ifghvexhyf] { border-color: #475569; background: repeating-linear-gradient(0deg, #0f172a, #0f172a 27px, #1e293b 27px, #1e293b 28px); }
:root[data-theme="dark"] .gauth-sig canvas[b-ifghvexhyf] { filter: invert(0); }
:root[data-theme="dark"] .gauth-sig-clear[b-ifghvexhyf] { background: rgba(15, 23, 42, .8); border-color: #334155; color: #cbd5e1; }

:root[data-theme="dark"] .gauth-field > span[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-field input[b-ifghvexhyf] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gauth-field small[b-ifghvexhyf] { color: #64748b; }

:root[data-theme="dark"] .gauth-how[b-ifghvexhyf] { background: #0f172a; border-color: #334155; }
:root[data-theme="dark"] .gauth-how summary[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-how ol[b-ifghvexhyf] { color: #cbd5e1; }
:root[data-theme="dark"] .gauth-how-note[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-result-text span[b-ifghvexhyf] { color: #94a3b8; }

:root[data-theme="dark"] .gauth-btn[b-ifghvexhyf] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gauth-btn.ghost[b-ifghvexhyf] { background: transparent; color: #94a3b8; }
:root[data-theme="dark"] .gauth-btn.ghost:hover:not(:disabled)[b-ifghvexhyf] { background: #334155; color: #e2e8f0; }

:root[data-theme="dark"] .gauth-error[b-ifghvexhyf] { background: #2a1416; border-color: #7f1d1d; color: #fca5a5; }

@media (max-width: 560px) {
    .gauth-card-head[b-ifghvexhyf] { flex-wrap: wrap; }
    .gauth-pill[b-ifghvexhyf] { order: 3; }
}
/* /Pages/Admin/Backups.razor.rz.scp.css */
.backups-container[b-tig2bvk82q] { padding: 1.5rem; }
.page-header[b-tig2bvk82q] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-tig2bvk82q] { font-size: 1.5rem; color: #f1f5f9; margin: 0; }
.subtitle[b-tig2bvk82q] { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
.btn[b-tig2bvk82q] { padding: 0.5rem 1rem; min-height: 44px; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn.primary[b-tig2bvk82q] { background: #3b82f6; color: white; }
.btn.primary:hover[b-tig2bvk82q] { background: #2563eb; }
.btn.outline[b-tig2bvk82q] { background: transparent; border: 1px solid #334155; color: #e2e8f0; text-decoration: none; }
.btn.outline:hover[b-tig2bvk82q] { border-color: #475569; }
.btn.danger-outline[b-tig2bvk82q] { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
.btn.danger-outline:hover[b-tig2bvk82q] { background: rgba(239,68,68,0.1); }
.btn:disabled[b-tig2bvk82q] { opacity: 0.5; cursor: not-allowed; }
.spinner-sm[b-tig2bvk82q] { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top: 2px solid white; border-radius: 50%; animation: spin-b-tig2bvk82q 0.8s linear infinite; display: inline-block; }
.backups-grid[b-tig2bvk82q] { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.backup-card[b-tig2bvk82q] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.backup-card.failed[b-tig2bvk82q] { border-color: #ef4444; }
.backup-card.running[b-tig2bvk82q] { border-color: #f59e0b; }
.backup-header[b-tig2bvk82q] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.backup-name[b-tig2bvk82q] { font-weight: 600; color: #f1f5f9; font-size: 0.875rem; }
.status-badge[b-tig2bvk82q] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.status-badge.completed[b-tig2bvk82q] { background: rgba(34,197,94,0.15); color: #22c55e; }
.status-badge.failed[b-tig2bvk82q] { background: rgba(239,68,68,0.15); color: #ef4444; }
.status-badge.inprogress[b-tig2bvk82q] { background: rgba(245,158,11,0.15); color: #f59e0b; }
.backup-details[b-tig2bvk82q] { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
.detail-row[b-tig2bvk82q] { display: flex; justify-content: space-between; font-size: 0.8rem; color: #e2e8f0; }
.detail-row .label[b-tig2bvk82q] { color: #94a3b8; }
/* Error detail: stack label over message and let the (now friendly) text wrap,
   instead of jamming "Error<message>" into one space-between row. */
.detail-row.error[b-tig2bvk82q] { flex-direction: column; align-items: flex-start; gap: 0.15rem; color: #ef4444; }
.detail-row.error .error-msg[b-tig2bvk82q] { white-space: normal; word-break: break-word; line-height: 1.35; }
.backup-actions[b-tig2bvk82q] { display: flex; gap: 0.5rem; align-items: center; }
.running-note[b-tig2bvk82q] { font-size: 0.8rem; color: #f59e0b; font-style: italic; }
.loading-state[b-tig2bvk82q] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-tig2bvk82q] { width: 2rem; height: 2rem; border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin-b-tig2bvk82q 0.8s linear infinite; }
@keyframes spin-b-tig2bvk82q { to { transform: rotate(360deg); } }
.empty-state[b-tig2bvk82q] { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state h2[b-tig2bvk82q] { color: #e2e8f0; margin-bottom: 0.5rem; }
.empty-state svg[b-tig2bvk82q] { margin-bottom: 1rem; }
/* /Pages/Admin/BarcodeLabels.razor.rz.scp.css */
.labels-container[b-9wk1dgjpvz] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-9wk1dgjpvz] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-9wk1dgjpvz] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.subtitle[b-9wk1dgjpvz] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
}

/* Tabs */
.tabs[b-9wk1dgjpvz] {
    display: flex;
    gap: 0.25rem;
    background: #1e293b;
    padding: 0.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.tab[b-9wk1dgjpvz] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover[b-9wk1dgjpvz] {
    color: #f1f5f9;
}

.tab.active[b-9wk1dgjpvz] {
    background: #334155;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Content Grid */
.content-grid[b-9wk1dgjpvz] {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 1.5rem;
}

/* Selection Panel */
.selection-panel[b-9wk1dgjpvz] {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    border: 1px solid #334155;
}

.panel-header[b-9wk1dgjpvz] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #334155;
    background: #0f172a;
}

.panel-header h2[b-9wk1dgjpvz] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.75rem 0;
}

.filter-row[b-9wk1dgjpvz] {
    display: flex;
    gap: 0.75rem;
}

.form-select[b-9wk1dgjpvz] {
    flex: 1;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.875rem;
    background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.5rem center;
    appearance: none;
    color: #e2e8f0;
}

.form-select option[b-9wk1dgjpvz] {
    background: #1e293b;
    color: #e2e8f0;
}

.checkbox-filter[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #e2e8f0;
}

.select-actions[b-9wk1dgjpvz] {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #334155;
}

.btn-link[b-9wk1dgjpvz] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover[b-9wk1dgjpvz] {
    text-decoration: underline;
}

/* Item List */
.item-list[b-9wk1dgjpvz] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.item-row[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.item-row:hover[b-9wk1dgjpvz] {
    background: #334155;
}

.item-row.selected[b-9wk1dgjpvz] {
    background: rgba(59, 130, 246, 0.15);
}

.item-row input[type="checkbox"][b-9wk1dgjpvz] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

.item-info[b-9wk1dgjpvz] {
    flex: 1;
    min-width: 0;
}

.item-name[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-details[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}

.expiry-badge[b-9wk1dgjpvz] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.expiry-badge.warning[b-9wk1dgjpvz] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.expiry-badge.expired[b-9wk1dgjpvz] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.item-row.expired[b-9wk1dgjpvz] {
    background: rgba(220, 38, 38, 0.1);
}

.item-row.expiring-soon[b-9wk1dgjpvz] {
    background: rgba(251, 191, 36, 0.1);
}

/* Preview Panel */
.preview-panel[b-9wk1dgjpvz] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #334155;
}

.preview-panel h2[b-9wk1dgjpvz] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 1rem 0;
}

.config-section[b-9wk1dgjpvz] {
    margin-bottom: 1.5rem;
}

.config-label[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.size-options[b-9wk1dgjpvz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.size-option[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.size-option:hover[b-9wk1dgjpvz] {
    border-color: #475569;
}

.size-option.selected[b-9wk1dgjpvz] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.size-option input[b-9wk1dgjpvz] {
    display: none;
}

.size-preview[b-9wk1dgjpvz] {
    background: white;
    border: 1px solid #1a1a2e;
    border-radius: 2px;
}

.size-name[b-9wk1dgjpvz] {
    font-size: 0.875rem;
    color: #e2e8f0;
}

/* Selection Summary */
.selection-summary[b-9wk1dgjpvz] {
    background: #0f172a;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.summary-count .count[b-9wk1dgjpvz] {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
}

.summary-count .label[b-9wk1dgjpvz] {
    display: block;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* Barcode Preview */
.barcode-preview[b-9wk1dgjpvz] {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #0f172a;
    border-radius: 8px;
    text-align: center;
}

.barcode-preview h3[b-9wk1dgjpvz] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    margin: 0 0 0.75rem 0;
}

.preview-barcode[b-9wk1dgjpvz] {
    background: white;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Buttons */
.action-buttons[b-9wk1dgjpvz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn[b-9wk1dgjpvz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-9wk1dgjpvz] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-9wk1dgjpvz] {
    background: #2563eb;
}

.btn.primary:disabled[b-9wk1dgjpvz] {
    background: #475569;
    cursor: not-allowed;
    color: #94a3b8;
}

.btn.outline[b-9wk1dgjpvz] {
    background: #334155;
    border: 1px solid #475569;
    color: #f1f5f9;
}

.btn.outline:hover:not(:disabled)[b-9wk1dgjpvz] {
    background: #475569;
}

.btn-spinner[b-9wk1dgjpvz] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9wk1dgjpvz 0.8s linear infinite;
}

@keyframes spin-b-9wk1dgjpvz {
    to { transform: rotate(360deg); }
}

/* Quick Actions */
.quick-actions[b-9wk1dgjpvz] {
    border-top: 1px solid #334155;
    padding-top: 1rem;
}

.quick-actions h3[b-9wk1dgjpvz] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    margin: 0 0 0.75rem 0;
}

.quick-btn[b-9wk1dgjpvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.quick-btn:hover[b-9wk1dgjpvz] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Responsive */
@media (max-width: 900px) {
    .content-grid[b-9wk1dgjpvz] {
        grid-template-columns: 1fr;
    }

    .selection-panel[b-9wk1dgjpvz] {
        max-height: 50vh;
    }
}

@media (max-width: 600px) {
    .labels-container[b-9wk1dgjpvz] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .tabs[b-9wk1dgjpvz] {
        flex-direction: column;
    }

    /* Single-column layout already at 900px; ensure both panels can shrink */
    .content-grid[b-9wk1dgjpvz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .selection-panel[b-9wk1dgjpvz],
    .preview-panel[b-9wk1dgjpvz] {
        min-width: 0;
    }

    /* Category filter select fits full width */
    .filter-row[b-9wk1dgjpvz] {
        flex-wrap: wrap;
    }

    .form-select[b-9wk1dgjpvz] {
        width: 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
    }

    /* Item rows keep checkbox + truncating text within width */
    .item-info[b-9wk1dgjpvz] {
        min-width: 0;
    }

    /* Size-option preview tiles wrap/fit; label text can shrink */
    .size-options[b-9wk1dgjpvz] {
        min-width: 0;
    }

    .size-option[b-9wk1dgjpvz] {
        min-width: 0;
    }

    .size-name[b-9wk1dgjpvz] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Preview barcode SVG never forces horizontal scroll */
    .preview-barcode[b-9wk1dgjpvz] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Action + quick buttons already full-width column; keep labels readable */
    .quick-btn[b-9wk1dgjpvz] {
        text-align: left;
    }
}
/* /Pages/Admin/Billing.razor.rz.scp.css */
.billing-container[b-o6c8cksdfm] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.page-header[b-o6c8cksdfm] {
    margin-bottom: 2rem;
}

.page-header h1[b-o6c8cksdfm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f4f4f5;
    margin: 0 0 0.25rem;
}

.subtitle[b-o6c8cksdfm] {
    color: #71717a;
    font-size: 0.875rem;
}

.loading-state[b-o6c8cksdfm] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-o6c8cksdfm] {
    width: 32px;
    height: 32px;
    border: 3px solid #2a2a3a;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-o6c8cksdfm 0.8s linear infinite;
}

@keyframes spin-b-o6c8cksdfm {
    to { transform: rotate(360deg); }
}

/* Plan Card */
.plan-card[b-o6c8cksdfm] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.plan-card.plan-warning[b-o6c8cksdfm] {
    border-color: #f59e0b;
}

.plan-header[b-o6c8cksdfm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.plan-tier[b-o6c8cksdfm] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f4f4f5;
}

.plan-status[b-o6c8cksdfm] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.375rem;
}

.status-active[b-o6c8cksdfm], .status-trialing[b-o6c8cksdfm] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-past_due[b-o6c8cksdfm] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-expired[b-o6c8cksdfm], .status-cancelled[b-o6c8cksdfm], .status-restricted[b-o6c8cksdfm], .status-suspended[b-o6c8cksdfm] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.plan-days[b-o6c8cksdfm] {
    text-align: right;
}

.days-number[b-o6c8cksdfm] {
    font-size: 2rem;
    font-weight: 800;
    color: #f4f4f5;
    line-height: 1;
}

.days-label[b-o6c8cksdfm] {
    display: block;
    font-size: 0.6875rem;
    color: #71717a;
}

.plan-info[b-o6c8cksdfm] {
    color: #a1a1aa;
    font-size: 0.875rem;
    margin-top: 1rem;
    line-height: 1.5;
}

.plan-message[b-o6c8cksdfm] {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #a5b4fc;
    margin-top: 1rem;
}

.plan-message.warning[b-o6c8cksdfm] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* Plans Grid */
.billing-actions h3[b-o6c8cksdfm] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f4f4f5;
    margin-bottom: 1.25rem;
}

.plans-grid[b-o6c8cksdfm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.plan-option[b-o6c8cksdfm] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.plan-option.featured[b-o6c8cksdfm] {
    border-color: #6366f1;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, #16161e 100%);
}

.plan-badge[b-o6c8cksdfm] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-option h4[b-o6c8cksdfm] {
    font-size: 1rem;
    font-weight: 700;
    color: #f4f4f5;
    margin: 0 0 0.5rem;
}

.plan-price[b-o6c8cksdfm] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f4f4f5;
    margin-bottom: 1rem;
}

.plan-price span[b-o6c8cksdfm] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #71717a;
}

/* May promo */
.may-promo-note[b-o6c8cksdfm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.08);
    color: #fcd9a0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.may-promo-note strong[b-o6c8cksdfm] { color: #fde9c8; font-weight: 700; }
.may-promo-fineprint[b-o6c8cksdfm] {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #a1a1aa;
    text-align: center;
}
.may-promo-tag[b-o6c8cksdfm] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plan-price.promo[b-o6c8cksdfm] { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.plan-price .price-was[b-o6c8cksdfm] {
    font-size: 1rem;
    font-weight: 600;
    color: #71717a;
    text-decoration: line-through;
}
.plan-price .price-now[b-o6c8cksdfm] { color: #fbbf24; }

.plan-option .btn[b-o6c8cksdfm] {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8125rem;
}

/* Manage Section */
.manage-section[b-o6c8cksdfm] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 14px;
    padding: 1.5rem;
}

.manage-section h3[b-o6c8cksdfm] {
    margin-bottom: 0.5rem;
}

.manage-section p[b-o6c8cksdfm] {
    color: #71717a;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Buttons */
.btn[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn.primary[b-o6c8cksdfm] {
    background: #6366f1;
    color: #fff;
}

.btn.primary:hover[b-o6c8cksdfm] {
    background: #4f46e5;
}

.btn.outline[b-o6c8cksdfm] {
    background: transparent;
    color: #a1a1aa;
    border-color: #2a2a3a;
}

.btn.outline:hover[b-o6c8cksdfm] {
    background: #1e1e2a;
}

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

.error-banner[b-o6c8cksdfm] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .plans-grid[b-o6c8cksdfm] {
        grid-template-columns: 1fr;
    }
}

/* "Tu plan incluye" + "Pasar a X anade" pair below the plan card. Two
   cards on one row on desktop; stacked on narrow viewports. */
.features-block[b-o6c8cksdfm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .features-block[b-o6c8cksdfm] {
        grid-template-columns: 1fr;
    }
}

.features-card[b-o6c8cksdfm] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}
.features-card.upgrade[b-o6c8cksdfm] {
    border-color: rgba(124, 92, 255, 0.35);
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.06), #16161e);
}

.features-head[b-o6c8cksdfm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.features-head h3[b-o6c8cksdfm] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
}
.features-tier[b-o6c8cksdfm] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.15);
    color: #c4b5fd;
    letter-spacing: 0.02em;
}

.features-base[b-o6c8cksdfm] {
    margin: 0 0 0.75rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.features-limits[b-o6c8cksdfm] {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.18);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.8125rem;
    line-height: 1.55;
}
.features-limits strong[b-o6c8cksdfm] {
    color: #c4b5fd;
    font-weight: 600;
    margin-right: 0.25rem;
}
.features-empty[b-o6c8cksdfm] {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.875rem;
    line-height: 1.55;
}

.features-list[b-o6c8cksdfm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1rem;
}
@media (max-width: 480px) {
    .features-list[b-o6c8cksdfm] { grid-template-columns: 1fr; }
}
.features-list li[b-o6c8cksdfm] {
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.4;
    padding-left: 0.25rem;
}
.features-list.upgrade-list li[b-o6c8cksdfm] {
    color: #c4b5fd;
}

/* Bucket chips — the compact default view replacing the old flat
   alphabetical tick list. Each chip answers "do I have X area?" with
   a count. Expanded detail is one tap away. */
.feature-buckets[b-o6c8cksdfm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
}
.bucket-chip[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.35rem 0.875rem;
    background: #1f1f2c;
    border: 1px solid #2a2a3a;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1;
    color: #e2e8f0;
    transition: border-color 0.15s, background 0.15s;
}
.bucket-chip-name[b-o6c8cksdfm] {
    font-weight: 600;
    letter-spacing: 0.01em;
}
.bucket-chip-count[b-o6c8cksdfm] {
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(124, 92, 255, 0.2);
    color: #c4b5fd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bucket-chip.upgrade-chip[b-o6c8cksdfm] {
    border-color: rgba(124, 92, 255, 0.35);
    background: rgba(124, 92, 255, 0.08);
    color: #e9e4ff;
}
.bucket-chip.upgrade-chip .bucket-chip-count[b-o6c8cksdfm] {
    background: rgba(124, 92, 255, 0.35);
    color: #ffffff;
}
.features-tier.upgrade-delta[b-o6c8cksdfm] {
    background: rgba(124, 92, 255, 0.3);
    color: #ffffff;
}

/* Collapse toggle ("Ver detalle completo"). Flat, borderless so it
   reads as a UI affordance not a marketing CTA. */
.features-toggle[b-o6c8cksdfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    margin-bottom: 0.5rem;
    background: none;
    border: none;
    color: #a78bfa;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}
.features-toggle:hover[b-o6c8cksdfm] {
    color: #c4b5fd;
}
.features-toggle-caret[b-o6c8cksdfm] {
    display: inline-block;
    font-size: 0.75rem;
    transition: transform 0.2s;
    line-height: 1;
}
.features-toggle-caret.open[b-o6c8cksdfm] {
    transform: rotate(180deg);
}

/* Expanded bucket detail — one titled group per bucket, tick list
   inside. Replaces the old flat two-column grid when expanded. */
.bucket-detail-list[b-o6c8cksdfm] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid #2a2a3a;
}
.bucket-group-head[b-o6c8cksdfm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
}
.bucket-group-head h4[b-o6c8cksdfm] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bucket-group-desc[b-o6c8cksdfm] {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.4;
}
.bucket-group-list[b-o6c8cksdfm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}
@media (max-width: 480px) {
    .bucket-group-list[b-o6c8cksdfm] { grid-template-columns: 1fr; }
}
.bucket-group-list li[b-o6c8cksdfm] {
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.4;
}
.bucket-group-list.upgrade-list li[b-o6c8cksdfm] {
    color: #c4b5fd;
}

/* Upgrade CTA inside the upgrade card — lives after the bucket chips
   so active subscribers (who are already reading "what's in it for
   me") can act immediately. Links to Stripe Customer Portal. */
.upgrade-cta[b-o6c8cksdfm] {
    width: 100%;
    margin-top: 1rem;
}

/* Downgrade link — deliberately underplayed. Rendered for active
   Pro / Enterprise customers only. Hiding it would be dark-pattern;
   promoting it would hurt ARR. */
.downgrade-row[b-o6c8cksdfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.75rem 0 1.75rem;
    padding: 0.5rem 0;
    color: #94a3b8;
    font-size: 0.8125rem;
}
.downgrade-label[b-o6c8cksdfm] {
    color: #94a3b8;
}
.downgrade-link[b-o6c8cksdfm] {
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(203, 213, 225, 0.3);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.downgrade-link:hover[b-o6c8cksdfm] {
    color: #e2e8f0;
    text-decoration-color: rgba(203, 213, 225, 0.7);
}
.downgrade-link:disabled[b-o6c8cksdfm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────── Downgrade preview modal ─────────────────────────── */
/* Fired when picking a tier with a smaller feature set than the current
   one. Trial→Barra is the headline case (Trial = full Enterprise surface,
   Barra = QrDineIn only) but the same UX catches Pro→Starter, etc. */
.modal-overlay[b-o6c8cksdfm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.modal[b-o6c8cksdfm] {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
    width: min(560px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-header[b-o6c8cksdfm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-header h2[b-o6c8cksdfm] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
}
.btn-close[b-o6c8cksdfm] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.btn-close:hover[b-o6c8cksdfm] {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}
.modal-body[b-o6c8cksdfm] {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
}
.modal-body h3[b-o6c8cksdfm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    margin: 18px 0 8px;
}
.modal-body h3:first-child[b-o6c8cksdfm] {
    margin-top: 0;
}
.modal-actions[b-o6c8cksdfm] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.downgrade-intro[b-o6c8cksdfm] {
    margin: 0 0 8px;
    color: #cbd5e1;
    line-height: 1.5;
}
.downgrade-intro strong[b-o6c8cksdfm] {
    color: #f1f5f9;
}
.downgrade-list[b-o6c8cksdfm] {
    margin: 0 0 4px;
    padding-left: 22px;
    color: #cbd5e1;
    line-height: 1.6;
}
.downgrade-list li[b-o6c8cksdfm] {
    margin-bottom: 4px;
}
/* Capacity warnings get a calmer amber tone — they're informational
   (your existing seats keep working) rather than destructive. */
.downgrade-list--warn[b-o6c8cksdfm] {
    color: #fcd34d;
}
.downgrade-info[b-o6c8cksdfm] {
    margin-top: 16px;
    padding: 10px 12px;
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid #64748b;
    border-radius: 4px;
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.5;
}
/* /Pages/Admin/BuffetKiosk.razor.rz.scp.css */
.bk-container[b-jdg1jm0mxx] {
    max-width: 1200px;
    padding: 20px;
    color: #f1f5f9;
    color-scheme: dark;
}

.bk-header[b-jdg1jm0mxx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bk-header h2[b-jdg1jm0mxx] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.bk-header .muted[b-jdg1jm0mxx] {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.bk-actions[b-jdg1jm0mxx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bk-link[b-jdg1jm0mxx] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 8px 14px;
    border: 1px solid #334155;
    border-radius: 8px;
}

.bk-link:hover[b-jdg1jm0mxx] {
    border-color: #f59e0b;
    color: #f1f5f9;
}

.bk-btn[b-jdg1jm0mxx] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.bk-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.bk-error[b-jdg1jm0mxx] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.bk-empty[b-jdg1jm0mxx] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.bk-empty .muted[b-jdg1jm0mxx] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.bk-grid[b-jdg1jm0mxx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.bk-card[b-jdg1jm0mxx] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bk-card.active[b-jdg1jm0mxx] {
    border-color: #34d399;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3);
}

.bk-card.cooldown[b-jdg1jm0mxx] {
    border-color: #38bdf8;
}

.bk-card.last-call[b-jdg1jm0mxx] {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5), 0 0 14px rgba(239, 68, 68, 0.2);
    animation: bk-blink-b-jdg1jm0mxx 2s ease-in-out infinite;
}

.bk-card.expired[b-jdg1jm0mxx] {
    border-color: #475569;
    opacity: 0.7;
}

.bk-card.awaiting[b-jdg1jm0mxx] {
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 16px rgba(251, 191, 36, 0.18);
}

.bk-card.awaiting .bk-status[b-jdg1jm0mxx] {
    background: #422006;
    color: #fef9c3;
}

.bk-confirm-btn[b-jdg1jm0mxx] {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.bk-confirm-btn:hover:not(:disabled)[b-jdg1jm0mxx] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.35);
}

.bk-confirm-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.bk-actions-row[b-jdg1jm0mxx] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bk-action-btn[b-jdg1jm0mxx] {
    flex: 1;
    padding: 7px 10px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.bk-action-btn:hover:not(:disabled)[b-jdg1jm0mxx] {
    border-color: #f59e0b;
    color: #f1f5f9;
}

.bk-action-btn:disabled[b-jdg1jm0mxx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bk-action-btn.selected[b-jdg1jm0mxx] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

.bk-action-btn.bk-danger[b-jdg1jm0mxx] {
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.bk-action-btn.bk-danger:hover:not(:disabled)[b-jdg1jm0mxx] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.bk-paused-banner[b-jdg1jm0mxx] {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    color: #fcd34d;
    font-size: 0.82rem;
    font-weight: 600;
}

.bk-pause-presets[b-jdg1jm0mxx] {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.bk-modal-bg[b-jdg1jm0mxx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.bk-modal[b-jdg1jm0mxx] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
}

.bk-modal h3[b-jdg1jm0mxx] {
    margin: 0 0 4px;
    color: #f1f5f9;
}

.bk-modal .muted[b-jdg1jm0mxx] {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 16px;
}

.bk-guest-grid[b-jdg1jm0mxx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.bk-guest-btn[b-jdg1jm0mxx] {
    padding: 12px 0;
    background: #0f172a;
    border: 2px solid #334155;
    color: #f1f5f9;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.bk-guest-btn:hover[b-jdg1jm0mxx] {
    border-color: #f59e0b;
}

.bk-guest-btn.selected[b-jdg1jm0mxx] {
    border-color: #f59e0b;
    background: #422006;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.bk-modal-footer[b-jdg1jm0mxx] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.bk-modal-wide[b-jdg1jm0mxx] {
    min-width: 480px;
}

.bk-field[b-jdg1jm0mxx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.bk-field span[b-jdg1jm0mxx] {
    font-size: 0.82rem;
    color: #cbd5e1;
}

.bk-field input[type="text"][b-jdg1jm0mxx],
.bk-field input[type="number"][b-jdg1jm0mxx],
.bk-field textarea[b-jdg1jm0mxx] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 9px 10px;
    color: #f1f5f9;
    font-size: 0.92rem;
    font-family: inherit;
    resize: vertical;
}

.bk-field input:focus[b-jdg1jm0mxx],
.bk-field textarea:focus[b-jdg1jm0mxx] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.bk-field .hint[b-jdg1jm0mxx] {
    color: #94a3b8;
    font-size: 0.78rem;
}

@keyframes bk-blink-b-jdg1jm0mxx {
    0%, 100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5), 0 0 14px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.8), 0 0 22px rgba(239, 68, 68, 0.45); }
}

.bk-card-head[b-jdg1jm0mxx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 1px solid #334155;
}

.bk-table[b-jdg1jm0mxx] {
    font-weight: 700;
    font-size: 1.05rem;
}

.bk-status[b-jdg1jm0mxx] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.bk-card.active .bk-status[b-jdg1jm0mxx] { background: #064e3b; color: #d1fae5; }
.bk-card.cooldown .bk-status[b-jdg1jm0mxx] { background: #082f49; color: #bae6fd; }
.bk-card.last-call .bk-status[b-jdg1jm0mxx] { background: #7f1d1d; color: #fecaca; }
.bk-card.expired .bk-status[b-jdg1jm0mxx] { background: #1f2937; color: #94a3b8; }

.bk-card-body[b-jdg1jm0mxx] {
    padding: 12px 16px 14px;
}

.bk-row[b-jdg1jm0mxx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.bk-row strong[b-jdg1jm0mxx] {
    color: #f1f5f9;
}

.bk-row.warn strong[b-jdg1jm0mxx] {
    color: #fbbf24;
}
/* /Pages/Admin/BuffetReport.razor.rz.scp.css */
.br-container[b-quxia2fw6i] {
    max-width: 1100px;
    padding: 20px;
    color: #f1f5f9;
    /* Native date-picker widgets use OS theme; force dark so the
       calendar popup and the picker icon match the dark-mode page
       instead of rendering with light system chrome. */
    color-scheme: dark;
}

.br-header[b-quxia2fw6i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.br-header h2[b-quxia2fw6i] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.br-header .muted[b-quxia2fw6i] {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.br-controls[b-quxia2fw6i] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.br-controls input[type="date"][b-quxia2fw6i] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 10px;
    color: #f1f5f9;
    font-size: 0.9rem;
}

.br-controls .muted[b-quxia2fw6i] {
    color: #94a3b8;
}

.br-preset[b-quxia2fw6i] {
    padding: 8px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.br-preset:hover[b-quxia2fw6i] {
    border-color: #f59e0b;
    color: #f1f5f9;
}

.br-back[b-quxia2fw6i] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 8px 14px;
    border: 1px solid #334155;
    border-radius: 8px;
}

.br-back:hover[b-quxia2fw6i] {
    border-color: #f59e0b;
}

.br-loading[b-quxia2fw6i], .br-empty[b-quxia2fw6i] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.br-empty .muted[b-quxia2fw6i] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.br-error[b-quxia2fw6i] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.br-kpis[b-quxia2fw6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi[b-quxia2fw6i] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.kpi-v[b-quxia2fw6i] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f59e0b;
}

.kpi-l[b-quxia2fw6i] {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 4px;
}

.br-grid[b-quxia2fw6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.card[b-quxia2fw6i] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 18px 20px;
}

.card h3[b-quxia2fw6i] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: #f1f5f9;
}

.card .muted[b-quxia2fw6i] {
    color: #94a3b8;
    margin: 0;
}

.br-table[b-quxia2fw6i] {
    width: 100%;
    border-collapse: collapse;
}

.br-table th[b-quxia2fw6i] {
    text-align: left;
    color: #94a3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #334155;
    padding: 8px 4px;
    font-weight: 600;
}

.br-table td[b-quxia2fw6i] {
    padding: 8px 4px;
    border-bottom: 1px solid #1e293b;
    color: #cbd5e1;
    font-size: 0.92rem;
}

.br-table tbody tr:hover[b-quxia2fw6i] {
    background: rgba(245, 158, 11, 0.04);
}

.br-table .rank[b-quxia2fw6i] {
    color: #f59e0b;
    font-weight: 700;
    width: 30px;
}

.br-status-row[b-quxia2fw6i] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.status-pill[b-quxia2fw6i] {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-pill.closed[b-quxia2fw6i] { background: #064e3b; color: #d1fae5; }
.status-pill.expired[b-quxia2fw6i] { background: #7c2d12; color: #fed7aa; }
.status-pill.other[b-quxia2fw6i] { background: #1e3a8a; color: #bfdbfe; }

.hint[b-quxia2fw6i] {
    color: #fbbf24;
    font-size: 0.88rem;
    margin: 8px 0 0;
}

.br-funnel[b-quxia2fw6i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.funnel-row[b-quxia2fw6i] {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 12px;
}

.funnel-label[b-quxia2fw6i] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.funnel-bar[b-quxia2fw6i] {
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 60px;
    white-space: nowrap;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-bar.paid[b-quxia2fw6i] {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
/* /Pages/Admin/BuffetSettings.razor.rz.scp.css */
.buf-container[b-meg3v7hcmf] {
    max-width: 880px;
    padding: 20px;
    color: #f1f5f9;
    /* Native number/text/checkbox widgets use OS theme; force dark
       so the spinner arrows, focus rings and selection highlight
       match the dark page chrome. */
    color-scheme: dark;
}

.buf-header[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.buf-header .header-main[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.buf-header .header-right[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kiosk-link[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.kiosk-link:hover[b-meg3v7hcmf] {
    border-color: #f59e0b;
    color: #f1f5f9;
}

.preview-card[b-meg3v7hcmf] {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), rgba(239, 68, 68, 0.02));
}

.table-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.table-tile[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #f1f5f9;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    position: relative;
}

.table-tile:hover[b-meg3v7hcmf] {
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.15);
}

.table-tile .t-label[b-meg3v7hcmf] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #f1f5f9;
}

.table-tile .t-code[b-meg3v7hcmf] {
    font-size: 0.7rem;
    color: #cbd5e1;
    font-family: 'Courier New', monospace;
}

.table-tile .t-no-code[b-meg3v7hcmf] {
    color: #64748b;
    font-style: italic;
    font-family: inherit;
}

.table-tile .t-arrow[b-meg3v7hcmf] {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #64748b;
    font-size: 0.85rem;
}

.table-tile:hover .t-arrow[b-meg3v7hcmf] {
    color: #f59e0b;
}

/* QR preview image inside the tile — render at thumbnail size; admin
   clicks ⬇ PNG for the print-resolution copy. White background so the
   QR pattern actually shows against the dark theme. */
.table-tile .t-preview[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.table-tile .t-qr-img[b-meg3v7hcmf] {
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 6px;
    padding: 6px;
    object-fit: contain;
    image-rendering: pixelated;
}

.table-tile .t-dl[b-meg3v7hcmf] {
    display: inline-block;
    text-align: center;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.table-tile .t-dl:hover[b-meg3v7hcmf] {
    background: rgba(245, 158, 11, 0.2);
}

.bf-qr-actions[b-meg3v7hcmf] {
    display: flex;
    gap: 8px;
    margin: 8px 0 16px;
}

.bf-qr-btn[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.bf-qr-btn:hover[b-meg3v7hcmf] {
    background: rgba(245, 158, 11, 0.25);
}

.bf-qr-btn.primary[b-meg3v7hcmf] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: white;
}

.bf-qr-btn.primary:hover[b-meg3v7hcmf] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

.buf-header h2[b-meg3v7hcmf] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.buf-header p[b-meg3v7hcmf] {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 0.95rem;
}

.buf-header .icon[b-meg3v7hcmf] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.badge[b-meg3v7hcmf] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.badge.on[b-meg3v7hcmf] {
    background: #064e3b;
    border: 1px solid #10b981;
    color: #d1fae5;
}

.badge.off[b-meg3v7hcmf] {
    background: #1f2937;
    border: 1px solid #475569;
    color: #94a3b8;
}

.card[b-meg3v7hcmf] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
}

.card-title[b-meg3v7hcmf] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #f1f5f9;
}

.card-subtitle[b-meg3v7hcmf] {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 14px;
}

.toggle[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    color: #e2e8f0;
}

.toggle input[type="checkbox"][b-meg3v7hcmf] {
    width: 18px;
    height: 18px;
    accent-color: #f59e0b;
}

.radio[b-meg3v7hcmf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.radio input[type="radio"][b-meg3v7hcmf] {
    margin-top: 4px;
    accent-color: #f59e0b;
}

.radio strong[b-meg3v7hcmf] {
    display: block;
    color: #f1f5f9;
    margin-bottom: 2px;
}

.radio .hint[b-meg3v7hcmf] {
    display: block;
    color: #94a3b8;
    font-size: 0.85rem;
}

.field[b-meg3v7hcmf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.field label[b-meg3v7hcmf] {
    font-size: 0.85rem;
    color: #cbd5e1;
}

.field .hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.field input[type="number"][b-meg3v7hcmf] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 10px;
    color: #f1f5f9;
    width: 200px;
    font-size: 0.95rem;
}

.field input[type="number"]:focus[b-meg3v7hcmf] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

textarea[b-meg3v7hcmf] {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    color: #f1f5f9;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

textarea:focus[b-meg3v7hcmf] {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.actions[b-meg3v7hcmf] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.btn[b-meg3v7hcmf] {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn:disabled[b-meg3v7hcmf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-meg3v7hcmf] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-meg3v7hcmf] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.3);
}

.status[b-meg3v7hcmf] {
    font-size: 0.9rem;
}

.status.ok[b-meg3v7hcmf] {
    color: #34d399;
}

.status.error[b-meg3v7hcmf] {
    color: #f87171;
}

.bf-i18n-tabs[b-meg3v7hcmf] {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.bf-i18n-tab[b-meg3v7hcmf] {
    flex: 0 0 auto;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
}

.bf-i18n-tab:hover[b-meg3v7hcmf] {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.45);
}

.bf-i18n-tab.active[b-meg3v7hcmf] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

/* Fixed column widths so the Etiqueta input + remove button stay
   inside the card. Without `table-layout: fixed` the browser auto-
   sizes columns to content and the Etiqueta input balloons past the
   right edge of the parent .card. The card itself never gets a
   horizontal scrollbar, so the X-button (last col) was being clipped. */
.bf-tier-table[b-meg3v7hcmf] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 8px;
}
.bf-tier-table colgroup[b-meg3v7hcmf],
.bf-tier-table col[b-meg3v7hcmf] { display: table-column; }

.bf-tier-table th:nth-child(1)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(1)[b-meg3v7hcmf],
.bf-tier-table th:nth-child(2)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(2)[b-meg3v7hcmf] { width: 80px; }
.bf-tier-table th:nth-child(3)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(3)[b-meg3v7hcmf] { width: 100px; }
.bf-tier-table th:nth-child(5)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(5)[b-meg3v7hcmf] { width: 48px; text-align: right; }
.bf-tier-table th:nth-child(4)[b-meg3v7hcmf],
.bf-tier-table td:nth-child(4)[b-meg3v7hcmf] { width: auto; }

.bf-tier-table th[b-meg3v7hcmf] {
    text-align: left;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.bf-tier-table td[b-meg3v7hcmf] {
    padding: 4px 6px;
}
.bf-tier-table td input[type="number"][b-meg3v7hcmf],
.bf-tier-table td input[type="text"][b-meg3v7hcmf] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.9rem;
}
.bf-tier-remove[b-meg3v7hcmf] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.bf-tier-add[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.12);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.bf-tier-add:hover[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.2);
}

/* Inline help box for time tiers — explains 0-24 range, overnight wrap,
   overlap precedence. Sits between the section subtitle and the table. */
.bf-tier-help[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.06);
    border-left: 3px solid #6366f1;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.55;
}
.bf-tier-help strong[b-meg3v7hcmf] { color: #f1f5f9; }
.bf-tier-help ul[b-meg3v7hcmf] { margin: 6px 0 0; padding-left: 18px; }
.bf-tier-help li[b-meg3v7hcmf] { margin: 2px 0; }

/* Pause/resume card — red-tinted banner when actively paused so the
   operator can see at a glance that the buffet isn't accepting rounds. */
.card-paused[b-meg3v7hcmf] {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.0));
}
.paused-banner[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 12px 16px;
    border-radius: 8px;
    color: #fee2e2;
}
.paused-banner strong[b-meg3v7hcmf] { font-size: 1rem; }
.paused-reason[b-meg3v7hcmf] { color: #fca5a5; font-size: 0.85rem; flex: 1; }
.pause-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
@media (max-width: 600px) {
    .pause-grid[b-meg3v7hcmf] { grid-template-columns: repeat(2, 1fr); }
}
.btn-soft[b-meg3v7hcmf] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.btn-soft:hover[b-meg3v7hcmf] { background: rgba(148, 163, 184, 0.2); }
.btn-soft:disabled[b-meg3v7hcmf] { opacity: 0.55; cursor: not-allowed; }

/* Sticky save bar — pinned to viewport bottom. Re-uses .btn-primary and
   .status from the main page. Backdrop-blur keeps content readable when
   the bar overlays cards. */
.buf-sticky-save[b-meg3v7hcmf] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 32px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.buf-sticky-save-inner[b-meg3v7hcmf] {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.buf-sticky-save-hint[b-meg3v7hcmf] {
    color: #94a3b8;
    font-size: 0.85rem;
    flex: 1;
}

/* Conditional-disabled section — when a parent toggle (e.g. AllowChildren)
   is off, render the dependent fields as visibly disabled instead of
   hiding them. Operators can still see the values without flipping the
   toggle. */
.bf-disabled-block[b-meg3v7hcmf] {
    opacity: 0.55;
    pointer-events: none;
    border-left: 3px dashed rgba(148, 163, 184, 0.3);
    padding-left: 10px;
    margin-left: -10px;
}
.bf-disabled-note[b-meg3v7hcmf] {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 6px 0 8px;
    font-style: italic;
}
/* Per-field disabled — when only ONE field is blocked (e.g. KidsAreFree
   is on so the factor is moot). Keeps the rest of the card interactive. */
.bf-field-disabled input[b-meg3v7hcmf],
.bf-field-disabled select[b-meg3v7hcmf],
.bf-field-disabled textarea[b-meg3v7hcmf] {
    opacity: 0.5;
    cursor: not-allowed;
}
.bf-field-disabled label[b-meg3v7hcmf] { color: #94a3b8; }

/* Validation summary card — listed above the inline save row when the
   form has blocking errors. Red border + amber list so it doesn't read
   like a generic info card. */
.bf-validation[b-meg3v7hcmf] {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0));
    color: #fee2e2;
}
.bf-validation strong[b-meg3v7hcmf] { font-size: 1rem; color: #fca5a5; }
.bf-validation ul[b-meg3v7hcmf] { margin: 8px 0 0; padding-left: 22px; color: #fde68a; }
.bf-validation li[b-meg3v7hcmf] { margin: 3px 0; line-height: 1.5; }

/* Error variant of the sticky-save hint — same text role as the default
   gray hint but red so a 1-glance scan tells the operator they can't save. */
.buf-sticky-save-hint.error[b-meg3v7hcmf] { color: #fca5a5; font-weight: 600; }

/* Collapsible card for advanced / rarely-touched settings (KDS theme,
   kitchen language, CSV import). Renders as a normal card but the body
   is hidden until the operator clicks the header. Matches the QR-card
   collapse affordance — prominent chevron in a colored circle so the
   toggle isn't easy to miss. */
.bf-advanced[b-meg3v7hcmf] { padding: 0; overflow: hidden; }
.bf-advanced > summary[b-meg3v7hcmf] {
    cursor: pointer;
    padding: 18px 22px;
    list-style: none;
    display: flex; align-items: center; gap: 14px;
    color: #f1f5f9;
    user-select: none;
    transition: background 0.12s ease;
}
.bf-advanced > summary:hover[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.06);
}
.bf-advanced > summary[b-meg3v7hcmf]::-webkit-details-marker { display: none; }
.bf-advanced > summary[b-meg3v7hcmf]::before {
    content: "▸";
    font-size: 1rem;
    line-height: 1;
    color: #f1f5f9;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.45);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.12s ease;
    flex-shrink: 0;
}
.bf-advanced > summary:hover[b-meg3v7hcmf]::before {
    background: rgba(99, 102, 241, 0.32);
}
.bf-advanced[open] > summary[b-meg3v7hcmf]::before {
    transform: rotate(90deg);
    background: rgba(99, 102, 241, 0.32);
}
.bf-advanced[open] > summary[b-meg3v7hcmf] { border-bottom: 1px solid rgba(148, 163, 184, 0.15); }
.bf-advanced > *:not(summary)[b-meg3v7hcmf] { padding-left: 22px; padding-right: 22px; }
.bf-advanced > *:not(summary):last-child[b-meg3v7hcmf] { padding-bottom: 18px; }
.bf-advanced-hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 4px;
}

/* QR preview <details> — collapsed by default. The summary is styled
   like an obvious button (large prominent chevron in a colored circle,
   hover state, "ver/ocultar" hint) because the bare disclosure triangle
   was easy to miss at this card size. */
.bf-qr-details[b-meg3v7hcmf] { padding: 0; }
.bf-qr-details > summary[b-meg3v7hcmf] {
    cursor: pointer;
    padding: 18px 22px;
    list-style: none;
    user-select: none;
    transition: background 0.12s ease;
}
.bf-qr-details > summary:hover[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.06);
}
.bf-qr-details > summary[b-meg3v7hcmf]::-webkit-details-marker { display: none; }
.bf-qr-summary[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 14px;
}
.bf-qr-summary > div:first-child[b-meg3v7hcmf] { flex: 1; }
.bf-qr-summary[b-meg3v7hcmf]::before {
    content: "▸";
    font-size: 1rem;
    line-height: 1;
    color: #f1f5f9;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.45);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.12s ease;
    flex-shrink: 0;
}
.bf-qr-details > summary:hover .bf-qr-summary[b-meg3v7hcmf]::before {
    background: rgba(99, 102, 241, 0.32);
}
.bf-qr-details[open] .bf-qr-summary[b-meg3v7hcmf]::before {
    transform: rotate(90deg);
    background: rgba(99, 102, 241, 0.32);
}
.bf-qr-count[b-meg3v7hcmf] {
    margin-left: 10px;
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 400;
}
.bf-qr-toggle-hint[b-meg3v7hcmf] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 3px;
}
.bf-qr-details[open] > summary[b-meg3v7hcmf] { border-bottom: 1px solid rgba(148, 163, 184, 0.15); }
.bf-qr-details > *:not(summary)[b-meg3v7hcmf] { padding-left: 22px; padding-right: 22px; }
.bf-qr-details > *:not(summary):last-child[b-meg3v7hcmf] { padding-bottom: 18px; }

/* Search + counter toolbar inside the QR <details>. Filters tables by
   label or zone name. Clear button shows up only when there's input. */
.bf-qr-toolbar[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0 14px;
}
.bf-qr-search[b-meg3v7hcmf] {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.bf-qr-search[b-meg3v7hcmf]::placeholder { color: #64748b; }
.bf-qr-search-count[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: #94a3b8;
    white-space: nowrap;
}
.bf-qr-search-clear[b-meg3v7hcmf] {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}
.bf-qr-search-clear:hover[b-meg3v7hcmf] { background: rgba(148, 163, 184, 0.15); }

/* Zone heading inside the QR grid — only rendered when the restaurant
   has more than one zone (sala). Visually separates "Interior" from
   "Terraza" without making each group its own card. */
.bf-zone-heading[b-meg3v7hcmf] {
    margin: 18px 0 10px;
    color: #cbd5e1;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.bf-zone-heading:first-of-type[b-meg3v7hcmf] { margin-top: 8px; }
.bf-zone-count[b-meg3v7hcmf] {
    color: #64748b;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* KDS theme preview swatch row — three chips under the theme <select>
   showing the colors operators will see on the kitchen board for each
   urgency tier. Updates live as the operator picks a different theme. */
.kds-swatch-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 10px 0 6px;
}
.kds-swatch-label[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-right: 4px;
}
.kds-swatch-chip[b-meg3v7hcmf] {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    /* color and border come from the inline style per chip — see the
       themeSwatches table in BuffetSettings.razor. Default is white text
       which works for the saturated themes; Alto contraste flips to
       black-on-yellow and adds a real black border. */
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Section anchor nav — sticky under the page header so the operator can
   jump between sections on a long settings form. Pill buttons stay flat
   on light hover so they don't compete with the colored Save bar. */
.bf-anchor-nav[b-meg3v7hcmf] {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 0 20px;
    padding: 10px 4px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    display: flex; flex-wrap: wrap; gap: 8px;
    overflow-x: auto;
}
.bf-anchor-nav a[b-meg3v7hcmf] {
    color: #cbd5e1;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.6);
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.12s ease;
}
.bf-anchor-nav a:hover[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.5);
    color: #f1f5f9;
}
.bf-anchor-nav a.active[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.32);
    border-color: rgba(99, 102, 241, 0.7);
    color: #fff;
    font-weight: 600;
}

/* Setup checklist — quick at-a-glance view of "what's still missing".
   Green check + green text for done items; amber ⚠ for warn ones
   (sin límite, etc.). Items are anchor links to their section. */
.bf-checklist-list[b-meg3v7hcmf] {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bf-checklist-list li[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.bf-checklist-list li:last-child[b-meg3v7hcmf] { border-bottom: none; }
.bf-checklist-list li a[b-meg3v7hcmf] {
    color: #cbd5e1;
    text-decoration: none;
    flex: 1;
}
.bf-checklist-list li a:hover[b-meg3v7hcmf] { color: #f1f5f9; text-decoration: underline; }
.bf-check-icon[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    color: #64748b;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
}
.bf-checklist-list li.done .bf-check-icon[b-meg3v7hcmf] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}
.bf-checklist-list li.done a[b-meg3v7hcmf] { color: #e2e8f0; }
.bf-checklist-list li.warn .bf-check-icon[b-meg3v7hcmf] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
}

/* Recommended presets — 4 quick-fill buttons for common AYCE configs.
   Each card-button shows an icon + title + short summary. Hover lifts
   the card slightly so users see they're clickable. */
.bf-preset-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.bf-preset[b-meg3v7hcmf] {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.12s ease;
}
.bf-preset:hover[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}
.bf-preset.is-selected[b-meg3v7hcmf] {
    position: relative;
    background: rgba(99, 102, 241, 0.18);
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
}
.bf-preset.is-selected[b-meg3v7hcmf]::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bf-preset-icon[b-meg3v7hcmf] {
    font-size: 1.6rem;
    line-height: 1;
}
.bf-preset strong[b-meg3v7hcmf] {
    font-size: 0.95rem;
    color: #f1f5f9;
    margin-top: 2px;
}
.bf-preset-desc[b-meg3v7hcmf] {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Styled file upload — hides the native input and renders a button-shaped
   label. Operators see "📤 Seleccionar archivo CSV…" instead of the OS
   default "Choose File / No file chosen" which read as unfinished. The
   InputFile still works because it's inside the <label>. */
.bf-file-upload[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 6px;
    cursor: pointer;
}
.bf-file-upload :where(input[type="file"])[b-meg3v7hcmf] {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
.bf-file-upload-btn[b-meg3v7hcmf] {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #e0e7ff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.bf-file-upload:hover .bf-file-upload-btn[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.3);
}
.bf-file-upload-hint[b-meg3v7hcmf] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Color picker row: native picker + hex text + reset button side by
   side so operators can fine-tune by either method. */
.bf-color-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 10px;
    margin-top: 6px;
}
.bf-color-picker[b-meg3v7hcmf] {
    width: 56px;
    height: 40px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.bf-color-text[b-meg3v7hcmf] {
    flex: 1;
    max-width: 180px;
    font-family: 'JetBrains Mono', monospace;
}
.bf-color-reset[b-meg3v7hcmf] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}
.bf-color-reset:hover[b-meg3v7hcmf] { background: rgba(148, 163, 184, 0.22); }

/* Upload row — thumbnail of the current asset (or empty placeholder),
   the file-picker button, and a remove button. Renders above the URL
   field so operators see the live state before tweaking. */
.bf-upload-row[b-meg3v7hcmf] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 6px;
}
.bf-upload-thumb[b-meg3v7hcmf] {
    width: 64px; height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
    flex-shrink: 0;
}
.bf-upload-thumb.hero[b-meg3v7hcmf] {
    width: 120px; height: 64px;
}
.bf-upload-thumb.empty[b-meg3v7hcmf] {
    display: flex; align-items: center; justify-content: center;
    color: #64748b;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Subsection title inside a card — used by the promo banner block
   under Apariencia so the operator sees a clear visual break. */
.bf-subsection-title[b-meg3v7hcmf] {
    margin: 20px 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

/* Two-column grid for the promo banner colour pickers — compact so
   they sit side by side instead of stacking. */
.bf-promo-grid[b-meg3v7hcmf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Subsection title smaller than .bf-subsection-title — used inside the
   promo banner block to separate "what the banner says" from "when to
   show it" without making the whole card feel deeply nested. */
.bf-mini-title[b-meg3v7hcmf] {
    margin: 16px 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Day-of-week toggle chips for the promo scheduling. Two-letter Spanish
   abbreviations (Lu Ma Mi Ju Vi Sa Do) so they read fast and fit on a
   single row on mobile. "on" = day is included; off = excluded. */
.bf-days-row[b-meg3v7hcmf] {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.bf-day-chip[b-meg3v7hcmf] {
    min-width: 38px;
    padding: 6px 10px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.12s ease;
}
.bf-day-chip:hover[b-meg3v7hcmf] { background: rgba(148, 163, 184, 0.2); }
.bf-day-chip.on[b-meg3v7hcmf] {
    background: rgba(99, 102, 241, 0.32);
    border-color: rgba(99, 102, 241, 0.7);
    color: #fff;
}

/* Live preview of the customer QR welcome card. Honors --qr-accent +
   optional --qr-hero (background image with overlay). Sized like a
   mobile portrait so operators visualise what the customer sees. */
.bf-qr-preview[b-meg3v7hcmf] {
    --qr-accent: #f59e0b;
    position: relative;
    max-width: 280px;
    margin-top: 6px;
    border-radius: 16px;
    padding: 28px 22px 24px;
    background: var(--qr-hero, linear-gradient(135deg, #1e293b 0%, #0f172a 100%));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.bf-qr-preview-overlay[b-meg3v7hcmf] {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 0;
}
.bf-qr-preview > *:not(.bf-qr-preview-overlay)[b-meg3v7hcmf] { position: relative; z-index: 1; }
.bf-qr-preview-logo[b-meg3v7hcmf] {
    width: 60px; height: 60px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px;
}
.bf-qr-preview-mark[b-meg3v7hcmf] {
    width: 56px; height: 56px;
    background: var(--qr-accent);
    color: #0f172a;
    border-radius: 14px;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.bf-qr-preview-title[b-meg3v7hcmf] {
    color: #f1f5f9;
    font-size: 1.1rem;
    margin: 6px 0 0;
}
.bf-qr-preview-sub[b-meg3v7hcmf] {
    color: #cbd5e1;
    font-size: 0.85rem;
    margin: 0;
}
.bf-qr-preview-btn[b-meg3v7hcmf] {
    margin-top: 12px;
    background: var(--qr-accent);
    color: #0f172a;
    border: none;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    cursor: default;
    font-size: 0.95rem;
}

/* ========================================================================
   Mobile (≤600px) — additive only. Fixes the iPhone-width header overflow:
   the Informes / Ver mesas activas buttons ran off the right edge and the
   "Modo Buffet" title got squeezed/wrapped, while the orange "B" icon was
   clipped at the far left. On phones we stack the header vertically — title
   row on top, action buttons wrapping onto their own row beneath — and make
   the container + cards full-width so nothing is cut off. Desktop/base rules
   above are untouched; this block is appended last so it wins source order. */
@media (max-width: 600px) {
    /* Root + cards must never exceed the viewport. */
    .buf-container[b-meg3v7hcmf] {
        max-width: 100%;
        padding: 14px;
        overflow-x: hidden;
    }
    .card[b-meg3v7hcmf] {
        max-width: 100%;
        padding: 16px;
    }

    /* Stack the header: title block on its own row, actions wrap beneath. */
    .buf-header[b-meg3v7hcmf] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }
    /* Keep the "B" icon at its real size so it can't be squashed/clipped,
       and let the title text take the remaining width and wrap naturally. */
    .buf-header .header-main[b-meg3v7hcmf] {
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }
    .buf-header .header-main > div[b-meg3v7hcmf] {
        min-width: 0;
    }
    .buf-header .icon[b-meg3v7hcmf] {
        flex-shrink: 0;
    }
    .buf-header h2[b-meg3v7hcmf] {
        font-size: 1.3rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    /* Action buttons drop to their own row and wrap instead of overflowing. */
    .buf-header .header-right[b-meg3v7hcmf] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .buf-header .header-right .kiosk-link[b-meg3v7hcmf] {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* The ACTIVO/INACTIVO badge sits inline with the buttons, not stretched. */
    .buf-header .header-right .badge[b-meg3v7hcmf] {
        flex: 0 0 auto;
    }
}
/* /Pages/Admin/BuffetTv.razor.rz.scp.css */
/* Full-screen kitchen / floor TV. Optimized for ≥1080p displays viewed
   from 2-3m away. Saturated colors so glanceable across the room; large
   numeric typography because every metric needs to read at a distance. */

.tv-root[b-269w5kshwz] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at top, #0f172a 0%, #020617 100%);
    color: #f1f5f9;
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}

.tv-header[b-269w5kshwz] {
    flex: 0 0 auto;
    padding: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-brand[b-269w5kshwz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tv-dot[b-269w5kshwz] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
    animation: tv-pulse-b-269w5kshwz 1.8s ease-in-out infinite;
}

@keyframes tv-pulse-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.tv-title[b-269w5kshwz] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tv-stats[b-269w5kshwz] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.tv-stat[b-269w5kshwz] {
    font-size: 1.05rem;
    color: #cbd5e1;
}

.tv-stat strong[b-269w5kshwz] {
    color: #f1f5f9;
    font-weight: 800;
    margin-right: 4px;
}

.tv-stat.warn[b-269w5kshwz] {
    color: #fbbf24;
    font-weight: 700;
}

.tv-clock[b-269w5kshwz] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.tv-cols[b-269w5kshwz] {
    display: flex;
    gap: 4px;
    margin-left: 12px;
}

.tv-col-btn[b-269w5kshwz] {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    color: #94a3b8;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.tv-col-btn.active[b-269w5kshwz] {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.tv-back[b-269w5kshwz] {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.tv-back:hover[b-269w5kshwz] {
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.55);
}

/* Grid + tiles */

.tv-grid[b-269w5kshwz] {
    flex: 1 1 auto;
    display: grid;
    gap: 16px;
    padding: 16px 24px;
    overflow: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, 1fr);
}

.tv-grid-cols-2[b-269w5kshwz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-grid-cols-3[b-269w5kshwz] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-grid-cols-4[b-269w5kshwz] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-grid-cols-5[b-269w5kshwz] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-grid-cols-6[b-269w5kshwz] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.tv-tile[b-269w5kshwz] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(148, 163, 184, 0.25);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

/* State-driven borders + accent */
.tv-tile.active[b-269w5kshwz] {
    border-color: rgba(16, 185, 129, 0.4);
}
.tv-tile.cooldown[b-269w5kshwz] {
    border-color: rgba(99, 102, 241, 0.5);
}
.tv-tile.awaiting[b-269w5kshwz] {
    border-color: rgba(245, 158, 11, 0.7);
    background: linear-gradient(160deg, #2a1e0b 0%, #1c1306 100%);
    animation: tv-glow-amber-b-269w5kshwz 1.6s ease-in-out infinite;
}
.tv-tile.last-call[b-269w5kshwz] {
    border-color: rgba(239, 68, 68, 0.7);
    background: linear-gradient(160deg, #2a0f0f 0%, #1c0808 100%);
    animation: tv-glow-red-b-269w5kshwz 1.2s ease-in-out infinite;
}
.tv-tile.expired[b-269w5kshwz] {
    border-color: rgba(148, 163, 184, 0.4);
    background: linear-gradient(160deg, #1e293b 0%, #0a0a0a 100%);
    opacity: 0.55;
}

@keyframes tv-glow-amber-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 24px 4px rgba(245, 158, 11, 0.4); }
}

@keyframes tv-glow-red-b-269w5kshwz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 32px 6px rgba(239, 68, 68, 0.5); }
}

.tv-tile-top[b-269w5kshwz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.tv-label[b-269w5kshwz] {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: -0.02em;
    line-height: 1;
}

.tv-status[b-269w5kshwz] {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.tv-tile.awaiting .tv-status[b-269w5kshwz] { color: #fbbf24; }
.tv-tile.last-call .tv-status[b-269w5kshwz] { color: #fca5a5; }
.tv-tile.active .tv-status[b-269w5kshwz] { color: #6ee7b7; }
.tv-tile.cooldown .tv-status[b-269w5kshwz] { color: #a5b4fc; }

.tv-tile-mid[b-269w5kshwz] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.tv-ring[b-269w5kshwz] {
    position: relative;
    width: 130px;
    height: 130px;
}

.tv-ring svg[b-269w5kshwz] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tv-ring-bg[b-269w5kshwz] {
    fill: none;
    stroke: rgba(148, 163, 184, 0.15);
    stroke-width: 10;
}

.tv-ring-fg[b-269w5kshwz] {
    fill: none;
    stroke: #a5b4fc;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-ring-text[b-269w5kshwz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: #f1f5f9;
}

.tv-icon-big[b-269w5kshwz] {
    font-size: 4.2rem;
    line-height: 1;
}

/* Replaces the bare ✓ — pairs an icon with a small status label so a
   cook walking past the TV doesn't have to guess what "✓" means. The
   idle variant is desaturated (this state needs no kitchen action);
   awaiting is amber to draw attention. */
.tv-state-block[b-269w5kshwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.tv-state-block.idle .tv-icon-big[b-269w5kshwz] {
    opacity: 0.55;
}
.tv-state-block.idle .tv-state-text[b-269w5kshwz] {
    color: #94a3b8;
}
.tv-state-block.awaiting .tv-icon-big[b-269w5kshwz] {
    animation: tv-bell-shake 1.2s ease-in-out infinite;
}
.tv-state-block.awaiting .tv-state-text[b-269w5kshwz] {
    color: #fbbf24;
    font-weight: 700;
}
.tv-state-text[b-269w5kshwz] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
@@keyframes tv-bell-shake {
    0%[b-269w5kshwz], 100%[b-269w5kshwz] { transform: rotate(0); }
    25%[b-269w5kshwz]      { transform: rotate(-12deg); }
    75%[b-269w5kshwz]      { transform: rotate(12deg); }
}

/* Caption under the cooldown ring countdown — "próx. ronda" so the
   number's role is obvious (otherwise it could read as a wall-clock
   time). */
.tv-ring-caption[b-269w5kshwz] {
    position: absolute;
    bottom: -6px;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a5b4fc;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tv-tile-bot[b-269w5kshwz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.92rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-top: 10px;
}

.tv-mini.warn[b-269w5kshwz] {
    color: #fbbf24;
}

.tv-empty[b-269w5kshwz] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 1.2rem;
}

.tv-empty-icon[b-269w5kshwz] {
    font-size: 6rem;
    opacity: 0.6;
}

.tv-empty .muted[b-269w5kshwz] {
    color: #64748b;
}

.tv-footer[b-269w5kshwz] {
    flex: 0 0 auto;
    padding: 10px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #475569;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* TV legend strip — explains each state icon so a new cook walking up
   doesn't have to ask what the symbols mean. Subdued by default; the
   awaiting/last-call rows get accent colors that match the tile
   variants above. */
.tv-legend[b-269w5kshwz] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    color: #94a3b8;
    font-size: 0.85rem;
}
.tv-legend-item[b-269w5kshwz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tv-legend-icon[b-269w5kshwz] {
    font-size: 1.05rem;
}
.tv-legend-item.warn[b-269w5kshwz] { color: #fbbf24; }
.tv-legend-item.urgent[b-269w5kshwz] { color: #fca5a5; }

.tv-help kbd[b-269w5kshwz] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: #94a3b8;
    margin: 0 2px;
}
/* /Pages/Admin/Campaigns.razor.rz.scp.css */
/* Dark theme admin page — Marketing Campaigns */
.campaigns-page[b-yyjujpk7gv] { padding: 24px; max-width: 1200px; margin: 0 auto; color: #e2e8f0; }

.page-header[b-yyjujpk7gv] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-header h1[b-yyjujpk7gv] { font-size: 1.5rem; margin: 0; color: #f1f5f9; }

.message-banner[b-yyjujpk7gv] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-yyjujpk7gv] { background: #064e3b; color: #6ee7b7; border: 1px solid #065f46; }
.message-banner.error[b-yyjujpk7gv] { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.dismiss[b-yyjujpk7gv] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

.loading-state[b-yyjujpk7gv] { text-align: center; padding: 60px 0; color: #64748b; }
.spinner[b-yyjujpk7gv] { width: 32px; height: 32px; border: 3px solid #334155; border-top-color: #3b82f6; border-radius: 50%; animation: spin-b-yyjujpk7gv 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin-b-yyjujpk7gv { to { transform: rotate(360deg); } }

/* Tabs */
.tabs[b-yyjujpk7gv] { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #334155; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab[b-yyjujpk7gv] {
    padding: 10px 20px; border: none; background: transparent; color: #94a3b8; font-size: 0.85rem;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
.tab:hover[b-yyjujpk7gv] { color: #e2e8f0; }
.tab.active[b-yyjujpk7gv] { color: #3b82f6; border-bottom-color: #3b82f6; }
.tab-badge[b-yyjujpk7gv] { font-size: 0.7rem; background: #334155; color: #94a3b8; padding: 2px 6px; border-radius: 10px; }
.tab.active .tab-badge[b-yyjujpk7gv] { background: #1e3a5f; color: #60a5fa; }

/* Form */
.input[b-yyjujpk7gv] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    background: #0f172a; border: 1px solid #334155; border-radius: 8px;
    color: #e2e8f0; font-size: 0.85rem; box-sizing: border-box;
}
.input:focus[b-yyjujpk7gv] { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
textarea.input[b-yyjujpk7gv] { resize: vertical; min-height: 80px; }

.form-group[b-yyjujpk7gv] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-yyjujpk7gv] { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }

/* Buttons */
.btn[b-yyjujpk7gv] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid #334155; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: #1e293b; color: #e2e8f0; white-space: nowrap;
}
.btn:hover[b-yyjujpk7gv] { background: #334155; }
.btn:active[b-yyjujpk7gv] { transform: scale(0.97); }
.btn:disabled[b-yyjujpk7gv] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[b-yyjujpk7gv] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn-primary:hover[b-yyjujpk7gv] { background: #1d4ed8; }
.btn-ghost[b-yyjujpk7gv] { background: transparent; border-color: #475569; color: #94a3b8; }
.btn-ghost:hover[b-yyjujpk7gv] { border-color: #3b82f6; color: #e2e8f0; }
.btn-sm[b-yyjujpk7gv] { padding: 6px 10px; min-height: 32px; font-size: 0.75rem; }
.btn-danger[b-yyjujpk7gv] { color: #fca5a5; border-color: #7f1d1d; }
.btn-danger:hover[b-yyjujpk7gv] { background: #450a0a; }

/* Campaign cards */
.campaign-card[b-yyjujpk7gv] {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    padding: 16px; transition: border-color 0.15s;
}
.campaign-card:hover[b-yyjujpk7gv] { border-color: #475569; }
.campaign-card.inactive[b-yyjujpk7gv] { opacity: 0.6; }

.type-badge[b-yyjujpk7gv] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 4px;
}
.type-win_back[b-yyjujpk7gv] { background: #78350f; color: #fbbf24; }
.type-birthday[b-yyjujpk7gv] { background: #3b1f4a; color: #c084fc; }
.type-post_visit[b-yyjujpk7gv] { background: #365314; color: #86efac; }
.type-welcome[b-yyjujpk7gv] { background: #1e3a5f; color: #60a5fa; }
.type-announcement[b-yyjujpk7gv] { background: #1e293b; color: #94a3b8; border: 1px solid #475569; }

.channel-badge[b-yyjujpk7gv] {
    font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase;
}
.channel-email[b-yyjujpk7gv] { background: #1e3a5f; color: #60a5fa; }
.channel-sms[b-yyjujpk7gv] { background: #365314; color: #86efac; }

.status-dot[b-yyjujpk7gv] {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.status-dot.active[b-yyjujpk7gv] { background: #22c55e; }
.status-dot.paused[b-yyjujpk7gv] { background: #64748b; }

/* Stat cards */
.stat-card[b-yyjujpk7gv] {
    background: #0f172a; border: 1px solid #334155; border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.stat-value[b-yyjujpk7gv] { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; }
.stat-label[b-yyjujpk7gv] { font-size: 0.7rem; color: #64748b; margin-top: 2px; }

/* Data table */
.data-table[b-yyjujpk7gv] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead tr[b-yyjujpk7gv] { color: #94a3b8; border-bottom: 1px solid #334155; }
.data-table th[b-yyjujpk7gv] { text-align: left; padding: 8px 12px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td[b-yyjujpk7gv] { padding: 10px 12px; border-bottom: 1px solid #1e293b; }
.data-table tbody tr[b-yyjujpk7gv] { transition: background 0.1s; }
.data-table tbody tr:hover[b-yyjujpk7gv] { background: #1e293b; }

/* Empty state */
.empty-state[b-yyjujpk7gv] { text-align: center; padding: 60px 0; color: #64748b; }

/* Premium section */
.premium-section[b-yyjujpk7gv] { background: #1e293b; border-radius: 12px; padding: 24px; }

/* Placeholder pills — click to insert a {token}. Were ~56×21 (fiddly on a
   touch tablet); lift to a 44px touch target with inline-flex centering. */
.placeholder-pill[b-yyjujpk7gv] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 6px 12px; border-radius: 8px;
    background: #334155; color: #cbd5e1; font-size: 0.8rem; font-family: monospace;
    cursor: pointer; transition: background 0.15s;
}
.placeholder-pill:hover[b-yyjujpk7gv] { background: #475569; color: #e2e8f0; }

@media (max-width: 768px) {
    .campaigns-page[b-yyjujpk7gv] { padding: 12px; }
}

/* iPhone ~390px: the "Nueva campana" form rows are laid out with inline
   `display:grid;grid-template-columns:1fr 1fr` / `1fr 1fr 1fr` (e.g. Canal |
   Dias de inactividad | Enfriamiento). On a narrow phone the right-hand
   field(s) overflow past the screen edge. Collapse every multi-column form
   row to a single column and hard-cap field widths so nothing overflows.
   Additive, scoped, phone-only. The inline grid-template-columns needs
   !important to be overridden. */
@media (max-width: 600px) {
    .campaigns-page .premium-section > div[style*="1fr 1fr"][b-yyjujpk7gv] {
        grid-template-columns: 1fr !important;
    }

    /* Inputs/selects/textareas must never push past the viewport. */
    .campaigns-page .input[b-yyjujpk7gv] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Defensive: any grid cell shouldn't impose its own min-content width. */
    .campaigns-page .form-group[b-yyjujpk7gv] { min-width: 0; }
}
/* /Pages/Admin/Catalog.razor.rz.scp.css */
/* ============================================
   CATALOG.RAZOR STYLES - Phases 1-8
   ============================================ */

/* ============================================
   Phase 1: Category Panel Improvements
   ============================================ */
[b-6m0wrct77r] .cat-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .cat-panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-6m0wrct77r] .cat-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

[b-6m0wrct77r] .cat-panel-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[b-6m0wrct77r] .cat-all-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .cat-all-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

[b-6m0wrct77r] .cat-all-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .cat-search-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

[b-6m0wrct77r] .cat-search {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

[b-6m0wrct77r] .cat-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .cat-archive-toggle,
[b-6m0wrct77r] .cat-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-archive-toggle:hover,
[b-6m0wrct77r] .cat-add-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .cat-archive-toggle.active {
    background: #fef3c7;
    border-color: #f59e0b;
}

[b-6m0wrct77r] .cat-add-btn {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

[b-6m0wrct77r] .cat-add-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
}

[b-6m0wrct77r] .cat-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Two-row card: row 1 (.cat-item-top) = drag handle + name/count +
   active toggle; row 2 (.cat-item-controls) = zone/QR/edit/archive,
   always its own row so they align across every category. */
[b-6m0wrct77r] .cat-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background .1s, transform .15s, box-shadow .15s;
}

[b-6m0wrct77r] .cat-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Active toggle pinned to the far right of row 1. */
[b-6m0wrct77r] .cat-item-top .cat-active-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-item.dragging {
    opacity: 0.5;
    background: #f8fafc;
}

[b-6m0wrct77r] .cat-item.drop-target {
    background: #eff6ff;
    border-top: 2px solid #3b82f6;
}

[b-6m0wrct77r] .cat-item:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .cat-item.active {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

[b-6m0wrct77r] .cat-drag-handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

[b-6m0wrct77r] .cat-drag-handle:hover {
    background: #e2e8f0;
    color: #475569;
}

[b-6m0wrct77r] .cat-drag-handle:active {
    cursor: grabbing;
}

[b-6m0wrct77r] .cat-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-item-name {
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* No max-width - let flex container handle it */
}

/* Placeholder name "Sin nombre" — paint amber + italic so it visibly
   reads as "this needs renaming" rather than as a legitimate menu
   label. Once the operator commits a real name the class is removed
   and the regular slate text returns. Codex audit flagged "Nueva
   categoría" as the kind of thing an operator might ship live to
   customers without realising it was a default placeholder. */
[b-6m0wrct77r] .cat-item-name.unnamed {
    color: #b45309; /* amber-700 — same family as the .zone-pill.no-zone "Sin impresora" pill */
    font-style: italic;
    font-weight: 600;
}

[b-6m0wrct77r] .cat-name-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: transparent;
}

/* Premium iOS-style toggle for the category active flag. Replaces the
   bare HTML checkbox (which read as "selected for an action" rather
   than "visible to customers"). Hidden during inline-rename — operator
   is naming the category, not configuring it. */
[b-6m0wrct77r] .cat-active-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

[b-6m0wrct77r] .cat-active-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

[b-6m0wrct77r] .cat-active-track {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background-color 0.18s ease;
    position: relative;
    display: inline-block;
}

[b-6m0wrct77r] .cat-active-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

[b-6m0wrct77r] .cat-active-toggle input:checked + .cat-active-track {
    background: #10b981;
}

[b-6m0wrct77r] .cat-active-toggle input:checked + .cat-active-track .cat-active-knob {
    transform: translateX(16px);
}

[b-6m0wrct77r] .cat-active-toggle input:disabled + .cat-active-track {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-6m0wrct77r] .cat-active-toggle:hover input:not(:disabled) + .cat-active-track {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* Input + action buttons must stack ABOVE the fullscreen backdrop or
   clicks "inside the input" hit the backdrop instead and immediately
   commit the (empty) buffer — same bug bit both editing existing
   categories AND naming a freshly-created one. position:relative makes
   z-index take effect; 99 > backdrop's 98. */
[b-6m0wrct77r] .cat-name-input {
    position: relative;
    z-index: 99;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    padding: 8px 12px;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    outline: none;
    width: 100%;
    max-width: 180px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.15), 0 4px 12px rgba(0,0,0,.1);
    transition: all .15s;
}

[b-6m0wrct77r] .cat-edit-actions {
    position: relative;
    z-index: 99;
}

[b-6m0wrct77r] .cat-name-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 4px 16px rgba(0,0,0,.12);
}

/* When editing category name, expand info area */
[b-6m0wrct77r] .cat-item-info.editing {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 100;
}

[b-6m0wrct77r] .cat-edit-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .cat-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}

[b-6m0wrct77r] .cat-edit-btn.save {
    background: #22c55e;
    color: #fff;
}

[b-6m0wrct77r] .cat-edit-btn.save:hover {
    background: #16a34a;
}

[b-6m0wrct77r] .cat-edit-btn.cancel {
    background: #f1f5f9;
    color: #64748b;
}

[b-6m0wrct77r] .cat-edit-btn.cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

[b-6m0wrct77r] .cat-item-count {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 10px;
}

[b-6m0wrct77r] .cat-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}

[b-6m0wrct77r] .cat-item:hover .cat-item-actions,
[b-6m0wrct77r] .cat-item:focus-within .cat-item-actions {
    opacity: 1;
}

[b-6m0wrct77r] .cat-item-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .1s;
}

[b-6m0wrct77r] .cat-item-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .cat-item-btn:active {
    background: #cbd5e1;
    transform: scale(0.92);
}

/* Touch-capable devices: always show category actions. any-pointer:coarse
   is true whenever ANY input is a touchscreen — so it also catches
   touchscreen + mouse hybrid POS terminals, which a primary-pointer query
   (pointer:coarse) misses because their primary pointer reports as fine. */
@media (any-pointer: coarse) {
    [b-6m0wrct77r] .cat-item-actions {
        opacity: 1;
    }
    [b-6m0wrct77r] .cat-item-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Category item info (name + count) */
[b-6m0wrct77r] .cat-item-info {
    /* Controls now live on their own row, so the name no longer competes
       for horizontal space — it can take the full top row width. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Wrapper for the right-side controls (zone pill, QR toggle, edit/archive
   actions). Pre-fix these were three siblings of cat-item-info competing
   for space on the same row — on the 380px-wide cat panel that pushed
   the category name to a single ellipsis-truncated letter (E…, T…, C…).
   Wrapping them lets flex-wrap break the whole control group to a new
   line as a unit when there isn't room beside the name. */
[b-6m0wrct77r] .cat-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    /* Indent so row 2 reads as a sub-row of the card, and aligns to the
       category name (past the drag handle) rather than the panel edge. */
    padding-left: 26px;
}

/* Edit/archive pushed to the right edge of the controls row; zone/QR
   stay left-aligned and therefore line up across every category. */
[b-6m0wrct77r] .cat-item-controls .cat-item-actions {
    margin-left: auto;
}

[b-6m0wrct77r] .cat-item-count {
    font-size: 11px;
    color: #94a3b8;
    background: transparent;
    padding: 0;
}

/* Zone pill/dropdown */
[b-6m0wrct77r] .cat-item-zone {
    position: relative;
}

[b-6m0wrct77r] .zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

[b-6m0wrct77r] .zone-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .zone-pill.has-zone {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

[b-6m0wrct77r] .zone-pill.no-zone {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

[b-6m0wrct77r] .zone-pill.no-zone:hover {
    background: #fde68a;
}

[b-6m0wrct77r] .zone-icon {
    font-size: 14px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .zone-label {
    /* Text label next to the printer icon. Truncates with ellipsis on
       narrow rows so a long zone name like "Cocina principal" doesn't
       blow out the category row layout. The full name still shows in
       the title tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    font-weight: 600;
}

[b-6m0wrct77r] .zone-hint {
    font-size: 10px;
    font-weight: 700;
    color: #d97706;
    margin-left: -2px;
}

[b-6m0wrct77r] .zone-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* QR toggle button for categories */
[b-6m0wrct77r] .qr-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    position: relative;
}

[b-6m0wrct77r] .qr-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* ON state - clearly visible, bright green with glow */
[b-6m0wrct77r] .qr-toggle-btn.on {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

[b-6m0wrct77r] .qr-toggle-btn.on:hover {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

/* OFF state - grayed out with strike-through indicator */
[b-6m0wrct77r] .qr-toggle-btn.off {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.6;
}

[b-6m0wrct77r] .qr-toggle-btn.off::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #ef4444;
    transform: rotate(-45deg);
    border-radius: 1px;
}

[b-6m0wrct77r] .qr-toggle-btn.off:hover {
    background: #e2e8f0;
    opacity: 0.8;
}

[b-6m0wrct77r] .qr-toggle-btn .qr-icon {
    /* "QR" text instead of the previous 📱 phone emoji — Codex audit
       feedback: emoji didn't communicate "QR menu visibility" without
       a tooltip. Bold uppercase "QR" reads at a glance. Letter-spacing
       slightly negative so the two characters read as a tight badge,
       not two letters that happen to be adjacent.
       Pure black for highest contrast — dark green on light green was
       readable at desktop zoom but blurred to "just a green chip" at
       the small 28×11px chip size on a dark page canvas. */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

[b-6m0wrct77r] .qr-toggle-btn.off .qr-icon {
    /* Muted slate for OFF state so the strikeline overlay (::after) is
       the dominant visual cue rather than the text itself. */
    color: #64748b;
}

/* Drinks/extras (buffet) toggle uses a cyan accent so it doesn't
   visually clash with the green QR-on / slate-off pattern. ON = the
   category is treated as à-la-carte extras when buffet's
   DrinksIncluded=false. OFF = a regular kitchen category. */
[b-6m0wrct77r] .qr-toggle-btn.drinks.on {
    background: #cffafe;
    border-color: #67e8f9;
}

[b-6m0wrct77r] .qr-toggle-btn.drinks.on:hover {
    background: #a5f3fc;
}

[b-6m0wrct77r] .qr-toggle-btn.drinks .qr-icon {
    color: #0e7490;
}

[b-6m0wrct77r] .qr-toggle-btn.drinks.off .qr-icon {
    color: #94a3b8;
}

[b-6m0wrct77r] .zone-dropdown {
    /* Fixed (not absolute) so it escapes the .cat-list overflow:auto scroll
       container — otherwise the printer-route list is clipped and appears
       to slide under the next section. left/top are set inline from the
       pill's getBoundingClientRect (see ToggleZoneDropdown). */
    position: fixed;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0,0,0,.1);
    z-index: 100;
    padding: 4px 0;
}

[b-6m0wrct77r] .zone-dropdown-header {
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 4px;
}

[b-6m0wrct77r] .zone-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .zone-option:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .zone-option.selected {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 500;
}

/* Actions dropdown */
[b-6m0wrct77r] .actions-dropdown-wrap {
    position: relative;
}

[b-6m0wrct77r] .actions-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

[b-6m0wrct77r] .actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 100;
    padding: 4px 0;
}

[b-6m0wrct77r] .actions-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

[b-6m0wrct77r] .actions-dropdown-item:hover {
    background: #f1f5f9;
}

/* ============================================
   Phase 2: Toolbar & Quick Filters
   ============================================ */
[b-6m0wrct77r] .catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .toolbar-search {
    flex: 1 1 200px;
    min-width: 0;
    position: relative;
}

[b-6m0wrct77r] .toolbar-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

[b-6m0wrct77r] .toolbar-search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .toolbar-search::before {
    content: "🔍";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: .5;
}

[b-6m0wrct77r] .search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: #e2e8f0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

[b-6m0wrct77r] .search-clear:hover {
    background: #cbd5e1;
    color: #334155;
}

[b-6m0wrct77r] .search-clear:active {
    transform: translateY(-50%) scale(0.95);
    background: #94a3b8;
}

/* Adjust input padding when clear button is visible */
[b-6m0wrct77r] .toolbar-search input {
    padding-right: 52px;
}

/* Filter bar - grouped filters */
/* Collapsible filters: a quiet header chip that hides the filter bar
   (and advanced panel) so the items grid isn't pushed down. Dashed
   border + blue dot when collapsed-with-active-filters so the operator
   knows filtering is still in effect even though the chips are hidden. */
[b-6m0wrct77r] .filters-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #8b949e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .filters-collapse-toggle:hover {
    background: #21262d;
    color: #e6edf3;
    border-color: #484f58;
}

[b-6m0wrct77r] .filters-collapse-toggle .fct-chevron {
    font-size: 10px;
    line-height: 1;
}

[b-6m0wrct77r] .filters-collapse-toggle.collapsed {
    border-style: dashed;
}

[b-6m0wrct77r] .filters-collapse-toggle .fct-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58a6ff;
    display: inline-block;
}

[b-6m0wrct77r] .filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 0 1 auto;
    max-width: fit-content;
}

[b-6m0wrct77r] .filter-bar-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

[b-6m0wrct77r] .filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
}

[b-6m0wrct77r] .filter-bar-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

[b-6m0wrct77r] .filter-divider {
    width: 1px;
    height: 16px;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* Make filter chips more compact */
[b-6m0wrct77r] .filter-bar .filter-chip {
    padding: 6px 10px;
    min-height: 32px;
    font-size: 12px;
    border-radius: 16px;
}

[b-6m0wrct77r] .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}

[b-6m0wrct77r] .filter-chip:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .filter-chip:active {
    background: #cbd5e1;
    transform: scale(0.97);
}

[b-6m0wrct77r] .filter-chip.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .filter-chip.active:active {
    background: #2563eb;
}

[b-6m0wrct77r] .filter-chip input {
    display: none;
}

[b-6m0wrct77r] .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

[b-6m0wrct77r] .toolbar-btn {
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .toolbar-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

[b-6m0wrct77r] .toolbar-btn:active {
    background: #e2e8f0;
    transform: scale(0.97);
}

[b-6m0wrct77r] .toolbar-btn.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .toolbar-btn.primary:active {
    background: #1d4ed8;
    transform: scale(0.97);
}

/* Preset group - keeps dropdown and buttons together when toolbar wraps */
[b-6m0wrct77r] .preset-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================
   Phase 3: Table Styling
   ============================================ */
[b-6m0wrct77r] .items-table-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    max-height: calc(100vh - 320px);
}

[b-6m0wrct77r] .items-table-wrap.loading {
    pointer-events: none;
}

[b-6m0wrct77r] .items-table-wrap.loading tbody {
    opacity: 0.5;
}

[b-6m0wrct77r] .datagrid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

[b-6m0wrct77r] .datagrid thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 2;
}

[b-6m0wrct77r] .datagrid thead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #e2e8f0;
}

[b-6m0wrct77r] .datagrid th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .025em;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}

[b-6m0wrct77r] .datagrid th:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .datagrid th.sortable::after {
    content: "↕";
    margin-left: 4px;
    opacity: .3;
}

[b-6m0wrct77r] .datagrid th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

[b-6m0wrct77r] .datagrid th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

[b-6m0wrct77r] .datagrid tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}

[b-6m0wrct77r] .datagrid tbody tr:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .datagrid tbody tr.selected {
    background: #eff6ff;
}

[b-6m0wrct77r] .datagrid td {
    padding: 10px 14px;
    vertical-align: middle;
    color: #1e293b;
}

[b-6m0wrct77r] .datagrid td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

[b-6m0wrct77r] .datagrid td.center {
    text-align: center;
}

/* Status column headers with icon + label */
[b-6m0wrct77r] .datagrid th.status-col {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 8px 8px !important;
    text-align: center;
    vertical-align: middle;
}

[b-6m0wrct77r] .datagrid th .col-icon {
    display: block;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 3px;
    opacity: 0.8;
}

[b-6m0wrct77r] .datagrid th .col-label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Toggle cell - entire cell is clickable */
[b-6m0wrct77r] .datagrid td.toggle-cell {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding: 10px 8px !important;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover {
    background: rgba(59, 130, 246, 0.04);
}

[b-6m0wrct77r] .datagrid td.toggle-cell.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

[b-6m0wrct77r] .datagrid td.toggle-cell.disabled:hover {
    background: transparent;
}

/* Pill toggle - iOS style switch (larger for touch) */
[b-6m0wrct77r] .pill-toggle {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 11px;
    padding: 2px;
    transition: background .2s ease;
    cursor: pointer;
}

[b-6m0wrct77r] .pill-toggle .pill-knob {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    transition: transform .2s ease;
}

[b-6m0wrct77r] .pill-toggle.on {
    background: #22c55e;
}

[b-6m0wrct77r] .pill-toggle.on .pill-knob {
    transform: translateX(18px);
}

[b-6m0wrct77r] .pill-toggle.warning.on {
    background: #eab308;
}

[b-6m0wrct77r] .pill-toggle.disabled {
    cursor: not-allowed;
    background: #e5e7eb;
}

/* De-emphasize "off" toggles in light theme */
[b-6m0wrct77r] .pill-toggle:not(.on) {
    opacity: 0.65;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.on) {
    opacity: 1;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.disabled) {
    filter: brightness(0.97);
}

[b-6m0wrct77r] .datagrid .cell-img {
    width: 60px;
    padding: 6px !important;
}

/* Image upload label wrapper */
[b-6m0wrct77r] .img-upload-label {
    display: block;
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

[b-6m0wrct77r] .img-upload-label:hover .img-upload-overlay {
    opacity: 1;
}

[b-6m0wrct77r] .item-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: filter .15s;
}

[b-6m0wrct77r] .img-upload-label:hover .item-thumb {
    filter: brightness(0.7);
}

[b-6m0wrct77r] .img-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 18px;
    opacity: 0;
    transition: opacity .15s;
    border-radius: 8px;
}

/* Image placeholder for items without image */
[b-6m0wrct77r] .img-placeholder {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #94a3b8;
    transition: all .15s;
}

[b-6m0wrct77r] .img-placeholder span {
    font-size: 16px;
}

[b-6m0wrct77r] .img-placeholder small {
    font-size: 9px;
    margin-top: 2px;
    font-weight: 600;
}

[b-6m0wrct77r] .img-upload-label:hover .img-placeholder {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #64748b;
}

/* Empty-state placeholder: indigo accent so operators recognize it as
   an actionable invite, not a "no image available" status icon. The
   default slate-on-slate styling read as an inert badge in user
   testing — operators ignored the cell and shipped image-less items
   to QR menus and POS. Indigo border + faint indigo wash + bolder
   icon surfaces it as a real CTA without being loud. */
[b-6m0wrct77r] .img-upload-label.empty .img-placeholder {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.45);
    color: #a5b4fc;
}

[b-6m0wrct77r] .img-upload-label.empty .img-placeholder span {
    font-size: 18px;
}

[b-6m0wrct77r] .img-upload-label.empty:hover .img-placeholder {
    background: rgba(99, 102, 241, 0.14);
    border-color: #a5b4fc;
    color: #4338ca;
    transform: scale(1.04);
}

/* Quick-add inline row — only renders in IsSimplified mode (sheet
   contexts: wizard step 3, POS empty-state, etc.). Three inputs +
   button on a single horizontal line; on small screens it wraps so
   each control gets full width. Press Enter on Name or Price to
   submit; the button is the explicit submit control for mouse users.
   Dark indigo accent keeps it visually grouped with the rest of the
   "primary action" surfaces in the page (Nuevo artículo button,
   active filter chips). */
[b-6m0wrct77r] .quick-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 12px;
    margin-bottom: 12px;
}
[b-6m0wrct77r] .quick-add-row .quick-add-name,
[b-6m0wrct77r] .quick-add-row .quick-add-cat {
    flex: 1 1 200px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
}
[b-6m0wrct77r] .quick-add-row .quick-add-name:focus,
[b-6m0wrct77r] .quick-add-row .quick-add-price:focus,
[b-6m0wrct77r] .quick-add-row .quick-add-cat:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
[b-6m0wrct77r] .quick-add-row .quick-add-price-wrap {
    position: relative;
    flex: 0 0 110px;
}
[b-6m0wrct77r] .quick-add-row .quick-add-price {
    width: 100%;
    height: 38px;
    padding: 0 22px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    text-align: right;
}
[b-6m0wrct77r] .quick-add-row .quick-add-currency {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.85rem;
    pointer-events: none;
}
[b-6m0wrct77r] .quick-add-row .quick-add-btn {
    flex: 0 0 auto;
    height: 38px;
    white-space: nowrap;
}
[b-6m0wrct77r] .quick-add-row .quick-add-error {
    flex: 1 1 100%;
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: -2px;
}
[b-6m0wrct77r] .quick-add-row input:disabled,
[b-6m0wrct77r] .quick-add-row select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* "Para opciones avanzadas…" tertiary link at the bottom of the
   simplified view. Quiet on purpose — only the curious operator will
   notice it, but it's enough to break the dead-end perception. */
[b-6m0wrct77r] .advanced-link-row {
    text-align: center;
    margin: 18px 0 6px;
    font-size: 0.82rem;
}
[b-6m0wrct77r] .advanced-link-row .advanced-link {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 600;
}
[b-6m0wrct77r] .advanced-link-row .advanced-link:hover {
    text-decoration: underline;
}

[b-6m0wrct77r] .datagrid .item-name {
    font-weight: 500;
    color: #1e293b;
}

[b-6m0wrct77r] .datagrid .item-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

[b-6m0wrct77r] .item-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-6m0wrct77r] .item-badge.pos {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .item-badge.online {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .item-badge.out-of-stock {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .item-badge.archived {
    background: #f1f5f9;
    color: #64748b;
}

[b-6m0wrct77r] .row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: .6;
    transition: opacity .15s;
}

[b-6m0wrct77r] .datagrid tr:hover .row-actions,
[b-6m0wrct77r] .datagrid tr:focus-within .row-actions {
    opacity: 1;
}

[b-6m0wrct77r] .row-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 16px;
    transition: background .1s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .row-action-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .row-action-btn:active {
    background: #cbd5e1;
    transform: scale(0.95);
}

/* Row actions wrap */
[b-6m0wrct77r] .row-actions-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

[b-6m0wrct77r] .row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

[b-6m0wrct77r] .row-menu {
    position: fixed;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 1000;
    padding: 6px 0;
}

[b-6m0wrct77r] .row-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: background .15s;
}

[b-6m0wrct77r] .row-menu-item:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .row-menu-item.danger {
    color: #dc2626;
}

[b-6m0wrct77r] .row-menu-item.danger:hover {
    background: #fef2f2;
}

/* Touch-capable devices (incl. touchscreen+mouse hybrids): always show
   datagrid row actions. See the any-pointer note on .cat-item-actions. */
@media (any-pointer: coarse) {
    [b-6m0wrct77r] .row-actions {
        opacity: 1;
    }
    [b-6m0wrct77r] .row-action-btn {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ============================================
   Phase 4: Bulk Action Bar
   ============================================ */
[b-6m0wrct77r] .bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

[b-6m0wrct77r] .bulk-bar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,.2);
}

[b-6m0wrct77r] .bulk-bar-count {
    font-weight: 600;
}

[b-6m0wrct77r] .bulk-select-options {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

[b-6m0wrct77r] .bulk-link {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-size: 11px;
}

[b-6m0wrct77r] .bulk-link:hover {
    color: #fff;
}

[b-6m0wrct77r] .bulk-divider {
    color: rgba(255,255,255,.3);
}

[b-6m0wrct77r] .bulk-bar-actions {
    display: flex;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .bulk-btn {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .bulk-btn:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.3);
}

[b-6m0wrct77r] .bulk-btn.danger {
    background: rgba(239,68,68,.2);
    border-color: rgba(239,68,68,.3);
}

[b-6m0wrct77r] .bulk-btn.danger:hover {
    background: rgba(239,68,68,.3);
}

[b-6m0wrct77r] .bulk-bar-clear {
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: 12px;
}

[b-6m0wrct77r] .bulk-bar-clear:hover {
    color: #fff;
}

/* ============================================
   Phase 5: General Polish
   ============================================ */
/* Force no horizontal scroll on catalog page */
:host[b-6m0wrct77r] {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

[b-6m0wrct77r] .catalog-page {
    padding: 16px;
    background: #f8fafc;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

[b-6m0wrct77r] .catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .catalog-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

[b-6m0wrct77r] .catalog-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 16px;
    max-width: 100%;
    min-width: 0;
}

[b-6m0wrct77r] .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    font-size: 13px;
}

[b-6m0wrct77r] .pagination-left,
[b-6m0wrct77r] .pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .pagination-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .pagination-label {
    font-size: 13px;
    color: #64748b;
}

[b-6m0wrct77r] .page-size-select {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

[b-6m0wrct77r] .page-size-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[b-6m0wrct77r] .pagination-btn {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all .1s;
    font-size: 12px;
}

[b-6m0wrct77r] .pagination-btn:hover:not(:disabled) {
    background: #f8fafc;
}

[b-6m0wrct77r] .pagination-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

[b-6m0wrct77r] .pagination-info {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .page-jump-input {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

[b-6m0wrct77r] .page-jump-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[b-6m0wrct77r] .page-jump-input::-webkit-outer-spin-button,
[b-6m0wrct77r] .page-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .pagination-total {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Compact pagination style - Touch-friendly (44px min targets) */
[b-6m0wrct77r] .pagination-bar.compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 13px;
}

[b-6m0wrct77r] .pagination-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .pagination-bar.compact .pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 8px;
}

[b-6m0wrct77r] .pagination-compact-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
}

[b-6m0wrct77r] .pagination-bar.compact .page-jump-input {
    width: 52px;
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
    text-align: center;
    border-radius: 8px;
}

[b-6m0wrct77r] .pagination-sep {
    color: #94a3b8;
    font-size: 14px;
}

[b-6m0wrct77r] .pagination-pages {
    color: #64748b;
    min-width: 20px;
    font-size: 14px;
}

[b-6m0wrct77r] .pagination-total-compact {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

[b-6m0wrct77r] .pagination-total-compact::after {
    content: " items";
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

[b-6m0wrct77r] .page-size-select.compact {
    padding: 8px 12px;
    min-height: 44px;
    font-size: 13px;
    border-radius: 8px;
}

/* ============================================
   Phase 6: Column Toggle
   ============================================ */
[b-6m0wrct77r] .col-toggle-wrap {
    position: relative;
}

[b-6m0wrct77r] .col-toggle-btn {
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

[b-6m0wrct77r] .col-toggle-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    padding: 8px 0;
    z-index: 100;
}

[b-6m0wrct77r] .col-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .col-toggle-item:hover {
    background: #f8fafc;
}

/* Additional form controls */
[b-6m0wrct77r] .toolbar-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    min-width: 180px;
    cursor: pointer;
}

[b-6m0wrct77r] .toolbar-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .bulk-select {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

[b-6m0wrct77r] .bulk-select option {
    background: #1e293b;
    color: #fff;
}

[b-6m0wrct77r] .cat-printer-select {
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    min-width: 70px;
}

[b-6m0wrct77r] .catalog-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

/* ============================================
   Phase 7: Final Polish & Animations
   ============================================ */
[b-6m0wrct77r] .fade-in {
    animation: fadeIn-b-6m0wrct77r .2s ease-out;
}

[b-6m0wrct77r] .slide-up {
    animation: slideUp-b-6m0wrct77r .2s ease-out;
}

/* Smooth transitions for interactive elements */
[b-6m0wrct77r] button, [b-6m0wrct77r] input, [b-6m0wrct77r] select {
    transition: all .15s ease;
}

/* Better focus states */
[b-6m0wrct77r] input:focus, [b-6m0wrct77r] select:focus, [b-6m0wrct77r] button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,.3);
}

/* Loading state */
[b-6m0wrct77r] .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

[b-6m0wrct77r] .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-6m0wrct77r 1s linear infinite;
}

/* ============================================
   Phase 8: Context Menu & Keyboard Nav
   ============================================ */
.ctx-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.ctx-menu[b-6m0wrct77r] {
    position: fixed;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    padding: 4px 0;
    min-width: 180px;
}

.ctx-menu button[b-6m0wrct77r] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.ctx-menu button:hover[b-6m0wrct77r] {
    background: #f3f4f6;
}

.ctx-menu button.danger[b-6m0wrct77r] {
    color: #dc2626;
}

.ctx-menu hr[b-6m0wrct77r] {
    margin: 4px 0;
    border: none;
    border-top: 1px solid #e5e7eb;
}

[b-6m0wrct77r] .datagrid tr.focused {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    background: #eff6ff;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn-b-6m0wrct77r {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes spin-b-6m0wrct77r {
    to { transform: rotate(360deg); }
}

/* Inline spinner for loading states */
[b-6m0wrct77r] .spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-6m0wrct77r .6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

/* Bulk loading state */
[b-6m0wrct77r] .bulk-bar.bulk-loading {
    opacity: 0.85;
    pointer-events: none;
}

[b-6m0wrct77r] .bulk-bar.bulk-loading .bulk-btn,
[b-6m0wrct77r] .bulk-bar.bulk-loading .bulk-select {
    opacity: 0.6;
}

/* ============================================
   Phase 6: Bulk Price Modal
   ============================================ */

.modal-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1000;
}

.bulk-price-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
    z-index: 1001;
    width: 100%;
    max-width: 420px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

@keyframes modalSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

[b-6m0wrct77r] .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

[b-6m0wrct77r] .modal-close {
    /* 44px min so the close affordance is a real touch target on a phone
       (was ~28px from 6px/10px padding alone). */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
    border-radius: 6px;
}

[b-6m0wrct77r] .modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

[b-6m0wrct77r] .modal-body {
    padding: 20px;
}

[b-6m0wrct77r] .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .modal-btn.secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}

[b-6m0wrct77r] .modal-btn.secondary:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .modal-btn.primary {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .modal-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .modal-btn.danger {
    background: #b91c1c;
    border: 1px solid #b91c1c;
    color: #fff;
}

[b-6m0wrct77r] .modal-btn.danger:hover {
    background: #991b1b;
}

[b-6m0wrct77r] .modal-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Styled archive confirm — replaces the un-themable native confirm().
   Self-contained dark surface (no light base to override). */
.confirm-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #161b22;
    border: 1px solid #30363d;
    color: #e6edf3;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
    z-index: 1001;
    width: 100%;
    max-width: 440px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.confirm-modal .modal-header[b-6m0wrct77r],
.confirm-modal .modal-footer[b-6m0wrct77r] {
    border-color: #30363d;
}

.confirm-modal .modal-header h3[b-6m0wrct77r] {
    color: #e6edf3;
}

.confirm-modal .modal-close[b-6m0wrct77r] {
    color: #8b949e;
}

.confirm-body[b-6m0wrct77r] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
}

.confirm-icon[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(185, 28, 28, .15);
    font-size: 20px;
}

.confirm-body p[b-6m0wrct77r] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #c9d1d9;
}

.confirm-body strong[b-6m0wrct77r] {
    color: #e6edf3;
}

[b-6m0wrct77r] .price-adjust-options {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .price-adjust-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .price-adjust-option input {
    accent-color: #3b82f6;
}

[b-6m0wrct77r] .price-adjust-option:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .price-adjust-option.active {
    border-color: #3b82f6;
    background: #eff6ff;
}

[b-6m0wrct77r] .price-adjust-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

[b-6m0wrct77r] .price-adjust-input input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
}

[b-6m0wrct77r] .price-adjust-input input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[b-6m0wrct77r] .price-suffix {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
}

[b-6m0wrct77r] .price-adjust-hint {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

/* ============================================
   Phase 4: Advanced Filtering
   ============================================ */

/* Clear filters button */
[b-6m0wrct77r] .filter-chip.clear-filters {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;   /* AA: #dc2626 on #fee2e2 was 3.95:1 */
}

[b-6m0wrct77r] .filter-chip.clear-filters:hover {
    background: #fecaca;
}

/* Advanced Filters Panel */
[b-6m0wrct77r] .advanced-filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

[b-6m0wrct77r] .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

[b-6m0wrct77r] .filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .025em;
}

[b-6m0wrct77r] .price-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .price-input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
}

[b-6m0wrct77r] .price-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[b-6m0wrct77r] .price-input::-webkit-outer-spin-button,
[b-6m0wrct77r] .price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .price-separator {
    color: #94a3b8;
    font-size: 14px;
}

[b-6m0wrct77r] .price-currency {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

[b-6m0wrct77r] .filter-select {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    min-width: 140px;
}

[b-6m0wrct77r] .filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

/* ============================================
   Phase 3B: Card/Grid View
   ============================================ */

/* View Toggle Buttons */
[b-6m0wrct77r] .view-toggle {
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

[b-6m0wrct77r] .view-btn {
    padding: 8px 12px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
}

[b-6m0wrct77r] .view-btn:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .view-btn:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .view-btn.active {
    background: #3b82f6;
    color: #fff;
}

/* Compact Toolbar - Touch-friendly (44px min targets) */
[b-6m0wrct77r] .compact-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
}

[b-6m0wrct77r] .toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all .15s;
}

[b-6m0wrct77r] .toolbar-icon-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .toolbar-icon-btn.active {
    background: #3b82f6;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-icon-btn.danger:hover {
    background: #fee2e2;
}

[b-6m0wrct77r] .toolbar-select.compact {
    padding: 10px 12px;
    font-size: 13px;
    min-width: 80px;
    max-width: 110px;
    min-height: 44px;
    border-radius: 8px;
}

[b-6m0wrct77r] .presets-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-6m0wrct77r] .compact-toolbar .view-toggle {
    border-radius: 8px;
}

[b-6m0wrct77r] .compact-toolbar .view-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
}

/* Items Grid Container */
[b-6m0wrct77r] .items-grid-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
    min-height: 400px;
}

[b-6m0wrct77r] .items-grid-wrap.loading {
    pointer-events: none;
}

[b-6m0wrct77r] .items-grid-wrap.loading .items-grid {
    opacity: 0.5;
}

[b-6m0wrct77r] .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Item Card */
[b-6m0wrct77r] .item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

[b-6m0wrct77r] .item-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

[b-6m0wrct77r] .item-card.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}

[b-6m0wrct77r] .item-card.archived {
    opacity: 0.6;
}

/* Card Image */
[b-6m0wrct77r] .card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Transparent so the image area blends into the card on BOTH themes — the
       old near-white #f8fafc read as a big light block on the dark Carta page
       (Catalog has no dark-theme rules). Real images still cover it. */
    background: transparent;
    overflow: hidden;
}

[b-6m0wrct77r] .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[b-6m0wrct77r] .card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;          /* was 48px — the camera dominated each card */
    color: #94a3b8;           /* mid-slate: visible on light AND dark */
    background: rgba(148, 163, 184, 0.10);  /* subtle translucent wash, theme-agnostic */
}

/* Card Overlay (appears on hover) */
[b-6m0wrct77r] .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s;
}

[b-6m0wrct77r] .item-card:hover .card-overlay {
    opacity: 1;
}

[b-6m0wrct77r] .card-action {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, background .15s;
}

[b-6m0wrct77r] .card-action:hover {
    background: #f8fafc;
    transform: scale(1.1);
}

/* Selected Badge */
[b-6m0wrct77r] .card-selected-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(59,130,246,.4);
}

/* Card Body */
[b-6m0wrct77r] .card-body {
    padding: 12px;
}

[b-6m0wrct77r] .card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-6m0wrct77r] .card-price {
    font-size: 16px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 8px;
}

[b-6m0wrct77r] .card-meta {
    margin-bottom: 8px;
}

[b-6m0wrct77r] .card-category {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Card Badges */
[b-6m0wrct77r] .card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

[b-6m0wrct77r] .card-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

[b-6m0wrct77r] .card-badge.pos {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .card-badge.online {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .card-badge.out-of-stock {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .card-badge.archived {
    background: #f1f5f9;
    color: #64748b;
}

/* Shared Pagination Bar */
[b-6m0wrct77r] .pagination-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
}

/* ============================================
   Phase 8: Pro Table Features
   ============================================ */

/* Row hover quick actions */
[b-6m0wrct77r] .row-quick-actions {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
    z-index: 5;
}

[b-6m0wrct77r] .items-row:hover .row-quick-actions {
    display: flex;
}

[b-6m0wrct77r] .row-action-btn {
    padding: 6px 10px;
    border: none;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    transition: all .15s;
}

[b-6m0wrct77r] .row-action-btn:hover {
    background: #f8fafc;
    transform: scale(1.05);
}

/* Image preview tooltip */
[b-6m0wrct77r] .image-tooltip {
    position: relative;
    display: inline-block;
}

[b-6m0wrct77r] .image-tooltip-popup {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 100;
}

[b-6m0wrct77r] .image-tooltip:hover .image-tooltip-popup {
    display: block;
}

[b-6m0wrct77r] .image-tooltip-popup img {
    width: 180px;
    height: 135px;
    object-fit: cover;
    border-radius: 6px;
}

/* Enhanced row styling */
[b-6m0wrct77r] .items-row {
    position: relative;
    transition: background .15s, box-shadow .15s;
}

[b-6m0wrct77r] .items-row:hover {
    background: #f8fafc;
    box-shadow: inset 0 1px 0 #e2e8f0, inset 0 -1px 0 #e2e8f0;
}

[b-6m0wrct77r] .items-row.selected {
    background: #eff6ff;
}

/* ============================================
   Phase 9: Performance & UX
   ============================================ */

/* Empty state */
[b-6m0wrct77r] .empty-state-table {
    text-align: center;
    padding: 60px 40px;
    color: #64748b;
}

[b-6m0wrct77r] .empty-state-table .empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

[b-6m0wrct77r] .empty-state-table h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #334155;
}

[b-6m0wrct77r] .empty-state-table p {
    margin: 0 0 20px;
    font-size: 14px;
}

[b-6m0wrct77r] .empty-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .empty-btn.primary {
    background: #3b82f6;
    color: #fff;
    border: none;
}

[b-6m0wrct77r] .empty-btn.primary:hover {
    background: #2563eb;
}

[b-6m0wrct77r] .empty-btn.secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .empty-btn.secondary:hover {
    background: #e2e8f0;
}

/* Skeleton loading animation */
[b-6m0wrct77r] .skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-6m0wrct77r 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading-b-6m0wrct77r {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[b-6m0wrct77r] .skeleton-row td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
}

[b-6m0wrct77r] .skeleton-row:nth-child(odd) {
    animation-delay: 0.1s;
}

[b-6m0wrct77r] .skeleton-row:nth-child(even) {
    animation-delay: 0.2s;
}

/* Empty grid state */
[b-6m0wrct77r] .empty-state-grid {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    color: #64748b;
}

[b-6m0wrct77r] .empty-state-grid .empty-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

[b-6m0wrct77r] .empty-state-grid h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #334155;
}

[b-6m0wrct77r] .empty-state-grid p {
    margin: 0 0 20px;
    font-size: 14px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
    [b-6m0wrct77r] .catalog-grid {
        grid-template-columns: 1fr;
    }

    [b-6m0wrct77r] .cat-panel {
        order: -1;
    }
}

@media (max-width: 600px) {
    [b-6m0wrct77r] .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* In the column toolbar, .toolbar-search's `flex: 1 1 200px` (a WIDTH basis
       on desktop) made the search box GROW VERTICALLY to fill the column — a
       ~300px empty void with the magnifier floating in it. Pin it to its
       natural height so the toolbar stacks compactly. */
    [b-6m0wrct77r] .toolbar-search {
        flex: 0 0 auto;
        width: 100%;
    }

    [b-6m0wrct77r] .quick-filters {
        width: 100%;
    }

    [b-6m0wrct77r] .bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-6m0wrct77r] .bulk-bar-count {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    [b-6m0wrct77r] .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    [b-6m0wrct77r] .card-action {
        /* Phone is where these edit/quick-action buttons need the LARGEST
           target, not a 32px shrink. Keep the 44px touch floor. */
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    [b-6m0wrct77r] .view-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Phase 10A: Quick Stats Bar
   ============================================ */
[b-6m0wrct77r] .stats-bar {
    display: flex;
    gap: 12px;
    padding: 0 0 16px 0;
    flex-wrap: wrap;
    max-width: 100%;
    /* Reserve a stat-card-height row so the bar doesn't pop layout when
       the price-range card appears (it's gated on items >= 3). The
       fallback prevents a 60→80px height jump when the operator adds
       their 3rd item. */
    min-height: 80px;
}

[b-6m0wrct77r] .stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    min-width: 0;
    flex: 1 1 150px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s, border-color .15s;
    cursor: pointer;
    text-align: left;
}

[b-6m0wrct77r] button.stat-card {
    font-family: inherit;
}

[b-6m0wrct77r] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

[b-6m0wrct77r] .stat-card:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .stat-card.stat-active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15), 0 4px 12px rgba(0,0,0,.08);
}

[b-6m0wrct77r] .stat-card.stat-neutral {
    cursor: default;
}

[b-6m0wrct77r] .stat-card.stat-neutral:hover {
    transform: none;
}

[b-6m0wrct77r] .stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 10px;
    font-size: 18px;
}

[b-6m0wrct77r] .stat-card.stat-success .stat-icon {
    background: #dcfce7;
    color: #166534;
}

[b-6m0wrct77r] .stat-card.stat-warning .stat-icon {
    background: #fef3c7;
    color: #92400e;
}

[b-6m0wrct77r] .stat-card.stat-info .stat-icon {
    background: #dbeafe;
    color: #1e40af;
}

[b-6m0wrct77r] .stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-6m0wrct77r] .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: transform .2s ease, color .2s ease;
}

[b-6m0wrct77r] .stat-value.stat-changed {
    animation: statPulse-b-6m0wrct77r .4s ease-out;
}

@keyframes statPulse-b-6m0wrct77r {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); color: #3b82f6; }
    100% { transform: scale(1); }
}

[b-6m0wrct77r] .stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Stats collapse toggle button */
[b-6m0wrct77r] .stats-collapse-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

[b-6m0wrct77r] .stats-collapse-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

[b-6m0wrct77r] .stats-bar {
    position: relative;
    padding-right: 44px;
}

/* Collapsed stats bar - compact mode */
[b-6m0wrct77r] .stats-bar.stats-collapsed {
    gap: 8px;
    padding-bottom: 8px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-card {
    padding: 6px 10px;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 8px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 6px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-content {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-value {
    font-size: 14px;
}

[b-6m0wrct77r] .stats-bar.stats-collapsed .stat-label {
    font-size: 11px;
}

/* ============================================
   Phase 10B: Column Customization
   ============================================ */
[b-6m0wrct77r] .column-settings-wrap {
    position: relative;
}

[b-6m0wrct77r] .column-settings-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-6m0wrct77r] .column-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

[b-6m0wrct77r] .column-settings-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    min-width: 180px;
    padding: 8px 0;
    animation: dropdownFadeIn-b-6m0wrct77r .15s ease-out;
}

@keyframes dropdownFadeIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-6m0wrct77r] .column-settings-header {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .025em;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

[b-6m0wrct77r] .column-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .1s;
    font-size: 13px;
    color: #334155;
}

[b-6m0wrct77r] .column-option:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .column-option input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 16px;
    height: 16px;
}

[b-6m0wrct77r] .column-settings-footer {
    padding: 8px 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

[b-6m0wrct77r] .column-reset-btn {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background .15s;
}

[b-6m0wrct77r] .column-reset-btn:hover {
    background: #e2e8f0;
}

/* Responsive: Stats bar */
@media (max-width: 900px) {
    [b-6m0wrct77r] .stats-bar {
        gap: 10px;
    }

    [b-6m0wrct77r] .stat-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }
}

@media (max-width: 600px) {
    [b-6m0wrct77r] .stats-bar {
        gap: 10px;
    }

    [b-6m0wrct77r] .stat-card {
        padding: 10px 14px;
        min-width: 120px;
    }

    [b-6m0wrct77r] .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    [b-6m0wrct77r] .stat-value {
        font-size: 16px;
    }

    [b-6m0wrct77r] .stat-label {
        font-size: 11px;
    }
}

/* ============================================
   Phase 11A: Keyboard Shortcuts Panel
   ============================================ */
.shortcuts-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    width: 100%;
    max-width: 500px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.shortcuts-body[b-6m0wrct77r] {
    padding: 20px 24px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.shortcuts-section[b-6m0wrct77r] {
    margin-bottom: 20px;
}

.shortcuts-section:last-child[b-6m0wrct77r] {
    margin-bottom: 0;
}

.shortcuts-section h4[b-6m0wrct77r] {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.shortcut-item[b-6m0wrct77r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #334155;
}

.shortcut-item kbd[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.shortcut-item span[b-6m0wrct77r] {
    flex: 1;
    color: #64748b;
}

/* ============================================
   Phase 11B: Copy Item Modal
   ============================================ */
.copy-item-name[b-6m0wrct77r] {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    font-weight: 600;
    color: #1e293b;
}

/* ============================================
   Phase 11C: Compact/Dense View
   ============================================ */
[b-6m0wrct77r] .items-table-wrap.compact .datagrid th {
    padding: 8px 10px;
    font-size: 11px;
}

[b-6m0wrct77r] .items-table-wrap.compact .datagrid td {
    padding: 6px 10px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-thumb {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-upload-label {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder {
    width: 32px;
    height: 32px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder span {
    font-size: 12px;
}

[b-6m0wrct77r] .items-table-wrap.compact .img-placeholder small {
    display: none;
}

[b-6m0wrct77r] .items-table-wrap.compact .cell-img {
    width: 42px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-name {
    font-size: 13px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-badges {
    margin-top: 2px;
}

[b-6m0wrct77r] .items-table-wrap.compact .item-badge {
    padding: 1px 4px;
    font-size: 9px;
}

[b-6m0wrct77r] .items-table-wrap.compact .row-action-btn {
    padding: 4px 6px;
    font-size: 12px;
}

[b-6m0wrct77r] .toolbar-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ============================================
   Phase 11D: Duplicate Finder Modal
   ============================================ */
.duplicates-modal[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    width: 100%;
    max-width: 600px;
    animation: modalSlideIn-b-6m0wrct77r .2s ease-out;
}

.duplicates-body[b-6m0wrct77r] {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
}

.duplicates-info[b-6m0wrct77r] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #64748b;
}

.no-duplicates[b-6m0wrct77r] {
    text-align: center;
    padding: 40px 20px;
}

.no-dup-icon[b-6m0wrct77r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    font-size: 28px;
    color: #166534;
    margin-bottom: 16px;
}

.no-duplicates p[b-6m0wrct77r] {
    margin: 0;
    font-size: 16px;
    color: #64748b;
}

.duplicate-group[b-6m0wrct77r] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.dup-group-header[b-6m0wrct77r] {
    padding: 10px 14px;
    background: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
}

.dup-item[b-6m0wrct77r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.dup-item:last-child[b-6m0wrct77r] {
    border-bottom: none;
}

.dup-name[b-6m0wrct77r] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.dup-category[b-6m0wrct77r] {
    font-size: 12px;
    color: #64748b;
    background: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.dup-price[b-6m0wrct77r] {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    min-width: 60px;
    text-align: right;
}

.dup-action[b-6m0wrct77r] {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}

.dup-action:hover[b-6m0wrct77r] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ============================================
   Phase 12A: Multi-Select Hint
   ============================================ */
[b-6m0wrct77r] .datagrid tr.selected {
    background: #eff6ff !important;
}

/* ============================================
   Phase 12B: Item Quick Preview Panel
   ============================================ */
.preview-backdrop[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 1000;
}

.preview-panel[b-6m0wrct77r] {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 360px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    z-index: 1001;
    overflow: hidden;
    animation: previewSlideIn-b-6m0wrct77r .2s ease-out;
}

@keyframes previewSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-50%) translateX(20px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.preview-header[b-6m0wrct77r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.preview-header h3[b-6m0wrct77r] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.preview-body[b-6m0wrct77r] {
    padding: 20px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}

.preview-image[b-6m0wrct77r] {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f8fafc;
}

.preview-image img[b-6m0wrct77r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-no-image[b-6m0wrct77r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.preview-no-image span[b-6m0wrct77r] {
    font-size: 48px;
    margin-bottom: 8px;
}

.preview-no-image small[b-6m0wrct77r] {
    font-size: 14px;
}

.preview-info[b-6m0wrct77r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-name[b-6m0wrct77r] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.preview-price[b-6m0wrct77r] {
    font-size: 24px;
    font-weight: 700;
    color: #059669;
}

.preview-category[b-6m0wrct77r] {
    font-size: 14px;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.preview-badges[b-6m0wrct77r] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-badge[b-6m0wrct77r] {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
}

.preview-badge.pos[b-6m0wrct77r] {
    background: #dcfce7;
    color: #166534;
}

.preview-badge.online[b-6m0wrct77r] {
    background: #dbeafe;
    color: #1e40af;
}

.preview-badge.out-of-stock[b-6m0wrct77r] {
    background: #fef3c7;
    color: #92400e;
}

.preview-badge.archived[b-6m0wrct77r] {
    background: #f1f5f9;
    color: #64748b;
}

.preview-description[b-6m0wrct77r] {
    margin-top: 8px;
}

.preview-description label[b-6m0wrct77r] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .025em;
    margin-bottom: 6px;
}

.preview-description p[b-6m0wrct77r] {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

.preview-footer[b-6m0wrct77r] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}

/* ============================================
   Phase 12C: Drag Item to Category
   ============================================ */
[b-6m0wrct77r] .cat-item.item-drop-target {
    background: #dbeafe;
    border: 2px dashed #3b82f6;
}

/* ============================================
   Phase 12: Responsive
   ============================================ */
@media (max-width: 600px) {
    .preview-panel[b-6m0wrct77r] {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* ============================================
   Phase 13D: Bulk Modifier Assignment Modal
   ============================================ */
[b-6m0wrct77r] .bulk-mod-options {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

[b-6m0wrct77r] .bulk-mod-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

[b-6m0wrct77r] .bulk-mod-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .bulk-mod-group-item:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .bulk-mod-group-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

[b-6m0wrct77r] .bulk-mod-group-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

[b-6m0wrct77r] .bulk-mod-group-item .mod-group-name {
    flex: 1;
    font-weight: 500;
    color: #1e293b;
}

[b-6m0wrct77r] .bulk-mod-group-item .mod-group-info {
    font-size: 11px;
    color: #64748b;
}

[b-6m0wrct77r] .form-hint {
    font-size: 12px;
    color: #94a3b8;
}

/* ============================================
   Modifier Groups Manager Modal
   ============================================ */
[b-6m0wrct77r] .modifiers-manager-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,.25);
    width: 90%;
    max-width: 700px;
    z-index: 1001;
    animation: modalIn .2s ease-out;
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

[b-6m0wrct77r] .modifiers-manager-modal .modal-body {
    padding: 16px 20px;
}

[b-6m0wrct77r] .mod-manager-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

[b-6m0wrct77r] .mod-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-6m0wrct77r] .mod-group-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: all .15s;
}

[b-6m0wrct77r] .mod-group-card.expanded {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .mod-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .1s;
}

[b-6m0wrct77r] .mod-group-header:hover {
    background: #f1f5f9;
}

[b-6m0wrct77r] .mod-group-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-6m0wrct77r] .mod-group-summary .mod-group-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

[b-6m0wrct77r] .mod-group-summary .mod-group-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #64748b;
}

[b-6m0wrct77r] .badge-required {
    color: #ef4444;
    font-weight: 500;
}

[b-6m0wrct77r] .badge-items {
    color: #3b82f6;
    font-weight: 500;
    background: #eff6ff;
    padding: 1px 6px;
    border-radius: 4px;
}

[b-6m0wrct77r] .mod-group-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6m0wrct77r] .icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 6px;
    transition: background .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-6m0wrct77r] .icon-btn:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .icon-btn.danger:hover {
    background: #fee2e2;
}

[b-6m0wrct77r] .expand-icon {
    color: #94a3b8;
    font-size: 11px;
}

[b-6m0wrct77r] .mod-group-body {
    padding: 0 16px 16px;
    border-top: 1px solid #e2e8f0;
    animation: slideDown-b-6m0wrct77r .2s ease-out;
}

@keyframes slideDown-b-6m0wrct77r {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 1000px;
        transform: translateY(0);
    }
}

[b-6m0wrct77r] .mod-group-fields {
    padding: 16px 0;
}

[b-6m0wrct77r] .field-row {
    margin-bottom: 12px;
}

[b-6m0wrct77r] .field-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
}

[b-6m0wrct77r] .field-row-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

[b-6m0wrct77r] .field-row-inline label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

[b-6m0wrct77r] .input {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

[b-6m0wrct77r] .input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

[b-6m0wrct77r] .input.small {
    width: 80px;
    padding: 6px 10px;
}

[b-6m0wrct77r] .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

[b-6m0wrct77r] .checkbox-label.small {
    font-size: 11px;
}

[b-6m0wrct77r] .mod-options-section {
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
}

[b-6m0wrct77r] .mod-options-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

[b-6m0wrct77r] .mod-options-header span {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
}

[b-6m0wrct77r] .btn-small {
    padding: 4px 10px;
    font-size: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all .1s;
}

[b-6m0wrct77r] .btn-small:hover {
    background: #e2e8f0;
}

[b-6m0wrct77r] .mod-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-6m0wrct77r] .mod-option-header {
    display: grid;
    grid-template-columns: 1fr 90px 55px 55px 28px;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 0 4px 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

[b-6m0wrct77r] .mod-option-header span:nth-child(2),
[b-6m0wrct77r] .mod-option-header span:nth-child(3),
[b-6m0wrct77r] .mod-option-header span:nth-child(4) {
    text-align: center;
}

[b-6m0wrct77r] .mod-option-row {
    display: grid;
    grid-template-columns: 1fr 90px 55px 55px 28px;
    gap: 8px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background .15s ease, transform .1s ease, opacity .2s ease;
}

[b-6m0wrct77r] .mod-option-row:hover {
    background: #f8fafc;
}

[b-6m0wrct77r] .mod-option-row.inactive {
    opacity: 0.45;
    background: #fafafa;
}

[b-6m0wrct77r] .mod-option-row.inactive:hover {
    opacity: 0.65;
}

[b-6m0wrct77r] .mod-option-row .checkbox-label {
    display: flex;
    justify-content: center;
}

/* Hide number input spinners for cleaner look */
[b-6m0wrct77r] .mod-option-row input[type="number"]::-webkit-outer-spin-button,
[b-6m0wrct77r] .mod-option-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[b-6m0wrct77r] .mod-option-row input[type="number"] {
    -moz-appearance: textfield;
    text-align: right;
    padding: 6px 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Ensure inputs don't overflow their grid cells */
[b-6m0wrct77r] .mod-option-row input.input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

[b-6m0wrct77r] .mod-option-row input.input.small {
    width: 100%;
    padding: 6px 8px;
}

/* Styled checkboxes for options */
[b-6m0wrct77r] .mod-option-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
    transition: transform .1s ease;
}

[b-6m0wrct77r] .mod-option-row input[type="checkbox"]:hover {
    transform: scale(1.1);
}

[b-6m0wrct77r] .mod-option-row input[type="checkbox"]:checked {
    animation: checkPop-b-6m0wrct77r .2s ease;
}

@keyframes checkPop-b-6m0wrct77r {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Delete button for option row */
[b-6m0wrct77r] .mod-option-row .icon-btn.danger {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    font-size: 14px;
    color: #94a3b8;
    transition: all .15s ease;
}

[b-6m0wrct77r] .mod-option-row .icon-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.1);
}

/* Add option button styling */
[b-6m0wrct77r] .btn-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .15s ease;
}

[b-6m0wrct77r] .btn-small:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    transform: translateY(-1px);
}

/* Save group button */
[b-6m0wrct77r] .mod-group-save-row .toolbar-btn.primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
}

[b-6m0wrct77r] .mod-group-save-row .toolbar-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[b-6m0wrct77r] .mod-group-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
}

/* ============================================
   Undo Toast
   ============================================ */
[b-6m0wrct77r] .undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1e293b;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 1000;
    font-size: 14px;
    animation: undoSlideUp-b-6m0wrct77r .3s ease-out;
}

@keyframes undoSlideUp-b-6m0wrct77r {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[b-6m0wrct77r] .undo-btn {
    padding: 8px 14px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .undo-btn:hover {
    background: #2563eb;
    transform: scale(1.02);
}

[b-6m0wrct77r] .undo-btn:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .undo-dismiss {
    padding: 4px 8px;
    background: transparent;
    color: rgba(255,255,255,.6);
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: all .15s;
}

[b-6m0wrct77r] .undo-dismiss:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* ============================================
   Load Error Banner & Slow Load Indicator
   ============================================ */
[b-6m0wrct77r] .load-error-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 10px;
    margin-bottom: 12px;
    animation: errorSlideIn-b-6m0wrct77r .3s ease-out;
}

@keyframes errorSlideIn-b-6m0wrct77r {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-6m0wrct77r] .load-error-banner span {
    font-size: 14px;
    color: #dc2626;
    font-weight: 500;
}

[b-6m0wrct77r] .retry-btn {
    padding: 8px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

[b-6m0wrct77r] .retry-btn:hover {
    background: #b91c1c;
    transform: scale(1.02);
}

[b-6m0wrct77r] .retry-btn:active {
    transform: scale(0.98);
}

[b-6m0wrct77r] .slow-load-text {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: #64748b;
    animation: slowLoadPulse-b-6m0wrct77r 1.5s ease-in-out infinite;
}

@keyframes slowLoadPulse-b-6m0wrct77r {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ============================================
   Grid View Skeleton Cards
   ============================================ */
[b-6m0wrct77r] .skeleton-card {
    pointer-events: none;
}

[b-6m0wrct77r] .skeleton-card .card-img {
    background: #f1f5f9;
}

[b-6m0wrct77r] .skeleton-card .skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-6m0wrct77r 1.5s infinite;
    border-radius: 4px;
}

/* Dark mode support for error banner */
[b-6m0wrct77r] .load-error-banner {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #991b1b;
}

[b-6m0wrct77r] .load-error-banner span {
    color: #fca5a5;
}

[b-6m0wrct77r] .slow-load-text {
    color: #94a3b8;
}

/* ============================================
   Dark Theme Support - Full Catalog
   ============================================ */

/* Main page background */
[b-6m0wrct77r] .catalog-page {
    background: #0d1117;
    color: #e6edf3;
}

/* Page heading — base rule sets color: #1e293b (dark slate) which
   collapses to invisible against the dark canvas. Flip to the
   bright slate-100 the rest of admin uses for primary headings. */
[b-6m0wrct77r] .catalog-title {
    color: #f1f5f9;
}

/* Category Panel */
[b-6m0wrct77r] .cat-panel {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .cat-panel-header {
    background: #21262d;
    border-color: #30363d;
}

[b-6m0wrct77r] .cat-panel-header h4 {
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-search {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-search:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.2);
}

[b-6m0wrct77r] .cat-all-btn {
    background: transparent;
    border-color: #30363d;
    color: #8b949e;
}

[b-6m0wrct77r] .cat-all-btn:hover {
    background: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-all-btn.active {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

[b-6m0wrct77r] .cat-archive-toggle,
[b-6m0wrct77r] .cat-add-btn {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

[b-6m0wrct77r] .cat-archive-toggle:hover {
    background: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-archive-toggle.active {
    background: #3d2f00;
    border-color: #d29922;
}

[b-6m0wrct77r] .cat-add-btn {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

[b-6m0wrct77r] .cat-add-btn:hover {
    background: #388bfd;
    border-color: #388bfd;
}

[b-6m0wrct77r] .cat-item {
    border-color: #21262d;
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-item:hover {
    background: #21262d;
}

[b-6m0wrct77r] .cat-item.active {
    background: #1f3a5f;
    border-left-color: #58a6ff;
}

[b-6m0wrct77r] .cat-item.drop-target {
    background: #1f3a5f;
    border-top-color: #58a6ff;
}

[b-6m0wrct77r] .cat-item-name {
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-name-input {
    background: #0d1117;
    border-color: #58a6ff;
    color: #e6edf3;
    box-shadow: 0 0 0 4px rgba(88,166,255,.15), 0 4px 12px rgba(0,0,0,.3);
}

[b-6m0wrct77r] .cat-name-input:focus {
    border-color: #79c0ff;
    box-shadow: 0 0 0 4px rgba(121,192,255,.2), 0 4px 16px rgba(0,0,0,.4);
}

[b-6m0wrct77r] .cat-item-count {
    color: #8b949e;
}

[b-6m0wrct77r] .cat-edit-btn.save {
    background: #238636;
}

[b-6m0wrct77r] .cat-edit-btn.save:hover {
    background: #2ea043;
}

[b-6m0wrct77r] .cat-edit-btn.cancel {
    background: #30363d;
    color: #8b949e;
}

[b-6m0wrct77r] .cat-edit-btn.cancel:hover {
    background: #484f58;
    color: #e6edf3;
}

[b-6m0wrct77r] .cat-drag-handle {
    color: #8b949e;
}

[b-6m0wrct77r] .cat-drag-handle:hover {
    background: #30363d;
    color: #e6edf3;
}

/* QR toggle dark mode */
[b-6m0wrct77r] .qr-toggle-btn {
    background: #21262d;
    border-color: #30363d;
}

[b-6m0wrct77r] .qr-toggle-btn:hover {
    background: #30363d;
    border-color: #484f58;
}

[b-6m0wrct77r] .qr-toggle-btn.on {
    background: linear-gradient(135deg, #1a4d2e 0%, #166534 100%);
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

[b-6m0wrct77r] .qr-toggle-btn.on:hover {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

[b-6m0wrct77r] .qr-toggle-btn.off {
    background: #21262d;
    border-color: #30363d;
    opacity: 0.5;
}

[b-6m0wrct77r] .qr-toggle-btn.off::after {
    background: #f87171;
}

[b-6m0wrct77r] .qr-toggle-btn.off:hover {
    background: #30363d;
    opacity: 0.7;
}

/* Toolbar */
[b-6m0wrct77r] .catalog-toolbar {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .toolbar-search input {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .toolbar-search input:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.2);
}

[b-6m0wrct77r] .toolbar-btn {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .toolbar-btn:hover {
    background: #30363d;
    border-color: #8b949e;
}

[b-6m0wrct77r] .toolbar-btn.primary {
    background: #238636;
    border-color: #238636;
    color: #fff;
}

[b-6m0wrct77r] .toolbar-btn.primary:hover {
    background: #2ea043;
}

[b-6m0wrct77r] .toolbar-btn.active {
    background: #1f3a5f;
    border-color: #58a6ff;
    color: #58a6ff;
}

[b-6m0wrct77r] .toolbar-select {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .toolbar-select:focus {
    border-color: #58a6ff;
}

/* Compact toolbar dark theme */
[b-6m0wrct77r] .toolbar-group {
    background: #21262d;
}

[b-6m0wrct77r] .toolbar-icon-btn {
    color: #e6edf3;
}

[b-6m0wrct77r] .toolbar-icon-btn:hover {
    background: #30363d;
}

[b-6m0wrct77r] .toolbar-icon-btn.active {
    background: #1f3a5f;
    color: #58a6ff;
}

[b-6m0wrct77r] .toolbar-icon-btn.danger:hover {
    background: #3d1f1f;
}

/* QR chip label: the base rule paints "QR" near-black (#0f172a) for
   contrast on the light-green ON chip. On the dark canvas the ON chip
   is a dark-green gradient, so black collapses to invisible — flip the
   ON-state label to white. Drinks (cyan) chip keeps its teal label. */
[b-6m0wrct77r] .qr-toggle-btn.on:not(.drinks) .qr-icon {
    color: #fff;
}

/* View-toggle (list / grid) was the one toolbar control with no dark
   override, so it stayed white-on-dark and read as a broken control.
   Match the GitHub-dark palette the rest of this toolbar uses; the
   active view gets the same blue treatment as .toolbar-icon-btn.active
   so it's unambiguous which mode is selected. */
[b-6m0wrct77r] .view-toggle {
    border-color: #30363d;
}

[b-6m0wrct77r] .view-btn {
    background: #21262d;
    color: #e6edf3;
}

[b-6m0wrct77r] .view-btn:not(:last-child) {
    border-right-color: #30363d;
}

[b-6m0wrct77r] .view-btn:hover {
    background: #30363d;
}

[b-6m0wrct77r] .view-btn.active {
    background: #1f3a5f;
    color: #58a6ff;
}

/* Compact pagination dark theme */
[b-6m0wrct77r] .pagination-compact-info,
[b-6m0wrct77r] .pagination-pages {
    color: #8b949e;
}

[b-6m0wrct77r] .pagination-total-compact {
    color: #8b949e;
    background: #21262d;
}

[b-6m0wrct77r] .pagination-sep {
    color: #484f58;
}

/* Filter bar */
[b-6m0wrct77r] .filter-bar {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .filter-bar-label {
    color: #8b949e;
}

[b-6m0wrct77r] .filter-count-badge {
    background: #58a6ff;
}

[b-6m0wrct77r] .filter-divider {
    background: #30363d;
}

/* Quick filters */
[b-6m0wrct77r] .filter-chip {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .filter-chip:hover {
    background: #30363d;
}

[b-6m0wrct77r] .filter-chip.active {
    background: #1f3a5f;
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Stats bar */
[b-6m0wrct77r] .stats-bar {
    background: transparent;
}

[b-6m0wrct77r] .stat-card {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .stat-card:hover {
    background: #21262d;
    border-color: #8b949e;
}

[b-6m0wrct77r] .stat-value {
    color: #e6edf3;
}

[b-6m0wrct77r] .stat-label {
    color: #8b949e;
}

[b-6m0wrct77r] .stat-card.stat-active {
    background: #1f3a5f;
    border-color: #58a6ff;
}

[b-6m0wrct77r] .stats-collapse-btn {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

[b-6m0wrct77r] .stats-collapse-btn:hover {
    background: #21262d;
    color: #e6edf3;
}

/* Data grid / table */
[b-6m0wrct77r] .datagrid {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .datagrid th {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .datagrid th .col-label {
    color: #8b949e;
}

[b-6m0wrct77r] .datagrid td {
    border-color: #21262d;
    color: #e6edf3;
}

[b-6m0wrct77r] .datagrid tr:hover td {
    background: #21262d;
}

[b-6m0wrct77r] .datagrid tr.selected td {
    background: #1f3a5f;
}

[b-6m0wrct77r] .datagrid tr.focused td {
    box-shadow: inset 0 0 0 2px #58a6ff;
}

/* Row menu */
[b-6m0wrct77r] .row-menu {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 -4px 12px rgba(0,0,0,.4);
}

[b-6m0wrct77r] .row-menu-item {
    color: #e6edf3;
}

[b-6m0wrct77r] .row-menu-item:hover {
    background: #21262d;
}

[b-6m0wrct77r] .row-menu-item.danger {
    color: #f85149;
}

[b-6m0wrct77r] .row-menu-item.danger:hover {
    background: #3d1f1f;
}

/* Pill toggle dark theme */
[b-6m0wrct77r] .pill-toggle {
    background: #484f58;
}

[b-6m0wrct77r] .pill-toggle .pill-knob {
    background: #e6edf3;
}

[b-6m0wrct77r] .pill-toggle.on {
    background: #238636;
}

[b-6m0wrct77r] .pill-toggle.warning.on {
    background: #d29922;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover {
    background: rgba(88, 166, 255, 0.08);
}

/* De-emphasize inactive/"off" toggles for less visual noise */
[b-6m0wrct77r] .pill-toggle:not(.on) {
    background: #30363d;
    opacity: 0.7;
}

[b-6m0wrct77r] .pill-toggle:not(.on) .pill-knob {
    background: #8b949e;
}

[b-6m0wrct77r] .datagrid td.toggle-cell:hover .pill-toggle:not(.on) {
    opacity: 1;
}

/* Disabled controls - very subtle */
[b-6m0wrct77r] .pill-toggle.disabled {
    background: #21262d;
    opacity: 0.4;
}

/* Grid view cards */
[b-6m0wrct77r] .grid-view .item-card {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .grid-view .item-card:hover {
    background: #21262d;
    border-color: #8b949e;
}

[b-6m0wrct77r] .grid-view .item-card.selected {
    background: #1f3a5f;
    border-color: #58a6ff;
}

/* The grid card markup uses .card-name / .card-price / .card-category
   (.item-card-* was never in the DOM) so the dark overrides below never
   applied and the names rendered #1e293b on the dark card → invisible.
   Both class names are covered now in case either is used. */
[b-6m0wrct77r] .item-card-name,
[b-6m0wrct77r] .card-name {
    color: #e6edf3;
}

[b-6m0wrct77r] .item-card-price,
[b-6m0wrct77r] .card-price {
    color: #7ee787;
}

[b-6m0wrct77r] .item-card-category,
[b-6m0wrct77r] .card-category {
    color: #8b949e;
}

/* Bulk bar - modern glassmorphism effect */
[b-6m0wrct77r] .bulk-bar {
    background: rgba(30, 58, 95, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(88, 166, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Advanced filters panel */
[b-6m0wrct77r] .advanced-filters-panel {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .filter-label {
    color: #8b949e;
}

[b-6m0wrct77r] .filter-select,
[b-6m0wrct77r] .price-input {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

/* Column settings dropdown */
[b-6m0wrct77r] .column-settings-dropdown {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .column-settings-header {
    color: #e6edf3;
    border-color: #30363d;
}

[b-6m0wrct77r] .column-option {
    color: #e6edf3;
}

[b-6m0wrct77r] .column-option:hover {
    background: #21262d;
}

/* Pagination */
[b-6m0wrct77r] .pagination-bar {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .page-btn {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .page-btn:hover {
    background: #30363d;
}

[b-6m0wrct77r] .page-btn.active {
    background: #58a6ff;
    border-color: #58a6ff;
    color: #0d1117;
}

/* Preview panel */
[b-6m0wrct77r] .preview-panel {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .preview-panel h3 {
    color: #e6edf3;
}

[b-6m0wrct77r] .preview-panel .preview-label {
    color: #8b949e;
}

[b-6m0wrct77r] .preview-panel .preview-value {
    color: #e6edf3;
}

/* Modals */
[b-6m0wrct77r] .modal-card {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .modal-header {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

[b-6m0wrct77r] .modal-body {
    color: #e6edf3;
}

/* Context menu */
[b-6m0wrct77r] .context-menu {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

[b-6m0wrct77r] .context-menu-item {
    color: #e6edf3;
}

[b-6m0wrct77r] .context-menu-item:hover {
    background: #21262d;
}

/* Keyboard shortcuts panel */
[b-6m0wrct77r] .shortcuts-panel {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .shortcuts-panel h3 {
    color: #e6edf3;
}

[b-6m0wrct77r] .shortcut-key {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

/* Undo toast */
[b-6m0wrct77r] .undo-toast {
    background: #21262d;
    border-color: #30363d;
}

/* Zone dropdown */
[b-6m0wrct77r] .zone-dropdown {
    background: #161b22;
    border-color: #30363d;
}

[b-6m0wrct77r] .zone-dropdown-header {
    color: #8b949e;
    border-bottom-color: #30363d;
}

[b-6m0wrct77r] .zone-pill.no-zone {
    background: #3d2f0b;
    border-color: #d29922;
    color: #d29922;
}

[b-6m0wrct77r] .zone-pill.no-zone:hover {
    background: #4d3b11;
}

[b-6m0wrct77r] .zone-hint {
    color: #d29922;
}

[b-6m0wrct77r] .zone-option {
    color: #e6edf3;
}

[b-6m0wrct77r] .zone-option:hover {
    background: #21262d;
}

[b-6m0wrct77r] .zone-option.selected {
    /* Brighter than #1f3a5f so the selected row is clearly distinct from the
       dropdown bg (#161b22) and hover (#21262d) in dark mode, with explicit
       light text for legibility. */
    background: #2d5a8a;
    color: #e6edf3;
    font-weight: 500;
}

/* Actions dropdown */
[b-6m0wrct77r] .actions-dropdown {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

[b-6m0wrct77r] .actions-dropdown-item {
    color: #e6edf3;
}

[b-6m0wrct77r] .actions-dropdown-item:hover {
    background: #21262d;
}

/* ============================================
   Dark-theme contrast supplement (2026-05-12)
   ============================================
   The original Catalog dark overrides covered most surfaces but had
   gaps for a handful of base rules that set `color: #1e293b` (dark
   slate) or `background: #fff` without a corresponding dark variant.
   With unconditional dark theme now applied, those rules collide
   with the dark canvas and render invisible text or light pills.
   Each rule below targets one such gap. Keep this block at the
   end of the file so it always wins on equal-specificity cascade. */

/* Product table item names — base sets #1e293b which becomes
   dark-on-dark. Bright slate-100 makes them the brightest text in
   the row (correct hierarchy: primary content brighter than
   column headers). */
[b-6m0wrct77r] .datagrid .item-name,
[b-6m0wrct77r] .items-table-wrap.compact .item-name {
    color: #e6edf3;
}

/* Quick-action row buttons (✏️ edit, ⋮ kebab) — there are TWO
   base rules for .row-action-btn. The later one (line ~2635) sets
   background: #fff with a soft shadow, which paints a white pill
   on dark rows. Override with the same dark slate the rest of the
   page uses. */
[b-6m0wrct77r] .row-action-btn {
    background: #21262d;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
[b-6m0wrct77r] .row-action-btn:hover {
    background: #30363d;
    transform: scale(1.05);
}
[b-6m0wrct77r] .row-action-btn:active {
    background: #484f58;
}

/* Category panel action buttons (✏️ edit-name, 🗑️ archive) — base
   uses transparent bg with light-gray hover. The hover #e2e8f0 was
   readable on light theme but becomes a flash of light on the dark
   panel. Slate-700 hover keeps the affordance without flashing. */
[b-6m0wrct77r] .cat-item-btn:hover {
    background: #30363d;
}
[b-6m0wrct77r] .cat-item-btn:active {
    background: #484f58;
}

/* Generic table cell color — many <td> elements inherit color from
   .datagrid, but compact rows lack an explicit color rule. Inherit
   light. */
[b-6m0wrct77r] .datagrid td,
[b-6m0wrct77r] .items-table-wrap td {
    color: #cbd5e1;
}
[b-6m0wrct77r] .datagrid td.num {
    color: #e6edf3; /* prices: same prominence as names */
}

/* ============================================
   Mobile + dark-theme audit pass (2026-05-12)
   ============================================
   Round 2 of the dark-theme gap fix. The previous supplement caught
   item names + row action buttons + cat-item-btn hover. This pass
   covers the surfaces that became visible once those were fixed:
   the table chrome (wrapper / sticky header / row hover / row
   selection) and the quick-add input row. */

/* Table wrapper — base sets background: #fff which would be visible
   when the table has fewer rows than the viewport. */
[b-6m0wrct77r] .items-table-wrap {
    background: #0d1117;
    border-color: #30363d;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Sticky thead — appears at the top of every scroll and on empty
   states. The base #f8fafc gray reads as a flash of light against
   the dark page. Slate-800 matches the rest of the admin shell. */
[b-6m0wrct77r] .datagrid thead {
    background: #161b22;
}
[b-6m0wrct77r] .datagrid thead::after {
    background: #30363d;
}

/* Row hover — base #f8fafc would render as a near-white flash when
   the operator mouses across rows. Slate-700 keeps the hover
   affordance subtle but visible on dark. */
[b-6m0wrct77r] .datagrid tbody tr {
    border-bottom-color: #21262d;
}
[b-6m0wrct77r] .datagrid tbody tr:hover {
    background: rgba(59, 130, 246, 0.06);
}
[b-6m0wrct77r] .datagrid tbody tr.selected {
    background: rgba(59, 130, 246, 0.14);
}

/* Quick-add row inputs — three white pills (name / price / category)
   that read as a stripe of bright white across the dark page. The
   row itself uses an indigo wash background (#6366f1 at 6% opacity);
   inputs inside should match the rest of admin's dark form inputs:
   slate-900 background, slate-700 border, slate-100 text. */
[b-6m0wrct77r] .quick-add-row .quick-add-name,
[b-6m0wrct77r] .quick-add-row .quick-add-price,
[b-6m0wrct77r] .quick-add-row .quick-add-cat {
    background: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}
[b-6m0wrct77r] .quick-add-row .quick-add-name::placeholder,
[b-6m0wrct77r] .quick-add-row .quick-add-price::placeholder {
    color: #8b949e;
}
[b-6m0wrct77r] .quick-add-row .quick-add-currency {
    color: #8b949e;
}

/* Mobile-friendliness fix: the modifier-options editor rows used a
   rigid `1fr 90px 55px 55px 28px` grid with no phone override, so on a
   ~360px screen the name column was crushed and the row overflowed the
   item-editor modal. Relax the fixed columns at phone width and let the
   row wrap if it still doesn't fit. Desktop layout untouched. */
@media (max-width: 600px) {
    [b-6m0wrct77r] .mod-option-header,
    [b-6m0wrct77r] .mod-option-row {
        grid-template-columns: minmax(0, 1fr) 64px 46px 46px 24px;
        gap: 6px;
        font-size: 12px;
    }

    [b-6m0wrct77r] .mod-option-row input,
    [b-6m0wrct77r] .mod-option-header span {
        min-width: 0;
    }
}

/* ============================================
   Mobile audit fixes (2026-05-18). Appended at EOF so these win by
   source order over the earlier ≤600 blocks (this file has three; a
   rule placed in the first is overridden by later equal-specificity
   ones). Pure .razor.css → single @media is correct.
   ============================================ */
@media (max-width: 600px) {
    /* iOS Safari auto-zooms any focused input under 16px, jumping the
       layout on the page's most-used controls. ItemEditor already does
       this; Catalog's own search/filter inputs did not. */
    [b-6m0wrct77r] .toolbar-search input,
    [b-6m0wrct77r] .cat-search {
        font-size: 16px;
    }

    /* The full-mode action group (Modificadores / Nuevo artículo /
       Acciones▾) was flex-wrap:nowrap; flex-shrink:0 — it cannot
       compress, so three padded buttons overflow horizontally inside
       the column the toolbar becomes on a phone. Let it wrap. */
    [b-6m0wrct77r] .toolbar-actions {
        flex-wrap: wrap;
        flex-shrink: 1;
    }
}

/* ============================================
   Mobile audit L3/L4: touch-target + tiny-font polish for secondary
   chrome. Gated on (pointer: coarse) — the same convention the file
   already uses for .cat-item-btn (l.406) — so it lifts these to the
   44px floor on touch devices without changing the desktop density.
   At EOF so it wins the source-order trap.
   ============================================ */
@media (any-pointer: coarse) {
    /* Grid-card view: edit/duplicate/archive live ONLY in a hover overlay
       with no tap-to-edit fallback — invisible/unreachable on a touch
       tablet. Show them always, but drop the 50%-black wash that would dim
       every thumbnail: pin the white buttons to the top-right corner over a
       transparent overlay, with a shadow so they read against any image. */
    [b-6m0wrct77r] .card-overlay {
        opacity: 1;
        background: transparent;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 6px;
        gap: 6px;
    }
    [b-6m0wrct77r] .card-action {
        box-shadow: 0 1px 5px rgba(0,0,0,.4);
    }

    /* List (items-row) view: same hover-only quick actions → always show. */
    [b-6m0wrct77r] .row-quick-actions {
        display: flex;
    }

    /* Icon/toggle buttons with fixed 28px (or ~24-32px) boxes. min-* wins
       over the explicit width/height, so these reach 44px on touch. */
    [b-6m0wrct77r] .qr-toggle-btn,
    [b-6m0wrct77r] .stats-collapse-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Padding-sized buttons → 44px floor, flex-centered so the label
       stays centred at the larger height. */
    [b-6m0wrct77r] .cat-all-btn,
    [b-6m0wrct77r] .bulk-btn,
    [b-6m0wrct77r] .view-btn,
    [b-6m0wrct77r] .zone-pill {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* "Seleccionar todo"-style underline link: padding:0 gives it almost
       no tap area. Grow it without a rigid 44px box that would misalign
       the inline bulk bar. */
    [b-6m0wrct77r] .bulk-link {
        padding: 8px 8px;
    }

    /* L4: the smallest labels (10-11px) are below comfortable phone
       legibility — nudge to 12px. (12px ones are left as-is.) */
    [b-6m0wrct77r] .cat-all-btn,
    [b-6m0wrct77r] .bulk-link,
    [b-6m0wrct77r] .stats-collapse-btn {
        font-size: 12px;
    }
}

/* ── Dark-theme corrections ──────────────────────────────────────────
   Admin is always dark (theme.js forces /admin/* dark), but these
   elements kept a LIGHT-base background with no dark override (the
   earlier dark overrides only touched text colour, never background).
   Background/border-only here → no text-contrast risk (text on these
   is already theme-muted). Appended at EOF so it wins over the
   duplicate light definitions above without untangling them. */
[b-6m0wrct77r] .cat-item-count {
    background: #21262d;          /* was #f1f5f9 — light pill in dark UI */
}
[b-6m0wrct77r] .datagrid th:hover {
    background: #21262d;          /* was #f1f5f9 — header flashed light */
}
[b-6m0wrct77r] .item-card {
    background: #161b22;          /* was #fff — grid/image cards white */
    border-color: #30363d;
}
[b-6m0wrct77r] .zone-dropdown {
    background: #161b22;          /* printer/zone popup was white */
    border-color: #30363d;
}
[b-6m0wrct77r] .zone-dropdown-header {
    color: #8b949e;
    border-bottom-color: #30363d;
}

/* ── Modal dark theming (bounded + contrast-safe) ────────────────────
   .shortcuts-modal / .duplicates-modal / .modifiers-manager-modal were
   fully light (white bg, hardcoded dark text, light sub-surfaces like
   kbd / .dup-group-header). Every selector below is SCOPED to those
   modal classes so it can't affect the rest of the app: dark surface
   + forced light text on the container and every known light
   sub-surface / dark-text child → readable on dark in all cases.
   Not pixel-perfect (badges may want a final visual polish) but
   strictly better and contrast-safe. */
.shortcuts-modal[b-6m0wrct77r],
.duplicates-modal[b-6m0wrct77r] {
    background: #161b22;
    border: 1px solid #30363d;
    color: #e6edf3;
}
/* Header: base ::deep .modal-header h3 is #1e293b (near-black) and the
   divider is a light line — both vanish on the dark surface, so the
   modal looked title-less. These scoped, higher-specificity rules win. */
.shortcuts-modal .modal-header[b-6m0wrct77r],
.duplicates-modal .modal-header[b-6m0wrct77r],
.shortcuts-modal .modal-footer[b-6m0wrct77r],
.duplicates-modal .modal-footer[b-6m0wrct77r] {
    border-color: #30363d;
}
.shortcuts-modal .modal-header h3[b-6m0wrct77r],
.duplicates-modal .modal-header h3[b-6m0wrct77r] {
    color: #e6edf3;
}
.shortcuts-modal .modal-close[b-6m0wrct77r],
.duplicates-modal .modal-close[b-6m0wrct77r] {
    color: #8b949e;
}
.shortcuts-modal .shortcut-item[b-6m0wrct77r],
.shortcuts-modal .shortcut-item span[b-6m0wrct77r],
.duplicates-modal .duplicates-info[b-6m0wrct77r] {
    color: #e6edf3;
}
.shortcuts-modal .shortcuts-section h4[b-6m0wrct77r] {
    color: #8b949e; /* section labels: muted, not full white */
}
.shortcuts-modal .shortcut-item kbd[b-6m0wrct77r] {
    background: #21262d;
    color: #e6edf3;
    border-color: #30363d;
}
.duplicates-modal .duplicate-group[b-6m0wrct77r] {
    background: #21262d;
    border-color: #30363d;
}
.duplicates-modal .dup-group-header[b-6m0wrct77r] {
    background: #30363d;
    color: #e6edf3;
    border-bottom-color: #30363d;
}
.duplicates-modal .dup-item[b-6m0wrct77r] {
    border-bottom-color: #30363d;
}
/* These four were the invisible/white-on-dark elements: the dark theme
   targeted .dup-item-name/.dup-item-cat but the markup uses .dup-name/
   .dup-category/.dup-price/.dup-action — class-name mismatch. */
.duplicates-modal .dup-name[b-6m0wrct77r] {
    color: #e6edf3;
}
.duplicates-modal .dup-category[b-6m0wrct77r] {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}
.duplicates-modal .dup-price[b-6m0wrct77r] {
    color: #7ee787;
}
.duplicates-modal .dup-action[b-6m0wrct77r] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}
.duplicates-modal .dup-action:hover[b-6m0wrct77r] {
    background: #1f3a5f;
    border-color: #58a6ff;
    color: #58a6ff;
}
.duplicates-modal .no-duplicates p[b-6m0wrct77r] {
    color: #8b949e;
}
[b-6m0wrct77r] .modifiers-manager-modal {
    background: #161b22;
    border-color: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .modal-header h3 {
    color: #e6edf3;
}
[b-6m0wrct77r] .modifiers-manager-modal .modal-body {
    background: #161b22;
    color: #e6edf3;
}
/* Group-card internals: the base rules (l.~3900-4260) are all light
   (#fff/#f8fafc surfaces, #1e293b text). Every selector here is scoped
   under .modifiers-manager-modal so it cannot reach POS Carta or any
   other modal — bounded + contrast-safe, same approach as the
   shortcuts/duplicates dark block above. */
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-card {
    background: #1c2128;
    border-color: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-card.expanded {
    background: #161b22;
    border-color: #58a6ff;
    box-shadow: 0 4px 12px rgba(88,166,255,.15);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-header:hover {
    background: #21262d;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-summary .mod-group-name {
    color: #e6edf3;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-summary .mod-group-meta {
    color: #8b949e;
}
[b-6m0wrct77r] .modifiers-manager-modal .badge-required {
    color: #f87171;
}
[b-6m0wrct77r] .modifiers-manager-modal .badge-items {
    color: #58a6ff;
    background: rgba(88,166,255,.15);
}
[b-6m0wrct77r] .modifiers-manager-modal .icon-btn:hover {
    background: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .icon-btn.danger:hover {
    background: #3d1f1f;
}
[b-6m0wrct77r] .modifiers-manager-modal .expand-icon {
    color: #8b949e;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-group-body {
    border-top-color: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .field-row label,
[b-6m0wrct77r] .modifiers-manager-modal .field-row-inline label,
[b-6m0wrct77r] .modifiers-manager-modal .checkbox-label,
[b-6m0wrct77r] .modifiers-manager-modal .mod-options-header span {
    color: #c9d1d9;
}
[b-6m0wrct77r] .modifiers-manager-modal .input {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}
[b-6m0wrct77r] .modifiers-manager-modal .input::placeholder {
    color: #6e7681;
}
[b-6m0wrct77r] .modifiers-manager-modal .input:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.2);
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-options-section {
    border-top-color: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small:hover {
    background: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-option-header {
    color: #8b949e;
    border-bottom-color: #30363d;
}
[b-6m0wrct77r] .modifiers-manager-modal .mod-option-row:hover {
    background: #21262d;
}
[b-6m0wrct77r] .modifiers-manager-modal .muted {
    color: #8b949e;
}

/* Higher-specificity dark for all inputs/selects inside the modal — the
   plain `.modifiers-manager-modal .input` rules above lose to global
   site.css `.input` rules (and to native browser defaults on raw
   <input>/<select> elements without `.input`). Element selectors raise
   specificity; bounded to this modal so they can't leak. */
[b-6m0wrct77r] .modifiers-manager-modal input[type="text"],
[b-6m0wrct77r] .modifiers-manager-modal input[type="number"],
[b-6m0wrct77r] .modifiers-manager-modal input[type="search"],
[b-6m0wrct77r] .modifiers-manager-modal select,
[b-6m0wrct77r] .modifiers-manager-modal textarea {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
}
[b-6m0wrct77r] .modifiers-manager-modal input[type="text"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal input[type="number"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal input[type="search"]:focus,
[b-6m0wrct77r] .modifiers-manager-modal select:focus,
[b-6m0wrct77r] .modifiers-manager-modal textarea:focus {
    outline: none;
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88,166,255,.2);
}
[b-6m0wrct77r] .modifiers-manager-modal input::placeholder,
[b-6m0wrct77r] .modifiers-manager-modal textarea::placeholder {
    color: #6e7681;
}
[b-6m0wrct77r] .modifiers-manager-modal option {
    background: #0d1117;
    color: #e6edf3;
}
/* Buttons in the modal (other than the green primary) */
[b-6m0wrct77r] .modifiers-manager-modal .btn-small {
    background: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
}
[b-6m0wrct77r] .modifiers-manager-modal .btn-small:hover {
    background: #30363d;
}

/* ── Zone/printer popup ──────────────────────────────────────────────
   Superseded: the popup is now position:fixed (see the base rule) and
   anchored to the pill's bounding rect via inline left/top, so it
   escapes the .cat-list scroll container entirely. The old upward/
   downward `top`/`bottom` mitigation is no longer needed; only normalise
   the stray margins so the inline top isn't offset by a residual gap. */
[b-6m0wrct77r] .zone-dropdown {
    bottom: auto;
    margin: 0;
}

/* ── Right-click menu (.ctx-menu) dark theming ───────────────────────
   The dark rules were written for `.context-menu`, but the markup uses
   `.ctx-menu` — class-name mismatch, so the menu stayed white. These
   match the actual class. Background-on-dark + light text → safe. */
.ctx-menu[b-6m0wrct77r] {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
}
.ctx-menu button[b-6m0wrct77r] {
    color: #e6edf3;
}
.ctx-menu button:hover[b-6m0wrct77r] {
    background: #21262d;
}
.ctx-menu button.danger[b-6m0wrct77r] {
    color: #f87171;
}
.ctx-menu hr[b-6m0wrct77r] {
    border-top-color: #30363d;
}

/* ── Preview panel dark theming ──────────────────────────────────────
   .preview-panel base is white; the earlier ::deep override didn't win
   (responsive/specificity). EOF wins on equal specificity. Surface +
   readable text; price keeps its green accent. */
[b-6m0wrct77r] .preview-panel,
[b-6m0wrct77r] .preview-body {
    background: #161b22;
    color: #e6edf3;
}
[b-6m0wrct77r] .preview-header {
    border-bottom-color: #30363d;
}
[b-6m0wrct77r] .preview-header h3,
[b-6m0wrct77r] .preview-name {
    color: #e6edf3;
}
[b-6m0wrct77r] .preview-category {
    color: #8b949e;
}
[b-6m0wrct77r] .preview-image,
[b-6m0wrct77r] .preview-no-image {
    background: #21262d;
    color: #8b949e;
}
[b-6m0wrct77r] .preview-panel .modal-close {
    color: #8b949e;
}

/* AI menu import: full-screen inline overlay (works inside the POS Carta sheet
   and the admin page). Dark to match the panel; scrollable on small screens. */
.ai-import-overlay[b-6m0wrct77r] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #0d1117;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ───────── Carta (menu) — phone cleanup ─────────
   On phones the page read as broken/confusing: a stark white box around the
   grid on the dark page, two competing search boxes, a redundant inline
   quick-add form, and filter chips overflowing off-screen. These ≤600px
   overrides declutter it; desktop/tablet (≥601px) is untouched. */
@media (max-width: 600px) {
    /* Kill the white box around the product grid — the cards are already dark
       (.grid-view .item-card #161b22), so the wrapper just needs to disappear. */
    [b-6m0wrct77r] .items-grid-wrap {
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        min-height: 0;
    }

    /* One search, not two: drop the category "Buscar…" (categories stay
       tappable); the item "Buscar artículos…" is the one operators need. */
    [b-6m0wrct77r] .cat-search-row .cat-search { display: none; }

    /* Single add path on phones: drop the redundant inline quick-add row —
       "Nuevo artículo" (the full editor) is the add button. */
    [b-6m0wrct77r] .quick-add-row { display: none; }

    /* Filter chips wrap to multiple rows instead of overflowing with a
       half-cut chip at the edge. */
    [b-6m0wrct77r] .filter-bar-chips { flex-wrap: wrap; }
}

/* ───────── Carta (menu) — phone layout rethink ─────────
   The desktop list view is a wide <table> (won't fit a phone), so phones are
   forced into the image-card grid — which shows only ~2 items/screen and wastes
   space on a no-image menu. Re-lay the grid as compact HORIZONTAL rows (thumb
   left, info right, 1 per row) so it scans like a list, ~5-6 items/screen.
   Desktop/tablet (≥601px) keep the card grid + the table list view. */
@media (max-width: 600px) {
    [b-6m0wrct77r] .items-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* Make position:sticky actually work for the category headers: neutralize the
       two ancestor scroll-container traps on phones. .catalog-right was
       overflow:hidden, and .catalog-page was overflow-x:hidden (which blockifies
       overflow-y to "auto" → a scroll container, the classic sticky-killer).
       overflow-x:clip clips horizontally WITHOUT establishing a scroll container,
       so sticky resolves against the (iframe) document and the header pins to the
       top of the visible area. */
    [b-6m0wrct77r] .catalog-page { overflow-x: clip; }
    [b-6m0wrct77r] .catalog-right { overflow: visible; }
    /* Sticky category section header (phone grid is grouped by category). Pins
       to the top of the scroll area as you scroll so it always shows which
       category the visible items belong to — the next category's header pushes
       it up GitHub/iOS-list style. Spans the single column; opaque dark bg so
       cards don't bleed through when pinned. */
    [b-6m0wrct77r] .cat-section-header {
        grid-column: 1 / -1;
        position: sticky;
        top: 0;
        z-index: 6;
        background: #0d1117;
        border-bottom: 1px solid #30363d;
        color: #cbd5e1;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        padding: 8px 10px 7px;
        margin: 4px 0 0;
        border-radius: 6px 6px 0 0;
    }
    [b-6m0wrct77r] .item-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        position: relative;
        min-height: 100px;
    }
    /* Thumbnail: a small left square instead of a full-width 4:3 block.
       100px wide so a row of three 30px action buttons fits across it. */
    [b-6m0wrct77r] .card-img {
        flex: 0 0 100px;
        width: 100px;
        aspect-ratio: auto;
        align-self: stretch;
    }
    [b-6m0wrct77r] .card-img-placeholder { font-size: 22px; }
    /* Info fills the rest, vertically centered. */
    [b-6m0wrct77r] .card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 8px 12px;
    }
    [b-6m0wrct77r] .card-name { font-size: 0.95rem; }
    /* Actions: a compact row pinned to the BOTTOM of the small thumb. Keep the
       overlay TRANSPARENT (don't dim the photo — same rationale as the coarse
       block above) and let the white buttons' shadow carry contrast. Three
       30px buttons + gaps fit inside the 100px thumb without clipping. */
    [b-6m0wrct77r] .card-overlay {
        opacity: 1;
        background: transparent;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        padding: 5px;
    }
    [b-6m0wrct77r] .card-action {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* Pagination: dark the white select / page input / buttons so the bar
       matches the dark page instead of floating white boxes. */
    [b-6m0wrct77r] .page-size-select,
    [b-6m0wrct77r] .page-jump-input,
    [b-6m0wrct77r] .pagination-btn {
        background: #161b22;
        border-color: #30363d;
        color: #e6edf3;
    }
}

/* ───────── Admin Carta (standalone /admin/{slug}/catalog) — phone fit ─────────
   The full admin Carta is power-user territory, reached via the "Avanzado" pill
   in the POS Catálogo sheet. It had NO mobile treatment for the stats bar, the
   category-panel header, or the per-category control rows, so on a phone the
   stat cards stretched oddly, "Todos" was cut off at the right edge, and the
   Cocina/QR/datáfono/edit/trash row overflowed horizontally. Make them fit. */
@media (max-width: 600px) {
    /* Stat cards: two per row instead of stretching to one-per-row giants. */
    [b-6m0wrct77r] .stat-card {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    /* Category-panel header: let "Todos" / "+ Categoría" wrap rather than the
       "Todos" button getting clipped past the right edge. */
    [b-6m0wrct77r] .cat-panel-title-row {
        flex-wrap: wrap;
    }
    [b-6m0wrct77r] .cat-all-btn {
        flex: 0 0 auto;
    }
    /* Per-category controls wrap to a second line instead of overflowing. */
    [b-6m0wrct77r] .cat-item-controls {
        flex-wrap: wrap;
        gap: 6px 4px;
    }

    /* "Acciones ▾" dropdown is right-aligned (right:0), so from the left-positioned
       toolbar button it extended LEFTWARD off the screen edge (its items were
       clipped on the left). Open it rightward from the button instead, capped to
       the viewport. */
    [b-6m0wrct77r] .actions-dropdown {
        left: 0;
        right: auto;
        max-width: calc(100vw - 24px);
    }
}
/* /Pages/Admin/Combos.razor.rz.scp.css */
.combos-container[b-u6b2w6almn] { padding: 1.5rem; }
.page-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-u6b2w6almn] { font-size: 1.5rem; color: #f1f5f9; margin: 0; }
.subtitle[b-u6b2w6almn] { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
.btn[b-u6b2w6almn] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-u6b2w6almn] { background: #3b82f6; color: white; }
.btn.primary:hover[b-u6b2w6almn] { background: #2563eb; }
.btn.outline[b-u6b2w6almn] { background: transparent; border: 1px solid #334155; color: #e2e8f0; }
.btn.outline:hover[b-u6b2w6almn] { border-color: #475569; }
.btn.outline.sm[b-u6b2w6almn] { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.btn.danger-outline[b-u6b2w6almn] { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
.btn.danger-outline:hover[b-u6b2w6almn] { background: rgba(239,68,68,0.1); }
.btn:disabled[b-u6b2w6almn] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-u6b2w6almn] { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.btn-icon.danger[b-u6b2w6almn] { color: #ef4444; }
.combos-grid[b-u6b2w6almn] { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.combo-card[b-u6b2w6almn] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.combo-card.inactive[b-u6b2w6almn] { opacity: 0.6; }
.combo-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.combo-header h3[b-u6b2w6almn] { color: #f1f5f9; margin: 0; font-size: 1rem; }
.combo-price[b-u6b2w6almn] { font-size: 1.25rem; font-weight: 700; color: #22c55e; }
.combo-desc[b-u6b2w6almn] { color: #94a3b8; font-size: 0.8rem; margin-bottom: 0.5rem; }
.badge.discount[b-u6b2w6almn] { background: rgba(245,158,11,0.15); color: #f59e0b; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem; display: inline-block; }
.combo-slots[b-u6b2w6almn] { margin: 0.75rem 0; padding: 0.5rem; background: #0f172a; border-radius: 0.375rem; }
.slot-row[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #e2e8f0; padding: 0.25rem 0; }
.slot-name[b-u6b2w6almn] { font-weight: 500; }
.slot-count[b-u6b2w6almn] { color: #94a3b8; }
.slot-options[b-u6b2w6almn] { color: #3b82f6; }
.combo-actions[b-u6b2w6almn] { display: flex; gap: 0.5rem; }
.form-input[b-u6b2w6almn] { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input.small[b-u6b2w6almn] { width: 80px; flex-shrink: 0; }
.form-input:focus[b-u6b2w6almn] { border-color: #3b82f6; outline: none; }
.modal-overlay[b-u6b2w6almn] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-u6b2w6almn] { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; width: 90%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; }
.modal.wide[b-u6b2w6almn] { max-width: 640px; }
.modal-header[b-u6b2w6almn] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #334155; }
.modal-header h2[b-u6b2w6almn] { font-size: 1.1rem; color: #f1f5f9; margin: 0; }
.close-btn[b-u6b2w6almn] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.modal-body[b-u6b2w6almn] { padding: 1.25rem; overflow-y: auto; flex: 1; }
.form-group[b-u6b2w6almn] { margin-bottom: 1rem; }
.form-group label[b-u6b2w6almn] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.25rem; }
.form-row[b-u6b2w6almn] { display: flex; gap: 1rem; }
.form-row .form-group[b-u6b2w6almn] { flex: 1; }
.slots-title[b-u6b2w6almn] { color: #f1f5f9; font-size: 0.9rem; margin: 1rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid #334155; }
.slot-editor[b-u6b2w6almn] { background: #0f172a; border: 1px solid #334155; border-radius: 0.375rem; padding: 0.75rem; margin-bottom: 0.75rem; }
.slot-editor-header[b-u6b2w6almn] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.slot-items[b-u6b2w6almn] { padding-left: 0.5rem; }
.slot-item-row[b-u6b2w6almn] { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.modal-footer[b-u6b2w6almn] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #334155; }
.loading-state[b-u6b2w6almn] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-u6b2w6almn] { width: 2rem; height: 2rem; border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin-b-u6b2w6almn 0.8s linear infinite; }
@keyframes spin-b-u6b2w6almn { to { transform: rotate(360deg); } }
.empty-state[b-u6b2w6almn] { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state h2[b-u6b2w6almn] { color: #e2e8f0; margin-bottom: 0.5rem; }
.empty-state svg[b-u6b2w6almn] { margin-bottom: 1rem; }

/* ===== Modal overflow + 44px touch targets (Codex QA) ===== */

/* The slot header (name input + min/max + remove ×) ran past the modal's right
   edge — let it wrap instead of overflowing. */
.slot-editor-header[b-u6b2w6almn] { flex-wrap: wrap; }

/* 44px touch floor for admin/tablet (controls were ~28-39px from padding only).
   inline-flex centres the label at the larger height. */
.btn[b-u6b2w6almn],
.form-input[b-u6b2w6almn],
.btn.outline.sm[b-u6b2w6almn] {
    min-height: 44px;
}
.btn[b-u6b2w6almn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icon × buttons (modal close, slot/item remove) → 44×44 tap box without
   bloating the glyph. */
.close-btn[b-u6b2w6almn],
.btn-icon[b-u6b2w6almn] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* "+ Item" stays visually compact (small font) but gets a real tap box. */
.btn.outline.sm[b-u6b2w6almn] { padding: 0.25rem 0.75rem; }

/* Mobile: a 340px min card column + 24px AdminLayout padding overflows a
   390px phone. Collapse to one column. (Scoped .razor.css = auto-namespaced.) */
@media (max-width: 480px) {
    .combos-container[b-u6b2w6almn] { padding: 1rem; }
    .combos-grid[b-u6b2w6almn] { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* /Pages/Admin/CostSimulation.razor.rz.scp.css */
.simulation-container[b-hngdkslbq8] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-hngdkslbq8] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-hngdkslbq8] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.25rem 0;
}

.subtitle[b-hngdkslbq8] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0;
}

/* Main Content Layout */
.main-content[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Simulation Panel */
.simulation-panel[b-hngdkslbq8] {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #334155;
}

.panel-header[b-hngdkslbq8] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f172a;
}

.panel-header h2[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.simulation-badge[b-hngdkslbq8] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-radius: 4px;
    font-weight: 500;
}

.simulation-form[b-hngdkslbq8] {
    padding: 1.5rem;
}

.form-group[b-hngdkslbq8] {
    margin-bottom: 1.25rem;
}

.form-group label[b-hngdkslbq8] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.form-select[b-hngdkslbq8],
.form-input[b-hngdkslbq8] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #e2e8f0;
    background: #0f172a;
}

.form-select:focus[b-hngdkslbq8],
.form-input:focus[b-hngdkslbq8] {
    outline: none;
    border-color: #3b82f6;
}

.form-select[b-hngdkslbq8] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-hngdkslbq8] {
    background: #1e293b;
    color: #e2e8f0;
}

.price-input-group[b-hngdkslbq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-input-group .form-input[b-hngdkslbq8] {
    flex: 1;
}

.input-suffix[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: #94a3b8;
    white-space: nowrap;
}

.price-change[b-hngdkslbq8] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.price-change.increase[b-hngdkslbq8] {
    color: #f87171;
}

.price-change.decrease[b-hngdkslbq8] {
    color: #4ade80;
}

/* Current Info */
.current-info[b-hngdkslbq8] {
    background: #0f172a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid #334155;
}

.info-item[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.info-item:not(:last-child)[b-hngdkslbq8] {
    border-bottom: 1px solid #334155;
}

.info-label[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.info-value[b-hngdkslbq8] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #f1f5f9;
}

/* Buttons */
.btn[b-hngdkslbq8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn.primary[b-hngdkslbq8] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-hngdkslbq8] {
    background: #2563eb;
}

.btn.primary:disabled[b-hngdkslbq8] {
    background: #475569;
    cursor: not-allowed;
    color: #94a3b8;
}

.btn.outline[b-hngdkslbq8] {
    background: #334155;
    border: 1px solid #475569;
    color: #f1f5f9;
}

.btn.outline:hover[b-hngdkslbq8] {
    background: #475569;
}

/* Results Panel */
.results-panel[b-hngdkslbq8] {
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #334155;
}

.empty-results[b-hngdkslbq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #94a3b8;
}

.empty-results svg[b-hngdkslbq8] {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-results h3[b-hngdkslbq8] {
    font-size: 1.125rem;
    color: #f1f5f9;
    margin: 0 0 0.5rem 0;
}

.empty-results p[b-hngdkslbq8] {
    max-width: 360px;
    margin: 0;
}

/* Impact Summary */
.impact-summary[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: #0f172a;
}

.impact-card[b-hngdkslbq8] {
    text-align: center;
}

.impact-label[b-hngdkslbq8] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.impact-value[b-hngdkslbq8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.impact-value.positive[b-hngdkslbq8] {
    color: #4ade80;
}

.impact-value.negative[b-hngdkslbq8] {
    color: #f87171;
}

/* Recipes Table */
.results-panel h3[b-hngdkslbq8] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    padding: 1rem 1.5rem;
    margin: 0;
    border-bottom: 1px solid #334155;
}

.recipes-table-container[b-hngdkslbq8] {
    overflow-x: auto;
}

.recipes-table[b-hngdkslbq8] {
    width: 100%;
    border-collapse: collapse;
}

.recipes-table th[b-hngdkslbq8] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #0f172a;
}

.recipes-table td[b-hngdkslbq8] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #334155;
    color: #e2e8f0;
}

.recipes-table tbody tr:hover[b-hngdkslbq8] {
    background: #334155;
}

.recipes-table .recipe-name[b-hngdkslbq8] {
    font-weight: 500;
    color: #f1f5f9;
}

.recipes-table tr.critical-margin[b-hngdkslbq8] {
    background: rgba(220, 38, 38, 0.15);
}

.recipes-table tr.low-margin[b-hngdkslbq8] {
    background: rgba(251, 191, 36, 0.15);
}

.new-cost[b-hngdkslbq8] {
    font-weight: 500;
}

.cost-change[b-hngdkslbq8] {
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.cost-change.up[b-hngdkslbq8] {
    color: #f87171;
}

.cost-change.down[b-hngdkslbq8] {
    color: #4ade80;
}

td.warning[b-hngdkslbq8] {
    color: #fbbf24;
    font-weight: 500;
}

.status-badge[b-hngdkslbq8] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.critical[b-hngdkslbq8] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.status-badge.warning[b-hngdkslbq8] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.status-badge.ok[b-hngdkslbq8] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

/* Simulation Actions */
.simulation-actions[b-hngdkslbq8] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid #334155;
}

.simulation-actions .btn[b-hngdkslbq8] {
    flex: 1;
    width: auto;
}

/* Section */
.section[b-hngdkslbq8] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #334155;
}

.section h2[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 1rem 0;
}

.section-header[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-hngdkslbq8] {
    margin: 0;
}

.section-subtitle[b-hngdkslbq8] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Category Grid */
.category-grid[b-hngdkslbq8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.category-card[b-hngdkslbq8] {
    background: #0f172a;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #334155;
}

.category-name[b-hngdkslbq8] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.75rem;
}

.category-stats[b-hngdkslbq8] {
    display: flex;
    justify-content: space-between;
}

.cat-stat[b-hngdkslbq8] {
    text-align: center;
}

.cat-value[b-hngdkslbq8] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    display: block;
}

.cat-label[b-hngdkslbq8] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Suggestions Table */
.suggestions-table-container[b-hngdkslbq8] {
    overflow-x: auto;
}

.suggestions-table[b-hngdkslbq8] {
    width: 100%;
    border-collapse: collapse;
}

.suggestions-table th[b-hngdkslbq8] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #0f172a;
}

.suggestions-table td[b-hngdkslbq8] {
    padding: 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #334155;
    color: #e2e8f0;
}

.suggestions-table tbody tr:hover[b-hngdkslbq8] {
    background: #334155;
}

.suggested-price[b-hngdkslbq8] {
    font-weight: 600;
    color: #818cf8;
}

.suggested-price .change[b-hngdkslbq8] {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

.suggested-price .change.up[b-hngdkslbq8] {
    color: #4ade80;
}

.target-margin[b-hngdkslbq8] {
    color: #4ade80;
    font-weight: 500;
}

/* Loading State */
.loading-state[b-hngdkslbq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #94a3b8;
}

.spinner[b-hngdkslbq8] {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-hngdkslbq8 1s linear infinite;
}

@keyframes spin-b-hngdkslbq8 {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .main-content[b-hngdkslbq8] {
        grid-template-columns: 1fr;
    }

    .impact-summary[b-hngdkslbq8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .simulation-container[b-hngdkslbq8] {
        padding: 1rem;
    }

    .simulation-actions[b-hngdkslbq8] {
        flex-direction: column;
    }

    .category-grid[b-hngdkslbq8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .simulation-container[b-hngdkslbq8] {
        padding: 0.75rem;
    }

    .page-header h1[b-hngdkslbq8] {
        font-size: 1.25rem;
    }

    .impact-summary[b-hngdkslbq8] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .impact-value[b-hngdkslbq8] {
        font-size: 1rem;
    }

    .simulation-form[b-hngdkslbq8] {
        padding: 1rem;
    }
}
/* /Pages/Admin/Crm.razor.rz.scp.css */
/* Dark theme admin page — CRM */
.crm-page[b-29w92ui74u] { padding: 24px; max-width: 1200px; margin: 0 auto; color: #e2e8f0; }

.page-header[b-29w92ui74u] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.header-left[b-29w92ui74u] { display: flex; align-items: baseline; gap: 12px; }
.header-left h1[b-29w92ui74u] { font-size: 1.5rem; margin: 0; color: #f1f5f9; }

.message-banner[b-29w92ui74u] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-29w92ui74u] { background: #064e3b; color: #6ee7b7; border: 1px solid #065f46; }
.message-banner.error[b-29w92ui74u] { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.dismiss[b-29w92ui74u] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

.loading-state[b-29w92ui74u] { text-align: center; padding: 60px 0; color: #94a3b8; }
.spinner[b-29w92ui74u] { width: 32px; height: 32px; border: 3px solid #334155; border-top-color: #3b82f6; border-radius: 50%; animation: spin-b-29w92ui74u 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin-b-29w92ui74u { to { transform: rotate(360deg); } }

/* Tabs */
.tabs[b-29w92ui74u] { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #334155; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab[b-29w92ui74u] {
    padding: 10px 20px; border: none; background: transparent; color: #475569; font-size: 0.85rem;
    font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
.tab:hover[b-29w92ui74u] { color: #e2e8f0; }
.tab.active[b-29w92ui74u] { color: #2563eb; border-bottom-color: #2563eb; }
.tab-badge[b-29w92ui74u] { font-size: 0.7rem; background: #334155; color: #94a3b8; padding: 2px 6px; border-radius: 10px; }
.tab.active .tab-badge[b-29w92ui74u] { background: #1e3a5f; color: #60a5fa; }

/* Form */
.input[b-29w92ui74u] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    background: #0f172a; border: 1px solid #334155; border-radius: 8px;
    color: #e2e8f0; font-size: 0.85rem; box-sizing: border-box;
}
.input:focus[b-29w92ui74u] { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
textarea.input[b-29w92ui74u] { resize: vertical; min-height: 60px; }

.form-group[b-29w92ui74u] { display: flex; flex-direction: column; gap: 4px; }
.form-label[b-29w92ui74u] { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }

/* Buttons */
.btn[b-29w92ui74u] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid #334155; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: #1e293b; color: #e2e8f0; white-space: nowrap;
}
.btn:hover[b-29w92ui74u] { background: #334155; }
.btn:active[b-29w92ui74u] { transform: scale(0.97); }
.btn:disabled[b-29w92ui74u] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[b-29w92ui74u] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn-primary:hover[b-29w92ui74u] { background: #1d4ed8; }
.btn-ghost[b-29w92ui74u] { background: transparent; border-color: #475569; color: #94a3b8; }
.btn-ghost:hover[b-29w92ui74u] { border-color: #3b82f6; color: #e2e8f0; }

/* Stat cards */
.stat-card[b-29w92ui74u] {
    background: #0f172a; border: 1px solid #334155; border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.stat-value[b-29w92ui74u] { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; }
.stat-label[b-29w92ui74u] { font-size: 0.7rem; color: #64748b; margin-top: 2px; }

/* VIP tier colors */
.tier-platinum[b-29w92ui74u], .stat-value.tier-platinum[b-29w92ui74u] { color: #c084fc; }
.tier-gold[b-29w92ui74u], .stat-value.tier-gold[b-29w92ui74u] { color: #fbbf24; }
.tier-silver[b-29w92ui74u], .stat-value.tier-silver[b-29w92ui74u] { color: #94a3b8; }
.tier-regular[b-29w92ui74u], .stat-value.tier-regular[b-29w92ui74u] { color: #64748b; }

.tier-badge[b-29w92ui74u] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 4px; background: #334155; color: #94a3b8;
}
.tier-badge.tier-platinum[b-29w92ui74u] { background: #3b1f4a; color: #c084fc; }
.tier-badge.tier-gold[b-29w92ui74u] { background: #78350f; color: #fbbf24; }
.tier-badge.tier-silver[b-29w92ui74u] { background: #1e293b; color: #94a3b8; }
.tier-badge.tier-regular[b-29w92ui74u] { background: #1e293b; color: #64748b; }

/* Data table */
.data-table[b-29w92ui74u] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead tr[b-29w92ui74u] { color: #94a3b8; border-bottom: 1px solid #334155; }
.data-table th[b-29w92ui74u] { text-align: left; padding: 8px 12px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table td[b-29w92ui74u] { padding: 10px 12px; border-bottom: 1px solid #1e293b; }
.data-table tbody tr[b-29w92ui74u] { transition: background 0.1s; }
.data-table tbody tr:hover[b-29w92ui74u] { background: #1e293b; }

/* Empty state */
.empty-state[b-29w92ui74u] { text-align: center; padding: 60px 0; color: #94a3b8; }

/* Premium sections */
.premium-section[b-29w92ui74u] { background: #1e293b; border-radius: 12px; padding: 24px; }
.section-title[b-29w92ui74u] { font-size: 18px; margin: 0 0 16px; color: #f1f5f9; }

.tier-config-card[b-29w92ui74u] {
    background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 16px;
    border-left: 3px solid;
}

/* Segments */
.segment-card[b-29w92ui74u] {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 14px 16px;
}

/* Churn risk colors */
.churn-high[b-29w92ui74u] { color: #fca5a5; }
.churn-medium[b-29w92ui74u] { color: #fbbf24; }
.churn-low[b-29w92ui74u] { color: #86efac; }

/* Timeline */
.timeline-list[b-29w92ui74u] { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.timeline-item[b-29w92ui74u] {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px;
    border-left: 2px solid #334155; margin-left: 10px;
}
.timeline-icon[b-29w92ui74u] {
    width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0; margin-left: -23px;
}
.timeline-order[b-29w92ui74u] { background: #1e3a5f; color: #60a5fa; }
.timeline-reservation[b-29w92ui74u] { background: #3b1f4a; color: #c084fc; }
.timeline-feedback[b-29w92ui74u] { background: #365314; color: #86efac; }
.timeline-communication[b-29w92ui74u] { background: #78350f; color: #fbbf24; }

.data-table-wrap[b-29w92ui74u] {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .crm-page[b-29w92ui74u] { padding: 12px; }
    .tier-config-card[b-29w92ui74u] { min-width: 0; }
}

/* Responsive customer table — under 640px the table reflows into a
   vertical card list. Each row becomes a card; each cell gets its
   column label as a prefix (via data-label). Saves a horizontal scroll
   that hid LastVisitAt and Tags on phones. */
@media (max-width: 640px) {
    .data-table-wrap[b-29w92ui74u] {
        overflow-x: visible;
    }

    .data-table-responsive[b-29w92ui74u],
    .data-table-responsive thead[b-29w92ui74u],
    .data-table-responsive tbody[b-29w92ui74u],
    .data-table-responsive tr[b-29w92ui74u],
    .data-table-responsive td[b-29w92ui74u] {
        display: block;
        width: 100%;
    }

    /* Hide the column header row — labels now sit inline with each cell. */
    .data-table-responsive thead[b-29w92ui74u] {
        position: absolute;
        left: -9999px;
        top: -9999px;
    }

    .data-table-responsive tr[b-29w92ui74u] {
        margin-bottom: 12px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 10px;
        padding: 4px 0;
    }

    .data-table-responsive td[b-29w92ui74u] {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 8px 14px;
        border-bottom: 1px solid rgba(51, 65, 85, 0.5);
        text-align: right;
        white-space: normal;
    }

    .data-table-responsive td:last-child[b-29w92ui74u] {
        border-bottom: none;
    }

    .data-table-responsive td[b-29w92ui74u]::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: #94a3b8;
        text-align: left;
    }
}

/* iPhone-width (~390px) overflow hardening. Additive only — nothing here
   touches desktop/base. Targets three things the narrow viewport breaks:
   the tab row overflowing right, the search/filter row clipping right, and
   the responsive customer cards pushing long values past the right edge. */
@media (max-width: 600px) {
    /* Keep the page itself from overflowing the viewport. */
    .crm-page[b-29w92ui74u] { overflow-x: hidden; }

    /* Tab row: horizontal-scroll instead of overflowing off the right edge. */
    .tabs[b-29w92ui74u] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab[b-29w92ui74u] { flex: 0 0 auto; }

    /* Search & filter row: stack full-width so nothing clips on the right. */
    .search-bar[b-29w92ui74u] { flex-direction: column; align-items: stretch; }
    .search-bar > .input[b-29w92ui74u],
    .search-bar > .btn[b-29w92ui74u] { width: 100% !important; min-width: 0 !important; }

    /* Responsive customer cards: never exceed the viewport, and let the
       value cell shrink + wrap so long names/phones can't push past the
       right edge. The value is an anonymous text node after the ::before
       label, so we constrain wrapping on the cell itself. */
    .data-table-responsive tr[b-29w92ui74u] { max-width: 100%; }
    .data-table-responsive td[b-29w92ui74u] {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .data-table-responsive td[b-29w92ui74u]::before { flex: 0 0 38%; min-width: 0; }
}
/* /Pages/Admin/Gastos.razor.rz.scp.css */
/* Gastos — premium, scoped (Blazor CSS isolation). All classes gx-* prefixed.
   Light base + :root[data-theme="dark"] overrides (admin runs dark). */

.gx[b-qw0bnr9gpp] { max-width: 1040px; margin: 0 auto; padding: 8px 20px 64px; color: #0f172a; }

.gx-head[b-qw0bnr9gpp] { margin-bottom: 18px; }
.gx-head h1[b-qw0bnr9gpp] { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; }
.gx-head p[b-qw0bnr9gpp] { margin: 0; color: #64748b; max-width: 620px; line-height: 1.5; font-size: 14.5px; }

/* ---------- drop zone ---------- */
.gx-drop[b-qw0bnr9gpp] {
    position: relative; display: block; cursor: pointer;
    border: 2px dashed #cbd5e1; border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc, #f0f9ff);
    padding: 34px 20px; margin-bottom: 18px;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.gx-drop:hover[b-qw0bnr9gpp] { border-color: #6366f1; background: linear-gradient(135deg, #eef2ff, #e0f2fe); }
.gx-drop.over[b-qw0bnr9gpp] { border-color: #4f46e5; background: linear-gradient(135deg, #e0e7ff, #dbeafe); transform: scale(1.005); }
.gx-drop.busy[b-qw0bnr9gpp] { pointer-events: none; opacity: .9; }
/* InputFile renders its <input> in a CHILD component → scoped CSS can't reach it
   without ::deep. Make it invisible + fill the whole zone so drops land on it. */
.gx-drop[b-qw0bnr9gpp]  .gx-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gx-drop.busy[b-qw0bnr9gpp]  .gx-drop-input { display: none; }
.gx-drop-inner[b-qw0bnr9gpp] { text-align: center; pointer-events: none; }
.gx-drop-icon[b-qw0bnr9gpp] { font-size: 34px; margin-bottom: 6px; }
.gx-drop-title[b-qw0bnr9gpp] { font-size: 16px; font-weight: 700; color: #334155; }
.gx-drop-sub[b-qw0bnr9gpp] { font-size: 13px; color: #94a3b8; margin-top: 3px; }
.gx-progress[b-qw0bnr9gpp] { width: 220px; height: 6px; border-radius: 999px; background: #e2e8f0; margin: 12px auto 0; overflow: hidden; }
.gx-progress-bar[b-qw0bnr9gpp] { height: 100%; background: linear-gradient(90deg, #6366f1, #4f46e5); border-radius: 999px; transition: width .2s ease; }

/* ---------- toolbar ---------- */
.gx-toolbar[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gx-search[b-qw0bnr9gpp] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; }
.gx-search input[b-qw0bnr9gpp] { flex: 1 1 220px; min-width: 180px; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; background: #fff; color: #0f172a; }
.gx-search select[b-qw0bnr9gpp] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 13.5px; background: #fff; color: #334155; }
.gx-search input:focus[b-qw0bnr9gpp], .gx-search select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.gx-filters[b-qw0bnr9gpp] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gx-chip[b-qw0bnr9gpp] {
    appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.gx-chip:hover[b-qw0bnr9gpp] { border-color: #cbd5e1; }
.gx-chip.active[b-qw0bnr9gpp] { background: #4f46e5; border-color: transparent; color: #fff; }
.gx-count[b-qw0bnr9gpp] { font-size: 11px; font-weight: 700; background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px; }
.gx-chip.active .gx-count[b-qw0bnr9gpp] { background: rgba(255,255,255,.25); }

/* ---------- buttons ---------- */
.gx-btn[b-qw0bnr9gpp] { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: box-shadow .2s ease; }
.gx-btn:hover:not(:disabled)[b-qw0bnr9gpp] { box-shadow: 0 3px 12px rgba(15,23,42,.1); }
.gx-btn:disabled[b-qw0bnr9gpp] { opacity: .6; cursor: default; }
.gx-btn.primary[b-qw0bnr9gpp] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 6px 18px rgba(79,70,229,.28); }
.gx-btn.ghost[b-qw0bnr9gpp] { border-color: transparent; background: transparent; color: #4f46e5; }
.gx-btn.ghost:hover:not(:disabled)[b-qw0bnr9gpp] { background: #eef2ff; box-shadow: none; }

/* ---------- empty ---------- */
.gx-empty[b-qw0bnr9gpp] { text-align: center; padding: 48px 24px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; }
.gx-empty-icon[b-qw0bnr9gpp] { font-size: 40px; margin-bottom: 8px; }

/* ---------- summary ---------- */
.gx-summary[b-qw0bnr9gpp] { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.gx-summary > div[b-qw0bnr9gpp] { display: flex; flex-direction: column; }
.gx-summary span[b-qw0bnr9gpp] { font-size: 12px; color: #94a3b8; }
.gx-summary strong[b-qw0bnr9gpp] { font-size: 16px; }

/* ---------- nóminas ---------- */
.gx-nom-form[b-qw0bnr9gpp] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
.gx-nom-form .gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
.gx-nom-summary[b-qw0bnr9gpp] { display: flex; gap: 28px; flex-wrap: wrap; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.gx-nom-summary > div[b-qw0bnr9gpp] { display: flex; flex-direction: column; }
.gx-nom-summary span[b-qw0bnr9gpp] { font-size: 12px; color: #94a3b8; }
.gx-nom-summary strong[b-qw0bnr9gpp] { font-size: 15px; }
:root[data-theme="dark"] .gx-nom-summary[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; }
@media (max-width: 620px) { .gx-nom-form[b-qw0bnr9gpp] { grid-template-columns: repeat(2, 1fr); } }

/* ---------- table ---------- */
/* overflow:visible (NOT hidden) so the absolutely-positioned row menu isn't clipped; round the header corners to keep the card look. */
.gx-table-wrap[b-qw0bnr9gpp] { border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.gx-table[b-qw0bnr9gpp] { width: 100%; border-collapse: collapse; }
.gx-table thead th[b-qw0bnr9gpp] { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.gx-table thead th:first-child[b-qw0bnr9gpp] { border-top-left-radius: 13px; }
.gx-table thead th:last-child[b-qw0bnr9gpp] { border-top-right-radius: 13px; }
.gx-table th.num[b-qw0bnr9gpp], .gx-table td.num[b-qw0bnr9gpp] { text-align: right; font-variant-numeric: tabular-nums; }
.gx-table tbody td[b-qw0bnr9gpp] { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.gx-table tbody tr:last-child td[b-qw0bnr9gpp] { border-bottom: none; }
.gx-table tbody tr:hover[b-qw0bnr9gpp] { background: #f8fafc; cursor: default; }
.gx-supplier[b-qw0bnr9gpp] { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-table td.strong[b-qw0bnr9gpp] { font-weight: 700; }
.gx-cat[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; background: #f1f5f9; padding: 2px 9px; border-radius: 999px; }
.gx-zone[b-qw0bnr9gpp] { font-size: 11px; font-weight: 600; color: #4338ca; background: #e0e7ff; padding: 2px 8px; border-radius: 999px; margin-left: 5px; }
:root[data-theme="dark"] .gx-zone[b-qw0bnr9gpp] { background: #312e81; color: #c7d2fe; }

/* ---------- multi-line editor (in the modal) ---------- */
.gx-line-totals[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; background: #f1f5f9; border-radius: 10px; }
.gx-line-totals > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; }
.gx-line-totals > div[b-qw0bnr9gpp] { font-size: 13.5px; }
.gx-lines-head[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gx-lines-head > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 700; color: #475569; }
.gx-lines[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 6px; }
.gx-line-row[b-qw0bnr9gpp] { display: grid; grid-template-columns: 1.8fr 1.3fr 1fr 1.1fr 1fr 0.8fr 0.8fr 0.8fr 32px; gap: 6px; align-items: center; }
.gx-line-row.gx-line-hdr[b-qw0bnr9gpp] { font-size: 11px; font-weight: 600; color: #94a3b8; }
.gx-line-row.gx-line-hdr > span[b-qw0bnr9gpp] { padding-left: 2px; }
.gx-line-row input[b-qw0bnr9gpp], .gx-line-row select[b-qw0bnr9gpp] { padding: 6px 7px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 13px; background: #fff; color: #0f172a; min-width: 0; }
.gx-line-row input:focus[b-qw0bnr9gpp], .gx-line-row select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; }
.gx-line-hint[b-qw0bnr9gpp] { font-size: 12px; color: #94a3b8; margin-top: 6px; }
:root[data-theme="dark"] .gx-line-totals[b-qw0bnr9gpp] { background: #1e293b; }
:root[data-theme="dark"] .gx-line-totals > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-lines-head > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-line-row input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-line-row select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
@media (max-width: 720px) {
    .gx-line-row[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr 1fr; }
    .gx-line-row.gx-line-hdr[b-qw0bnr9gpp] { display: none; }
}

.gx-pill[b-qw0bnr9gpp] { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.gx-pill.ok[b-qw0bnr9gpp] { background: #d1fae5; color: #047857; }
.gx-pill.draft[b-qw0bnr9gpp] { background: #fef3c7; color: #92600a; }

.gx-row-actions[b-qw0bnr9gpp] { white-space: nowrap; text-align: right; }
.gx-icon-btn[b-qw0bnr9gpp] { appearance: none; border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 7px; border-radius: 7px; line-height: 1; color: #64748b; }
.gx-icon-btn:hover[b-qw0bnr9gpp] { background: #f1f5f9; color: #0f172a; }
.gx-icon-btn.ok[b-qw0bnr9gpp] { color: #047857; }
.gx-icon-btn.ok:hover[b-qw0bnr9gpp] { background: #d1fae5; }

/* row 3-dot menu */
.gx-menu-backdrop[b-qw0bnr9gpp] { position: fixed; inset: 0; z-index: 80; }
.gx-rowmenu[b-qw0bnr9gpp] { position: absolute; right: 6px; top: 100%; margin-top: 2px; z-index: 130; min-width: 168px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; text-align: left; }
.gx-rowmenu button[b-qw0bnr9gpp] { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #334155; padding: 9px 11px; border-radius: 8px; }
.gx-rowmenu button:hover[b-qw0bnr9gpp] { background: #f1f5f9; }
.gx-rowmenu button.danger[b-qw0bnr9gpp] { color: #b91c1c; }
.gx-rowmenu button.danger:hover[b-qw0bnr9gpp] { background: #fee2e2; }

/* ---------- modal ---------- */
.gx-modal-backdrop[b-qw0bnr9gpp] { position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gx-modal[b-qw0bnr9gpp] { width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(15,23,42,.3); overflow: hidden; }
.gx-modal.with-preview[b-qw0bnr9gpp] { max-width: 1000px; }
.gx-modal-head[b-qw0bnr9gpp] { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #f1f5f9; flex: 0 0 auto; }
.gx-modal-head h2[b-qw0bnr9gpp] { margin: 0; font-size: 18px; font-weight: 700; }
.gx-modal-split[b-qw0bnr9gpp] { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.gx-modal-preview[b-qw0bnr9gpp] { flex: 0 0 44%; max-width: 44%; background: #0b1220; padding: 12px; overflow: auto; }
.gx-modal-preview img[b-qw0bnr9gpp] { width: 100%; height: auto; border-radius: 8px; display: block; }
.gx-modal-preview object[b-qw0bnr9gpp] { width: 100%; height: 100%; min-height: 60vh; border: none; border-radius: 8px; }
.gx-preview-loading[b-qw0bnr9gpp] { color: #94a3b8; text-align: center; padding: 40px 12px; font-size: 14px; }
.gx-preview-loading a[b-qw0bnr9gpp] { color: #818cf8; }
.gx-modal-body[b-qw0bnr9gpp] { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; flex: 1 1 auto; overflow: auto; align-content: start; }
.gx-modal.with-preview .gx-modal-body[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr; }
.gx-field[b-qw0bnr9gpp] { display: flex; flex-direction: column; gap: 4px; }
.gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
.gx-field > span[b-qw0bnr9gpp] { font-size: 12px; font-weight: 600; color: #475569; }
.gx-field input[b-qw0bnr9gpp], .gx-field select[b-qw0bnr9gpp] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; background: #fff; color: #0f172a; }
.gx-field input:focus[b-qw0bnr9gpp], .gx-field select:focus[b-qw0bnr9gpp] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.gx-file-pick[b-qw0bnr9gpp] { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; font-size: 13px; color: #64748b; cursor: pointer; overflow: hidden; }
.gx-file-pick[b-qw0bnr9gpp]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gx-modal-foot[b-qw0bnr9gpp] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* ===================== dark ===================== */
:root[data-theme="dark"] .gx[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-head p[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-drop[b-qw0bnr9gpp] { border-color: #475569; background: linear-gradient(135deg, #1a2436, #15233a); }
:root[data-theme="dark"] .gx-drop:hover[b-qw0bnr9gpp] { border-color: #6366f1; background: linear-gradient(135deg, #1e2a44, #182a45); }
:root[data-theme="dark"] .gx-drop.over[b-qw0bnr9gpp] { border-color: #818cf8; background: linear-gradient(135deg, #25305a, #1e3358); }
:root[data-theme="dark"] .gx-drop-title[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-drop-sub[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-progress[b-qw0bnr9gpp] { background: #334155; }

:root[data-theme="dark"] .gx-search input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-search select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-rowmenu[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
:root[data-theme="dark"] .gx-rowmenu button[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-rowmenu button:hover[b-qw0bnr9gpp] { background: #334155; }
:root[data-theme="dark"] .gx-rowmenu button.danger[b-qw0bnr9gpp] { color: #fca5a5; }
:root[data-theme="dark"] .gx-rowmenu button.danger:hover[b-qw0bnr9gpp] { background: #7f1d1d; }
:root[data-theme="dark"] .gx-icon-btn[b-qw0bnr9gpp] { color: #94a3b8; }
:root[data-theme="dark"] .gx-icon-btn:hover[b-qw0bnr9gpp] { color: #e2e8f0; }
:root[data-theme="dark"] .gx-chip[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gx-chip.active[b-qw0bnr9gpp] { background: #4f46e5; color: #fff; }
:root[data-theme="dark"] .gx-count[b-qw0bnr9gpp] { background: rgba(255,255,255,.12); }

:root[data-theme="dark"] .gx-btn[b-qw0bnr9gpp] { background: #1e293b; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-btn.ghost[b-qw0bnr9gpp] { background: transparent; color: #a5b4fc; }
:root[data-theme="dark"] .gx-btn.ghost:hover:not(:disabled)[b-qw0bnr9gpp] { background: #312e81; }

:root[data-theme="dark"] .gx-empty[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gx-summary[b-qw0bnr9gpp] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .gx-summary span[b-qw0bnr9gpp] { color: #94a3b8; }

:root[data-theme="dark"] .gx-table-wrap[b-qw0bnr9gpp] { border-color: #334155; box-shadow: none; }
:root[data-theme="dark"] .gx-table thead th[b-qw0bnr9gpp] { background: #18233a; border-bottom-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .gx-table tbody td[b-qw0bnr9gpp] { border-bottom-color: #1f2b40; }
:root[data-theme="dark"] .gx-table tbody tr:hover[b-qw0bnr9gpp] { background: #1b2740; }
:root[data-theme="dark"] .gx-cat[b-qw0bnr9gpp] { background: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .gx-pill.ok[b-qw0bnr9gpp] { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .gx-pill.draft[b-qw0bnr9gpp] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .gx-icon-btn:hover[b-qw0bnr9gpp] { background: #334155; }
:root[data-theme="dark"] .gx-icon-btn.ok:hover[b-qw0bnr9gpp] { background: #064e3b; }
:root[data-theme="dark"] .gx-icon-btn.danger:hover[b-qw0bnr9gpp] { background: #7f1d1d; }

:root[data-theme="dark"] .gx-modal[b-qw0bnr9gpp] { background: #1e293b; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
:root[data-theme="dark"] .gx-modal-head[b-qw0bnr9gpp] { border-bottom-color: #334155; }
:root[data-theme="dark"] .gx-field > span[b-qw0bnr9gpp] { color: #cbd5e1; }
:root[data-theme="dark"] .gx-field input[b-qw0bnr9gpp], :root[data-theme="dark"] .gx-field select[b-qw0bnr9gpp] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .gx-file-pick[b-qw0bnr9gpp] { border-color: #475569; color: #94a3b8; }
:root[data-theme="dark"] .gx-modal-foot[b-qw0bnr9gpp] { background: #18233a; border-top-color: #334155; }

@media (max-width: 760px) {
    .gx-modal-split[b-qw0bnr9gpp] { flex-direction: column; overflow: auto; }
    .gx-modal-preview[b-qw0bnr9gpp] { flex: 0 0 auto; max-width: 100%; max-height: 38vh; }
    .gx-modal-preview object[b-qw0bnr9gpp] { min-height: 34vh; }
}
@media (max-width: 640px) {
    .gx-modal-body[b-qw0bnr9gpp] { grid-template-columns: 1fr 1fr; }
    .gx-field.wide[b-qw0bnr9gpp] { grid-column: span 2; }
    .gx-summary[b-qw0bnr9gpp] { gap: 18px; }
}
/* /Pages/Admin/GiftCards.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-efc98dm8sw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: #1e293b;
    color: #e2e8f0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-efc98dm8sw] { background: #334155; }
.btn:active[b-efc98dm8sw] { transform: scale(0.97); }
.btn.primary[b-efc98dm8sw] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-efc98dm8sw] { background: #1d4ed8; }
.btn.primary:active[b-efc98dm8sw] { background: #1e40af; }
.btn.primary:disabled[b-efc98dm8sw] { background: #475569; color: #94a3b8; cursor: not-allowed; }
.btn.secondary[b-efc98dm8sw] { background: #334155; color: #e2e8f0; }
.btn.secondary:hover[b-efc98dm8sw] { background: #475569; }
.btn.secondary:active[b-efc98dm8sw] { background: #556677; }
.btn.outline[b-efc98dm8sw] { background: transparent; border-color: #475569; color: #94a3b8; }
.btn.outline:hover[b-efc98dm8sw] { border-color: #3b82f6; color: #e2e8f0; }
.btn.outline:active[b-efc98dm8sw] { background: #1e293b; border-color: #3b82f6; }

.form-input[b-efc98dm8sw], .form-select[b-efc98dm8sw] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-efc98dm8sw], .form-select:focus[b-efc98dm8sw] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-input[b-efc98dm8sw]::placeholder { color: #475569; }
textarea.form-input[b-efc98dm8sw] { resize: vertical; min-height: 60px; }

.spinner[b-efc98dm8sw] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-efc98dm8sw 0.7s linear infinite;
    margin: 0 auto;
}

.gift-cards-page[b-efc98dm8sw] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.header-left[b-efc98dm8sw] {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.header-left h1[b-efc98dm8sw] {
    margin: 0;
    font-size: 1.5rem;
    color: #f1f5f9;
}

.item-count[b-efc98dm8sw] {
    font-size: 0.85rem;
    color: #64748b;
    background: #1e293b;
    padding: 4px 10px;
    border-radius: 12px;
}

.header-actions[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
}

.message-banner[b-efc98dm8sw] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-efc98dm8sw] { background: #7f1d1d; color: #fca5a5; }
.message-banner.success[b-efc98dm8sw] { background: #14532d; color: #86efac; }
.message-banner .dismiss[b-efc98dm8sw] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; min-width: 44px; min-height: 44px; }

/* Tabs */
.tabs[b-efc98dm8sw] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #1e293b;
    padding-bottom: 0;
}

.tab[b-efc98dm8sw] {
    padding: 12px 20px;
    min-height: 44px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.tab:hover[b-efc98dm8sw] { color: #e2e8f0; }
.tab:active[b-efc98dm8sw] { color: #e2e8f0; background: #1e293b; }
.tab:focus-visible[b-efc98dm8sw] { outline: 2px solid #3b82f6; outline-offset: -2px; }
.tab.active[b-efc98dm8sw] { color: #3b82f6; border-bottom-color: #3b82f6; }

/* Filter */
.filter-bar[b-efc98dm8sw] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-efc98dm8sw] { max-width: 280px; }

/* Cards Grid */
.cards-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.gift-card[b-efc98dm8sw] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.gift-card[b-efc98dm8sw]::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.gift-card:hover[b-efc98dm8sw] {
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.1);
}

.gift-card:active[b-efc98dm8sw] {
    transform: scale(0.98);
    box-shadow: none;
}

.gift-card:focus-visible[b-efc98dm8sw] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.gift-card.active[b-efc98dm8sw] { border-left: 4px solid #22c55e; }
.gift-card.redeemed[b-efc98dm8sw] { border-left: 4px solid #64748b; opacity: 0.7; }
.gift-card.expired[b-efc98dm8sw] { border-left: 4px solid #f59e0b; opacity: 0.7; }
.gift-card.disabled[b-efc98dm8sw] { border-left: 4px solid #ef4444; opacity: 0.5; }

.card-top[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-brand[b-efc98dm8sw] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #64748b;
    font-weight: 600;
}

.card-code[b-efc98dm8sw] {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 16px;
    letter-spacing: 2px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    text-align: center;
}

.card-amounts[b-efc98dm8sw] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.card-balance .label[b-efc98dm8sw],
.card-original .label[b-efc98dm8sw] {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.card-balance .value[b-efc98dm8sw] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #22c55e;
}

.card-original .value[b-efc98dm8sw] {
    font-size: 1rem;
    color: #94a3b8;
}

.card-bottom[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.card-people[b-efc98dm8sw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-badge[b-efc98dm8sw] {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.status-badge.active[b-efc98dm8sw] { background: #14532d; color: #86efac; }
.status-badge.redeemed[b-efc98dm8sw] { background: #1e293b; color: #94a3b8; }
.status-badge.expired[b-efc98dm8sw] { background: #451a03; color: #fcd34d; }
.status-badge.disabled[b-efc98dm8sw] { background: #7f1d1d; color: #fca5a5; }

.expiry[b-efc98dm8sw] { font-size: 0.72rem; color: #64748b; }

.card-recipient[b-efc98dm8sw],
.card-purchaser[b-efc98dm8sw] {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Balance Check */
.balance-check-section[b-efc98dm8sw] { max-width: 600px; }
.balance-check-section h2[b-efc98dm8sw] { color: #f1f5f9; margin-bottom: 16px; font-size: 1.2rem; }

.balance-form[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.balance-result[b-efc98dm8sw] { margin-top: 16px; }

.balance-card[b-efc98dm8sw] {
    background: #1e293b;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.bc-code[b-efc98dm8sw] { font-family: monospace; font-size: 1.2rem; color: #e2e8f0; margin-bottom: 8px; letter-spacing: 1px; }
.bc-balance[b-efc98dm8sw] { font-size: 2rem; font-weight: 700; color: #22c55e; }
.bc-status[b-efc98dm8sw] { margin: 8px 0; }
.bc-original[b-efc98dm8sw], .bc-expiry[b-efc98dm8sw] { font-size: 0.85rem; color: #64748b; }

/* Stats */
.stats-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.stat-card[b-efc98dm8sw] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-card.highlight[b-efc98dm8sw] { border-color: #3b82f6; background: #1e3a5f; }

.stat-value[b-efc98dm8sw] {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.stat-label[b-efc98dm8sw] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Transactions */
.txn-list[b-efc98dm8sw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.txn-row[b-efc98dm8sw] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: #0f172a;
    border-radius: 6px;
    font-size: 0.85rem;
}

.txn-date[b-efc98dm8sw] { color: #64748b; min-width: 80px; }
.txn-type[b-efc98dm8sw] { color: #94a3b8; min-width: 80px; }
.txn-desc[b-efc98dm8sw] { color: #cbd5e1; flex: 1; }
.txn-amount[b-efc98dm8sw] { font-weight: 600; min-width: 80px; text-align: right; }
.txn-amount.positive[b-efc98dm8sw] { color: #22c55e; }
.txn-amount.negative[b-efc98dm8sw] { color: #ef4444; }
.txn-balance[b-efc98dm8sw] { color: #64748b; min-width: 90px; text-align: right; }

h3[b-efc98dm8sw] { color: #f1f5f9; font-size: 1rem; margin: 16px 0 8px; }

/* Modal */
.modal-overlay[b-efc98dm8sw] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-panel[b-efc98dm8sw] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #334155;
}

.modal-panel.wide[b-efc98dm8sw] { max-width: 700px; }

.modal-header[b-efc98dm8sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-efc98dm8sw] { margin: 0; font-size: 1.1rem; color: #f1f5f9; }

.modal-close[b-efc98dm8sw] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal-close:hover[b-efc98dm8sw] { background: #334155; }
.modal-close:active[b-efc98dm8sw] { background: #475569; }

.modal-body[b-efc98dm8sw] { padding: 20px; }
.modal-footer[b-efc98dm8sw] { padding: 16px 20px; border-top: 1px solid #334155; display: flex; gap: 8px; justify-content: flex-end; }

.form-group[b-efc98dm8sw] { margin-bottom: 14px; }
.form-group label[b-efc98dm8sw] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 4px; }

.form-row[b-efc98dm8sw] { display: flex; gap: 12px; }
.form-row .form-group[b-efc98dm8sw] { flex: 1; }

/* Detail */
.detail-grid[b-efc98dm8sw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item[b-efc98dm8sw] { }
.detail-label[b-efc98dm8sw] { display: block; font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value[b-efc98dm8sw] { color: #e2e8f0; font-size: 0.95rem; }
.detail-value.large[b-efc98dm8sw] { font-size: 1.5rem; font-weight: 700; color: #22c55e; }

/* Detail Actions */
.detail-actions[b-efc98dm8sw] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.action-btn[b-efc98dm8sw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.action-btn svg[b-efc98dm8sw] { flex-shrink: 0; }

.action-btn.whatsapp[b-efc98dm8sw] { background: #128c7e; color: #fff; border-color: #075e54; }
.action-btn.whatsapp:hover[b-efc98dm8sw] { background: #075e54; }

.action-btn.danger[b-efc98dm8sw] { background: transparent; border-color: #ef4444; color: #ef4444; }
.action-btn.danger:hover[b-efc98dm8sw] { background: #7f1d1d; color: #fca5a5; }

.action-btn.reactivate[b-efc98dm8sw] { background: transparent; border-color: #22c55e; color: #22c55e; }
.action-btn.reactivate:hover[b-efc98dm8sw] { background: #14532d; color: #86efac; }

.topup-section[b-efc98dm8sw] { margin: 16px 0; padding: 12px; background: #0f172a; border-radius: 8px; }
.topup-section h3[b-efc98dm8sw] { margin: 0 0 8px; }
.topup-form[b-efc98dm8sw] { display: flex; gap: 8px; }

/* Loading */
.loading-state[b-efc98dm8sw] { text-align: center; padding: 60px; color: #64748b; }
.empty-state[b-efc98dm8sw] { text-align: center; padding: 40px; color: #64748b; }

.spinner-sm[b-efc98dm8sw] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-efc98dm8sw 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-efc98dm8sw { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .gift-cards-page[b-efc98dm8sw] { padding: 12px; }
    .cards-grid[b-efc98dm8sw] { grid-template-columns: 1fr; }
    .filter-bar[b-efc98dm8sw] { flex-direction: column; align-items: stretch; }
    .search-input[b-efc98dm8sw] { max-width: none; }
    .form-row[b-efc98dm8sw] { flex-direction: column; }
    .txn-row[b-efc98dm8sw] { flex-wrap: wrap; }
    .balance-form[b-efc98dm8sw] { flex-direction: column; }
    .topup-form[b-efc98dm8sw] { flex-direction: column; }
}
/* /Pages/Admin/Ingresos.razor.rz.scp.css */
/* Ingresos — premium, scoped (Blazor isolation). ix-* prefixed. Light + dark. */

.ix[b-r96pen03v1] { max-width: 980px; margin: 0 auto; padding: 8px 20px 64px; color: #0f172a; }

.ix-head[b-r96pen03v1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ix-head h1[b-r96pen03v1] { font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; }
.ix-head p[b-r96pen03v1] { margin: 0; color: #64748b; max-width: 620px; line-height: 1.5; font-size: 14.5px; }

.ix-btn[b-r96pen03v1] { appearance: none; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: box-shadow .2s ease; }
.ix-btn:hover:not(:disabled)[b-r96pen03v1] { box-shadow: 0 3px 12px rgba(15,23,42,.1); }
.ix-btn:disabled[b-r96pen03v1] { opacity: .6; cursor: default; }
.ix-btn.primary[b-r96pen03v1] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 6px 18px rgba(79,70,229,.28); }
.ix-btn.ghost[b-r96pen03v1] { border-color: transparent; background: transparent; color: #4f46e5; }
.ix-btn.ghost:hover:not(:disabled)[b-r96pen03v1] { background: #eef2ff; box-shadow: none; }

/* ---------- drop zone ---------- */
.ix-drop[b-r96pen03v1] { position: relative; display: block; cursor: pointer; border: 2px dashed #cbd5e1; border-radius: 18px; background: linear-gradient(135deg, #f8fafc, #ecfdf5); padding: 30px 20px; margin-bottom: 16px; transition: border-color .15s ease, background .15s ease, transform .05s ease; }
.ix-drop:hover[b-r96pen03v1] { border-color: #10b981; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.ix-drop.over[b-r96pen03v1] { border-color: #059669; background: linear-gradient(135deg, #d1fae5, #a7f3d0); transform: scale(1.005); }
.ix-drop.busy[b-r96pen03v1] { pointer-events: none; opacity: .9; }
/* InputFile's <input> lives in a child component → needs ::deep to be reached. */
.ix-drop[b-r96pen03v1]  .ix-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ix-drop.busy[b-r96pen03v1]  .ix-drop-input { display: none; }
.ix-drop-inner[b-r96pen03v1] { text-align: center; pointer-events: none; }
.ix-drop-icon[b-r96pen03v1] { font-size: 32px; margin-bottom: 6px; }
.ix-drop-title[b-r96pen03v1] { font-size: 16px; font-weight: 700; color: #334155; }
.ix-drop-sub[b-r96pen03v1] { font-size: 13px; color: #94a3b8; margin-top: 3px; }
.ix-progress[b-r96pen03v1] { width: 220px; height: 6px; border-radius: 999px; background: #e2e8f0; margin: 12px auto 0; overflow: hidden; }
.ix-progress-bar[b-r96pen03v1] { height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 999px; transition: width .2s ease; }

.ix-search[b-r96pen03v1] { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ix-search input[b-r96pen03v1] { flex: 1 1 220px; min-width: 180px; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 14px; background: #fff; color: #0f172a; }
.ix-search select[b-r96pen03v1] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 13.5px; background: #fff; color: #334155; }
.ix-search input:focus[b-r96pen03v1], .ix-search select:focus[b-r96pen03v1] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ix-filters[b-r96pen03v1] { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ix-chip[b-r96pen03v1] { appearance: none; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ix-chip:hover[b-r96pen03v1] { border-color: #cbd5e1; }
.ix-chip.active[b-r96pen03v1] { background: #4f46e5; border-color: transparent; color: #fff; }
.ix-count[b-r96pen03v1] { font-size: 11px; font-weight: 700; background: rgba(15,23,42,.08); border-radius: 999px; padding: 1px 7px; }
.ix-chip.active .ix-count[b-r96pen03v1] { background: rgba(255,255,255,.25); }

.ix-empty[b-r96pen03v1] { text-align: center; padding: 48px 24px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; }
.ix-empty-icon[b-r96pen03v1] { font-size: 40px; margin-bottom: 8px; }
.ix-empty p[b-r96pen03v1] { margin: 0 0 16px; }

.ix-summary[b-r96pen03v1] { display: flex; gap: 28px; flex-wrap: wrap; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.ix-summary > div[b-r96pen03v1] { display: flex; flex-direction: column; }
.ix-summary span[b-r96pen03v1] { font-size: 12px; color: #94a3b8; }
.ix-summary strong[b-r96pen03v1] { font-size: 16px; }

/* overflow:visible (NOT hidden) so the row menu isn't clipped; round the header corners to keep the card look. */
.ix-table-wrap[b-r96pen03v1] { border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ix-table[b-r96pen03v1] { width: 100%; border-collapse: collapse; }
.ix-table thead th[b-r96pen03v1] { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ix-table thead th:first-child[b-r96pen03v1] { border-top-left-radius: 13px; }
.ix-table thead th:last-child[b-r96pen03v1] { border-top-right-radius: 13px; }
.ix-table th.num[b-r96pen03v1], .ix-table td.num[b-r96pen03v1] { text-align: right; font-variant-numeric: tabular-nums; }
.ix-table tbody td[b-r96pen03v1] { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.ix-table tbody tr:last-child td[b-r96pen03v1] { border-bottom: none; }
.ix-table tbody tr:hover[b-r96pen03v1] { background: #f8fafc; }
.ix-src[b-r96pen03v1] { font-weight: 600; }
.ix-table td.strong[b-r96pen03v1] { font-weight: 700; }
.ix-pill[b-r96pen03v1] { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ix-pill.ok[b-r96pen03v1] { background: #d1fae5; color: #047857; }
.ix-pill.draft[b-r96pen03v1] { background: #fef3c7; color: #92600a; }
.ix-row-actions[b-r96pen03v1] { white-space: nowrap; text-align: right; }
.ix-icon-btn[b-r96pen03v1] { appearance: none; border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 4px 7px; border-radius: 7px; line-height: 1; color: #64748b; }
.ix-icon-btn:hover[b-r96pen03v1] { background: #f1f5f9; color: #0f172a; }
.ix-icon-btn.ok[b-r96pen03v1] { color: #047857; }
.ix-icon-btn.ok:hover[b-r96pen03v1] { background: #d1fae5; }

.ix-menu-backdrop[b-r96pen03v1] { position: fixed; inset: 0; z-index: 80; }
.ix-rowmenu[b-r96pen03v1] { position: absolute; right: 6px; top: 100%; margin-top: 2px; z-index: 130; min-width: 168px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; text-align: left; }
.ix-rowmenu button[b-r96pen03v1] { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #334155; padding: 9px 11px; border-radius: 8px; }
.ix-rowmenu button:hover[b-r96pen03v1] { background: #f1f5f9; }
.ix-rowmenu button.danger[b-r96pen03v1] { color: #b91c1c; }
.ix-rowmenu button.danger:hover[b-r96pen03v1] { background: #fee2e2; }

/* modal */
.ix-modal-backdrop[b-r96pen03v1] { position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ix-modal[b-r96pen03v1] { width: 100%; max-width: 580px; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(15,23,42,.3); overflow: hidden; }
.ix-modal.with-preview[b-r96pen03v1] { max-width: 940px; }
.ix-modal-head[b-r96pen03v1] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f1f5f9; flex: 0 0 auto; }
.ix-modal-head h2[b-r96pen03v1] { margin: 0; font-size: 18px; font-weight: 700; }
.ix-modal-split[b-r96pen03v1] { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ix-modal-preview[b-r96pen03v1] { flex: 0 0 46%; max-width: 46%; background: #0b1220; padding: 12px; overflow: auto; }
.ix-modal-preview img[b-r96pen03v1] { width: 100%; height: auto; border-radius: 8px; display: block; }
.ix-modal-preview object[b-r96pen03v1] { width: 100%; height: 100%; min-height: 60vh; border: none; border-radius: 8px; }
.ix-preview-loading[b-r96pen03v1] { color: #94a3b8; text-align: center; padding: 40px 12px; font-size: 14px; }
.ix-preview-loading a[b-r96pen03v1] { color: #818cf8; }
.ix-modal-body[b-r96pen03v1] { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; flex: 1 1 auto; overflow: auto; align-content: start; }
.ix-field[b-r96pen03v1] { display: flex; flex-direction: column; gap: 4px; }
.ix-field.wide[b-r96pen03v1] { grid-column: span 2; }
.ix-field > span[b-r96pen03v1] { font-size: 12px; font-weight: 600; color: #475569; }
.ix-field > span em[b-r96pen03v1] { color: #e11d48; font-style: normal; }
.ix-field input[b-r96pen03v1] { padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 14px; background: #fff; color: #0f172a; }
.ix-field input:focus[b-r96pen03v1] { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ix-field input.err[b-r96pen03v1] { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.12); }
.ix-err-text[b-r96pen03v1] { color: #e11d48; font-size: 12px; }
.ix-file-pick[b-r96pen03v1] { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 9px; font-size: 13px; color: #64748b; cursor: pointer; overflow: hidden; }
.ix-file-pick[b-r96pen03v1]  input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ix-modal-foot[b-r96pen03v1] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* dark */
:root[data-theme="dark"] .ix[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-head p[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-drop[b-r96pen03v1] { border-color: #475569; background: linear-gradient(135deg, #1a2436, #112b24); }
:root[data-theme="dark"] .ix-drop:hover[b-r96pen03v1] { border-color: #10b981; background: linear-gradient(135deg, #14241f, #0f3027); }
:root[data-theme="dark"] .ix-drop.over[b-r96pen03v1] { border-color: #34d399; background: linear-gradient(135deg, #0f3a2e, #114537); }
:root[data-theme="dark"] .ix-drop-title[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-drop-sub[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-progress[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-btn[b-r96pen03v1] { background: #1e293b; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-btn.ghost[b-r96pen03v1] { background: transparent; color: #a5b4fc; }
:root[data-theme="dark"] .ix-btn.ghost:hover:not(:disabled)[b-r96pen03v1] { background: #312e81; }
:root[data-theme="dark"] .ix-search input[b-r96pen03v1], :root[data-theme="dark"] .ix-search select[b-r96pen03v1] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-rowmenu[b-r96pen03v1] { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
:root[data-theme="dark"] .ix-rowmenu button[b-r96pen03v1] { color: #cbd5e1; }
:root[data-theme="dark"] .ix-rowmenu button:hover[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-rowmenu button.danger[b-r96pen03v1] { color: #fca5a5; }
:root[data-theme="dark"] .ix-rowmenu button.danger:hover[b-r96pen03v1] { background: #7f1d1d; }
:root[data-theme="dark"] .ix-icon-btn[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-icon-btn:hover[b-r96pen03v1] { color: #e2e8f0; }
:root[data-theme="dark"] .ix-chip[b-r96pen03v1] { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .ix-chip.active[b-r96pen03v1] { background: #4f46e5; color: #fff; }
:root[data-theme="dark"] .ix-count[b-r96pen03v1] { background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .ix-empty[b-r96pen03v1] { background: #1e293b; border-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .ix-summary[b-r96pen03v1] { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .ix-summary span[b-r96pen03v1] { color: #94a3b8; }
:root[data-theme="dark"] .ix-table-wrap[b-r96pen03v1] { border-color: #334155; box-shadow: none; }
:root[data-theme="dark"] .ix-table thead th[b-r96pen03v1] { background: #18233a; border-bottom-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .ix-table tbody td[b-r96pen03v1] { border-bottom-color: #1f2b40; }
:root[data-theme="dark"] .ix-table tbody tr:hover[b-r96pen03v1] { background: #1b2740; }
:root[data-theme="dark"] .ix-pill.ok[b-r96pen03v1] { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .ix-pill.draft[b-r96pen03v1] { background: #422006; color: #fcd34d; }
:root[data-theme="dark"] .ix-icon-btn:hover[b-r96pen03v1] { background: #334155; }
:root[data-theme="dark"] .ix-icon-btn.ok:hover[b-r96pen03v1] { background: #064e3b; }
:root[data-theme="dark"] .ix-icon-btn.danger:hover[b-r96pen03v1] { background: #7f1d1d; }
:root[data-theme="dark"] .ix-modal[b-r96pen03v1] { background: #1e293b; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ix-modal-head[b-r96pen03v1] { border-bottom-color: #334155; }
:root[data-theme="dark"] .ix-field > span[b-r96pen03v1] { color: #cbd5e1; }
:root[data-theme="dark"] .ix-field input[b-r96pen03v1] { background: #0f172a; border-color: #475569; color: #e2e8f0; }
:root[data-theme="dark"] .ix-file-pick[b-r96pen03v1] { border-color: #475569; color: #94a3b8; }
:root[data-theme="dark"] .ix-modal-foot[b-r96pen03v1] { background: #18233a; border-top-color: #334155; }

@media (max-width: 760px) {
    .ix-modal-split[b-r96pen03v1] { flex-direction: column; overflow: auto; }
    .ix-modal-preview[b-r96pen03v1] { flex: 0 0 auto; max-width: 100%; max-height: 38vh; }
    .ix-modal-preview object[b-r96pen03v1] { min-height: 34vh; }
}
@media (max-width: 560px) { .ix-modal-body[b-r96pen03v1] { grid-template-columns: 1fr; } .ix-field.wide[b-r96pen03v1] { grid-column: span 1; } }
/* /Pages/Admin/Inventory.razor.rz.scp.css */
/* ============================================
   INVENTORY.RAZOR STYLES - Dark Mode (Admin)
   ============================================ */

/* Page Layout */
.inventory-page[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    min-height: 100vh;
    background: transparent;
}

.inventory-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.inventory-title[b-qq2oyosx4q] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #f1f5f9;
}

.header-actions[b-qq2oyosx4q] {
    display: flex;
    gap: 8px;
}

.btn-add[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    min-height: 44px;
    background: #2563eb;   /* AA: white text needs blue-600, not blue-500 (3.67:1) */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-add:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-add:hover[b-qq2oyosx4q] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-toolbar[b-qq2oyosx4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-toolbar:hover[b-qq2oyosx4q] {
    background: #30363d;
    border-color: #58a6ff;
    color: #e6edf3;
}

.btn-toolbar:focus-visible[b-qq2oyosx4q] {
    outline: 2px solid #58a6ff;
    outline-offset: 2px;
}

/* Stats Bar */
.stats-bar[b-qq2oyosx4q] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-card[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    cursor: default;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

button.stat-card[b-qq2oyosx4q] {
    cursor: pointer;
}

button.stat-card:hover[b-qq2oyosx4q] {
    background: #334155;
    border-color: #475569;
}

.stat-card.stat-active[b-qq2oyosx4q] {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.stat-icon[b-qq2oyosx4q] {
    font-size: 24px;
    flex-shrink: 0;
}

.stat-content[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value[b-qq2oyosx4q] {
    font-size: 20px;
    font-weight: 700;
    color: #f1f5f9;
}

.stat-label[b-qq2oyosx4q] {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-warning .stat-value[b-qq2oyosx4q] {
    color: #fbbf24;
}

.stat-info .stat-value[b-qq2oyosx4q] {
    color: #4ade80;
}

/* Grid Layout */
.inventory-grid[b-qq2oyosx4q] {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 16px;
    flex: 1;
}

/* Category Panel */
.cat-panel[b-qq2oyosx4q] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.cat-panel-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #334155;
    background: #0f172a;
}

.cat-panel-header h4[b-qq2oyosx4q] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
}

.cat-all-btn[b-qq2oyosx4q] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: 1px solid #475569;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
}

.cat-all-btn:hover[b-qq2oyosx4q] {
    background: #334155;
    color: #f1f5f9;
}

.cat-all-btn.active[b-qq2oyosx4q] {
    background: #2563eb;   /* AA: white text needs blue-600 */
    border-color: #2563eb;
    color: #fff;
}

.cat-list[b-qq2oyosx4q] {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.cat-item[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #94a3b8;   /* AA: was inheriting #64748b (~3.1:1) on dark */
    padding: 12px 14px;
    min-height: 48px;
    cursor: pointer;
    border-bottom: 1px solid #334155;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}

.cat-item:active[b-qq2oyosx4q] {
    background: #334155;
}

.cat-item:hover[b-qq2oyosx4q] {
    background: #334155;
}

.cat-item.active[b-qq2oyosx4q] {
    background: rgba(59, 130, 246, 0.15);
    border-left: 3px solid #3b82f6;
}

.cat-item-name[b-qq2oyosx4q] {
    font-size: 13px;
    color: #e2e8f0;
}

.cat-item-count[b-qq2oyosx4q] {
    font-size: 11px;
    color: #94a3b8;
    background: #334155;
    padding: 2px 8px;
    border-radius: 10px;
}

.cat-empty[b-qq2oyosx4q] {
    color: #94a3b8;   /* AA: #64748b "Sin categorías" was 3.07:1 on dark */
    font-style: italic;
    justify-content: center;
}

/* Right Panel */
.inventory-right[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inventory-toolbar[b-qq2oyosx4q] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.toolbar-search[b-qq2oyosx4q] {
    flex: 1;
    position: relative;
    max-width: 400px;
    min-width: 200px;
}

.toolbar-search input[b-qq2oyosx4q] {
    width: 100%;
    padding: 10px 14px;
    padding-right: 36px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 14px;
    color: #e2e8f0;
    transition: border-color .15s;
}

.toolbar-search input[b-qq2oyosx4q]::placeholder {
    color: #64748b;
}

.toolbar-search input:focus[b-qq2oyosx4q] {
    outline: none;
    border-color: #3b82f6;
}

.search-clear[b-qq2oyosx4q] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}

.search-clear:active[b-qq2oyosx4q] {
    background: #334155;
}

.search-clear:hover[b-qq2oyosx4q] {
    color: #94a3b8;
}

.filter-chip[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.filter-chip:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.filter-chip:hover[b-qq2oyosx4q] {
    background: #334155;
}

.filter-chip.active[b-qq2oyosx4q] {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #f1f5f9;
}

.filter-chip input[b-qq2oyosx4q] {
    width: 14px;
    height: 14px;
    accent-color: #3b82f6;
}

/* Items Table */
.items-table-wrapper[b-qq2oyosx4q] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.items-table[b-qq2oyosx4q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.items-table thead[b-qq2oyosx4q] {
    background: #0f172a;
}

.items-table th[b-qq2oyosx4q] {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: #94a3b8;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

.items-table td[b-qq2oyosx4q] {
    padding: 14px;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
    vertical-align: middle;
}

.items-table tbody tr:hover[b-qq2oyosx4q] {
    background: #21262d;
}

/* Calmer low-stock signal: left-border accent (3px amber) instead of
   tinting the whole row — keeps the chip but doesn't drown the table
   when many items are below mínimo. */
.items-table tbody tr.low-stock-row[b-qq2oyosx4q] {
    box-shadow: inset 3px 0 0 0 #e3b341;
}

.items-table tbody tr.inactive-row[b-qq2oyosx4q] {
    opacity: 0.55;
}

.item-name-cell[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-qq2oyosx4q] {
    font-weight: 600;
    color: #e6edf3;
}

.item-barcode[b-qq2oyosx4q] {
    font-size: 11px;
    color: #6e7681;
    font-family: monospace;
}

/* Per-row "wired-up?" badge. Quiet styling so it doesn't outshout the
   name; "huérfano" gets a softer red to flag clean-up candidates. */
.usage-badge[b-qq2oyosx4q] {
    display: inline-block;
    padding: 1px 7px;
    background: #1c2230;
    color: #8b949e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    margin-top: 2px;
    width: fit-content;
}

.usage-badge.orphan[b-qq2oyosx4q] {
    background: #2a1a1a;
    color: #f0883e;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Numeric columns: right-aligned + tabular-nums so digits line up
   regardless of font; "1.234,56 €" reads cleanly down a column. */
.items-table .col-stock[b-qq2oyosx4q],
.items-table .col-min[b-qq2oyosx4q],
.items-table .col-cost[b-qq2oyosx4q],
.items-table .col-value[b-qq2oyosx4q] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stock-value[b-qq2oyosx4q] {
    font-weight: 600;
}

.stock-value.low[b-qq2oyosx4q] {
    color: #e3b341;
}

.low-badge[b-qq2oyosx4q] {
    display: inline-block;
    padding: 2px 7px;
    background: #3a2f10;
    color: #e3b341;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-left: 8px;
}

.col-actions[b-qq2oyosx4q] {
    width: 156px;          /* 3 × 44 + 2 × 6 gap + a hair of slack */
    text-align: right;
    white-space: nowrap;
}

.action-btn[b-qq2oyosx4q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid #30363d;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    margin-left: 6px;
    -webkit-tap-highlight-color: transparent;
    color: #8b949e;
}

.action-btn:first-child[b-qq2oyosx4q] {
    margin-left: 0;
}

.action-btn:active[b-qq2oyosx4q] {
    transform: scale(0.95);
}

.action-btn:hover[b-qq2oyosx4q] {
    background: #21262d;
    border-color: #58a6ff;
    color: #e6edf3;
}

.action-btn:focus-visible[b-qq2oyosx4q] {
    outline: 2px solid #58a6ff;
    outline-offset: 2px;
}

.action-btn.adjust[b-qq2oyosx4q] {
    font-weight: 700;
    color: #58a6ff;
}

.action-btn.history:hover[b-qq2oyosx4q] {
    border-color: #8b949e;
}

/* Loading & Empty States */
.loading-state[b-qq2oyosx4q],
.empty-state[b-qq2oyosx4q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
}

.empty-icon[b-qq2oyosx4q] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-qq2oyosx4q] {
    margin: 0 0 20px;
    font-size: 16px;
}

/* Side Panel */
.side-panel-backdrop[b-qq2oyosx4q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.side-panel[b-qq2oyosx4q] {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: #1e293b;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-qq2oyosx4q 0.2s ease-out;
}

@keyframes slideIn-b-qq2oyosx4q {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.side-panel-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
    background: #0f172a;
}

.side-panel-header h3[b-qq2oyosx4q] {
    margin: 0;
    font-size: 18px;
    color: #f1f5f9;
}

.close-btn[b-qq2oyosx4q] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:active[b-qq2oyosx4q] {
    transform: scale(0.95);
}

.close-btn:hover[b-qq2oyosx4q] {
    background: #334155;
    color: #f1f5f9;
}

.side-panel-content[b-qq2oyosx4q] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #5b6b7b #1c2230;
}

/* Always-visible, grabbable scrollbar. The panel routinely has content
   below the fold (e.g. the Proveedores section sits near the bottom) and
   the OS overlay scrollbar was so thin testers/users concluded the panel
   "couldn't scroll further" and missed the section (QA 2026-05-19). */
.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar {
    width: 12px;
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-track {
    background: #1c2230;
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-thumb {
    background: #5b6b7b;
    border-radius: 6px;
    border: 2px solid #1c2230;
}

.side-panel-content[b-qq2oyosx4q]::-webkit-scrollbar-thumb:hover {
    background: #7c8a99;
}

.side-panel-footer[b-qq2oyosx4q] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
    background: #0f172a;
}

/* Form Elements */
.form-group[b-qq2oyosx4q] {
    margin-bottom: 16px;
}

.form-group label[b-qq2oyosx4q] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
}

.form-control[b-qq2oyosx4q] {
    width: 100%;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 14px;
    color: #e2e8f0;
    transition: border-color .15s;
}

.form-control:focus[b-qq2oyosx4q] {
    outline: none;
    border-color: #3b82f6;
}

.form-control:disabled[b-qq2oyosx4q] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-row[b-qq2oyosx4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-hint[b-qq2oyosx4q] {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
}

.checkbox-label[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #e2e8f0;
}

.checkbox-label input[b-qq2oyosx4q] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

/* Buttons */
.btn-primary[b-qq2oyosx4q] {
    padding: 12px 24px;
    min-height: 44px;
    background: #2563eb;   /* AA: white text needs blue-600, not blue-500 (3.67:1) */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:active:not(:disabled)[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-primary:hover:not(:disabled)[b-qq2oyosx4q] {
    background: #2563eb;
}

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

.btn-secondary[b-qq2oyosx4q] {
    padding: 12px 24px;
    min-height: 44px;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:active[b-qq2oyosx4q] {
    transform: scale(0.98);
}

.btn-secondary:hover[b-qq2oyosx4q] {
    background: #334155;
    color: #f1f5f9;
}

/* Modal */
.modal-backdrop[b-qq2oyosx4q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.modal[b-qq2oyosx4q] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: modalIn-b-qq2oyosx4q 0.2s ease-out;
    border: 1px solid #334155;
}

.modal.modal-wide[b-qq2oyosx4q] {
    width: 700px;
}

@keyframes modalIn-b-qq2oyosx4q {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.modal-header[b-qq2oyosx4q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
    background: #0f172a;
}

.modal-header h3[b-qq2oyosx4q] {
    margin: 0;
    font-size: 18px;
    color: #f1f5f9;
}

.modal-content[b-qq2oyosx4q] {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.modal-footer[b-qq2oyosx4q] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
    background: #0f172a;
}

.current-stock-display[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #0f172a;
    border-radius: 8px;
    margin-bottom: 20px;
}

.current-stock-display .label[b-qq2oyosx4q] {
    color: #94a3b8;
}

.current-stock-display .value[b-qq2oyosx4q] {
    font-size: 20px;
    font-weight: 700;
    color: #f1f5f9;
}

.adjustment-preview[b-qq2oyosx4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid #3b82f6;
    border-radius: 8px;
    margin-top: 16px;
    color: #94a3b8;
}

.adjustment-preview strong[b-qq2oyosx4q] {
    font-size: 18px;
    color: #f1f5f9;
}

/* Movements Table */
.movements-table[b-qq2oyosx4q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.movements-table th[b-qq2oyosx4q],
.movements-table td[b-qq2oyosx4q] {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #334155;
}

.movements-table th[b-qq2oyosx4q] {
    background: #0f172a;
    color: #94a3b8;
    font-weight: 600;
}

.movements-table td[b-qq2oyosx4q] {
    color: #e2e8f0;
}

.movement-type[b-qq2oyosx4q] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.movement-type.type-purchase[b-qq2oyosx4q] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.movement-type.type-sale[b-qq2oyosx4q] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.movement-type.type-waste[b-qq2oyosx4q] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.movement-type.type-other[b-qq2oyosx4q] {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.qty-positive[b-qq2oyosx4q] {
    color: #4ade80;
}

.qty-negative[b-qq2oyosx4q] {
    color: #f87171;
}

/* Responsive */
@media (max-width: 900px) {
    .inventory-grid[b-qq2oyosx4q] {
        grid-template-columns: 1fr;
    }

    .cat-panel[b-qq2oyosx4q] {
        display: none;
    }
}

@media (max-width: 640px) {
    .inventory-page[b-qq2oyosx4q] {
        padding: 12px;
    }

    .inventory-header[b-qq2oyosx4q] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-bar[b-qq2oyosx4q] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .stat-card[b-qq2oyosx4q] {
        flex-shrink: 0;
    }

    .side-panel[b-qq2oyosx4q] {
        width: 100vw;
    }

    .form-row[b-qq2oyosx4q] {
        grid-template-columns: 1fr;
    }

    .items-table[b-qq2oyosx4q] {
        font-size: 12px;
    }

    .items-table th[b-qq2oyosx4q],
    .items-table td[b-qq2oyosx4q] {
        padding: 8px 10px;
    }

    .col-sku[b-qq2oyosx4q],
    .col-category[b-qq2oyosx4q],
    .col-min[b-qq2oyosx4q],
    .col-value[b-qq2oyosx4q] {
        display: none;
    }
}

/* ============================================
   ADDITIONAL MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 480px) {
    .inventory-page[b-qq2oyosx4q] {
        padding: 8px;
    }

    .inventory-title[b-qq2oyosx4q] {
        font-size: 18px;
    }

    .btn-add[b-qq2oyosx4q] {
        padding: 10px 14px;
        font-size: 13px;
    }

    .stat-card[b-qq2oyosx4q] {
        padding: 10px 12px;
    }

    .stat-value[b-qq2oyosx4q] {
        font-size: 18px;
    }

    .stat-label[b-qq2oyosx4q] {
        font-size: 10px;
    }

    .modal[b-qq2oyosx4q] {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
}

/* ============================================
   PHONE (≤600px) — overflow-proofing per the
   mobile playbook. Scoped .razor.css, auto-scoped
   to this component; additive over the blocks above.
   ============================================ */
@media (max-width: 600px) {
    /* Page root: nothing should push the body horizontally. */
    .inventory-page[b-qq2oyosx4q] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header actions wrap onto multiple rows instead of overflowing. */
    .inventory-header[b-qq2oyosx4q] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .header-actions[b-qq2oyosx4q] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-actions .btn-toolbar[b-qq2oyosx4q],
    .header-actions .btn-add[b-qq2oyosx4q] {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Toolbar (search + filter chips) keeps the chips reachable; the search
       box takes the full width, chips sit below and can wrap. */
    .inventory-toolbar[b-qq2oyosx4q] {
        gap: 8px;
    }

    .toolbar-search[b-qq2oyosx4q] {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .filter-chip[b-qq2oyosx4q] {
        flex: 0 0 auto;
    }

    /* Items table: rather than DROP columns (which hides data), make the
       whole table horizontally scrollable so every column is reachable on a
       phone. Overrides the base overflow:hidden + the ≤640 display:none. */
    .items-table-wrapper[b-qq2oyosx4q] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .items-table[b-qq2oyosx4q] {
        width: max-content;
        min-width: 100%;
    }

    .items-table .col-sku[b-qq2oyosx4q],
    .items-table .col-category[b-qq2oyosx4q],
    .items-table .col-min[b-qq2oyosx4q],
    .items-table .col-value[b-qq2oyosx4q] {
        display: table-cell;
    }
}

/* History modal's movements table has 7 columns and the modal goes
   full-width at ≤480px — let the modal body scroll horizontally and give
   the table a min-width so all columns stay reachable. */
@media (max-width: 640px) {
    .modal-content[b-qq2oyosx4q] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .movements-table[b-qq2oyosx4q] {
        min-width: 560px;
    }
}
/* /Pages/Admin/InventoryAlerts.razor.rz.scp.css */
.alerts-container[b-sqmzkzko0e] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-sqmzkzko0e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-sqmzkzko0e] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.header-actions[b-sqmzkzko0e] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-sqmzkzko0e] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.outline[b-sqmzkzko0e] {
    background: transparent;
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-primary, #1a1a2e);
}

.btn.outline:hover[b-sqmzkzko0e] {
    background: var(--bg-hover, #f5f5f5);
}

.btn.primary[b-sqmzkzko0e] {
    background: var(--primary, #4f46e5);
    border: none;
    color: white;
}

.btn.primary:hover[b-sqmzkzko0e] {
    background: var(--primary-dark, #4338ca);
}

/* Summary Grid */
.summary-grid[b-sqmzkzko0e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-sqmzkzko0e] {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.summary-card:hover[b-sqmzkzko0e] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-card.critical[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
}

.summary-card.warning[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.summary-card.danger[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border-color: #ec4899;
}

.summary-card.alert[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border-color: #f97316;
}

.summary-card.info[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
}

.summary-value[b-sqmzkzko0e] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
}

.summary-label[b-sqmzkzko0e] {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Tabs */
.tabs[b-sqmzkzko0e] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.25rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.tab[b-sqmzkzko0e] {
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.tab:hover[b-sqmzkzko0e] {
    color: var(--text-primary, #1a1a2e);
}

.tab.active[b-sqmzkzko0e] {
    background: white;
    color: var(--primary, #4f46e5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tab Content */
.tab-content[b-sqmzkzko0e] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.alerts-table-container[b-sqmzkzko0e] {
    overflow-x: auto;
}

.alerts-table[b-sqmzkzko0e] {
    width: 100%;
    border-collapse: collapse;
}

.alerts-table th[b-sqmzkzko0e] {
    text-align: left;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.alerts-table td[b-sqmzkzko0e] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.alerts-table tbody tr:hover[b-sqmzkzko0e] {
    background: var(--bg-hover, #f8fafc);
}

.alerts-table .item-name[b-sqmzkzko0e] {
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

/* Row urgency classes */
.row-critical[b-sqmzkzko0e] {
    background: #fef2f2 !important;
}

.row-high[b-sqmzkzko0e] {
    background: #fffbeb !important;
}

.row-medium[b-sqmzkzko0e] {
    background: #fff7ed !important;
}

/* Stock values */
.stock-value.zero[b-sqmzkzko0e] {
    color: #dc2626;
    font-weight: 600;
}

.stock-value.low[b-sqmzkzko0e] {
    color: #f59e0b;
    font-weight: 500;
}

/* Urgency badges */
.urgency-badge[b-sqmzkzko0e] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.urgency-badge.critical[b-sqmzkzko0e] {
    background: #fee2e2;
    color: #dc2626;
}

.urgency-badge.high[b-sqmzkzko0e] {
    background: #fef3c7;
    color: #d97706;
}

.urgency-badge.medium[b-sqmzkzko0e] {
    background: #ffedd5;
    color: #ea580c;
}

.urgency-badge.low[b-sqmzkzko0e] {
    background: #dcfce7;
    color: #16a34a;
}

/* Days badges */
.days-badge[b-sqmzkzko0e] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.days-badge.expired[b-sqmzkzko0e] {
    background: #dc2626;
    color: white;
}

.days-badge.critical[b-sqmzkzko0e] {
    background: #fee2e2;
    color: #dc2626;
}

.days-badge.warning[b-sqmzkzko0e] {
    background: #fef3c7;
    color: #d97706;
}

/* Variance */
.variance.negative[b-sqmzkzko0e] {
    color: #dc2626;
}

.variance.positive[b-sqmzkzko0e] {
    color: #16a34a;
}

.value.negative[b-sqmzkzko0e] {
    color: #dc2626;
}

.suggested[b-sqmzkzko0e] {
    font-weight: 600;
    color: var(--primary, #4f46e5);
}

/* Confidence bar */
.confidence-bar[b-sqmzkzko0e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.confidence-bar .confidence-fill[b-sqmzkzko0e] {
    height: 6px;
    background: var(--primary, #4f46e5);
    border-radius: 3px;
    min-width: 40px;
    max-width: 60px;
}

.confidence-bar span[b-sqmzkzko0e] {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

/* Action buttons */
.actions[b-sqmzkzko0e] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-sqmzkzko0e] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 8px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-sqmzkzko0e] {
    background: var(--primary, #4f46e5);
    color: white;
}

.btn-icon:active[b-sqmzkzko0e] {
    transform: scale(0.95);
}

/* Bulk actions */
.bulk-actions[b-sqmzkzko0e] {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: flex-end;
}

/* Empty state */
.empty-state[b-sqmzkzko0e] {
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary, #64748b);
}

.empty-state svg[b-sqmzkzko0e] {
    opacity: 0.4;
    margin-bottom: 1rem;
}

.empty-state p[b-sqmzkzko0e] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Loading state */
.loading-state[b-sqmzkzko0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-secondary, #64748b);
}

.spinner[b-sqmzkzko0e] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-sqmzkzko0e 1s linear infinite;
}

@keyframes spin-b-sqmzkzko0e {
    to { transform: rotate(360deg); }
}

/* Dark mode overrides for admin layout */
.page-header h1[b-sqmzkzko0e] {
    color: #f1f5f9;
}

.btn.outline[b-sqmzkzko0e] {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

.btn.outline:hover[b-sqmzkzko0e] {
    background: #475569;
}

.summary-card[b-sqmzkzko0e] {
    background: #1e293b;
}

.summary-card.critical[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

.summary-card.warning[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
}

.summary-card.danger[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #831843 0%, #9d174d 100%);
}

.summary-card.alert[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%);
}

.summary-card.info[b-sqmzkzko0e] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
}

.summary-value[b-sqmzkzko0e] {
    color: #f1f5f9;
}

.summary-label[b-sqmzkzko0e] {
    color: #94a3b8;
}

.tabs[b-sqmzkzko0e] {
    background: #1e293b;
}

.tab[b-sqmzkzko0e] {
    color: #94a3b8;
}

.tab:hover[b-sqmzkzko0e] {
    color: #f1f5f9;
}

.tab.active[b-sqmzkzko0e] {
    background: #334155;
    color: #3b82f6;
}

.tab-content[b-sqmzkzko0e] {
    background: #1e293b;
}

.alerts-table th[b-sqmzkzko0e] {
    color: #94a3b8;
    background: #0f172a;
    border-bottom-color: #334155;
}

.alerts-table td[b-sqmzkzko0e] {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

.alerts-table tbody tr:hover[b-sqmzkzko0e] {
    background: #334155;
}

.alerts-table .item-name[b-sqmzkzko0e] {
    color: #f1f5f9;
}

.row-critical[b-sqmzkzko0e] {
    background: rgba(127, 29, 29, 0.3) !important;
}

.row-high[b-sqmzkzko0e] {
    background: rgba(120, 53, 15, 0.3) !important;
}

.row-medium[b-sqmzkzko0e] {
    background: rgba(124, 45, 18, 0.3) !important;
}

.btn-icon[b-sqmzkzko0e] {
    background: #334155;
    color: #94a3b8;
}

.btn-icon:hover[b-sqmzkzko0e] {
    background: #3b82f6;
    color: white;
}

.bulk-actions[b-sqmzkzko0e] {
    border-top-color: #334155;
}

.empty-state[b-sqmzkzko0e] {
    color: #94a3b8;
}

.loading-state[b-sqmzkzko0e] {
    color: #94a3b8;
}

.spinner[b-sqmzkzko0e] {
    border-color: #334155;
    border-top-color: #3b82f6;
}

.confidence-bar span[b-sqmzkzko0e] {
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .alerts-container[b-sqmzkzko0e] {
        padding: 1rem;
    }

    .page-header[b-sqmzkzko0e] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .summary-grid[b-sqmzkzko0e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .tabs[b-sqmzkzko0e] {
        width: 100%;
    }

    .alerts-table th[b-sqmzkzko0e],
    .alerts-table td[b-sqmzkzko0e] {
        padding: 0.75rem 0.5rem;
    }
}

/* Phone (≤600px) — additive overflow fixes, never change desktop/base */
@media (max-width: 600px) {
    .alerts-container[b-sqmzkzko0e] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header title + button wrap */
    .page-header[b-sqmzkzko0e] {
        flex-wrap: wrap;
    }

    .header-actions[b-sqmzkzko0e] {
        width: 100%;
    }

    .header-actions .btn[b-sqmzkzko0e] {
        width: 100%;
        justify-content: center;
    }

    /* Stat grid → 2 columns, cells allowed to shrink */
    .summary-grid[b-sqmzkzko0e] {
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }

    .summary-card[b-sqmzkzko0e] {
        padding: 0.875rem;
        min-width: 0;
    }

    .summary-value[b-sqmzkzko0e] {
        font-size: 1.5rem;
    }

    /* Tab chips: horizontal scroll, never shrink */
    .tabs[b-sqmzkzko0e] {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tabs .tab[b-sqmzkzko0e] {
        flex: 0 0 auto;
    }

    /* Tables: scroll horizontally, keep real column widths (don't crush) */
    .alerts-table-container[b-sqmzkzko0e] {
        -webkit-overflow-scrolling: touch;
    }

    .alerts-table[b-sqmzkzko0e] {
        width: max-content;
        min-width: 100%;
    }

    .alerts-table th[b-sqmzkzko0e],
    .alerts-table td[b-sqmzkzko0e] {
        white-space: nowrap;
    }

    /* Bulk-action button fills width */
    .bulk-actions[b-sqmzkzko0e] {
        justify-content: stretch;
    }

    .bulk-actions .btn[b-sqmzkzko0e] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Admin/KioskSettings.razor.rz.scp.css */
.kiosk-settings-page[b-lw05m4aq7p] {
    padding: 0 16px 40px;
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.page-header[b-lw05m4aq7p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 12px;
}

.page-header h1[b-lw05m4aq7p] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #f1f5f9;
}

.page-header .sub[b-lw05m4aq7p] {
    font-size: 0.85rem;
    color: #94a3b8;
    display: block;
    margin-top: 4px;
}

.open-kiosk[b-lw05m4aq7p] {
    flex-shrink: 0;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #818cf8;
    text-decoration: none;
    white-space: nowrap;
}

.open-kiosk:hover[b-lw05m4aq7p] {
    color: #a5b4fc;
    text-decoration: underline;
}

/* Message banner */
.message-banner[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.message-banner.success[b-lw05m4aq7p] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.message-banner.error[b-lw05m4aq7p] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.message-banner .dismiss[b-lw05m4aq7p] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.message-banner .dismiss:hover[b-lw05m4aq7p] {
    opacity: 1;
}

/* Loading & empty states */
.loading-spinner[b-lw05m4aq7p] {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state[b-lw05m4aq7p] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

/* Settings cards */
.settings-card[b-lw05m4aq7p] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header[b-lw05m4aq7p] {
    padding: 14px 20px;
    border-bottom: 1px solid #334155;
}

.card-header h2[b-lw05m4aq7p] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.card-body[b-lw05m4aq7p] {
    padding: 16px 20px;
}

/* Toggle rows */
.toggle-row[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 16px;
}

.toggle-row + .toggle-row[b-lw05m4aq7p] {
    border-top: 1px solid #334155;
}

.toggle-row strong[b-lw05m4aq7p] {
    color: #e2e8f0;
    font-size: 0.9rem;
}

.toggle-row .hint[b-lw05m4aq7p] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.toggle-row code[b-lw05m4aq7p] {
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #a5b4fc;
}

.main-toggle[b-lw05m4aq7p] {
    background: rgba(99, 102, 241, 0.06);
    padding: 14px;
    margin: -16px -20px;
}

/* Toggle switch */
.switch[b-lw05m4aq7p] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-lw05m4aq7p] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-lw05m4aq7p] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #475569;
    border-radius: 24px;
    transition: background-color 0.2s;
}

.slider[b-lw05m4aq7p]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

input:checked + .slider[b-lw05m4aq7p] {
    background-color: #6366f1;
}

input:checked + .slider[b-lw05m4aq7p]::before {
    transform: translateX(20px);
}

/* "Próximamente" badge + disabled state for a not-yet-available setting */
.soon-badge[b-lw05m4aq7p] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 999px;
    vertical-align: middle;
}

.toggle-row.is-soon strong[b-lw05m4aq7p] { opacity: 0.75; }
.switch input:disabled + .slider[b-lw05m4aq7p] { cursor: not-allowed; opacity: 0.45; }

/* A "Próximamente" toggle must read as OFF even though the stored flag defaults to
   true — otherwise the dimmed switch paints ON beside copy that says it does nothing. */
.toggle-row.is-soon input:checked + .slider[b-lw05m4aq7p] { background-color: #475569; }
.toggle-row.is-soon input:checked + .slider[b-lw05m4aq7p]::before { transform: none; }

/* Form rows */
.form-row[b-lw05m4aq7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 12px;
}

.form-row + .form-row[b-lw05m4aq7p],
.form-row + .toggle-row[b-lw05m4aq7p],
.toggle-row + .form-row[b-lw05m4aq7p] {
    border-top: 1px solid #334155;
}

.form-row label[b-lw05m4aq7p] {
    color: #e2e8f0;
    font-size: 0.875rem;
    flex: 1;
}

.form-row label .hint[b-lw05m4aq7p] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.form-input[b-lw05m4aq7p] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.form-input:focus[b-lw05m4aq7p] {
    outline: none;
    border-color: #6366f1;
}

.form-input.short[b-lw05m4aq7p] {
    width: 90px;
    text-align: center;
}

.form-input.wide[b-lw05m4aq7p] {
    width: 100%;
    max-width: 320px;
}

/* Buttons */
.btn-primary[b-lw05m4aq7p] {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover[b-lw05m4aq7p] {
    background: #4f46e5;
}

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

/* Save bar */
.save-bar[b-lw05m4aq7p] {
    position: sticky;
    bottom: 0;
    background: #1e293b;
    border-top: 1px solid #334155;
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px -16px -40px;
}

/* Responsive */
@media (max-width: 600px) {
    .kiosk-settings-page[b-lw05m4aq7p] {
        padding: 0 10px 32px;
    }

    .page-header[b-lw05m4aq7p] {
        flex-direction: column;
        gap: 4px;
    }

    .form-row[b-lw05m4aq7p] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-input.short[b-lw05m4aq7p],
    .form-input.wide[b-lw05m4aq7p] {
        width: 100%;
        max-width: none;
    }
}
/* /Pages/Admin/Locations.razor.rz.scp.css */
.locations-container[b-7s1f74yfqf] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-7s1f74yfqf] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.subtitle[b-7s1f74yfqf] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
}

/* Buttons */
.btn[b-7s1f74yfqf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled)[b-7s1f74yfqf] {
    transform: scale(0.98);
}

.btn.primary[b-7s1f74yfqf] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover:not(:disabled)[b-7s1f74yfqf] {
    background: #2563eb;
}

.btn.outline[b-7s1f74yfqf] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

.btn.outline:hover[b-7s1f74yfqf] {
    background: #334155;
}

/* Locations Grid */
.locations-grid[b-7s1f74yfqf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.location-card[b-7s1f74yfqf] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    transition: box-shadow 0.2s;
    border: 1px solid #334155;
}

.location-card:hover[b-7s1f74yfqf] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.location-card.primary[b-7s1f74yfqf] {
    border: 2px solid #3b82f6;
}

.location-card.inactive[b-7s1f74yfqf] {
    opacity: 0.6;
}

.primary-badge[b-7s1f74yfqf], .inactive-badge[b-7s1f74yfqf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.primary-badge[b-7s1f74yfqf] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.inactive-badge[b-7s1f74yfqf] {
    background: #334155;
    color: #94a3b8;
}

.card-header[b-7s1f74yfqf] {
    margin-bottom: 1rem;
    padding-right: 60px;
}

.card-header h3[b-7s1f74yfqf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.location-code[b-7s1f74yfqf] {
    display: inline-block;
    font-size: 0.75rem;
    color: #94a3b8;
    background: #334155;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.card-details[b-7s1f74yfqf] {
    margin-bottom: 1rem;
}

.detail-row[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
    margin-bottom: 0.375rem;
}

.card-stats[b-7s1f74yfqf] {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid #334155;
    border-bottom: 1px solid #334155;
    margin-bottom: 0.75rem;
}

.stat[b-7s1f74yfqf] {
    text-align: center;
}

.stat-value[b-7s1f74yfqf] {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
}

.stat-label[b-7s1f74yfqf] {
    font-size: 0.6875rem;
    color: #64748b;
    text-transform: uppercase;
}

.card-footer[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transfer-status[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.card-actions[b-7s1f74yfqf] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-7s1f74yfqf] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-icon:hover[b-7s1f74yfqf] {
    background: #475569;
    color: #f1f5f9;
}

.btn-icon:active[b-7s1f74yfqf] {
    transform: scale(0.95);
}

/* Quick Actions */
.quick-actions[b-7s1f74yfqf] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.action-btn[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    min-height: 48px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover[b-7s1f74yfqf] {
    background: #334155;
    border-color: #3b82f6;
    color: #3b82f6;
}

.action-btn:active[b-7s1f74yfqf] {
    transform: scale(0.98);
}

/* Empty State */
.empty-state[b-7s1f74yfqf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #1e293b;
    border-radius: 12px;
}

.empty-state svg[b-7s1f74yfqf] {
    color: #475569;
    margin-bottom: 1rem;
}

.empty-state h2[b-7s1f74yfqf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-7s1f74yfqf] {
    color: #94a3b8;
    margin: 0 0 1.5rem 0;
    max-width: 400px;
}

/* Loading State */
.loading-state[b-7s1f74yfqf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-7s1f74yfqf] {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-7s1f74yfqf 1s linear infinite;
}

.spinner-small[b-7s1f74yfqf] {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-7s1f74yfqf 1s linear infinite;
}

@keyframes spin-b-7s1f74yfqf {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-7s1f74yfqf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal[b-7s1f74yfqf] {
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-7s1f74yfqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-7s1f74yfqf] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.close-btn[b-7s1f74yfqf] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:hover[b-7s1f74yfqf] {
    background: #475569;
    color: #f1f5f9;
}

.close-btn:active[b-7s1f74yfqf] {
    transform: scale(0.95);
}

.modal-body[b-7s1f74yfqf] {
    padding: 1.25rem;
}

.form-group[b-7s1f74yfqf] {
    margin-bottom: 1rem;
}

.form-group label[b-7s1f74yfqf] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.form-input[b-7s1f74yfqf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: #0f172a;
    color: #f1f5f9;
}

.form-input:focus[b-7s1f74yfqf] {
    outline: none;
    border-color: #3b82f6;
}

.form-row[b-7s1f74yfqf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row.checkboxes[b-7s1f74yfqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-label[b-7s1f74yfqf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-7s1f74yfqf] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

.modal-footer[b-7s1f74yfqf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid #334155;
}

/* Responsive */
@media (max-width: 768px) {
    .locations-container[b-7s1f74yfqf] {
        padding: 1rem;
    }

    .page-header[b-7s1f74yfqf] {
        flex-direction: column;
        align-items: stretch;
    }

    .locations-grid[b-7s1f74yfqf] {
        grid-template-columns: 1fr;
    }

    .form-row[b-7s1f74yfqf] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Login.razor.rz.scp.css */
/* Scoped dark-theme overrides for the admin login.
   Kept here (rather than only in the inline <style> in Login.razor) so Blazor
   CSS isolation's [b-xxxxx] attribute gives these rules higher specificity
   than any leftover or third-party selectors that matched the same classes. */

.login-page[b-f5gdjon14s] {
    background: #0f172a;
}

.login-card[b-f5gdjon14s] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

.login-header h2[b-f5gdjon14s] {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.restaurant-name[b-f5gdjon14s] {
    color: #93c5fd;
}

.form-group label[b-f5gdjon14s] {
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}

.form-group input[b-f5gdjon14s] {
    background: #0f172a;
    color: #e2e8f0;
    border: 1.5px solid #2a3050;
}

.form-group input[b-f5gdjon14s]::placeholder {
    color: #64748b;
}
/* /Pages/Admin/Loyalty.razor.rz.scp.css */
/* Base classes for isolated CSS */
.btn[b-j4e4420dh5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: #1e293b;
    color: #e2e8f0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover[b-j4e4420dh5] { background: #334155; }
.btn:active[b-j4e4420dh5] { transform: scale(0.97); }
.btn.primary[b-j4e4420dh5] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-j4e4420dh5] { background: #1d4ed8; }
.btn.primary:active[b-j4e4420dh5] { background: #1e40af; }
.btn.primary:disabled[b-j4e4420dh5] { background: #475569; color: #94a3b8; cursor: not-allowed; }
.btn.secondary[b-j4e4420dh5] { background: #334155; color: #e2e8f0; }
.btn.secondary:hover[b-j4e4420dh5] { background: #475569; }
.btn.secondary:active[b-j4e4420dh5] { background: #556677; }

.form-input[b-j4e4420dh5], .form-select[b-j4e4420dh5] {
    width: 100%;
    padding: 10px 12px;
    min-height: 44px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-j4e4420dh5], .form-select:focus[b-j4e4420dh5] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-input[b-j4e4420dh5]::placeholder { color: #475569; }
textarea.form-input[b-j4e4420dh5] { resize: vertical; min-height: 60px; }

.spinner[b-j4e4420dh5] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-j4e4420dh5 0.7s linear infinite;
    margin: 0 auto;
}

.loyalty-page[b-j4e4420dh5] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left h1[b-j4e4420dh5] {
    margin: 0;
    font-size: 1.5rem;
    color: #f1f5f9;
}

.message-banner[b-j4e4420dh5] {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-banner.error[b-j4e4420dh5] { background: #7f1d1d; color: #fca5a5; }
.message-banner.success[b-j4e4420dh5] { background: #14532d; color: #86efac; }
.message-banner .dismiss[b-j4e4420dh5] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; min-width: 44px; min-height: 44px; }

/* Tabs */
.tabs[b-j4e4420dh5] {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #1e293b;
}

.tab[b-j4e4420dh5] {
    padding: 12px 20px;
    min-height: 44px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
}

.tab:hover[b-j4e4420dh5] { color: #e2e8f0; }
.tab:active[b-j4e4420dh5] { color: #e2e8f0; background: #1e293b; }
.tab.active[b-j4e4420dh5] { color: #3b82f6; border-bottom-color: #3b82f6; }

.tab-badge[b-j4e4420dh5] {
    font-size: 0.7rem;
    background: #334155;
    color: #94a3b8;
    padding: 1px 6px;
    border-radius: 8px;
}

/* Config */
.config-section[b-j4e4420dh5] { max-width: 700px; }

.config-card[b-j4e4420dh5] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 24px;
}

.config-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.config-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.2rem; color: #f1f5f9; }

.config-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.config-grid.three[b-j4e4420dh5] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.config-actions[b-j4e4420dh5] { margin-top: 20px; }

h3[b-j4e4420dh5] { color: #f1f5f9; font-size: 1rem; margin: 16px 0 8px; }

.help-text[b-j4e4420dh5] { display: block; font-size: 0.7rem; color: #64748b; margin-top: 2px; }

/* Toggle */
.toggle-switch[b-j4e4420dh5] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.toggle-switch.inline[b-j4e4420dh5] { margin-top: 8px; }

.toggle-switch input[b-j4e4420dh5] { display: none; }

.toggle-slider[b-j4e4420dh5] {
    width: 40px;
    height: 22px;
    background: #475569;
    border-radius: 11px;
    position: relative;
    transition: all 0.2s;
}

.toggle-slider[b-j4e4420dh5]::after {
    content: '';
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}

.toggle-switch input:checked + .toggle-slider[b-j4e4420dh5] {
    background: #22c55e;
}

.toggle-switch input:checked + .toggle-slider[b-j4e4420dh5]::after {
    left: 20px;
}

.toggle-label[b-j4e4420dh5] { font-size: 0.85rem; color: #94a3b8; }

/* Section wrappers */
.accounts-section[b-j4e4420dh5] {}
.rewards-section[b-j4e4420dh5] {}

/* Detail items in modals */
.detail-item[b-j4e4420dh5] { }

/* Accounts Table */
.filter-bar[b-j4e4420dh5] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-j4e4420dh5] { max-width: 280px; }

.accounts-table-wrapper[b-j4e4420dh5] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #1e293b;
}

.accounts-table[b-j4e4420dh5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.accounts-table thead[b-j4e4420dh5] { background: #0f172a; }

.accounts-table th[b-j4e4420dh5] {
    padding: 10px 12px;
    text-align: left;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 2px solid #1e293b;
    white-space: nowrap;
}

.accounts-table td[b-j4e4420dh5] {
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
    color: #cbd5e1;
}

.accounts-table tbody tr.clickable[b-j4e4420dh5] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.accounts-table tbody tr:hover[b-j4e4420dh5],
.accounts-table tbody tr:active[b-j4e4420dh5] { background: #1e293b40; }
.accounts-table tbody tr.clickable:focus-visible[b-j4e4420dh5] { outline: 2px solid #3b82f6; outline-offset: -2px; }

.name-cell[b-j4e4420dh5] { font-weight: 500; color: #f1f5f9; }
.points-cell[b-j4e4420dh5] { font-weight: 600; color: #22c55e; }
.date-cell[b-j4e4420dh5] { color: #64748b; }

/* Tier badges */
.tier-badge[b-j4e4420dh5] {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.tier-badge.large[b-j4e4420dh5] { font-size: 1rem; padding: 4px 16px; }

.tier-badge.tier-0[b-j4e4420dh5] { background: #1e293b; color: #94a3b8; }
.tier-badge.tier-1[b-j4e4420dh5] { background: #374151; color: #d1d5db; }
.tier-badge.tier-2[b-j4e4420dh5] { background: #451a03; color: #fcd34d; }
.tier-badge.tier-3[b-j4e4420dh5] { background: #312e81; color: #c4b5fd; }

/* Rewards */
.rewards-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rewards-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.2rem; color: #f1f5f9; }

.rewards-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.reward-card[b-j4e4420dh5] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 16px;
    position: relative;
}

.reward-card.inactive[b-j4e4420dh5] { opacity: 0.5; }

.reward-name[b-j4e4420dh5] { font-size: 1rem; font-weight: 600; color: #f1f5f9; margin-bottom: 4px; }
.reward-desc[b-j4e4420dh5] { font-size: 0.8rem; color: #94a3b8; margin-bottom: 8px; }
.reward-cost[b-j4e4420dh5] { font-size: 1.2rem; font-weight: 700; color: #3b82f6; margin-bottom: 4px; }
.reward-value[b-j4e4420dh5] { font-size: 0.85rem; color: #22c55e; margin-bottom: 8px; }

.reward-actions[b-j4e4420dh5] {
    display: flex;
    gap: 4px;
}

.btn-icon[b-j4e4420dh5] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-j4e4420dh5] { background: #334155; }
.btn-icon:active[b-j4e4420dh5] { background: #475569; }
.btn-icon.danger:hover[b-j4e4420dh5] { background: #7f1d1d; }
.btn-icon.danger:active[b-j4e4420dh5] { background: #991b1b; }

/* Stats */
.stats-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-j4e4420dh5] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-card.highlight[b-j4e4420dh5] { border-color: #3b82f6; background: #1e3a5f; }

.stat-value[b-j4e4420dh5] {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.stat-label[b-j4e4420dh5] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tier Distribution */
.tier-distribution[b-j4e4420dh5] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 20px;
}

.tier-bars[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 10px; }

.tier-bar-row[b-j4e4420dh5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tier-name[b-j4e4420dh5] { min-width: 80px; font-size: 0.85rem; color: #94a3b8; }

.tier-bar-track[b-j4e4420dh5] {
    flex: 1;
    height: 24px;
    background: #0f172a;
    border-radius: 4px;
    overflow: hidden;
}

.tier-bar-fill[b-j4e4420dh5] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}

.tier-bar-fill.regular[b-j4e4420dh5] { background: #475569; }
.tier-bar-fill.silver[b-j4e4420dh5] { background: #9ca3af; }
.tier-bar-fill.gold[b-j4e4420dh5] { background: #f59e0b; }
.tier-bar-fill.platinum[b-j4e4420dh5] { background: #8b5cf6; }

.tier-count[b-j4e4420dh5] { min-width: 30px; font-size: 0.85rem; color: #f1f5f9; font-weight: 600; }

/* Account Detail */
.account-detail-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px;
    background: #0f172a;
    border-radius: 8px;
}

.account-points[b-j4e4420dh5] { text-align: center; }
.points-value[b-j4e4420dh5] { font-size: 2.5rem; font-weight: 700; color: #22c55e; display: block; }
.points-label[b-j4e4420dh5] { font-size: 0.8rem; color: #64748b; text-transform: uppercase; }

.detail-grid[b-j4e4420dh5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.detail-label[b-j4e4420dh5] { display: block; font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value[b-j4e4420dh5] { color: #e2e8f0; font-size: 0.95rem; }

.adjust-section[b-j4e4420dh5] {
    margin: 16px 0;
    padding: 12px;
    background: #0f172a;
    border-radius: 8px;
}

.adjust-section h3[b-j4e4420dh5] { margin: 0 0 8px; }

.message-banner.inline[b-j4e4420dh5] {
    font-size: 0.85rem;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 6px;
}

.adjust-form[b-j4e4420dh5] { display: flex; gap: 8px; }

/* Transactions */
.txn-list[b-j4e4420dh5] { display: flex; flex-direction: column; gap: 4px; }

.txn-row[b-j4e4420dh5] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: #0f172a;
    border-radius: 6px;
    font-size: 0.85rem;
}

.txn-date[b-j4e4420dh5] { color: #64748b; min-width: 80px; }
.txn-type[b-j4e4420dh5] { color: #94a3b8; min-width: 70px; }
.txn-desc[b-j4e4420dh5] { color: #cbd5e1; flex: 1; }
.txn-amount[b-j4e4420dh5] { font-weight: 600; min-width: 80px; text-align: right; }
.txn-amount.positive[b-j4e4420dh5] { color: #22c55e; }
.txn-amount.negative[b-j4e4420dh5] { color: #ef4444; }
.txn-balance[b-j4e4420dh5] { color: #64748b; min-width: 80px; text-align: right; }

/* Modals */
.modal-overlay[b-j4e4420dh5] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-panel[b-j4e4420dh5] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #334155;
}

.modal-panel.wide[b-j4e4420dh5] { max-width: 700px; }

.modal-header[b-j4e4420dh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-j4e4420dh5] { margin: 0; font-size: 1.1rem; color: #f1f5f9; }

.modal-close[b-j4e4420dh5] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.modal-close:hover[b-j4e4420dh5] { background: #334155; }
.modal-close:active[b-j4e4420dh5] { background: #475569; }

.modal-body[b-j4e4420dh5] { padding: 20px; }
.modal-footer[b-j4e4420dh5] { padding: 16px 20px; border-top: 1px solid #334155; display: flex; gap: 8px; justify-content: flex-end; }

.form-group[b-j4e4420dh5] { margin-bottom: 14px; }
.form-group label[b-j4e4420dh5] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 4px; }
.form-row[b-j4e4420dh5] { display: flex; gap: 12px; }
.form-row .form-group[b-j4e4420dh5] { flex: 1; }

/* Loading */
.loading-state[b-j4e4420dh5] { text-align: center; padding: 60px; color: #64748b; }
.empty-state[b-j4e4420dh5] { text-align: center; padding: 40px; color: #64748b; }

.spinner-sm[b-j4e4420dh5] {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-j4e4420dh5 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin-b-j4e4420dh5 { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .loyalty-page[b-j4e4420dh5] { padding: 12px; }
    .config-grid[b-j4e4420dh5], .config-grid.three[b-j4e4420dh5] { grid-template-columns: 1fr; }
    .filter-bar[b-j4e4420dh5] { flex-direction: column; align-items: stretch; }
    .search-input[b-j4e4420dh5] { max-width: none; }
    .form-row[b-j4e4420dh5] { flex-direction: column; }
    .txn-row[b-j4e4420dh5] { flex-wrap: wrap; }
    .adjust-form[b-j4e4420dh5] { flex-direction: column; }
}

/* Phone (~390px) overflow fixes: keep inputs inside the viewport and let the
   tab row scroll horizontally instead of running off the right edge. */
@media (max-width: 600px) {
    /* Tab row: never wider than the screen; scroll sideways if needed. */
    .tabs[b-j4e4420dh5] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .tab[b-j4e4420dh5] {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px 14px;
    }

    /* Config card / grid must not force a min-width wider than the phone. */
    .config-section[b-j4e4420dh5] { max-width: 100%; }
    .config-card[b-j4e4420dh5] { padding: 16px; }
    .config-grid[b-j4e4420dh5],
    .config-grid.three[b-j4e4420dh5] {
        grid-template-columns: 1fr;
    }
    /* Grid items default to min-width:auto, which lets number inputs push the
       track wider than the screen — clamp the item and the field itself. */
    .config-grid .form-group[b-j4e4420dh5],
    .config-grid.three .form-group[b-j4e4420dh5] { min-width: 0; }

    .form-input[b-j4e4420dh5],
    .form-select[b-j4e4420dh5] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* /Pages/Admin/MenuDelDia.razor.rz.scp.css */
.menu-del-dia-page[b-4ol3y6i3jf] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-header h1[b-4ol3y6i3jf] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-4ol3y6i3jf] {
    margin: 0.25rem 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* States */
.loading-state[b-4ol3y6i3jf],
.error-state[b-4ol3y6i3jf],
.empty-state[b-4ol3y6i3jf] {
    text-align: center;
    padding: 3rem;
    background: #1e293b;
    border-radius: 12px;
    color: #e2e8f0;
}

.empty-icon[b-4ol3y6i3jf] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    color: #e2e8f0;
}

.empty-state p[b-4ol3y6i3jf] {
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

.spinner[b-4ol3y6i3jf] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ddd;
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: spin-b-4ol3y6i3jf 1s linear infinite;
}

@keyframes spin-b-4ol3y6i3jf {
    to { transform: rotate(360deg); }
}

/* Menu Cards Grid */
.menus-grid[b-4ol3y6i3jf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.menu-card[b-4ol3y6i3jf] {
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.menu-card:hover[b-4ol3y6i3jf] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.menu-card.inactive[b-4ol3y6i3jf] {
    opacity: 0.6;
}

.card-header[b-4ol3y6i3jf] {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, #4CAF50, #81C784);
}

.card-image[b-4ol3y6i3jf] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.card-status[b-4ol3y6i3jf] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.status-badge[b-4ol3y6i3jf] {
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active[b-4ol3y6i3jf] {
    background: #4CAF50;
}

.card-body[b-4ol3y6i3jf] {
    padding: 1rem;
}

.card-body h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #e2e8f0;
}

.card-body .description[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    color: #94a3b8;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-price[b-4ol3y6i3jf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 0.5rem;
}

.includes-tags[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tag[b-4ol3y6i3jf] {
    background: #334155;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #e2e8f0;
}

.courses-summary[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.card-actions[b-4ol3y6i3jf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #334155;
}

/* Buttons */
.btn[b-4ol3y6i3jf] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: #334155;
    color: #e2e8f0;
    transition: background 0.2s ease;
}

.btn:hover[b-4ol3y6i3jf] {
    background: #475569;
}

.btn.primary[b-4ol3y6i3jf] {
    background: #4CAF50;
    color: white;
}

.btn.primary:hover[b-4ol3y6i3jf] {
    background: #43A047;
}

.btn.danger[b-4ol3y6i3jf] {
    background: #f44336;
    color: white;
}

.btn.danger:hover[b-4ol3y6i3jf] {
    background: #d32f2f;
}

.btn.icon[b-4ol3y6i3jf] {
    padding: 0.5rem;
    min-width: 36px;
}

.btn.small[b-4ol3y6i3jf] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn:disabled[b-4ol3y6i3jf] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-overlay[b-4ol3y6i3jf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-4ol3y6i3jf] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: #e2e8f0;
}

.modal-content.large[b-4ol3y6i3jf] {
    max-width: 700px;
}

.modal-content.small[b-4ol3y6i3jf] {
    max-width: 400px;
}

.modal-close[b-4ol3y6i3jf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-4ol3y6i3jf] {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    color: #e2e8f0;
}

.modal-footer[b-4ol3y6i3jf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

/* Form */
.form-section[b-4ol3y6i3jf] {
    margin-bottom: 1.5rem;
}

.form-section h3[b-4ol3y6i3jf] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.form-section .hint[b-4ol3y6i3jf] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.form-group[b-4ol3y6i3jf] {
    margin-bottom: 1rem;
}

.form-group label[b-4ol3y6i3jf] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.form-group input[b-4ol3y6i3jf],
.form-group textarea[b-4ol3y6i3jf],
.form-group select[b-4ol3y6i3jf] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #0f172a;
    color: #e2e8f0;
}

.form-group input[b-4ol3y6i3jf]::placeholder,
.form-group textarea[b-4ol3y6i3jf]::placeholder {
    color: #64748b;
}

.form-group input:focus[b-4ol3y6i3jf],
.form-group textarea:focus[b-4ol3y6i3jf],
.form-group select:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: #4CAF50;
}

.form-row[b-4ol3y6i3jf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-row[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #e2e8f0;
}

.checkbox input[b-4ol3y6i3jf] {
    width: auto;
}

/* Course Section */
.course-section[b-4ol3y6i3jf] {
    background: #0f172a;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.course-header[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.course-type[b-4ol3y6i3jf] {
    font-weight: 600;
    color: #e2e8f0;
}

.custom-name[b-4ol3y6i3jf] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.course-items[b-4ol3y6i3jf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-item[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1e293b;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: #e2e8f0;
}

.course-item .item-name[b-4ol3y6i3jf] {
    flex: 1;
}

.course-item .item-supplement[b-4ol3y6i3jf] {
    color: #4CAF50;
    font-weight: 500;
    font-size: 0.85rem;
}

.no-items[b-4ol3y6i3jf] {
    color: #64748b;
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.add-course-row[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.add-course-row select[b-4ol3y6i3jf] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
}

/* Items List (Add Item Modal) */
.items-list[b-4ol3y6i3jf] {
    max-height: 300px;
    overflow-y: auto;
    margin: 1rem 0;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
}

.selectable-item[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #e2e8f0;
}

.selectable-item:hover[b-4ol3y6i3jf] {
    background: #334155;
}

.selectable-item:not(:last-child)[b-4ol3y6i3jf] {
    border-bottom: 1px solid #334155;
}

.selectable-item .item-price[b-4ol3y6i3jf] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Schedule Section */
.schedule-section[b-4ol3y6i3jf] {
    border: 1px solid #334155;
    border-radius: 8px;
    overflow: hidden;
}

.schedule-section .section-header[b-4ol3y6i3jf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #0f172a;
    cursor: pointer;
    user-select: none;
    color: #e2e8f0;
}

.schedule-section .section-header:hover[b-4ol3y6i3jf] {
    background: #1e293b;
}

.schedule-section .section-header h3[b-4ol3y6i3jf] {
    margin: 0;
    font-size: 0.95rem;
    color: #e2e8f0;
}

.schedule-section .toggle-icon[b-4ol3y6i3jf] {
    color: #94a3b8;
    font-size: 0.8rem;
}

.schedule-content[b-4ol3y6i3jf] {
    padding: 1rem;
    border-top: 1px solid #334155;
    background: #1e293b;
}

.days-config[b-4ol3y6i3jf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.day-row[b-4ol3y6i3jf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    background: #0f172a;
    border-radius: 6px;
}

.day-label[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    font-weight: 500;
    cursor: pointer;
    color: #e2e8f0;
}

.day-label input[b-4ol3y6i3jf] {
    width: auto;
}

.time-windows[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.time-window[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #1e293b;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #334155;
}

.time-window input[type="time"][b-4ol3y6i3jf] {
    width: 100px;
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #e2e8f0;
}

.time-window select[b-4ol3y6i3jf] {
    padding: 0.35rem 0.5rem;
    border: 1px solid #475569;
    border-radius: 4px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 80px;
}

.time-window select:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: #4CAF50;
}

.time-window select:hover[b-4ol3y6i3jf] {
    border-color: #4CAF50;
}

.time-window span[b-4ol3y6i3jf] {
    color: #94a3b8;
}

.quick-presets[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.preset-label[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-right: 0.5rem;
}

/* Image Upload */
.image-upload-group[b-4ol3y6i3jf] {
    margin-bottom: 1.5rem;
}

.image-preview[b-4ol3y6i3jf] {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.image-preview img[b-4ol3y6i3jf] {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #334155;
}

.btn-remove-image[b-4ol3y6i3jf] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-image:hover[b-4ol3y6i3jf] {
    background: #dc2626;
}

.image-upload-options[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.upload-option[b-4ol3y6i3jf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-upload[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: 1px dashed #475569;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-upload:hover[b-4ol3y6i3jf] {
    background: #475569;
    border-color: #4CAF50;
}

.upload-status[b-4ol3y6i3jf] {
    color: #4CAF50;
    font-size: 0.85rem;
}

.or-divider[b-4ol3y6i3jf] {
    color: #64748b;
    font-size: 0.85rem;
}

.url-option input[b-4ol3y6i3jf] {
    width: 250px;
    padding: 0.5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.9rem;
}

.url-option input[b-4ol3y6i3jf]::placeholder {
    color: #64748b;
}

.url-option input:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: #4CAF50;
}

.upload-error[b-4ol3y6i3jf] {
    margin-top: 0.5rem;
    color: #ef4444;
    font-size: 0.85rem;
}

/* Custom Includes */
.custom-includes-section[b-4ol3y6i3jf] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.custom-includes-header[b-4ol3y6i3jf] {
    margin-bottom: 0.5rem;
}

.custom-includes-label[b-4ol3y6i3jf] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.custom-includes-list[b-4ol3y6i3jf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.custom-include-tag[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #e2e8f0;
}

.custom-include-tag .remove-include[b-4ol3y6i3jf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #475569;
    color: #e2e8f0;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-include-tag .remove-include:hover[b-4ol3y6i3jf] {
    background: #ef4444;
}

.add-custom-include[b-4ol3y6i3jf] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-custom-include input[b-4ol3y6i3jf] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.85rem;
}

.add-custom-include input[b-4ol3y6i3jf]::placeholder {
    color: #64748b;
}

.add-custom-include input:focus[b-4ol3y6i3jf] {
    outline: none;
    border-color: #4CAF50;
}

.btn-add-include[b-4ol3y6i3jf] {
    padding: 0.5rem 0.75rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-add-include:hover:not(:disabled)[b-4ol3y6i3jf] {
    background: #4CAF50;
}

.btn-add-include:disabled[b-4ol3y6i3jf] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-4ol3y6i3jf] {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row[b-4ol3y6i3jf] {
        grid-template-columns: 1fr;
    }

    .menus-grid[b-4ol3y6i3jf] {
        grid-template-columns: 1fr;
    }

    .day-row[b-4ol3y6i3jf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .time-window input[type="time"][b-4ol3y6i3jf] {
        width: 85px;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */
/* /Pages/Admin/MenuSchedule.razor.rz.scp.css */
.menu-schedule-page[b-1uqtub8p1j] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-1uqtub8p1j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-header h1[b-1uqtub8p1j] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-1uqtub8p1j] {
    margin: 0.25rem 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.search-input[b-1uqtub8p1j] {
    padding: 0.5rem 1rem;
    border: 1px solid #334155;
    border-radius: 8px;
    width: 250px;
    font-size: 0.9rem;
    background: #0f172a;
    color: #e2e8f0;
}

.search-input[b-1uqtub8p1j]::placeholder {
    color: #64748b;
}

.search-input:focus[b-1uqtub8p1j] {
    outline: none;
    border-color: #2196F3;
}

/* Filter Bar */
.filter-bar[b-1uqtub8p1j] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn[b-1uqtub8p1j] {
    min-height: 44px;            /* touch target for POS hardware (was ~37px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover[b-1uqtub8p1j] {
    background: #334155;
}

.filter-btn.active[b-1uqtub8p1j] {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

/* Loading/Error/Empty States */
.loading-state[b-1uqtub8p1j],
.error-state[b-1uqtub8p1j] {
    text-align: center;
    padding: 3rem;
    background: #1e293b;
    border-radius: 12px;
    color: #e2e8f0;
}

.spinner[b-1uqtub8p1j] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ddd;
    border-top-color: #2196F3;
    border-radius: 50%;
    animation: spin-b-1uqtub8p1j 1s linear infinite;
}

@keyframes spin-b-1uqtub8p1j {
    to { transform: rotate(360deg); }
}

/* Items Table */
.items-table[b-1uqtub8p1j] {
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.table-header[b-1uqtub8p1j] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    background: #0f172a;
    font-weight: 600;
    font-size: 0.85rem;
    color: #94a3b8;
}

.table-row[b-1uqtub8p1j] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr 1.5fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #334155;
    align-items: center;
}

.table-row:hover[b-1uqtub8p1j] {
    background: #334155;
}

.table-row.unavailable[b-1uqtub8p1j] {
    background: rgba(211, 47, 47, 0.1);
}

.col-name strong[b-1uqtub8p1j] {
    display: block;
    color: #e2e8f0;
}

.col-name .sku[b-1uqtub8p1j] {
    font-size: 0.8rem;
    color: #64748b;
}

.col-category[b-1uqtub8p1j] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Schedule Badge */
.schedule-badge[b-1uqtub8p1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.schedule-badge.has-schedule[b-1uqtub8p1j] {
    background: #e3f2fd;
    color: #1976D2;
}

.schedule-badge.always[b-1uqtub8p1j] {
    background: #e8f5e9;
    color: #388E3C;
}

/* Status Indicator */
.status-indicator[b-1uqtub8p1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-indicator.available[b-1uqtub8p1j] {
    color: #388E3C;
}

.status-indicator.unavailable[b-1uqtub8p1j] {
    color: #d32f2f;
}

.col-actions[b-1uqtub8p1j] {
    display: flex;
    gap: 0.5rem;
}

.empty-message[b-1uqtub8p1j] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}

/* Buttons */
.btn[b-1uqtub8p1j] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: #334155;
    color: #e2e8f0;
    transition: background 0.2s ease;
}

.btn:hover[b-1uqtub8p1j] {
    background: #475569;
}

.btn.primary[b-1uqtub8p1j] {
    background: #2196F3;
    color: white;
}

.btn.primary:hover[b-1uqtub8p1j] {
    background: #1976D2;
}

.btn.danger[b-1uqtub8p1j] {
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
}

.btn.danger:hover[b-1uqtub8p1j] {
    background: rgba(211, 47, 47, 0.3);
}

.btn.small[b-1uqtub8p1j] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn.icon[b-1uqtub8p1j] {
    padding: 0.25rem 0.5rem;
}

.btn:disabled[b-1uqtub8p1j] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.modal-overlay[b-1uqtub8p1j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-1uqtub8p1j] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: #e2e8f0;
}

.modal-content.large[b-1uqtub8p1j] {
    max-width: 700px;
}

.modal-close[b-1uqtub8p1j] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-1uqtub8p1j] {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    color: #e2e8f0;
}

.modal-footer[b-1uqtub8p1j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

/* Form */
.form-section[b-1uqtub8p1j] {
    margin-bottom: 1.5rem;
}

.form-group[b-1uqtub8p1j] {
    margin-bottom: 1rem;
}

.form-group label[b-1uqtub8p1j] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #e2e8f0;
}

.form-group .hint[b-1uqtub8p1j] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.checkbox[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #e2e8f0;
}

.checkbox input[b-1uqtub8p1j] {
    width: auto;
}

/* Days Config */
.days-config[b-1uqtub8p1j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.day-row[b-1uqtub8p1j] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem;
    background: #0f172a;
    border-radius: 6px;
}

.day-label[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
    font-weight: 500;
    cursor: pointer;
    color: #e2e8f0;
}

.day-label input[b-1uqtub8p1j] {
    width: auto;
}

.time-windows[b-1uqtub8p1j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.time-window[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1e293b;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #334155;
}

.time-picker[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: #0f172a;
    border-radius: 6px;
    padding: 0.25rem;
}

.time-part[b-1uqtub8p1j] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.time-colon[b-1uqtub8p1j] {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 0.1rem;
}

.time-btn[b-1uqtub8p1j] {
    width: 28px;
    height: 28px;
    border: none;
    background: #334155;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.time-btn-sm[b-1uqtub8p1j] {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
}

.time-btn:hover[b-1uqtub8p1j] {
    background: #475569;
}

.time-btn:active[b-1uqtub8p1j] {
    transform: scale(0.95);
    background: #4CAF50;
}

.time-value[b-1uqtub8p1j] {
    min-width: 24px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.time-sep[b-1uqtub8p1j] {
    color: #64748b;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0.35rem;
}

.remove-window-btn[b-1uqtub8p1j] {
    margin-left: 0.25rem;
}

.time-window input[type="time"][b-1uqtub8p1j] {
    width: 100px;
    padding: 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #e2e8f0;
}

.time-window span[b-1uqtub8p1j] {
    color: #94a3b8;
}

/* Quick Presets */
.quick-presets[b-1uqtub8p1j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.preset-label[b-1uqtub8p1j] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-right: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .table-header[b-1uqtub8p1j],
    .table-row[b-1uqtub8p1j] {
        grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    }

    .col-actions[b-1uqtub8p1j] {
        display: none;
    }

    .table-row[b-1uqtub8p1j] {
        cursor: pointer;
    }
}

@media (max-width: 768px) {
    .page-header[b-1uqtub8p1j] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-input[b-1uqtub8p1j] {
        width: 100%;
    }

    .filter-bar[b-1uqtub8p1j] {
        flex-wrap: wrap;
    }

    .table-header[b-1uqtub8p1j] {
        display: none;
    }

    .table-row[b-1uqtub8p1j] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .day-row[b-1uqtub8p1j] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Responsive time picker */
    .time-window[b-1uqtub8p1j] {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.35rem 0.5rem;
    }

    .time-picker[b-1uqtub8p1j] {
        padding: 0.15rem;
    }

    .time-btn[b-1uqtub8p1j] {
        width: 24px;
        height: 24px;
        font-size: 0.85rem;
    }

    .time-btn-sm[b-1uqtub8p1j] {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    .time-value[b-1uqtub8p1j] {
        min-width: 20px;
        font-size: 0.8rem;
    }

    .time-sep[b-1uqtub8p1j] {
        font-size: 0.85rem;
        padding: 0 0.2rem;
    }

    .time-colon[b-1uqtub8p1j] {
        font-size: 0.85rem;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */
/* /Pages/Admin/MobileStockTake.razor.rz.scp.css */
.mobile-stock-container[b-wt8eeg2hto] {
    min-height: 100vh;
    background: #0f172a;
    display: flex;
    flex-direction: column;
}

/* Header */
.mobile-header[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    position: sticky;
    top: 0;
    z-index: 10;
}

.back-btn[b-wt8eeg2hto], .sync-btn[b-wt8eeg2hto] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 10px;
    color: #e2e8f0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.back-btn:active[b-wt8eeg2hto], .sync-btn:active[b-wt8eeg2hto] {
    transform: scale(0.95);
}

.sync-btn.syncing svg[b-wt8eeg2hto] {
    animation: spin-b-wt8eeg2hto 1s linear infinite;
}

@keyframes spin-b-wt8eeg2hto {
    to { transform: rotate(360deg); }
}

.header-content[b-wt8eeg2hto] {
    flex: 1;
}

.header-content h1[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.stock-take-id[b-wt8eeg2hto] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Start Screen */
.start-screen[b-wt8eeg2hto] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.start-icon[b-wt8eeg2hto] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    border-radius: 24px;
    color: #3b82f6;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.start-screen h2[b-wt8eeg2hto] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.5rem 0;
}

.start-screen p[b-wt8eeg2hto] {
    font-size: 0.9375rem;
    color: #94a3b8;
    margin: 0 0 1.5rem 0;
    max-width: 280px;
}

.category-select[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    margin-bottom: 1rem;
}

.form-select[b-wt8eeg2hto] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    border: 1px solid #334155;
    border-radius: 12px;
    font-size: 1rem;
    background: #1e293b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 1rem center;
    appearance: none;
    color: #e2e8f0;
}

.form-select option[b-wt8eeg2hto] {
    background: #1e293b;
    color: #e2e8f0;
}

.btn[b-wt8eeg2hto] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-wt8eeg2hto] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary.large[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    padding: 1rem;
}

.btn.outline[b-wt8eeg2hto] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

/* Recent Counts */
.recent-counts[b-wt8eeg2hto] {
    width: 100%;
    max-width: 300px;
    margin-top: 2rem;
}

.recent-counts h3[b-wt8eeg2hto] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    margin: 0 0 0.75rem 0;
    text-align: left;
}

.recent-item[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: #1e293b;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.recent-date[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: #f1f5f9;
}

.recent-progress[b-wt8eeg2hto] {
    flex: 1;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.recent-status[b-wt8eeg2hto] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.recent-status.inprogress[b-wt8eeg2hto] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Count Screen */
.count-screen[b-wt8eeg2hto] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Progress Section */
.progress-section[b-wt8eeg2hto] {
    padding: 1rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.progress-bar[b-wt8eeg2hto] {
    height: 8px;
    background: #334155;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-wt8eeg2hto] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #818cf8);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}

/* Search Section */
.search-section[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #1e293b;
}

.search-input-group[b-wt8eeg2hto] {
    flex: 1;
    position: relative;
}

.search-icon[b-wt8eeg2hto] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.search-input[b-wt8eeg2hto] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 2.75rem;
    border: 1px solid #334155;
    border-radius: 12px;
    font-size: 1rem;
    background: #0f172a;
    color: #e2e8f0;
}

.search-input[b-wt8eeg2hto]::placeholder {
    color: #64748b;
}

.clear-btn[b-wt8eeg2hto] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.clear-btn:active[b-wt8eeg2hto] {
    background: #475569;
}

.scan-btn[b-wt8eeg2hto] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
}

/* Filter Pills */
.filter-pills[b-wt8eeg2hto] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1e293b;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pill[b-wt8eeg2hto] {
    padding: 0.625rem 1rem;
    min-height: 40px;
    border: 1px solid #334155;
    border-radius: 20px;
    background: #0f172a;
    font-size: 0.8125rem;
    color: #94a3b8;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pill:active[b-wt8eeg2hto] {
    transform: scale(0.97);
}

.pill.active[b-wt8eeg2hto] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Item List */
.item-list[b-wt8eeg2hto] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.count-item[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #1e293b;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: transform 0.1s;
}

.count-item:active[b-wt8eeg2hto] {
    transform: scale(0.98);
}

.count-item.counted[b-wt8eeg2hto] {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}

.count-item.has-variance[b-wt8eeg2hto] {
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #fbbf24;
}

.item-main[b-wt8eeg2hto] {
    flex: 1;
    min-width: 0;
}

.item-name[b-wt8eeg2hto] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sku[b-wt8eeg2hto] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}

.item-counts[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.system-stock[b-wt8eeg2hto], .counted-stock[b-wt8eeg2hto] {
    text-align: center;
}

.system-stock .label[b-wt8eeg2hto], .counted-stock .label[b-wt8eeg2hto] {
    display: block;
    font-size: 0.625rem;
    color: #64748b;
    text-transform: uppercase;
}

.system-stock .value[b-wt8eeg2hto], .counted-stock .value[b-wt8eeg2hto] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #e2e8f0;
}

.counted-stock.filled .value[b-wt8eeg2hto] {
    color: #4ade80;
}

.variance[b-wt8eeg2hto] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.variance.negative[b-wt8eeg2hto] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

.variance.positive[b-wt8eeg2hto] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.chevron[b-wt8eeg2hto] {
    color: #64748b;
}

/* Action Bar */
.action-bar[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #1e293b;
    border-top: 1px solid #334155;
}

.action-bar .btn[b-wt8eeg2hto] {
    flex: 1;
}

/* Modal */
.modal-overlay[b-wt8eeg2hto] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    z-index: 100;
}

.count-modal[b-wt8eeg2hto] {
    background: #1e293b;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.close-btn[b-wt8eeg2hto] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 10px;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:active[b-wt8eeg2hto] {
    transform: scale(0.95);
}

.modal-body[b-wt8eeg2hto] {
    padding: 1.5rem 1rem;
}

.system-info[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #0f172a;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.info-label[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.info-value[b-wt8eeg2hto] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f1f5f9;
}

.count-input-section[b-wt8eeg2hto] {
    margin-bottom: 1rem;
}

.count-input-section label[b-wt8eeg2hto] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.count-input-group[b-wt8eeg2hto] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.adjust-btn[b-wt8eeg2hto] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #334155;
    border: none;
    border-radius: 12px;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 1.5rem;
}

.count-input[b-wt8eeg2hto] {
    flex: 1;
    padding: 1rem;
    border: 2px solid #3b82f6;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    background: #0f172a;
    color: #f1f5f9;
}

.variance-preview[b-wt8eeg2hto] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.variance-preview.negative[b-wt8eeg2hto] {
    background: rgba(220, 38, 38, 0.15);
}

.variance-preview.positive[b-wt8eeg2hto] {
    background: rgba(34, 197, 94, 0.15);
}

.variance-label[b-wt8eeg2hto] {
    font-size: 0.875rem;
    color: #94a3b8;
}

.variance-value[b-wt8eeg2hto] {
    font-size: 1rem;
    font-weight: 600;
}

.variance-preview.negative .variance-value[b-wt8eeg2hto] {
    color: #f87171;
}

.variance-preview.positive .variance-value[b-wt8eeg2hto] {
    color: #4ade80;
}

.quick-set[b-wt8eeg2hto] {
    display: flex;
    gap: 0.5rem;
}

.quick-btn[b-wt8eeg2hto] {
    flex: 1;
    padding: 0.625rem;
    background: #334155;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #e2e8f0;
    cursor: pointer;
}

.quick-btn:hover[b-wt8eeg2hto] {
    background: #475569;
}

.modal-footer[b-wt8eeg2hto] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid #334155;
}

.modal-footer .btn[b-wt8eeg2hto] {
    flex: 1;
}

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .action-bar[b-wt8eeg2hto], .modal-footer[b-wt8eeg2hto] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}
/* /Pages/Admin/OnlineOrders.razor.rz.scp.css */
.online-orders-page[b-lbwtgzdcwm] { padding: 24px; max-width: 1400px; }

.page-header[b-lbwtgzdcwm] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-header h1[b-lbwtgzdcwm] { font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0; }
.page-header .sub[b-lbwtgzdcwm] { color: #888; font-size: 0.85rem; }
.header-right[b-lbwtgzdcwm] { display: flex; gap: 8px; }

.btn-refresh[b-lbwtgzdcwm] {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: 1px solid #333;
    background: #1a1a1a; color: #ccc; font-size: 0.82rem; cursor: pointer;
    transition: all 0.15s;
}
.btn-refresh:hover[b-lbwtgzdcwm] { background: #252525; border-color: #555; color: #fff; }

/* Summary Cards */
.summary-cards[b-lbwtgzdcwm] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card[b-lbwtgzdcwm] {
    background: #141414; border: 1px solid #222; border-radius: 12px;
    padding: 16px; text-align: center;
}
.card-number[b-lbwtgzdcwm] { font-size: 1.6rem; font-weight: 700; color: #fff; }
.card-label[b-lbwtgzdcwm] { font-size: 0.75rem; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.active-card[b-lbwtgzdcwm] { border-color: #3b82f6; }
.active-card .card-number[b-lbwtgzdcwm] { color: #60a5fa; }
.received-card[b-lbwtgzdcwm] { border-color: #f59e0b; }
.received-card .card-number[b-lbwtgzdcwm] { color: #fbbf24; }
.preparing-card[b-lbwtgzdcwm] { border-color: #8b5cf6; }
.preparing-card .card-number[b-lbwtgzdcwm] { color: #a78bfa; }
.ready-card[b-lbwtgzdcwm] { border-color: #10b981; }
.ready-card .card-number[b-lbwtgzdcwm] { color: #34d399; }
.completed-card[b-lbwtgzdcwm] { border-color: #4b5563; }
.completed-card .card-number[b-lbwtgzdcwm] { color: #6b7280; }
.revenue-card[b-lbwtgzdcwm] { border-color: #10b981; }
.revenue-card .card-number[b-lbwtgzdcwm] { color: #34d399; }

/* Filter Bar */
.filter-bar[b-lbwtgzdcwm] { margin-bottom: 20px; }
.filter-tabs[b-lbwtgzdcwm] { display: flex; gap: 4px; background: #111; border-radius: 10px; padding: 4px; width: fit-content; }
.filter-tab[b-lbwtgzdcwm] {
    padding: 8px 20px; border-radius: 8px; border: none;
    background: transparent; color: #888; font-size: 0.82rem;
    cursor: pointer; transition: all 0.15s;
}
.filter-tab:hover[b-lbwtgzdcwm] { color: #ccc; }
.filter-tab.active[b-lbwtgzdcwm] { background: #252525; color: #fff; font-weight: 600; }

/* Orders Grid */
.orders-grid[b-lbwtgzdcwm] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

.order-card[b-lbwtgzdcwm] {
    background: #141414; border: 1px solid #222; border-radius: 14px;
    padding: 18px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.2s;
}
.order-card.status-received[b-lbwtgzdcwm] { border-left: 3px solid #f59e0b; }
.order-card.status-preparing[b-lbwtgzdcwm] { border-left: 3px solid #8b5cf6; }
.order-card.status-ready[b-lbwtgzdcwm] { border-left: 3px solid #10b981; }
.order-card.status-delivery[b-lbwtgzdcwm] { border-left: 3px solid #3b82f6; }
.order-card.status-completed[b-lbwtgzdcwm] { border-left: 3px solid #4b5563; opacity: 0.7; }
.order-card.status-cancelled[b-lbwtgzdcwm] { border-left: 3px solid #ef4444; opacity: 0.5; }

/* Order Header */
.order-header[b-lbwtgzdcwm] { display: flex; align-items: center; gap: 8px; }
.order-number[b-lbwtgzdcwm] { font-size: 1.2rem; font-weight: 700; color: #fff; }
.order-type-badge[b-lbwtgzdcwm], .order-status-badge[b-lbwtgzdcwm] {
    font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.order-type-badge.takeaway[b-lbwtgzdcwm] { background: #1e3a5f; color: #60a5fa; }
.order-type-badge.delivery[b-lbwtgzdcwm] { background: #3b1f0b; color: #fb923c; }
.order-type-badge.dinein[b-lbwtgzdcwm] { background: #1a3320; color: #4ade80; }
.order-type-badge.counter[b-lbwtgzdcwm] { background: #1f2937; color: #9ca3af; }
.order-status-badge.received[b-lbwtgzdcwm] { background: #3b2f00; color: #fbbf24; }
.order-status-badge.preparing[b-lbwtgzdcwm] { background: #2e1065; color: #a78bfa; }
.order-status-badge.ready[b-lbwtgzdcwm], .order-status-badge.readyforpickup[b-lbwtgzdcwm] { background: #052e16; color: #34d399; }
.order-status-badge.outfordelivery[b-lbwtgzdcwm] { background: #1e3a5f; color: #60a5fa; }
.order-status-badge.completed[b-lbwtgzdcwm] { background: #1f2937; color: #9ca3af; }
.order-status-badge.cancelled[b-lbwtgzdcwm] { background: #450a0a; color: #fca5a5; }

/* Customer Info */
.order-customer[b-lbwtgzdcwm] { display: flex; flex-direction: column; gap: 4px; }
.customer-name[b-lbwtgzdcwm] { font-weight: 600; color: #e5e5e5; font-size: 0.9rem; }
.customer-phone[b-lbwtgzdcwm], .customer-address[b-lbwtgzdcwm] { color: #888; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
.customer-address[b-lbwtgzdcwm] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.order-scheduled[b-lbwtgzdcwm] {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.8rem; color: #f59e0b;
    background: #3b2f00; padding: 4px 10px; border-radius: 6px; width: fit-content;
}

/* Items */
.order-items[b-lbwtgzdcwm] { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #222; padding-top: 10px; }
.order-item-row[b-lbwtgzdcwm] { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #ccc; }
.item-qty[b-lbwtgzdcwm] { font-weight: 600; color: #888; min-width: 24px; }
.item-name[b-lbwtgzdcwm] { flex: 1; }
.item-notes[b-lbwtgzdcwm] { font-size: 0.75rem; }
.order-item-more[b-lbwtgzdcwm] { font-size: 0.78rem; color: #666; font-style: italic; }

/* Totals */
.order-totals[b-lbwtgzdcwm] { border-top: 1px solid #222; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.total-row[b-lbwtgzdcwm] { display: flex; justify-content: space-between; font-size: 0.8rem; color: #888; }
.total-row.total[b-lbwtgzdcwm] { color: #fff; font-weight: 700; font-size: 0.95rem; }
.total-row.discount[b-lbwtgzdcwm] { color: #10b981; }

/* Neutralize the global site.css dark-mode .total white-pill leak
   (:root[data-theme="dark"] .total) — this card is already dark, so the total
   row wants white text on the card, not a white slab with near-black text. */
:root[data-theme="dark"] .total-row.total[b-lbwtgzdcwm] {
    background: transparent;
    color: #fff;
    border: none;
}

.order-time[b-lbwtgzdcwm] { font-size: 0.75rem; color: #555; }

/* Actions */
.order-actions[b-lbwtgzdcwm] { display: flex; gap: 8px; border-top: 1px solid #222; padding-top: 12px; }
.btn-action[b-lbwtgzdcwm] {
    flex: 1; padding: 8px 12px; border-radius: 8px; border: none;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
    /* 44px touch target — this is an operations queue used on tablet/mobile
       (buttons were ~37px from padding alone). */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-prepare[b-lbwtgzdcwm] { background: #7c3aed; color: #fff; }
.btn-prepare:hover[b-lbwtgzdcwm] { background: #6d28d9; }
.btn-ready[b-lbwtgzdcwm] { background: #10b981; color: #fff; }
.btn-ready:hover[b-lbwtgzdcwm] { background: #059669; }
.btn-deliver[b-lbwtgzdcwm] { background: #3b82f6; color: #fff; }
.btn-deliver:hover[b-lbwtgzdcwm] { background: #2563eb; }
.btn-complete[b-lbwtgzdcwm] { background: #10b981; color: #fff; }
.btn-complete:hover[b-lbwtgzdcwm] { background: #059669; }
.btn-cancel[b-lbwtgzdcwm] { background: transparent; border: 1px solid #444; color: #888; }
.btn-cancel:hover[b-lbwtgzdcwm] { border-color: #ef4444; color: #ef4444; }
.btn-action:focus-visible[b-lbwtgzdcwm] { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-action:disabled[b-lbwtgzdcwm] { opacity: 0.5; cursor: not-allowed; }
.btn-action:disabled:hover[b-lbwtgzdcwm] { filter: none; }

/* Error banner */
.error-banner[b-lbwtgzdcwm] {
    background: #450a0a; border: 1px solid #dc2626; color: #fca5a5;
    padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.85rem;
}

/* Empty / Loading states */
.loading-state[b-lbwtgzdcwm], .empty-state[b-lbwtgzdcwm] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px; color: #666; font-size: 0.9rem; gap: 16px;
}

/* Responsive */
@media (max-width: 1200px) { .summary-cards[b-lbwtgzdcwm] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .online-orders-page[b-lbwtgzdcwm] { padding: 16px; }
    .summary-cards[b-lbwtgzdcwm] { grid-template-columns: repeat(2, 1fr); }
    .orders-grid[b-lbwtgzdcwm] { grid-template-columns: 1fr; }
    .page-header[b-lbwtgzdcwm] { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Phone (<=600px): keep the KPI grid and filter tabs inside the viewport.
   Placed at end-of-stylesheet so these win the source-order tie over the base
   rules above (this codebase has later-base-rule-beats-media traps). */
@media (max-width: 600px) {
    /* Never let the page itself create horizontal scroll. */
    .online-orders-page[b-lbwtgzdcwm] { max-width: 100%; overflow-x: hidden; }

    /* KPI cards: 2 even columns that actually fit. Grid items default to
       min-width:auto, so a wide label/number can push a track past 1fr and
       blow the grid off the right edge — pin min-width:0 + reset padding so
       the cards shrink to half the screen. */
    .summary-cards[b-lbwtgzdcwm] { grid-template-columns: 1fr 1fr; gap: 8px; }
    .summary-card[b-lbwtgzdcwm] { min-width: 0; padding: 12px 10px; }
    .card-number[b-lbwtgzdcwm] { font-size: 1.3rem; }
    .card-label[b-lbwtgzdcwm] { font-size: 0.65rem; letter-spacing: 0.3px; }

    /* Filter tabs: scroll horizontally instead of clipping "Cancelados". */
    .filter-bar[b-lbwtgzdcwm] { overflow: hidden; }
    .filter-tabs[b-lbwtgzdcwm] {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .filter-tab[b-lbwtgzdcwm] { flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; }
}
/* /Pages/Admin/OnlineSettings.razor.rz.scp.css */
.online-settings-page[b-1np7lkd0or] {
    padding: 0 16px 40px;
    max-width: 800px;
    margin: 0 auto;
}

.page-header[b-1np7lkd0or] {
    padding: 20px 0 12px;
}

.page-header h1[b-1np7lkd0or] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #f1f5f9;
}

.page-header .sub[b-1np7lkd0or] {
    font-size: 0.85rem;
    color: #94a3b8;
    display: block;
    margin-top: 4px;
}

/* Message banner */
.message-banner[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.message-banner.success[b-1np7lkd0or] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.message-banner.error[b-1np7lkd0or] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.message-banner .dismiss[b-1np7lkd0or] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.message-banner .dismiss:hover[b-1np7lkd0or] {
    opacity: 1;
}

/* Loading & empty states */
.loading-spinner[b-1np7lkd0or] {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state[b-1np7lkd0or] {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

/* Settings cards */
.settings-card[b-1np7lkd0or] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header[b-1np7lkd0or] {
    padding: 14px 20px;
    border-bottom: 1px solid #334155;
}

.card-header h2[b-1np7lkd0or] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.card-body[b-1np7lkd0or] {
    padding: 16px 20px;
}

/* Setup guide */
.setup-guide[b-1np7lkd0or] {
    border-color: #6366f1;
    background: linear-gradient(135deg, #1e293b 0%, #1e1b4b 100%);
}

.setup-guide .card-header[b-1np7lkd0or] {
    border-bottom-color: rgba(99, 102, 241, 0.3);
}

.guide-intro[b-1np7lkd0or] {
    color: #cbd5e1;
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.guide-steps[b-1np7lkd0or] {
    list-style: none;
    counter-reset: guide;
    padding: 0;
    margin: 0;
}

.guide-steps li[b-1np7lkd0or] {
    counter-increment: guide;
    position: relative;
    padding: 12px 12px 12px 48px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: background 0.2s;
}

.guide-steps li[b-1np7lkd0or]::before {
    content: counter(guide);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #334155;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-steps li.done[b-1np7lkd0or] {
    background: rgba(34, 197, 94, 0.08);
}

.guide-steps li.done[b-1np7lkd0or]::before {
    background: #22c55e;
    color: #fff;
    content: "\2713";
}

.guide-steps li.skip[b-1np7lkd0or] {
    opacity: 0.45;
}

.guide-steps li.skip[b-1np7lkd0or]::before {
    content: "\2014";
}

.guide-steps li strong[b-1np7lkd0or] {
    color: #f1f5f9;
}

.guide-steps li a[b-1np7lkd0or] {
    color: #818cf8;
    text-decoration: underline;
}

.guide-steps li code[b-1np7lkd0or] {
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #a5b4fc;
}

/* Toggle rows */
.toggle-row[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 16px;
}

.toggle-row + .toggle-row[b-1np7lkd0or] {
    border-top: 1px solid #334155;
}

.toggle-row strong[b-1np7lkd0or] {
    color: #e2e8f0;
    font-size: 0.9rem;
}

.toggle-row .hint[b-1np7lkd0or] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.main-toggle[b-1np7lkd0or] {
    background: rgba(99, 102, 241, 0.06);
    padding: 14px;
    margin: -16px -20px;
    border-radius: 0;
}

/* Toggle switch */
.switch[b-1np7lkd0or] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-1np7lkd0or] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-1np7lkd0or] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #475569;
    border-radius: 24px;
    transition: background-color 0.2s;
}

.slider[b-1np7lkd0or]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

input:checked + .slider[b-1np7lkd0or] {
    background-color: #6366f1;
}

input:checked + .slider[b-1np7lkd0or]::before {
    transform: translateX(20px);
}

/* Form rows */
.form-row[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.form-row + .form-row[b-1np7lkd0or] {
    border-top: 1px solid #334155;
}

.form-row label[b-1np7lkd0or] {
    color: #e2e8f0;
    font-size: 0.875rem;
    flex: 1;
}

.form-row .hint[b-1np7lkd0or] {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

.form-input[b-1np7lkd0or] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.form-input:focus[b-1np7lkd0or] {
    outline: none;
    border-color: #6366f1;
}

.form-input.short[b-1np7lkd0or] {
    width: 80px;
    text-align: center;
}

.form-input.wide[b-1np7lkd0or] {
    width: 100%;
    flex: 1;
}

/* Delivery zones */
.zone-list[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zone-card[b-1np7lkd0or] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zone-info[b-1np7lkd0or] {
    flex: 1;
}

.zone-name[b-1np7lkd0or] {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.9rem;
}

.zone-details[b-1np7lkd0or] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

.zone-actions[b-1np7lkd0or] {
    display: flex;
    gap: 8px;
}

/* Schedule grid */
.schedule-grid[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-day[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.schedule-day + .schedule-day[b-1np7lkd0or] {
    border-top: 1px solid #1e293b;
}

.day-name[b-1np7lkd0or] {
    width: 90px;
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 500;
}

.time-inputs[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-inputs input[type="time"][b-1np7lkd0or] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 6px 8px;
    color: #e2e8f0;
    font-size: 0.8rem;
}

/* Buttons */
.btn-primary[b-1np7lkd0or] {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover[b-1np7lkd0or] {
    background: #4f46e5;
}

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

.btn-secondary[b-1np7lkd0or] {
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover[b-1np7lkd0or] {
    background: #475569;
}

.btn-danger[b-1np7lkd0or] {
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover[b-1np7lkd0or] {
    background: rgba(220, 38, 38, 0.15);
}

.btn-link[b-1np7lkd0or] {
    background: none;
    border: none;
    color: #818cf8;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

/* Save bar */
.save-bar[b-1np7lkd0or] {
    position: sticky;
    bottom: 0;
    background: #1e293b;
    border-top: 1px solid #334155;
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 16px -16px -40px;
}

/* Responsive */
@media (max-width: 600px) {
    .online-settings-page[b-1np7lkd0or] {
        padding: 0 10px 32px;
    }

    .form-row[b-1np7lkd0or] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-input.short[b-1np7lkd0or] {
        width: 100%;
    }

    .zone-card[b-1np7lkd0or] {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-day[b-1np7lkd0or] {
        flex-wrap: wrap;
    }

    .setup-stepper[b-1np7lkd0or] {
        flex-direction: column;
        gap: 12px;
    }

    .step-connector[b-1np7lkd0or] {
        display: none;
    }

    .nav-bar-bottom[b-1np7lkd0or] {
        flex-direction: column;
        gap: 8px;
    }
}

/* Setup stepper */
.setup-stepper[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #1a1f3a 100%);
    border: 1px solid #334155;
    border-radius: 12px;
}

.step[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
}

.step:hover[b-1np7lkd0or] { opacity: 0.85; }

.step-num[b-1np7lkd0or] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.step-num.active[b-1np7lkd0or] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.step-num.done[b-1np7lkd0or] {
    background: #22c55e;
    color: #fff;
}

.step-num.pending[b-1np7lkd0or] {
    background: #334155;
    color: #94a3b8;
}

.step-info[b-1np7lkd0or] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.step-label[b-1np7lkd0or] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
}

.step-hint[b-1np7lkd0or] {
    font-size: 0.7rem;
    color: #64748b;
}

.step.current .step-label[b-1np7lkd0or] { color: #a5b4fc; }

.step-connector[b-1np7lkd0or] {
    flex: 1;
    height: 2px;
    margin: 0 16px;
    background: #334155;
}

.step-connector.done[b-1np7lkd0or] { background: #22c55e; }

/* Bottom navigation */
.nav-bar-bottom[b-1np7lkd0or] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #1a1f3a 100%);
    border: 1px solid #334155;
    border-radius: 12px;
}

.nav-link-back[b-1np7lkd0or],
.nav-link-next[b-1np7lkd0or] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #a5b4fc;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-link-back:hover[b-1np7lkd0or],
.nav-link-next:hover[b-1np7lkd0or] {
    color: #c7d2fe;
}
/* /Pages/Admin/PriceSchedule.razor.rz.scp.css */
.price-schedule-page[b-8f92rgrce2] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-8f92rgrce2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.page-header h1[b-8f92rgrce2] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.page-header .subtitle[b-8f92rgrce2] {
    margin: 0.25rem 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.search-input[b-8f92rgrce2] {
    padding: 0.5rem 1rem;
    border: 1px solid #334155;
    border-radius: 8px;
    width: 250px;
    font-size: 0.9rem;
    background: #0f172a;
    color: #e2e8f0;
}

.search-input[b-8f92rgrce2]::placeholder {
    color: #64748b;
}

.search-input:focus[b-8f92rgrce2] {
    outline: none;
    border-color: #FF9800;
}

/* Filter Bar */
.filter-bar[b-8f92rgrce2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn[b-8f92rgrce2] {
    min-height: 44px;            /* touch target for POS hardware (was ~37px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover[b-8f92rgrce2] {
    background: #334155;
}

.filter-btn.active[b-8f92rgrce2] {
    background: #FF9800;
    border-color: #FF9800;
    color: white;
}

/* Loading/Error States */
.loading-state[b-8f92rgrce2],
.error-state[b-8f92rgrce2] {
    text-align: center;
    padding: 3rem;
    background: #1e293b;
    border-radius: 12px;
    color: #e2e8f0;
}

.spinner[b-8f92rgrce2] {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #ddd;
    border-top-color: #FF9800;
    border-radius: 50%;
    animation: spin-b-8f92rgrce2 1s linear infinite;
}

@keyframes spin-b-8f92rgrce2 {
    to { transform: rotate(360deg); }
}

/* Items Table */
.items-table[b-8f92rgrce2] {
    background: #1e293b;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.table-header[b-8f92rgrce2] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #0f172a;
    font-weight: 600;
    font-size: 0.85rem;
    color: #94a3b8;
}

.table-row[b-8f92rgrce2] {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1.5fr 1fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #334155;
    align-items: center;
}

.table-row:hover[b-8f92rgrce2] {
    background: #334155;
}

.table-row.has-active[b-8f92rgrce2] {
    background: rgba(255, 152, 0, 0.15);
}

.col-name strong[b-8f92rgrce2] {
    display: block;
    color: #e2e8f0;
}

.col-name .category[b-8f92rgrce2] {
    font-size: 0.8rem;
    color: #64748b;
}

.col-price[b-8f92rgrce2] {
    font-weight: 600;
    color: #e2e8f0;
}

/* Rules List */
.rules-list[b-8f92rgrce2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rule-badge[b-8f92rgrce2] {
    padding: 0.2rem 0.5rem;
    background: #e3f2fd;
    color: #1976D2;
    border-radius: 4px;
    font-size: 0.75rem;
}

.rule-badge.inactive[b-8f92rgrce2] {
    background: #334155;
    color: #64748b;
}

.more-rules[b-8f92rgrce2] {
    font-size: 0.75rem;
    color: #64748b;
}

.no-rules[b-8f92rgrce2] {
    color: #64748b;
    font-size: 0.85rem;
}

/* Active Price */
.active-price[b-8f92rgrce2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.active-price .effective[b-8f92rgrce2] {
    font-weight: 700;
    color: #FF9800;
    font-size: 1.1rem;
}

.active-price .rule-name[b-8f92rgrce2] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.base-price[b-8f92rgrce2] {
    color: #94a3b8;
}

.col-actions[b-8f92rgrce2] {
    display: flex;
    gap: 0.5rem;
}

.empty-message[b-8f92rgrce2] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}

/* Buttons */
.btn[b-8f92rgrce2] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: #334155;
    color: #e2e8f0;
    transition: background 0.2s ease;
}

.btn:hover[b-8f92rgrce2] {
    background: #475569;
}

.btn.primary[b-8f92rgrce2] {
    background: #FF9800;
    color: white;
}

.btn.primary:hover[b-8f92rgrce2] {
    background: #F57C00;
}

.btn.danger[b-8f92rgrce2] {
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
}

.btn.danger:hover[b-8f92rgrce2] {
    background: rgba(211, 47, 47, 0.3);
}

.btn.small[b-8f92rgrce2] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.btn.icon[b-8f92rgrce2] {
    padding: 0.25rem 0.5rem;
}

.btn:disabled[b-8f92rgrce2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn.add-rule[b-8f92rgrce2] {
    width: 100%;
    margin: 1rem 0;
    padding: 0.75rem;
    border: 2px dashed #475569;
    background: transparent;
    color: #94a3b8;
}

.btn.add-rule:hover[b-8f92rgrce2] {
    border-color: #FF9800;
    color: #FF9800;
}

/* Modal */
.modal-overlay[b-8f92rgrce2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-8f92rgrce2] {
    background: #1e293b;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    color: #e2e8f0;
}

.modal-content.large[b-8f92rgrce2] {
    max-width: 800px;
}

.modal-close[b-8f92rgrce2] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #94a3b8;
    /* 44px touch target for POS hardware (was intrinsic ~30px). */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-content h2[b-8f92rgrce2] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: #e2e8f0;
}

.modal-subtitle[b-8f92rgrce2] {
    margin: 0 0 1.5rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

.modal-footer[b-8f92rgrce2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

/* Rules Editor */
.rules-editor[b-8f92rgrce2] {
    margin: 1rem 0;
}

.empty-rules[b-8f92rgrce2] {
    text-align: center;
    padding: 2rem;
    background: #0f172a;
    border-radius: 8px;
    color: #94a3b8;
}

.rule-card[b-8f92rgrce2] {
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #0f172a;
}

.rule-card.inactive[b-8f92rgrce2] {
    opacity: 0.7;
    background: #0f172a;
}

.rule-header[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #334155;
}

.rule-name-input[b-8f92rgrce2] {
    flex: 1;
}

.rule-name-input input[b-8f92rgrce2] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    font-weight: 600;
    background: #1e293b;
    color: #e2e8f0;
}

.rule-name-input input:focus[b-8f92rgrce2] {
    outline: none;
    border-color: #FF9800;
}

/* Config Groups */
.rule-config[b-8f92rgrce2] {
    display: grid;
    gap: 1rem;
}

.config-group[b-8f92rgrce2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.config-group > label[b-8f92rgrce2] {
    min-width: 100px;
    font-weight: 500;
    font-size: 0.9rem;
    padding-top: 0.5rem;
    color: #e2e8f0;
}

/* Days Checkboxes */
.days-checkboxes[b-8f92rgrce2] {
    display: flex;
    gap: 0.25rem;
}

.day-check[b-8f92rgrce2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.day-check input[b-8f92rgrce2] {
    margin-bottom: 0.25rem;
}

.day-check span[b-8f92rgrce2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* Time Inputs */
.time-inputs[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-inputs input[type="time"][b-8f92rgrce2] {
    padding: 0.5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
}

/* Discount Options */
.discount-options[b-8f92rgrce2] {
    display: flex;
    gap: 1rem;
}

.radio-option[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* Discount Value */
.discount-value[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.discount-value input[b-8f92rgrce2] {
    width: 100px;
    padding: 0.5rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
}

.discount-value .unit[b-8f92rgrce2] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Rule Preview */
.rule-preview[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: #0f172a;
    border-radius: 6px;
}

.preview-label[b-8f92rgrce2] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.preview-original[b-8f92rgrce2] {
    text-decoration: line-through;
    color: #64748b;
}

.preview-arrow[b-8f92rgrce2] {
    color: #64748b;
}

.preview-new[b-8f92rgrce2] {
    font-weight: 700;
    color: #FF9800;
    font-size: 1.1rem;
}

.preview-savings[b-8f92rgrce2] {
    color: #4CAF50;
    font-size: 0.85rem;
}

.preview-increase[b-8f92rgrce2] {
    color: #f44336;
    font-size: 0.85rem;
}

/* Quick Templates */
.quick-templates[b-8f92rgrce2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.template-label[b-8f92rgrce2] {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Checkbox */
.checkbox[b-8f92rgrce2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #e2e8f0;
}

.checkbox.small[b-8f92rgrce2] {
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .table-header[b-8f92rgrce2],
    .table-row[b-8f92rgrce2] {
        grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    }

    .col-actions[b-8f92rgrce2] {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-header[b-8f92rgrce2] {
        flex-direction: column;
        gap: 1rem;
    }

    .search-input[b-8f92rgrce2] {
        width: 100%;
    }

    .filter-bar[b-8f92rgrce2] {
        flex-wrap: wrap;
    }

    .table-header[b-8f92rgrce2] {
        display: none;
    }

    .table-row[b-8f92rgrce2] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .config-group[b-8f92rgrce2] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .config-group > label[b-8f92rgrce2] {
        min-width: auto;
        padding-top: 0;
    }

    .discount-options[b-8f92rgrce2] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Note: Admin pages use a fixed dark theme from AdminLayout, so base styles are already dark-themed */
/* /Pages/Admin/Promotions.razor.rz.scp.css */
/* Dark theme admin page — Promotions */
.btn[b-p9b9qycp4z] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 44px; border: 1px solid #334155; border-radius: 8px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s;
    background: #1e293b; color: #e2e8f0; white-space: nowrap;
}
.btn:hover[b-p9b9qycp4z] { background: #334155; }
.btn:active[b-p9b9qycp4z] { transform: scale(0.97); }
.btn.primary[b-p9b9qycp4z] { background: #2563eb; color: #fff; border-color: #1e4fcb; }
.btn.primary:hover[b-p9b9qycp4z] { background: #1d4ed8; }
.btn.primary:disabled[b-p9b9qycp4z] { background: #475569; color: #94a3b8; cursor: not-allowed; }
.btn.outline[b-p9b9qycp4z] { background: transparent; border-color: #475569; color: #94a3b8; }
.btn.outline:hover[b-p9b9qycp4z] { border-color: #3b82f6; color: #e2e8f0; }
.btn.danger[b-p9b9qycp4z] { background: #dc2626; color: #fff; border-color: #b91c1c; }
.btn.danger:hover[b-p9b9qycp4z] { background: #b91c1c; }

.form-input[b-p9b9qycp4z], .form-select[b-p9b9qycp4z] {
    width: 100%; padding: 10px 12px; min-height: 44px;
    background: #0f172a; border: 1px solid #334155; border-radius: 8px;
    color: #e2e8f0; font-size: 0.85rem; box-sizing: border-box;
}
.form-input:focus[b-p9b9qycp4z], .form-select:focus[b-p9b9qycp4z] { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }

.promotions-page[b-p9b9qycp4z] { padding: 24px; max-width: 1200px; margin: 0 auto; color: #e2e8f0; }

.page-header[b-p9b9qycp4z] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.header-left[b-p9b9qycp4z] { display: flex; align-items: baseline; gap: 12px; }
.header-left h1[b-p9b9qycp4z] { font-size: 1.5rem; margin: 0; color: #f1f5f9; }
.item-count[b-p9b9qycp4z] { font-size: 0.8rem; color: #64748b; }

.message-banner[b-p9b9qycp4z] { padding: 12px 16px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.message-banner.success[b-p9b9qycp4z] { background: #064e3b; color: #6ee7b7; border: 1px solid #065f46; }
.message-banner.error[b-p9b9qycp4z] { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
.dismiss[b-p9b9qycp4z] { background: none; border: none; color: inherit; font-size: 1.2rem; cursor: pointer; }

.loading-state[b-p9b9qycp4z] { text-align: center; padding: 60px 0; color: #64748b; }
.spinner[b-p9b9qycp4z] { width: 32px; height: 32px; border: 3px solid #334155; border-top-color: #3b82f6; border-radius: 50%; animation: spin-b-p9b9qycp4z 0.8s linear infinite; margin: 0 auto 12px; }
.spinner-sm[b-p9b9qycp4z] { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-p9b9qycp4z 0.6s linear infinite; display: inline-block; }
@keyframes spin-b-p9b9qycp4z { to { transform: rotate(360deg); } }

.filter-bar[b-p9b9qycp4z] { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input[b-p9b9qycp4z] { max-width: 300px; }
.filter-bar .form-select[b-p9b9qycp4z] { max-width: 180px; }

/* Promo cards grid */
.promo-grid[b-p9b9qycp4z] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.promo-card[b-p9b9qycp4z] {
    background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 16px;
    cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 8px;
}
.promo-card:hover[b-p9b9qycp4z] { border-color: #3b82f6; transform: translateY(-1px); }
.promo-card.inactive[b-p9b9qycp4z] { opacity: 0.55; }

.card-top[b-p9b9qycp4z] { display: flex; align-items: center; justify-content: space-between; }
.type-badge[b-p9b9qycp4z] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 4px; background: #334155; color: #94a3b8;
}
.type-badge.percentoff[b-p9b9qycp4z] { background: #1e3a5f; color: #60a5fa; }
.type-badge.fixedoff[b-p9b9qycp4z] { background: #3b1f4a; color: #c084fc; }
.type-badge.fixedprice[b-p9b9qycp4z] { background: #064e3b; color: #34d399; }
.type-badge.buyxpayy[b-p9b9qycp4z] { background: #78350f; color: #fbbf24; }
.type-badge.nthfree[b-p9b9qycp4z] { background: #7f1d1d; color: #fca5a5; }

.card-name[b-p9b9qycp4z] { font-size: 1rem; font-weight: 600; color: #f1f5f9; }
.card-value[b-p9b9qycp4z] { font-size: 1.25rem; font-weight: 700; color: #3b82f6; }
.card-badge[b-p9b9qycp4z] { font-size: 0.75rem; color: #34d399; background: #064e3b; border-radius: 4px; padding: 2px 8px; display: inline-block; width: fit-content; }
.card-schedule[b-p9b9qycp4z] { font-size: 0.75rem; color: #64748b; display: flex; gap: 8px; flex-wrap: wrap; }
.card-meta[b-p9b9qycp4z] { font-size: 0.7rem; color: #475569; display: flex; gap: 12px; flex-wrap: wrap; }
.stackable-badge[b-p9b9qycp4z] { color: #818cf8; }

/* Toggle switch */
.toggle-switch[b-p9b9qycp4z] { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input[b-p9b9qycp4z] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-p9b9qycp4z] {
    position: absolute; inset: 0; background: #334155; border-radius: 22px;
    transition: 0.2s; cursor: pointer;
}
.toggle-slider[b-p9b9qycp4z]::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px;
    background: #94a3b8; border-radius: 50%; transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider[b-p9b9qycp4z] { background: #2563eb; }
.toggle-switch input:checked + .toggle-slider[b-p9b9qycp4z]::before { transform: translateX(18px); background: #fff; }

/* Modal */
.modal-overlay[b-p9b9qycp4z] {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100;
    display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
    overflow-y: auto;
}
.modal-panel[b-p9b9qycp4z] {
    background: #1e293b; border: 1px solid #334155; border-radius: 12px;
    width: 100%; max-width: 640px; color: #e2e8f0;
}
.modal-header[b-p9b9qycp4z] { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #334155; }
.modal-header h2[b-p9b9qycp4z] { margin: 0; font-size: 1.1rem; }
.modal-close[b-p9b9qycp4z] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: none; border: none; color: #64748b; font-size: 1.5rem; cursor: pointer; }
.modal-close:hover[b-p9b9qycp4z] { color: #e2e8f0; }
.modal-body[b-p9b9qycp4z] { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; }
.modal-footer[b-p9b9qycp4z] { padding: 16px 20px; border-top: 1px solid #334155; display: flex; justify-content: flex-end; gap: 8px; }

.form-group[b-p9b9qycp4z] { display: flex; flex-direction: column; gap: 4px; }
.form-group label[b-p9b9qycp4z] { font-size: 0.75rem; color: #94a3b8; font-weight: 600; }
.form-row[b-p9b9qycp4z] { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > .form-group[b-p9b9qycp4z] { flex: 1; min-width: 120px; }
.form-row > .checkbox-item[b-p9b9qycp4z] { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }

/* Category/Item checkboxes */
.checkbox-grid[b-p9b9qycp4z] { display: flex; flex-wrap: wrap; gap: 6px; }
.checkbox-grid.scrollable[b-p9b9qycp4z] { max-height: 160px; overflow-y: auto; }
.checkbox-item[b-p9b9qycp4z] { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; padding: 4px 8px; background: #0f172a; border-radius: 6px; cursor: pointer; }
.checkbox-item input[type="checkbox"][b-p9b9qycp4z] { accent-color: #3b82f6; }
.item-price[b-p9b9qycp4z] { color: #64748b; font-size: 0.7rem; }

/* Day chips */
.day-chips[b-p9b9qycp4z] { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip[b-p9b9qycp4z] {
    padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
    background: #0f172a; border: 1px solid #334155; color: #94a3b8; cursor: pointer;
    transition: 0.15s;
}
.day-chip.active[b-p9b9qycp4z] { background: #1e3a5f; border-color: #3b82f6; color: #60a5fa; }
.day-chip:hover[b-p9b9qycp4z] { border-color: #3b82f6; }

/* Status badges (expired / exhausted) */
.status-badge[b-p9b9qycp4z] { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.status-badge.expired[b-p9b9qycp4z] { background: #78350f; color: #fbbf24; }
.status-badge.exhausted[b-p9b9qycp4z] { background: #7f1d1d; color: #fca5a5; }

/* Usage progress bar */
.usage-bar[b-p9b9qycp4z] { height: 4px; background: #334155; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.usage-fill[b-p9b9qycp4z] { height: 100%; background: #3b82f6; border-radius: 2px; transition: width 0.3s; }

/* Item count hint */
.item-count-hint[b-p9b9qycp4z] { font-size: 0.7rem; color: #64748b; font-style: italic; margin-top: 4px; }

.empty-state[b-p9b9qycp4z] { text-align: center; padding: 60px 0; color: #64748b; }
.date-range[b-p9b9qycp4z] { font-style: italic; }

@media (max-width: 600px) {
    .promotions-page[b-p9b9qycp4z] { padding: 12px; }
    .promo-grid[b-p9b9qycp4z] { grid-template-columns: 1fr; }
    .filter-bar[b-p9b9qycp4z] { flex-direction: column; }
    .search-input[b-p9b9qycp4z], .filter-bar .form-select[b-p9b9qycp4z] { max-width: none; }
}
/* /Pages/Admin/Repartos.razor.rz.scp.css */
/* Repartos admin page chrome — theme-aware. The board itself is styled by
   DeliveryDispatchPanel.razor.css. */

.dd-page[b-84lwvq090m] { max-width: 1140px; }

.dd-page-title[b-84lwvq090m] { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #111827; }
html[data-theme="dark"] .dd-page-title[b-84lwvq090m] { color: #f1f5f9; }

.dd-page-sub[b-84lwvq090m] { color: #6b7280; font-size: 14px; margin: 0 0 16px; max-width: 72ch; line-height: 1.45; }
html[data-theme="dark"] .dd-page-sub[b-84lwvq090m] { color: #94a3b8; }

/* Settings card — premium toggle switches, each on its own row, theme-aware. */
.dd-settings[b-84lwvq090m] { display: flex; flex-direction: column; max-width: 620px; margin-bottom: 18px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
html[data-theme="dark"] .dd-settings[b-84lwvq090m] { border-color: #334155; background: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

.dd-setting[b-84lwvq090m] { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; cursor: pointer; user-select: none; }
.dd-setting + .dd-setting[b-84lwvq090m] { border-top: 1px solid #eef0f2; }
html[data-theme="dark"] .dd-setting + .dd-setting[b-84lwvq090m] { border-top-color: #334155; }
.dd-setting--sub[b-84lwvq090m] { padding-left: 30px; background: #fafbfc; }
html[data-theme="dark"] .dd-setting--sub[b-84lwvq090m] { background: #172033; }

.dd-setting-text[b-84lwvq090m] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-setting-title[b-84lwvq090m] { font-size: 14px; font-weight: 600; color: #111827; }
html[data-theme="dark"] .dd-setting-title[b-84lwvq090m] { color: #f1f5f9; }
.dd-setting-desc[b-84lwvq090m] { font-size: 12px; color: #6b7280; line-height: 1.4; max-width: 48ch; }
html[data-theme="dark"] .dd-setting-desc[b-84lwvq090m] { color: #94a3b8; }

/* checkbox rendered as an iOS-style switch */
.dd-switch[b-84lwvq090m] { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s ease; }
html[data-theme="dark"] .dd-switch[b-84lwvq090m] { background: #475569; }
.dd-switch[b-84lwvq090m]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* ON = green (driven by the .on class from Blazor state, with :checked as a fallback) */
.dd-switch.on[b-84lwvq090m], .dd-switch:checked[b-84lwvq090m] { background: #16a34a; }
.dd-switch.on[b-84lwvq090m]::after, .dd-switch:checked[b-84lwvq090m]::after { transform: translateX(18px); }
.dd-switch:focus-visible[b-84lwvq090m] { outline: 2px solid #1f6feb; outline-offset: 2px; }

.dd-disabled-msg[b-84lwvq090m] { color: #6b7280; font-size: 14px; }
html[data-theme="dark"] .dd-disabled-msg[b-84lwvq090m] { color: #94a3b8; }
/* /Pages/Admin/ReservationCalendar.razor.rz.scp.css */
.calendar-page[b-bdrtgsobsw] {
    padding: 12px 16px 16px;
    max-width: 1200px;
    margin: 0 auto;
    background: #f5f5f5;
}

/* Sticky toolbar. The scroll container is .admin-content (which sits
   BELOW the 64px .admin-topbar — the topbar is a sibling outside the
   scroll, not part of it). So the sticky offset is 0, NOT 64px: the
   previous 64px pushed the bar a full topbar-height below the
   scrollport top and it never visually pinned. Negative margins bleed
   the background over .calendar-page's 12/16px padding so calendar
   content scrolling under it is fully masked. z-index 25 < topbar 50
   < modals 100+. */
.rcal-toolbar[b-bdrtgsobsw] {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #f5f5f5;
    margin: -12px -16px 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Inside the sticky wrapper the spacing belongs to the wrapper's
   padding/gap, not the inner rows' margin-bottom — otherwise an
   extra ~16px gap appears below the date-nav before the calendar. */
.rcal-toolbar .calendar-header[b-bdrtgsobsw],
.rcal-toolbar .view-toggle[b-bdrtgsobsw],
.rcal-toolbar .month-nav[b-bdrtgsobsw] {
    margin-bottom: 0;
}
.rcal-toolbar > * + *[b-bdrtgsobsw] {
    margin-top: 8px;
}

/* Customer search input. Lives just above the source-filter chips
   inside the sticky toolbar so an operator answering a phone call
   ("¿Tienes la reserva de Juan García?") can scrub through the
   calendar without scrolling — empty value is a passthrough so the
   rest of the toolbar behaves unchanged. */
.rcal-customer-search[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rcal-customer-search-icon[b-bdrtgsobsw] {
    color: #94a3b8;
    display: inline-flex;
    flex: 0 0 auto;
}

.rcal-customer-search-input[b-bdrtgsobsw] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1e293b;
    font-family: inherit;
    min-width: 0;
}

.rcal-customer-search-input[b-bdrtgsobsw]::placeholder {
    color: #94a3b8;
}

.rcal-customer-search-input[b-bdrtgsobsw]::-webkit-search-cancel-button {
    /* Hide the browser's default × — we render our own button so the
       clear control looks identical across Safari / Chrome / Firefox. */
    display: none;
}

.rcal-customer-search-clear[b-bdrtgsobsw] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcal-customer-search-clear:hover[b-bdrtgsobsw] {
    background: #e2e8f0;
    color: #1e293b;
}

/* Source filter: horizontal chip row, scrolls horizontally on narrow
   widths so it never pushes the toolbar to two lines. */
.rcal-source-filter[b-bdrtgsobsw] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.rcal-source-chip[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.rcal-source-chip:hover[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.rcal-source-chip.active[b-bdrtgsobsw] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.rcal-source-chip-icon[b-bdrtgsobsw] {
    font-size: 13px;
}

/* Communication log inside the reservation detail modal. */
.rcal-audit-section[b-bdrtgsobsw] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;
}

.rcal-audit-header[b-bdrtgsobsw] {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

.rcal-audit-empty[b-bdrtgsobsw] {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

.rcal-audit-list[b-bdrtgsobsw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rcal-audit-item[b-bdrtgsobsw] {
    display: flex;
    gap: 10px;
    background: #f9fafb;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.rcal-audit-icon[b-bdrtgsobsw] {
    font-size: 14px;
    line-height: 1;
    padding-top: 1px;
    flex: 0 0 auto;
}

.rcal-audit-body[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
}

.rcal-audit-line[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.rcal-audit-label[b-bdrtgsobsw] {
    font-weight: 600;
    color: #1f2937;
}

.rcal-audit-time[b-bdrtgsobsw] {
    color: #6b7280;
    white-space: nowrap;
}

.rcal-audit-desc[b-bdrtgsobsw] {
    color: #4b5563;
    margin-top: 2px;
    word-break: break-word;
}

.rcal-audit-actor[b-bdrtgsobsw] {
    color: #9ca3af;
    margin-top: 2px;
    font-size: 11px;
}

/* Day-view shift bands: a thin label between time slots so the
   operator visually sees lunch / dinner boundaries, configured from
   the restaurant's WeeklySchedule. */
.rcal-shift-band[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 8px 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent);
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
}

.rcal-shift-band-name[b-bdrtgsobsw] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rcal-shift-band-range[b-bdrtgsobsw] {
    color: #6b7280;
    font-weight: 500;
}

/* Blocked-date marker on month-view cells: subtle red tint + lock
   icon in the corner. Reservation badge stays visible so an
   operator who blocks a date with existing bookings sees both ("4
   reservations, but day is blocked" — they need to call those
   customers to cancel). */
.calendar-day.rcal-blocked[b-bdrtgsobsw] {
    background: repeating-linear-gradient(
        45deg,
        rgba(239, 68, 68, 0.08),
        rgba(239, 68, 68, 0.08) 6px,
        rgba(239, 68, 68, 0.16) 6px,
        rgba(239, 68, 68, 0.16) 12px
    );
    border: 1px dashed #ef4444;
    cursor: not-allowed;
}

.rcal-blocked-tag[b-bdrtgsobsw] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.7;
}

/* ────────────────────────────────────────────────────────────────
   Wave 4 — Sala (floor-plan) view. Tables × time grid for the
   selected day. Selectors uniquely prefixed .rcal-sala-* so when
   this page's inline style block is finally extracted to a scoped
   .razor.css they migrate cleanly without colliding with anything.
   ──────────────────────────────────────────────────────────────── */
.rcal-sala[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 12px;
}

.rcal-sala-scroll[b-bdrtgsobsw] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rcal-sala-grid[b-bdrtgsobsw] {
    display: grid;
    gap: 4px;
    min-width: max-content;
    align-items: stretch;
}

.rcal-sala-corner[b-bdrtgsobsw] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}

.rcal-sala-time-header[b-bdrtgsobsw] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
}

.rcal-sala-label[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: #f9fafb;
    border-radius: 8px;
    position: sticky;
    left: 0;
    z-index: 1;
    min-height: 60px;
    justify-content: center;
}

.rcal-sala-label.rcal-sala-unassigned[b-bdrtgsobsw] {
    background: #fef3c7;
    color: #92400e;
}

.rcal-sala-label-title[b-bdrtgsobsw] {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.rcal-sala-label.rcal-sala-unassigned .rcal-sala-label-title[b-bdrtgsobsw] {
    color: #92400e;
}

.rcal-sala-label-meta[b-bdrtgsobsw] {
    font-size: 11px;
    color: #6b7280;
}

.rcal-sala-cell[b-bdrtgsobsw] {
    background: #f9fafb;
    border-radius: 6px;
    padding: 4px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px dashed transparent;
    transition: all 0.15s;
}

.rcal-sala-cell.drop-target[b-bdrtgsobsw] {
    border-color: #2563eb;
    background: #eff6ff;
}

.rcal-sala-chip[b-bdrtgsobsw] {
    background: #f0f9ff;
    border-left: 3px solid #2563eb;
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow 0.15s;
}

.rcal-sala-chip:active[b-bdrtgsobsw] { cursor: grabbing; }
.rcal-sala-chip:hover[b-bdrtgsobsw] { box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.rcal-sala-chip.arrived[b-bdrtgsobsw],
.rcal-sala-chip.completed[b-bdrtgsobsw] { background: #ecfdf5; border-left-color: #10b981; }
.rcal-sala-chip.noshow[b-bdrtgsobsw]    { background: #fef2f2; border-left-color: #ef4444; }
.rcal-sala-chip.cancelled[b-bdrtgsobsw] { background: #f3f4f6; border-left-color: #9ca3af; opacity: 0.5; }
.rcal-sala-chip.capacity-warn[b-bdrtgsobsw] { box-shadow: inset 0 0 0 1px #f59e0b; }

/* Header row: time on the left, allergen flag + party badge on the right,
   so a host scanning the floor reads "20:30 … ⚠ 4" at a glance. */
.rcal-sala-chip-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rcal-sala-chip-time[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 13px;
    color: #1f2937;
}

.rcal-sala-chip-allergen[b-bdrtgsobsw] {
    color: #b45309;
    font-size: 11px;
    line-height: 1;
}

.rcal-sala-chip-party[b-bdrtgsobsw] {
    margin-left: auto;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}

.rcal-sala-chip-name[b-bdrtgsobsw] {
    color: #374151;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wave 2c — allergen checkbox grid in Nueva Reserva modal */
.rcal-allergen-grid[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.rcal-allergen-chip[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    transition: all 0.15s;
}

.rcal-allergen-chip input[type="checkbox"][b-bdrtgsobsw] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rcal-allergen-chip:hover[b-bdrtgsobsw] {
    background: #f9fafb;
    border-color: #d1d5db;
}

.rcal-allergen-chip.selected[b-bdrtgsobsw] {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 600;
}

.rcal-allergen-icon[b-bdrtgsobsw] {
    font-size: 14px;
    line-height: 1;
}

.rcal-allergen-name[b-bdrtgsobsw] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read-only allergen + tag strips in the reservation detail modal */
.rcal-allergen-strip[b-bdrtgsobsw] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 60%;
}

.rcal-allergen-pill[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.rcal-tag-strip[b-bdrtgsobsw] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 60%;
}

.rcal-tag-chip[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
}

.calendar-header[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.calendar-header h1[b-bdrtgsobsw] {
    font-size: 22px;
    font-weight: 700;
    flex: 1;
}

.back-btn[b-bdrtgsobsw] {
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.new-btn[b-bdrtgsobsw] {
    padding: 10px 20px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Walk-in button: visually distinct from the primary +Nueva so a busy
   host doesn't accidentally start a scheduled reservation when they
   mean to register a walk-in (and vice versa). */
.rcal-walkin-btn[b-bdrtgsobsw] {
    padding: 10px 16px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rcal-walkin-btn:hover[b-bdrtgsobsw] {
    background: #d1fae5;
}

.view-toggle[b-bdrtgsobsw] {
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.view-btn[b-bdrtgsobsw] {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn.active[b-bdrtgsobsw] {
    background: #2563eb;
    color: #fff;
}

.month-nav[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.nav-arrow[b-bdrtgsobsw] {
    width: 44px;
    height: 44px;
    border: none;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* First-letter-only capitalisation: es-ES date strings come through
   lowercase ("viernes, 22 de mayo"); plain text-transform:capitalize
   would also capitalise "de" → "De". ::first-letter caps just the
   leading char so it reads "Viernes, 22 de mayo". */
.month-label[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.month-label[b-bdrtgsobsw] {
    font-size: 18px;
    font-weight: 700;
    min-width: 220px;
    text-align: center;
}

.today-btn[b-bdrtgsobsw] {
    padding: 8px 16px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.loading[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: 16px;
}

.spinner[b-bdrtgsobsw] {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-bdrtgsobsw 1s linear infinite;
}

@keyframes spin-b-bdrtgsobsw {
    to { transform: rotate(360deg); }
}

/* Month View */
.calendar-grid[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.weekday-header[b-bdrtgsobsw] {
    text-align: center;
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.weekday-header.weekend[b-bdrtgsobsw] {
    color: #9ca3af;
}

/* Month cell. Was a centered square showing only a number + count badge
   (Codex: "month view too empty"). Now a top-aligned cell with a header
   row (day number + count·pax) and up to 3 reservation chips (time +
   name, colour-coded by status), Google-Calendar style, so a host can
   read the night's shape without drilling in. */
.calendar-day[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    min-height: 112px;
    overflow: hidden;
}

.calendar-day:hover[b-bdrtgsobsw] {
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px #e5e7eb;
}

.calendar-day.other-month[b-bdrtgsobsw] {
    opacity: 0.4;
}

.calendar-day.today[b-bdrtgsobsw] {
    background: #dbeafe;
    border: 2px solid #2563eb;
    padding: 4px; /* compensate for the 2px border so chips don't shift */
}

.calendar-day.weekend[b-bdrtgsobsw] {
    background: #fafafa;
}

.calendar-day.has-reservations[b-bdrtgsobsw] {
    background: #f6fefb;
}

.cal-day-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex: 0 0 auto;
}

.day-number[b-bdrtgsobsw] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.cal-day-count[b-bdrtgsobsw] {
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: #d1fae5;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.cal-chips[b-bdrtgsobsw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
    overflow: hidden;
}

.cal-chip[b-bdrtgsobsw] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    padding: 2px 5px;
    border-radius: 5px;
    background: #f0f9ff;
    border-left: 3px solid #2563eb;
    overflow: hidden;
}

.cal-chip-time[b-bdrtgsobsw] {
    font-weight: 700;
    color: #1e293b;
    flex: 0 0 auto;
}

.cal-chip-name[b-bdrtgsobsw] {
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cal-chip.arrived[b-bdrtgsobsw], .cal-chip.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.cal-chip.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.cal-chip.cancelled[b-bdrtgsobsw] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
    opacity: 0.6;
}

.cal-chip-more[b-bdrtgsobsw] {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    padding: 1px 5px;
}

/* Week View */
.week-view[b-bdrtgsobsw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.week-day[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-height: 280px;
}

.week-day.today[b-bdrtgsobsw] {
    border: 2px solid #2563eb;
}

.week-day-header[b-bdrtgsobsw] {
    background: #f9fafb;
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    position: relative;
}

.week-day-header:hover[b-bdrtgsobsw] {
    background: #f3f4f6;
}

.day-name[b-bdrtgsobsw] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.day-date[b-bdrtgsobsw] {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.week-badge[b-bdrtgsobsw] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #10b981;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-day-content[b-bdrtgsobsw] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.week-reservation[b-bdrtgsobsw] {
    padding: 8px;
    background: #f0f9ff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    border-left: 3px solid #2563eb;
    transition: box-shadow 0.2s, transform 0.2s;
}

.week-reservation:focus[b-bdrtgsobsw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.week-reservation.arrived[b-bdrtgsobsw], .week-reservation.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.week-reservation.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.week-reservation.cancelled[b-bdrtgsobsw] {
    background: #f3f4f6;
    border-left-color: #9ca3af;
    opacity: 0.6;
}

.res-time[b-bdrtgsobsw] {
    font-weight: 700;
    display: block;
}

.res-name[b-bdrtgsobsw] {
    color: #374151;
}

.res-party[b-bdrtgsobsw] {
    color: #6b7280;
    font-size: 11px;
}

.more-reservations[b-bdrtgsobsw] {
    text-align: center;
    color: #2563eb;
    font-size: 12px;
    padding: 8px;
    cursor: pointer;
    font-weight: 600;
}

.no-reservations[b-bdrtgsobsw] {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    padding: 20px;
}

/* Day View */
.day-view[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.time-slots[b-bdrtgsobsw] {
    padding: 16px;
}

.time-slot[b-bdrtgsobsw] {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    min-height: 60px;
}

.time-label[b-bdrtgsobsw] {
    width: 60px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    padding-top: 4px;
}

.slot-content[b-bdrtgsobsw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slot-reservation[b-bdrtgsobsw] {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    border-left: 4px solid #2563eb;
    transition: box-shadow 0.2s, transform 0.2s;
}

.slot-reservation:focus[b-bdrtgsobsw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.slot-reservation.arrived[b-bdrtgsobsw], .slot-reservation.completed[b-bdrtgsobsw] {
    background: #ecfdf5;
    border-left-color: #10b981;
}

.slot-reservation.noshow[b-bdrtgsobsw] {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.slot-res-header[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.slot-res-time[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 14px;
}

.slot-res-status[b-bdrtgsobsw] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.slot-res-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.slot-res-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.slot-res-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.slot-res-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.slot-res-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.slot-res-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }

.slot-res-name[b-bdrtgsobsw] {
    font-weight: 600;
    font-size: 15px;
}

.slot-res-details[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
}

.vip-mini[b-bdrtgsobsw] {
    font-size: 12px;
    margin-left: 4px;
}

/* Stats Bar */
.stats-bar[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.stat[b-bdrtgsobsw] {
    text-align: center;
}

.stat-value[b-bdrtgsobsw] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
}

.stat-label[b-bdrtgsobsw] {
    font-size: 12px;
    color: #6b7280;
}

/* Panels & Modals */
.day-panel-overlay[b-bdrtgsobsw], .modal-overlay[b-bdrtgsobsw] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.day-panel[b-bdrtgsobsw], .modal[b-bdrtgsobsw] {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header[b-bdrtgsobsw], .modal-header[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.panel-header h2[b-bdrtgsobsw], .modal-header h2[b-bdrtgsobsw] {
    font-size: 18px;
    font-weight: 700;
}

/* Panel header shows a lowercase es-ES date — cap only the first
   letter (the modal header shows already-cased copy like
   "Detalles de Reserva" and must NOT be capitalize'd into
   "Detalles De Reserva"). */
.panel-header h2[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.close-btn[b-bdrtgsobsw] {
    width: 44px;
    height: 44px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.panel-content[b-bdrtgsobsw], .modal-body[b-bdrtgsobsw] {
    padding: 20px;
    overflow-y: auto;
    /* Thin, theme-matched scrollbar — the default white/native bar
       in the dark modal reads as unfinished (Codex feedback). */
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar {
    width: 8px;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar-track,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar-track {
    background: transparent;
}
.panel-content[b-bdrtgsobsw]::-webkit-scrollbar-thumb,
.modal-body[b-bdrtgsobsw]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
:root[data-theme="dark"] .panel-content[b-bdrtgsobsw]::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .modal-body[b-bdrtgsobsw]::-webkit-scrollbar-thumb {
    background: #475569;
}

.panel-reservation[b-bdrtgsobsw] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #2563eb;
}

.panel-reservation.arrived[b-bdrtgsobsw], .panel-reservation.completed[b-bdrtgsobsw] {
    border-left-color: #10b981;
}

.panel-reservation.noshow[b-bdrtgsobsw] {
    border-left-color: #ef4444;
}

.res-header[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.res-status[b-bdrtgsobsw] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.res-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.res-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.res-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.res-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.res-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.res-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }

.res-body[b-bdrtgsobsw] {
    margin-bottom: 12px;
}

.res-name-row[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.res-name[b-bdrtgsobsw] {
    font-weight: 700;
    font-size: 16px;
}

.vip-chip[b-bdrtgsobsw] {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
}

.vip-chip.platinum[b-bdrtgsobsw] { background: #ede9fe; color: #7c3aed; }
.vip-chip.gold[b-bdrtgsobsw] { background: #fef3c7; color: #f59e0b; }
.vip-chip.silver[b-bdrtgsobsw] { background: #f3f4f6; color: #6b7280; }

.res-info[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

.res-actions[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn[b-bdrtgsobsw] {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.action-btn.confirm[b-bdrtgsobsw], .action-btn.approve[b-bdrtgsobsw] { background: #10b981; color: #fff; }
.action-btn.noshow[b-bdrtgsobsw] { background: #f59e0b; color: #fff; }
.action-btn.cancel[b-bdrtgsobsw] { background: #ef4444; color: #fff; }

.no-reservations-panel[b-bdrtgsobsw] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-bdrtgsobsw] {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.new-res-btn[b-bdrtgsobsw] {
    margin-top: 16px;
    padding: 12px 24px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Form */
.validation-error[b-bdrtgsobsw] {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.required[b-bdrtgsobsw] {
    color: #ef4444;
}

.form-group[b-bdrtgsobsw] {
    margin-bottom: 16px;
}

.form-group label[b-bdrtgsobsw] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.form-group input[b-bdrtgsobsw], .form-group textarea[b-bdrtgsobsw] {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    /* The admin shell renders this page dark. color-scheme:dark makes the
       browser paint native control chrome (the datetime calendar icon, the
       number spinners, the date-picker popup) light-on-dark instead of the
       default dark-on-dark where the calendar glyph was invisible. The
       webkit invert is a belt-and-suspenders for the picker indicator. */
    color-scheme: dark;
}

.form-group input[b-bdrtgsobsw]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

.form-group input[b-bdrtgsobsw]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-group input:focus[b-bdrtgsobsw], .form-group textarea:focus[b-bdrtgsobsw] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Inline field validation — invalid field gets a red ring + a small
   message below it (shown only after a submit attempt), so the operator
   sees exactly which field is missing instead of a single top banner. */
.form-group input.input-invalid[b-bdrtgsobsw] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error[b-bdrtgsobsw] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f87171;
}

/* ===== Premium Nueva Reserva form ===== */
.resv-summary[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.resv-summary-item--cap[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}

.resv-summary-sep[b-bdrtgsobsw] {
    color: #94a3b8;
}

.resv-section-label[b-bdrtgsobsw] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 18px 0 10px;
}

.quick-time-chips[b-bdrtgsobsw] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.quick-time-chip[b-bdrtgsobsw] {
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    background: transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-time-chip:hover[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.quick-time-chip.active[b-bdrtgsobsw] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.pax-stepper[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pax-btn[b-bdrtgsobsw] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid #cbd5e1;
    background: transparent;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.pax-btn:hover:not(:disabled)[b-bdrtgsobsw] {
    background: #f1f5f9;
}

.pax-btn:disabled[b-bdrtgsobsw] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pax-stepper .pax-value[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
    width: auto;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

.modal-footer[b-bdrtgsobsw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.btn-primary[b-bdrtgsobsw] { padding: 12px 24px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-secondary[b-bdrtgsobsw] { padding: 12px 24px; background: #f3f4f6; color: #374151; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-success[b-bdrtgsobsw] { padding: 12px 24px; background: #10b981; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-warning[b-bdrtgsobsw] { padding: 12px 24px; background: #f59e0b; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-danger[b-bdrtgsobsw] { padding: 12px 24px; background: #ef4444; color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-outline[b-bdrtgsobsw] { padding: 12px 24px; background: transparent; color: #2563eb; border: 2px solid #2563eb; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover[b-bdrtgsobsw] { background: #2563eb; color: #fff; }
.btn-primary:disabled[b-bdrtgsobsw] { background: #9ca3af; cursor: not-allowed; }

/* Detail-modal footer: secondary actions left (quiet ghost buttons),
   the single primary action right (filled). Replaces four equally-loud
   filled buttons that competed for attention (Codex feedback). */
.detail-footer[b-bdrtgsobsw] {
    justify-content: space-between;
    align-items: center;
}
.detail-footer-secondary[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.detail-footer-primary[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.btn-ghost[b-bdrtgsobsw] {
    padding: 10px 16px;
    background: transparent;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover[b-bdrtgsobsw] { background: #f1f5f9; }
.btn-ghost.ghost-warning[b-bdrtgsobsw] { color: #b45309; border-color: #fcd34d; }
.btn-ghost.ghost-warning:hover[b-bdrtgsobsw] { background: #fffbeb; }
.btn-ghost.ghost-danger[b-bdrtgsobsw] { color: #b91c1c; border-color: #fca5a5; }
.btn-ghost.ghost-danger:hover[b-bdrtgsobsw] { background: #fef2f2; }

/* Reschedule Modal */
.reschedule-modal[b-bdrtgsobsw] { max-width: 400px; }
.reschedule-modal .form-group[b-bdrtgsobsw] { margin-bottom: 16px; }
.reschedule-modal label[b-bdrtgsobsw] { display: block; margin-bottom: 6px; font-weight: 600; color: #374151; }
.reschedule-modal .form-input[b-bdrtgsobsw] { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; }
.reschedule-modal .form-input:focus[b-bdrtgsobsw] { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

/* Detail Modal */
.detail-modal[b-bdrtgsobsw] { max-width: 500px; }

.detail-status[b-bdrtgsobsw] {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}

.detail-status.confirmed[b-bdrtgsobsw] { background: #dbeafe; color: #1d4ed8; }
.detail-status.reminded[b-bdrtgsobsw] { background: #fef3c7; color: #92400e; }
.detail-status.pending[b-bdrtgsobsw] { background: #f3f4f6; color: #374151; }
.detail-status.arrived[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.detail-status.completed[b-bdrtgsobsw] { background: #d1fae5; color: #065f46; }
.detail-status.noshow[b-bdrtgsobsw] { background: #fee2e2; color: #991b1b; }
.detail-status.cancelled[b-bdrtgsobsw] { background: #f3f4f6; color: #6b7280; }

.detail-row[b-bdrtgsobsw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row.warning[b-bdrtgsobsw] {
    background: #fef2f2;
    margin: 0 -20px;
    padding: 12px 20px;
}

.detail-label[b-bdrtgsobsw] {
    font-size: 13px;
    color: #6b7280;
}

.detail-value[b-bdrtgsobsw] {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.detail-value.notes[b-bdrtgsobsw] {
    font-weight: normal;
    background: #f9fafb;
    padding: 8px;
    border-radius: 6px;
    max-width: 60%;
}

/* Drag and Drop Styles */
.dragging[b-bdrtgsobsw] {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(0.95);
}

.drop-target[b-bdrtgsobsw] {
    background: #dbeafe;
    border: 2px dashed #2563eb;
    border-radius: 8px;
    transition: all 0.2s;
}

[draggable="true"][b-bdrtgsobsw] {
    cursor: grab;
}

[draggable="true"]:active[b-bdrtgsobsw] {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .week-view[b-bdrtgsobsw] {
        grid-template-columns: 1fr;
    }

    .week-day[b-bdrtgsobsw] {
        min-height: auto;
    }

    .calendar-grid[b-bdrtgsobsw] {
        padding: 8px;
    }

    .calendar-day[b-bdrtgsobsw] {
        min-height: 56px;
        justify-content: flex-start;
    }

    /* Phone month grid is too narrow for chip text — fall back to the
       compact day-number + count·pax header (chips return ≥769px). */
    .cal-chips[b-bdrtgsobsw] {
        display: none;
    }

    .cal-day-count[b-bdrtgsobsw] {
        font-size: 9px;
        padding: 1px 4px;
    }

    .day-number[b-bdrtgsobsw] {
        font-size: 14px;
    }
}

/* Print button in the toolbar — same shape as walk-in but in slate
   so the operator can scan past it when not needed. The admin shell
   renders this page in dark mode, so the base text must be light or
   it's dark-on-dark (the previous #475569 was invisible). */
.rcal-print-btn[b-bdrtgsobsw] {
    padding: 10px 14px;
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rcal-print-btn:hover[b-bdrtgsobsw] {
    background: rgba(148, 163, 184, 0.28);
    color: #f1f5f9;
}
@media (max-width: 600px) {
    .rcal-print-btn-label[b-bdrtgsobsw] { display: none; }
}

/* Settings gear — same slate ghost language as the print button, square. */
.rcal-config-btn[b-bdrtgsobsw] {
    padding: 10px;
    width: 42px;
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.rcal-config-btn:hover[b-bdrtgsobsw] {
    background: rgba(148, 163, 184, 0.28);
}

/* Share booking link — indigo-tinted so the discoverability CTA stands
   out from the slate ghost buttons without competing with +Nueva. */
.rcal-share-btn[b-bdrtgsobsw] {
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.16);
    color: #c7d2fe;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rcal-share-btn:hover[b-bdrtgsobsw] {
    background: rgba(99, 102, 241, 0.28);
    color: #e0e7ff;
}
@media (max-width: 600px) {
    .rcal-share-btn-label[b-bdrtgsobsw] { display: none; }
}

/* ── Share dialog (rcal-share-*) — self-contained dark modal ── */
.rcal-share-overlay[b-bdrtgsobsw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}
.rcal-share-modal[b-bdrtgsobsw] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.rcal-share-head[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #334155;
}
.rcal-share-head h2[b-bdrtgsobsw] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
}
.rcal-share-close[b-bdrtgsobsw] {
    width: 36px;
    height: 36px;
    border: none;
    background: #334155;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.rcal-share-close:hover[b-bdrtgsobsw] {
    background: #475569;
}
.rcal-share-body[b-bdrtgsobsw] {
    padding: 20px;
}
.rcal-share-desc[b-bdrtgsobsw] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}
.rcal-share-linkrow[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.rcal-share-link[b-bdrtgsobsw] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #818cf8;
    font-size: 0.85rem;
}
.rcal-share-link:focus[b-bdrtgsobsw] {
    outline: none;
    border-color: #6366f1;
}
.rcal-share-copy[b-bdrtgsobsw] {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.rcal-share-copy:hover[b-bdrtgsobsw] {
    background: #4f46e5;
}
.rcal-share-actions[b-bdrtgsobsw] {
    display: flex;
    gap: 8px;
}
.rcal-share-action[b-bdrtgsobsw] {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.rcal-share-action:hover[b-bdrtgsobsw] {
    border-color: #6366f1;
    color: #c7d2fe;
}
.rcal-share-action--wa:hover[b-bdrtgsobsw] {
    border-color: #25d366;
    color: #6ee7a8;
}

/* Print-only sheet — hidden on screen, visible only when printing.
   The screen-side calendar grid + toolbar + modals all get hidden via
   the inversion in @media print below. */
.rcal-print-sheet[b-bdrtgsobsw] {
    display: none;
}

.rcal-print-header[b-bdrtgsobsw] {
    margin-bottom: 16px;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
}
.rcal-print-header h2[b-bdrtgsobsw] {
    margin: 0;
    font-size: 18pt;
}
.rcal-print-meta[b-bdrtgsobsw] {
    font-size: 11pt;
    color: #444;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rcal-print-meta > span[b-bdrtgsobsw]::first-letter {
    text-transform: uppercase;
}
.rcal-print-table[b-bdrtgsobsw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}
.rcal-print-table th[b-bdrtgsobsw],
.rcal-print-table td[b-bdrtgsobsw] {
    border: 1px solid #999;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}
.rcal-print-table th[b-bdrtgsobsw] {
    background: #f3f4f6;
}
.rcal-print-footer[b-bdrtgsobsw] {
    margin-top: 12px;
    font-size: 11pt;
    color: #444;
    text-align: right;
}
.rcal-print-empty[b-bdrtgsobsw] {
    text-align: center;
    font-style: italic;
    color: #666;
}

/* Print stylesheet: hide everything BUT the print sheet so the
   operator gets a clean one-page seating list. Critical that the
   AdminLayout shell isn't included — those rules live in the layout's
   own scoped CSS; we ensure body-level child visibility via inversion. */
@media print {
    /* Hide screen UI */
    .rcal-toolbar[b-bdrtgsobsw],
    .calendar-grid[b-bdrtgsobsw],
    .week-view[b-bdrtgsobsw],
    .day-view[b-bdrtgsobsw],
    .rcal-sala[b-bdrtgsobsw],
    .stats-bar[b-bdrtgsobsw],
    .modal-overlay[b-bdrtgsobsw],
    .day-panel-overlay[b-bdrtgsobsw],
    .calendar-page > .loading[b-bdrtgsobsw],
    .calendar-page > h1[b-bdrtgsobsw],
    .calendar-page > header[b-bdrtgsobsw] {
        display: none !important;
    }
    /* Show the print sheet */
    .rcal-print-sheet[b-bdrtgsobsw] {
        display: block !important;
    }
    /* Reset page padding so the sheet uses the full paper */
    .calendar-page[b-bdrtgsobsw] {
        background: #fff !important;
        padding: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Bulk actions in the selected-day panel: a toggle, checkboxes on
   each chip, and a sticky action bar at the bottom when items are
   selected. Selectors prefixed .rcal-bulk-* — neighbors the existing
   .rcal-* convention.
   ────────────────────────────────────────────────────────────── */
.rcal-bulk-toolbar[b-bdrtgsobsw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}
.rcal-bulk-toggle[b-bdrtgsobsw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.rcal-bulk-link[b-bdrtgsobsw] {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.rcal-bulk-link:hover[b-bdrtgsobsw] {
    text-decoration: underline;
}
.rcal-bulk-check[b-bdrtgsobsw] {
    position: absolute;
    top: 8px;
    right: 8px;
}
.panel-reservation.selected[b-bdrtgsobsw] {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.rcal-bulk-bar[b-bdrtgsobsw] {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 -16px -20px;
}
.rcal-bulk-count[b-bdrtgsobsw] {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
}

/* Dark theme */
:root[data-theme="dark"] .rcal-bulk-toolbar[b-bdrtgsobsw] {
    background: #0f172a;
    color: #e2e8f0;
}
:root[data-theme="dark"] .rcal-bulk-toggle[b-bdrtgsobsw] { color: #cbd5e1; }
:root[data-theme="dark"] .rcal-bulk-link[b-bdrtgsobsw] { color: #58a6ff; }
:root[data-theme="dark"] .panel-reservation.selected[b-bdrtgsobsw] {
    outline-color: #58a6ff;
}
:root[data-theme="dark"] .rcal-bulk-bar[b-bdrtgsobsw] {
    background: rgba(15, 23, 42, 0.96);
    border-top-color: #334155;
}
:root[data-theme="dark"] .rcal-bulk-count[b-bdrtgsobsw] { color: #f1f5f9; }

/* ─────────────────────────────────────────────────────────────────
   iPhone (~390px) layout fixes. Additive only — base/desktop rules
   above are untouched. Goals: header wraps (action buttons drop below
   the title), the Mes/Semana/Día segment + month-nav fit, the source
   filter row scrolls horizontally, and the 7-column month grid fits the
   viewport so SÁB/DOM are no longer clipped.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* (a) Header: let the action buttons wrap below the title instead of
       overflowing to the right. The title takes the full first row
       (flex:1 + 100% basis forces a wrap), the buttons share the next. */
    .calendar-header[b-bdrtgsobsw] {
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .calendar-header h1[b-bdrtgsobsw] {
        font-size: 18px;
        flex: 1 1 100%;
        min-width: 0;
    }
    /* The back-arrow stays on the title row (pull it before the wrap by
       keeping it compact); the rest of the buttons flow onto row two. */
    .calendar-header .back-btn[b-bdrtgsobsw] {
        order: -1;
        flex: 0 0 auto;
    }
    .rcal-print-btn[b-bdrtgsobsw],
    .rcal-config-btn[b-bdrtgsobsw],
    .rcal-walkin-btn[b-bdrtgsobsw],
    .calendar-header .new-btn[b-bdrtgsobsw] {
        padding: 8px 12px;
    }

    /* (b) View toggle: 4 segments (Mes/Semana/Día/Sala) on one row —
       shrink padding/font so they fit without clipping. */
    .view-toggle[b-bdrtgsobsw] {
        gap: 2px;
    }
    .view-btn[b-bdrtgsobsw] {
        padding: 8px 4px;
        font-size: 13px;
        min-width: 0;
    }

    /* (b) Month nav: the 220px label + two 44px arrows + Hoy overflow at
       390px. Let the row wrap, shrink the label, and stop it forcing
       width via min-width. */
    .month-nav[b-bdrtgsobsw] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .month-label[b-bdrtgsobsw] {
        font-size: 15px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .nav-arrow[b-bdrtgsobsw] {
        width: 40px;
        height: 40px;
    }
    .today-btn[b-bdrtgsobsw] {
        padding: 8px 12px;
    }

    /* (c) Source-filter chips: horizontal scroll, never wrap, so the row
       can't push the toolbar wider than the viewport. (Base already has
       overflow-x:auto; make nowrap explicit and let it shrink.) */
    .rcal-source-filter[b-bdrtgsobsw] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .rcal-source-chip[b-bdrtgsobsw] {
        flex: 0 0 auto;
    }

    /* (d) MAIN: 7-column month grid must fit the viewport. minmax(0,1fr)
       + min-width:0 on cells lets the 7 columns share the width equally
       (chip/number content can no longer blow a column past 1fr), so
       SÁB/DOM stop being clipped off the right edge. */
    .calendar-grid[b-bdrtgsobsw] {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 2px;
        padding: 6px;
    }
    .weekday-header[b-bdrtgsobsw] {
        padding: 6px 1px;
        font-size: 9px;
        min-width: 0;
    }
    .calendar-day[b-bdrtgsobsw] {
        min-width: 0;
        padding: 4px 2px;
    }
    .calendar-day.today[b-bdrtgsobsw] {
        padding: 2px; /* keep parity with base today-border compensation */
    }
    .day-number[b-bdrtgsobsw] {
        font-size: 12px;
    }
    .cal-day-head[b-bdrtgsobsw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}
/* /Pages/Admin/ReservationSettings.razor.rz.scp.css */
.settings-page[b-z1qwt2ih81] {
    min-height: 100vh;
    background: transparent;
}

.settings-header[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn[b-z1qwt2ih81] {
    width: 36px;
    height: 36px;
    border: none;
    background: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    transition: background 0.2s;
}

.back-btn:hover[b-z1qwt2ih81] {
    background: #475569;
}

.settings-header h1[b-z1qwt2ih81] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.loading[b-z1qwt2ih81] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: #94a3b8;
}

.spinner[b-z1qwt2ih81] {
    width: 32px;
    height: 32px;
    border: 3px solid #334155;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-z1qwt2ih81 1s linear infinite;
}

.spinner-small[b-z1qwt2ih81] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-z1qwt2ih81 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-z1qwt2ih81 {
    to { transform: rotate(360deg); }
}

.error-message[b-z1qwt2ih81] {
    padding: 20px;
    margin: 20px;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #dc2626;
    border-radius: 12px;
    color: #f87171;
    text-align: center;
}

.error-message button[b-z1qwt2ih81] {
    margin-top: 12px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.settings-content[b-z1qwt2ih81] {
    padding: 16px;
    padding-bottom: 100px;
}

/* Section */
.setting-section[b-z1qwt2ih81] {
    margin-bottom: 24px;
}

.section-title[b-z1qwt2ih81] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin: 0 0 12px 4px;
}

/* Cards */
.setting-card[b-z1qwt2ih81] {
    background: #1e293b;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #334155;
}

.toggle-card[b-z1qwt2ih81] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.setting-info h3[b-z1qwt2ih81] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.setting-info p[b-z1qwt2ih81] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Toggle Switch */
.switch[b-z1qwt2ih81] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input[b-z1qwt2ih81] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-z1qwt2ih81] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #475569;
    border-radius: 28px;
    transition: 0.3s;
}

.slider[b-z1qwt2ih81]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch input:checked + .slider[b-z1qwt2ih81] {
    background-color: #6366f1;
}

.switch input:checked + .slider[b-z1qwt2ih81]:before {
    transform: translateX(24px);
}

/* Form Fields */
.field-label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.field-hint[b-z1qwt2ih81] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 8px 0 0;
}

/* Input with Suffix */
.input-with-suffix[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix input[b-z1qwt2ih81] {
    width: 100px;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 1rem;
    color: #e2e8f0;
    background: #0f172a;
}

.input-with-suffix input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

.input-with-suffix .suffix[b-z1qwt2ih81] {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Time Inputs */
.time-inputs[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.time-field[b-z1qwt2ih81] {
    flex: 1;
}

.time-field label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

.time-field input[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 1rem;
    background: #0f172a;
    color: #e2e8f0;
}

.time-field input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

.time-separator[b-z1qwt2ih81] {
    color: #64748b;
    margin-top: 24px;
}

/* Days Grid */
.days-grid[b-z1qwt2ih81] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.day-chip[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: #334155;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.day-chip input[b-z1qwt2ih81] {
    display: none;
}

.day-chip span[b-z1qwt2ih81] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.day-chip.closed[b-z1qwt2ih81] {
    background: rgba(220, 38, 38, 0.2);
}

.day-chip.closed span[b-z1qwt2ih81] {
    color: #f87171;
}

/* Radio Group */
.radio-group[b-z1qwt2ih81] {
    display: flex;
    gap: 12px;
}

.radio-option[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option input[b-z1qwt2ih81] {
    accent-color: #6366f1;
}

.radio-option:has(input:checked)[b-z1qwt2ih81] {
    background: rgba(99, 102, 241, 0.2);
}

.radio-option span[b-z1qwt2ih81] {
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* Range Inputs */
.range-inputs[b-z1qwt2ih81] {
    display: flex;
    gap: 24px;
}

.range-field[b-z1qwt2ih81] {
    flex: 1;
}

.range-label[b-z1qwt2ih81] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

/* Textarea */
textarea[b-z1qwt2ih81] {
    width: 100%;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
    background: #0f172a;
    color: #e2e8f0;
}

textarea:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

/* Link Card */
.link-card[b-z1qwt2ih81] {
    background: #0f172a;
    border: 1px dashed #334155;
}

.link-preview[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #1e293b;
    border-radius: 8px;
    border: 1px solid #334155;
}

.link-url[b-z1qwt2ih81] {
    flex: 1;
    font-size: 0.85rem;
    color: #818cf8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-btn[b-z1qwt2ih81] {
    padding: 6px 14px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.copy-btn:hover[b-z1qwt2ih81] {
    background: #4f46e5;
}

/* Save Section */
.save-section[b-z1qwt2ih81] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: #1e293b;
    border-top: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-btn[b-z1qwt2ih81] {
    flex: 1;
    padding: 14px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-btn:hover[b-z1qwt2ih81] {
    background: #4f46e5;
}

.save-btn:disabled[b-z1qwt2ih81] {
    opacity: 0.7;
    cursor: not-allowed;
}

.save-success[b-z1qwt2ih81] {
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Timezone Select */
.timezone-select[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #e2e8f0;
    background: #0f172a;
}

.timezone-select:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

.timezone-select option[b-z1qwt2ih81] {
    background: #1e293b;
    color: #e2e8f0;
}

/* Weekly Schedule (Multi-shift) */
.weekly-schedule-card[b-z1qwt2ih81] {
    padding: 12px;
}

.day-schedule-row[b-z1qwt2ih81] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #334155;
}

.day-schedule-row:last-of-type[b-z1qwt2ih81] {
    border-bottom: none;
}

.day-name[b-z1qwt2ih81] {
    min-width: 45px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    padding-top: 8px;
}

.shifts-container[b-z1qwt2ih81] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-row[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shift-row input[b-z1qwt2ih81] {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    background: #0f172a;
    color: #e2e8f0;
}

.shift-row input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

.shift-row span[b-z1qwt2ih81] {
    color: #64748b;
    font-size: 0.85rem;
}

.remove-shift-btn[b-z1qwt2ih81] {
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.remove-shift-btn:hover[b-z1qwt2ih81] {
    background: rgba(220, 38, 38, 0.3);
}

.closed-label[b-z1qwt2ih81] {
    color: #64748b;
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 0;
}

.add-shift-btn[b-z1qwt2ih81] {
    padding: 6px 12px;
    border: 1px dashed #475569;
    background: #0f172a;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.add-shift-btn:hover[b-z1qwt2ih81] {
    border-color: #6366f1;
    color: #818cf8;
    background: rgba(99, 102, 241, 0.1);
}

.copy-schedule-btn[b-z1qwt2ih81] {
    width: 100%;
    padding: 10px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.copy-schedule-btn:hover[b-z1qwt2ih81] {
    border-color: #6366f1;
    color: #818cf8;
    background: rgba(99, 102, 241, 0.1);
}

/* Google Reserve Info Card */
.info-card[b-z1qwt2ih81] {
    display: flex;
    gap: 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid #6366f1;
}

.info-icon[b-z1qwt2ih81] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-content h4[b-z1qwt2ih81] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #818cf8;
}

.setup-steps[b-z1qwt2ih81] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #a5b4fc;
    line-height: 1.6;
}

.setup-steps code[b-z1qwt2ih81] {
    background: rgba(99, 102, 241, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #c7d2fe;
}

.section-desc[b-z1qwt2ih81] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: -8px 0 12px 4px;
}

/* Responsive */
@media (max-width: 400px) {
    .time-inputs[b-z1qwt2ih81] {
        flex-direction: column;
        gap: 12px;
    }

    .time-separator[b-z1qwt2ih81] {
        display: none;
    }

    .radio-group[b-z1qwt2ih81] {
        flex-direction: column;
    }

    .range-inputs[b-z1qwt2ih81] {
        flex-direction: column;
        gap: 12px;
    }

    .shift-row input[b-z1qwt2ih81] {
        width: 60px;
        padding: 6px 8px;
    }

    .day-name[b-z1qwt2ih81] {
        min-width: 35px;
        font-size: 0.8rem;
    }
}

/* Inline <code>/<strong> inside setting descriptions (WhatsApp section
   renders its prose via MarkupString so template names show as pills). */
.setting-info code[b-z1qwt2ih81] {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.setting-info p strong[b-z1qwt2ih81] {
    color: #e2e8f0;
}

/* ──────────────────────────────────────────────────────────────────
   Blocked-dates section: lets staff close a calendar date so the
   reservation availability service refuses new bookings. Selectors
   prefixed .rbd-* (Reservas Blocked Dates) — this file is scoped CSS,
   so they don't leak, but the prefix keeps grep clean across pages.

   Styled dark-first to match the rest of the page (admin-layout pins
   data-theme="dark"), so no separate light/dark override blocks — the
   whole settings surface now shares one palette.
   ────────────────────────────────────────────────────────────────── */

/* Shared button styling for this page's add/action rows. Scoped CSS, so
   these generic names only match elements inside ReservationSettings. */
.rbd-add-row .btn-primary[b-z1qwt2ih81],
.rrec-add-row .btn-primary[b-z1qwt2ih81] {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.rbd-add-row .btn-primary:hover:not(:disabled)[b-z1qwt2ih81],
.rrec-add-row .btn-primary:hover:not(:disabled)[b-z1qwt2ih81] {
    background: #4f46e5;
}
.rbd-add-row .btn-primary:disabled[b-z1qwt2ih81],
.rrec-add-row .btn-primary:disabled[b-z1qwt2ih81] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rbd-add-row[b-z1qwt2ih81] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}

.rbd-date-input[b-z1qwt2ih81],
.rbd-reason-input[b-z1qwt2ih81] {
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #0f172a;
    color: #e2e8f0;
}

.rbd-date-input:focus[b-z1qwt2ih81],
.rbd-reason-input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}

.rbd-date-input[b-z1qwt2ih81] {
    flex: 0 0 auto;
}

.rbd-reason-input[b-z1qwt2ih81] {
    flex: 1 1 200px;
    min-width: 0;
}

.rbd-error[b-z1qwt2ih81] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid #b91c1c;
    color: #fca5a5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.rbd-success[b-z1qwt2ih81] {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid #10b981;
    color: #6ee7b7;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.rbd-empty[b-z1qwt2ih81] {
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
    margin: 4px 0;
}

.rbd-list[b-z1qwt2ih81] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rbd-item[b-z1qwt2ih81] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
}

.rbd-item-date[b-z1qwt2ih81] {
    flex: 0 0 auto;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: capitalize;
    min-width: 220px;
}

.rbd-item-body[b-z1qwt2ih81] {
    flex: 1 1 auto;
    min-width: 0;
    color: #cbd5e1;
    font-size: 0.8rem;
}

.rbd-item-body .muted[b-z1qwt2ih81] {
    color: #64748b;
    font-style: italic;
}

.rbd-item-reason[b-z1qwt2ih81] {
    word-break: break-word;
}

.rbd-item-actor[b-z1qwt2ih81] {
    color: #64748b;
    font-size: 0.75rem;
    margin-left: 4px;
}

.rbd-remove-btn[b-z1qwt2ih81] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #94a3b8;
    transition: all 0.15s;
}

.rbd-remove-btn:hover[b-z1qwt2ih81] {
    background: rgba(185, 28, 28, 0.2);
    color: #fca5a5;
}

/* ──────────────────────────────────────────────────────────────────
   Recurring reservations: settings UI to add/list/delete templates.
   .rrec-* prefix (Reservas Recurrentes). Same density / palette as the
   .rbd-* section so the two feel related; bigger row because each row
   carries when + who in one line.
   ────────────────────────────────────────────────────────────── */
.rrec-add-row[b-z1qwt2ih81] {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 110px 70px minmax(160px, 2fr) minmax(140px, 1fr) auto;
    gap: 8px;
    margin-bottom: 12px;
}
.rrec-day-input[b-z1qwt2ih81],
.rrec-time-input[b-z1qwt2ih81],
.rrec-size-input[b-z1qwt2ih81],
.rrec-name-input[b-z1qwt2ih81],
.rrec-phone-input[b-z1qwt2ih81] {
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #0f172a;
    color: #e2e8f0;
    min-width: 0;
}
.rrec-day-input:focus[b-z1qwt2ih81],
.rrec-time-input:focus[b-z1qwt2ih81],
.rrec-size-input:focus[b-z1qwt2ih81],
.rrec-name-input:focus[b-z1qwt2ih81],
.rrec-phone-input:focus[b-z1qwt2ih81] {
    outline: none;
    border-color: #6366f1;
}
.rrec-list[b-z1qwt2ih81] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rrec-item[b-z1qwt2ih81] {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
}
.rrec-item-when[b-z1qwt2ih81] {
    font-weight: 600;
    color: #f1f5f9;
}
.rrec-item-who[b-z1qwt2ih81] {
    color: #cbd5e1;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rrec-item-actions[b-z1qwt2ih81] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rrec-action.btn-secondary[b-z1qwt2ih81] {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}
.rrec-action.btn-secondary:hover:not(:disabled)[b-z1qwt2ih81] {
    border-color: #6366f1;
    color: #818cf8;
}
.rrec-action.btn-secondary:disabled[b-z1qwt2ih81] {
    opacity: 0.5;
    cursor: not-allowed;
}
.rrec-paused[b-z1qwt2ih81] {
    margin-left: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    padding: 1px 6px;
    border-radius: 4px;
}

@media (max-width: 720px) {
    .rrec-add-row[b-z1qwt2ih81] {
        grid-template-columns: 1fr 1fr;
    }
    .rrec-add-row > *[b-z1qwt2ih81] {
        min-width: 0;
    }
    .rrec-item[b-z1qwt2ih81] {
        grid-template-columns: 1fr auto;
    }
}
/* /Pages/Admin/RestaurantDetailModal.razor.rz.scp.css */
/* Restaurant detail modal styling.
   IMPORTANT: Blazor CSS isolation scopes each component's styles to its own
   rendered elements. Even though the parent SuperAdmin.razor.css defines
   `.sa-modal-backdrop`, `.sa-table`, `.sa-btn`, etc., those rules are
   scoped to SuperAdmin's elements — they DON'T apply to elements rendered
   by this child component. So we re-declare the base design-system rules
   below; Blazor auto-scopes them to RestaurantDetailModal's rendered output.
   Same names (so the markup is portable), parallel rules. */

/* ----- Modal scaffolding (mirrors SuperAdmin.razor.css :748-) ----- */
.sa-modal-backdrop[b-8ts2k0754p] {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.72);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: rdm-fade-b-8ts2k0754p 0.15s ease-out;
}

@keyframes rdm-fade-b-8ts2k0754p { from { opacity: 0; } to { opacity: 1; } }

.sa-modal[b-8ts2k0754p] {
    width: 460px;
    max-width: 100%;
    max-height: 92vh;
    background: linear-gradient(180deg, #1f2a3d 0%, #1a2436 100%);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rdm-pop-b-8ts2k0754p 0.2s cubic-bezier(.2,.8,.3,1);
}

@keyframes rdm-pop-b-8ts2k0754p {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-modal-head[b-8ts2k0754p] {
    padding: 1.15rem 1.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.sa-modal-close[b-8ts2k0754p] {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sa-modal-close:hover[b-8ts2k0754p] { background: rgba(148, 163, 184, 0.12); color: #f1f5f9; }

.sa-modal-body[b-8ts2k0754p] {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
}

/* ----- Tables (mirrors SuperAdmin.razor.css :248-) ----- */
.sa-table-wrapper[b-8ts2k0754p] {
    overflow-x: auto;
    border: 1px solid #1e1e2a;
    border-radius: 8px;
    background: #15151f;
}

.sa-table[b-8ts2k0754p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sa-table th[b-8ts2k0754p] {
    background: #1e1e2a;
    padding: 0.625rem 0.75rem;
    text-align: left;
    color: #71717a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sa-table td[b-8ts2k0754p] {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #1e1e2a;
    color: #d4d4d8;
    white-space: nowrap;
}

.sa-table tbody tr:hover[b-8ts2k0754p] { background: #1a1a24; }
.sa-table .row-inactive[b-8ts2k0754p] { opacity: 0.5; }
.sa-table .cell-name[b-8ts2k0754p] { font-weight: 600; color: #f4f4f5; }
.sa-table .cell-date[b-8ts2k0754p] { color: #71717a; font-family: monospace; }
.sa-table code[b-8ts2k0754p] {
    background: #1e1e2a;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #a5b4fc;
}

/* ----- Forms (mirrors SuperAdmin.razor.css :383-) ----- */
.sa-form-group label[b-8ts2k0754p] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 0.375rem;
}

.sa-form-group[b-8ts2k0754p] { margin-bottom: 1rem; }

.sa-input[b-8ts2k0754p] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: #0a0a0f;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    color: #e4e4e7;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-input:focus[b-8ts2k0754p] { border-color: #6366f1; }

.sa-textarea[b-8ts2k0754p] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* ----- Buttons (mirrors SuperAdmin.razor.css :440-) ----- */
.sa-btn[b-8ts2k0754p] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sa-btn.small[b-8ts2k0754p] { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
.sa-btn.primary[b-8ts2k0754p] { background: #6366f1; color: #fff; border-color: #6366f1; }
.sa-btn.primary:hover[b-8ts2k0754p] { background: #4f46e5; }
.sa-btn.outline[b-8ts2k0754p] { background: transparent; color: #a1a1aa; border-color: #2a2a3a; }
.sa-btn.outline:hover[b-8ts2k0754p] { background: #1e1e2a; color: #e4e4e7; }
.sa-btn.danger[b-8ts2k0754p] { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.sa-btn.danger:hover[b-8ts2k0754p] { background: rgba(239, 68, 68, 0.25); }
.sa-btn:disabled[b-8ts2k0754p] { opacity: 0.5; cursor: not-allowed; }

/* ----- Modal-specific overrides ----- */

.sa-rdm-modal[b-8ts2k0754p] {
    width: min(1100px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.sa-rdm-title[b-8ts2k0754p] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f4f4f5;
}

.sa-rdm-sub[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    color: #71717a;
    font-size: 0.875rem;
}

.sa-rdm-sub code[b-8ts2k0754p] {
    background: #1e1e2a;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: #a5b4fc;
    font-size: 0.8125rem;
}

/* Plan/status pill — small, neutral by default; tab-content tables have
   richer status pills below. */
.sa-rdm-pill[b-8ts2k0754p] {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #f5f3ff;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-pill-neutral[b-8ts2k0754p] {
    background: #374151;
    color: #d1d5db;
}

.sa-rdm-pill-open[b-8ts2k0754p] { background: #1e3a8a; color: #dbeafe; }
.sa-rdm-pill-closed[b-8ts2k0754p] { background: #064e3b; color: #d1fae5; }
.sa-rdm-pill-cancelled[b-8ts2k0754p] { background: #7f1d1d; color: #fecaca; }
.sa-rdm-pill-paid[b-8ts2k0754p] { background: #065f46; color: #d1fae5; }

/* Tabs — horizontal strip below the title. Active tab gets the indigo
   underline so the operator's eye snaps to it on focus. */
.sa-rdm-tabs[b-8ts2k0754p] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #27272a;
    padding: 0 1.5rem;
    background: #0f0f17;
    overflow-x: auto;
}

.sa-rdm-tab[b-8ts2k0754p] {
    background: transparent;
    color: #71717a;
    border: none;
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.sa-rdm-tab:hover[b-8ts2k0754p] {
    color: #d4d4d8;
}

.sa-rdm-tab.active[b-8ts2k0754p] {
    color: #a5b4fc;
    border-bottom-color: #6366f1;
}

.sa-rdm-body[b-8ts2k0754p] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

/* Resumen tab uses a 2-column grid on wider screens; collapses to single
   column under 800px so the modal stays usable on a phone in landscape. */
.sa-rdm-grid-2[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sa-rdm-span-2[b-8ts2k0754p] {
    grid-column: 1 / -1;
}

@media (max-width: 800px) {
    .sa-rdm-grid-2[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-card[b-8ts2k0754p] {
    background: #15151f;
    border: 1px solid #27272a;
    border-radius: 8px;
    padding: 14px 16px;
}

.sa-rdm-card h3[b-8ts2k0754p] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a5b4fc;
    font-weight: 700;
}

.sa-rdm-card-danger[b-8ts2k0754p] {
    border-color: #7f1d1d;
}

.sa-rdm-card-danger h3[b-8ts2k0754p] {
    color: #fca5a5;
}

/* Definition-list layout for label/value pairs in the cards. Two columns
   so eyes scan vertically by label, then horizontally to the value. */
.sa-rdm-dl[b-8ts2k0754p] {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 12px;
    font-size: 0.8125rem;
}

.sa-rdm-dl dt[b-8ts2k0754p] {
    color: #71717a;
    font-weight: 500;
}

.sa-rdm-dl dd[b-8ts2k0754p] {
    margin: 0;
    color: #e4e4e7;
    word-break: break-word;
}

.sa-rdm-verified[b-8ts2k0754p] { color: #22c55e; margin-left: 4px; }
.sa-rdm-unverified[b-8ts2k0754p] { color: #f59e0b; margin-left: 4px; }

.sa-rdm-toggles[b-8ts2k0754p] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sa-rdm-toggle[b-8ts2k0754p] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-toggle.on[b-8ts2k0754p] {
    background: #064e3b;
    color: #6ee7b7;
}

.sa-rdm-toggle.off[b-8ts2k0754p] {
    background: #27272a;
    color: #71717a;
    text-decoration: line-through;
}

.sa-rdm-warning[b-8ts2k0754p] {
    margin-top: 12px;
    background: #7c2d12;
    color: #fed7aa;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.sa-rdm-timeline[b-8ts2k0754p] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-rdm-timeline li[b-8ts2k0754p] {
    padding: 8px 0;
    border-bottom: 1px solid #1f1f29;
    color: #d4d4d8;
    font-size: 0.875rem;
}

.sa-rdm-timeline li:last-child[b-8ts2k0754p] { border-bottom: none; }

.sa-rdm-pending[b-8ts2k0754p] {
    color: #71717a;
    font-style: italic;
}

.sa-rdm-loading[b-8ts2k0754p] {
    text-align: center;
    color: #71717a;
    padding: 40px 0;
    font-size: 0.875rem;
}

.sa-rdm-muted[b-8ts2k0754p] {
    color: #71717a;
    font-size: 0.8125rem;
    margin: 0 0 12px;
}

.sa-rdm-form[b-8ts2k0754p] {
    max-width: 720px;
}

.sa-rdm-bigtext[b-8ts2k0754p] {
    min-height: 180px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
}

.sa-rdm-templates[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #0f0f17;
    border: 1px solid #27272a;
    border-radius: 8px;
}

.sa-rdm-templates-label[b-8ts2k0754p] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    font-weight: 700;
}

.sa-rdm-templates-hint[b-8ts2k0754p] {
    font-size: 0.75rem;
    color: #a5b4fc;
    font-family: monospace;
}

.sa-rdm-actions-grid[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 800px) {
    .sa-rdm-actions-grid[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-row[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-rdm-num[b-8ts2k0754p] {
    width: 80px;
}

/* Recipient confirmation chip — surfaces the email address that will get
   the access message so the operator can eyeball it before clicking. */
.sa-rdm-recipient[b-8ts2k0754p] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #0f0f17;
    border: 1px solid #27272a;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #d4d4d8;
}

.sa-rdm-recipient-label[b-8ts2k0754p] {
    color: #71717a;
    font-weight: 500;
}

.sa-rdm-recipient code[b-8ts2k0754p] {
    background: #1e1e2a;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: #a5b4fc;
    font-size: 0.8125rem;
}

/* ============================================================
   Actividad tab — KPI cards, last-activity chip, sparkline
   ============================================================ */

/* Last-activity chip: green for healthy, amber for stale, red for dead.
   Sits at the top so the operator sees the headline answer first. */
.sa-rdm-last-activity[b-8ts2k0754p] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 16px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.sa-rdm-last-activity.sa-rdm-la-active[b-8ts2k0754p] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.sa-rdm-last-activity.sa-rdm-la-warn[b-8ts2k0754p] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.sa-rdm-last-activity.sa-rdm-la-dead[b-8ts2k0754p] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.sa-rdm-la-label[b-8ts2k0754p] { color: inherit; opacity: 0.7; font-weight: 500; }
.sa-rdm-la-meta[b-8ts2k0754p] { color: inherit; opacity: 0.7; font-weight: 400; }

/* KPI grid — 4 cards on wide, 2 on tablet, 1 on phone. */
.sa-rdm-kpi-grid[b-8ts2k0754p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .sa-rdm-kpi-grid[b-8ts2k0754p] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .sa-rdm-kpi-grid[b-8ts2k0754p] { grid-template-columns: 1fr; }
}

.sa-rdm-kpi[b-8ts2k0754p] {
    background: #15151f;
    border: 1px solid #27272a;
    border-radius: 10px;
    padding: 14px 16px;
    min-height: 100px;
}

.sa-rdm-kpi-label[b-8ts2k0754p] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #71717a;
    font-weight: 700;
    margin-bottom: 6px;
}

.sa-rdm-kpi-value[b-8ts2k0754p] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f4f4f5;
    line-height: 1.1;
}

.sa-rdm-kpi-sub[b-8ts2k0754p] {
    font-size: 0.8125rem;
    color: #a5b4fc;
    margin-top: 2px;
    font-weight: 600;
}

.sa-rdm-kpi-trend[b-8ts2k0754p] {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sa-rdm-kpi-trend span[b-8ts2k0754p] {
    color: #71717a;
    font-weight: 400;
}

.sa-rdm-kpi-trend.up[b-8ts2k0754p] { color: #6ee7b7; }
.sa-rdm-kpi-trend.down[b-8ts2k0754p] { color: #fca5a5; }
.sa-rdm-kpi-trend.flat[b-8ts2k0754p] { color: #71717a; }

/* Sparkline — pure CSS bars, height ~ orders/day. Bars sit on a baseline so
   even zero-order days are visible. Hover = browser-default tooltip via title. */
.sa-rdm-spark[b-8ts2k0754p] {
    background: #15151f;
    border: 1px solid #27272a;
    border-radius: 10px;
    padding: 14px 16px;
}

.sa-rdm-spark-head[b-8ts2k0754p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8125rem;
    color: #d4d4d8;
    font-weight: 600;
    margin-bottom: 10px;
}

.sa-rdm-spark-bars[b-8ts2k0754p] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    padding-bottom: 2px;
    border-bottom: 1px solid #27272a;
}

.sa-rdm-spark-bar[b-8ts2k0754p] {
    flex: 1 1 0;
    min-width: 4px;
    background: linear-gradient(180deg, #6366f1, #4338ca);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
    cursor: help;
}

.sa-rdm-spark-bar:hover[b-8ts2k0754p] { opacity: 0.7; }

.sa-rdm-spark-bar.empty[b-8ts2k0754p] {
    background: #27272a;
}

.sa-rdm-spark-axis[b-8ts2k0754p] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: #71717a;
    margin-top: 6px;
}

.sa-rdm-audit-details[b-8ts2k0754p] {
    color: #71717a;
    font-family: monospace;
    font-size: 0.75rem;
    max-width: 300px;
}

.sa-rdm-toast[b-8ts2k0754p] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: rdmFade-b-8ts2k0754p 0.2s ease;
}

.sa-rdm-toast.success[b-8ts2k0754p] {
    background: linear-gradient(135deg, #059669, #047857);
    color: #d1fae5;
}

.sa-rdm-toast.error[b-8ts2k0754p] {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fee2e2;
}

@keyframes rdmFade-b-8ts2k0754p {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* /Pages/Admin/RrsifAdmin.razor.rz.scp.css */
/* RRSIF Admin Page - Dark Theme */
h2.font-bold[b-nsp25hoo60] {
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Filter section */
.flex.gap-2[b-nsp25hoo60] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
}

.flex.gap-2 > div[b-nsp25hoo60] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.flex.gap-2 label[b-nsp25hoo60] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Form inputs */
input[type="datetime-local"][b-nsp25hoo60],
select[b-nsp25hoo60] {
    padding: 0.625rem 0.875rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.875rem;
    min-width: 160px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="datetime-local"]:focus[b-nsp25hoo60],
select:focus[b-nsp25hoo60] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

select option[b-nsp25hoo60] {
    background: #1e293b;
    color: #e2e8f0;
}

/* Buttons */
.btn[b-nsp25hoo60] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #475569;
    background: #334155;
    color: #f1f5f9;
}

.btn:hover:not(:disabled)[b-nsp25hoo60] {
    background: #475569;
}

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

.btn-ghost[b-nsp25hoo60] {
    background: transparent;
    border: 1px solid #475569;
    color: #94a3b8;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-ghost:hover[b-nsp25hoo60] {
    background: #334155;
    color: #f1f5f9;
}

/* Alert warning */
.alert.alert-warning[b-nsp25hoo60] {
    padding: 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    color: #fbbf24;
    margin-bottom: 1rem;
}

/* Total count */
.text-sm.mb-2[b-nsp25hoo60] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.text-sm.mb-2 b[b-nsp25hoo60] {
    color: #f1f5f9;
    font-weight: 600;
}

/* Table container */
.overflow-auto[b-nsp25hoo60] {
    overflow-x: auto;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
}

/* Table */
.table[b-nsp25hoo60] {
    width: 100%;
    border-collapse: collapse;
}

.table th[b-nsp25hoo60] {
    text-align: left;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #0f172a;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

.table td[b-nsp25hoo60] {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
    white-space: nowrap;
}

.table tbody tr:hover[b-nsp25hoo60] {
    background: rgba(51, 65, 85, 0.5);
}

.table tbody tr:last-child td[b-nsp25hoo60] {
    border-bottom: none;
}

/* Chips/badges */
.chip[b-nsp25hoo60] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #334155;
    color: #94a3b8;
}

.chip.ok[b-nsp25hoo60] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.chip.bad[b-nsp25hoo60] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Details/summary for QR */
details[b-nsp25hoo60] {
    cursor: pointer;
}

details summary[b-nsp25hoo60] {
    color: #3b82f6;
    font-size: 0.8125rem;
}

details summary:hover[b-nsp25hoo60] {
    text-decoration: underline;
}

details pre[b-nsp25hoo60] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: #0f172a;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: pre-wrap;
    word-break: break-all;
    max-width: 300px;
}

/* Loading state */
div:only-child:contains("Cargando")[b-nsp25hoo60] {
    color: #94a3b8;
}

/* Preview modal */
.font-bold[b-nsp25hoo60] {
    font-weight: 700;
    color: #1e293b;
}

/* Responsive */
@media (max-width: 768px) {
    .flex.gap-2[b-nsp25hoo60] {
        flex-direction: column;
        align-items: stretch;
    }

    .flex.gap-2 > div[b-nsp25hoo60] {
        width: 100%;
    }

    input[type="datetime-local"][b-nsp25hoo60],
    select[b-nsp25hoo60] {
        width: 100%;
    }

    .table th[b-nsp25hoo60],
    .table td[b-nsp25hoo60] {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }
}
/* /Pages/Admin/Soporte.razor.rz.scp.css */
/* Mesero customer support portal — admin-scoped page. Lives in a
   .razor.css file (Blazor isolation) so class names DON'T leak
   globally even though many are short — see admin-pages.css note in
   memory. Modal-related selectors are namespaced with `-soporte` to
   stay clear of the global `.modal` / `.modal-backdrop` rules. */

.soporte-page[b-fgm2fup8wy] {
    padding: 20px 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
    color: #0f172a;
    font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

.page-header[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}
.page-header h1[b-fgm2fup8wy] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-header .subtitle[b-fgm2fup8wy] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .92rem;
}
.header-actions .btn.primary[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.header-actions .btn.primary:hover[b-fgm2fup8wy] { transform: translateY(-1px); }

.filters[b-fgm2fup8wy] {
    display: inline-flex;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    margin: 0 0 14px;
}
.filters button[b-fgm2fup8wy] {
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 7px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filters button.active[b-fgm2fup8wy] {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.filters button span[b-fgm2fup8wy] {
    background: #cbd5e1;
    color: #475569;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}
.filters button.active span[b-fgm2fup8wy] { background: #dbeafe; color: #1d4ed8; }

.loading[b-fgm2fup8wy] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}
.spinner[b-fgm2fup8wy] {
    width: 28px; height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: soporte-spin-b-fgm2fup8wy .8s linear infinite;
}
@keyframes soporte-spin-b-fgm2fup8wy { to { transform: rotate(360deg); } }

.empty-state[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 56px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
}
.empty-icon[b-fgm2fup8wy] { font-size: 2.4rem; margin-bottom: 8px; }
.empty-state h2[b-fgm2fup8wy] { margin: 0 0 8px; font-size: 1.2rem; }
.empty-state p[b-fgm2fup8wy] { margin: 0 0 18px; color: #64748b; }
.empty-state .btn.primary[b-fgm2fup8wy] {
    padding: 11px 22px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.layout[b-fgm2fup8wy] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    min-height: 540px;
}

.ticket-list[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    max-height: 70vh;
    overflow-y: auto;
}
.ticket-row[b-fgm2fup8wy] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .12s;
}
.ticket-row:hover[b-fgm2fup8wy] { background: #f8fafc; }
.ticket-row.selected[b-fgm2fup8wy] { background: #eff6ff; border-left: 3px solid #2563eb; padding-left: 13px; }
.ticket-row.closed .ticket-subject[b-fgm2fup8wy] { color: #94a3b8; }
.ticket-row-top[b-fgm2fup8wy] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.ticket-id[b-fgm2fup8wy] {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: .72rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 5px;
    font-weight: 700;
}
.ticket-status[b-fgm2fup8wy] {
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ticket-status.open[b-fgm2fup8wy]    { background: #dcfce7; color: #166534; }
.ticket-status.pending[b-fgm2fup8wy] { background: #fef3c7; color: #854d0e; }
.ticket-status.closed[b-fgm2fup8wy]  { background: #f1f5f9; color: #475569; }
.ticket-unread[b-fgm2fup8wy] {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
}
.ticket-subject[b-fgm2fup8wy] {
    font-weight: 600;
    color: #0f172a;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-preview[b-fgm2fup8wy] {
    color: #64748b;
    font-size: .8rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ticket-meta[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    font-size: .72rem;
    margin-top: 6px;
}
.ticket-csat.up[b-fgm2fup8wy]   { color: #16a34a; }
.ticket-csat.down[b-fgm2fup8wy] { color: #dc2626; }

.thread[b-fgm2fup8wy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    min-height: 540px;
}
.thread-empty[b-fgm2fup8wy] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: .95rem;
}
.thread-header[b-fgm2fup8wy] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}
.thread-title[b-fgm2fup8wy] {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 4px;
}
.thread-sub[b-fgm2fup8wy] {
    color: #64748b;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.thread-sub .dot[b-fgm2fup8wy] { color: #cbd5e1; }
.thread-msgs[b-fgm2fup8wy] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.msg[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.msg.theirs[b-fgm2fup8wy] { align-self: flex-start; }
.msg.mine[b-fgm2fup8wy]   { align-self: flex-end; }
.msg.system[b-fgm2fup8wy] { align-self: center; max-width: 90%; }
.msg-author[b-fgm2fup8wy] {
    color: #64748b;
    font-size: .72rem;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: .01em;
}
.msg.mine .msg-author[b-fgm2fup8wy] { text-align: right; }
.msg-bubble[b-fgm2fup8wy] {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 1px rgba(15,23,42,.05);
    border: 1px solid #e2e8f0;
    line-height: 1.5;
}
.msg.mine .msg-bubble[b-fgm2fup8wy] {
    background: #2563eb;
    color: #fff;
    border-color: transparent;
}
.msg.system .msg-bubble[b-fgm2fup8wy] {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: .85rem;
    text-align: center;
}
.msg-body[b-fgm2fup8wy] {
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-atts[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.msg-att[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(15,23,42,.04);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: .8rem;
}
.msg.mine .msg-att[b-fgm2fup8wy] { background: rgba(255,255,255,.18); }
.msg-att-name[b-fgm2fup8wy] { font-weight: 600; }
.msg-att-size[b-fgm2fup8wy] { color: #94a3b8; font-size: .72rem; }
.msg.mine .msg-att-size[b-fgm2fup8wy] { color: rgba(255,255,255,.7); }
.msg-time[b-fgm2fup8wy] {
    color: #94a3b8;
    font-size: .68rem;
    margin-top: 4px;
    text-align: right;
}
.msg.mine .msg-time[b-fgm2fup8wy] { color: rgba(255,255,255,.7); }

.reply-box[b-fgm2fup8wy] {
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reply-input[b-fgm2fup8wy] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    resize: vertical;
    outline: none;
}
.reply-input:focus[b-fgm2fup8wy] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.reply-actions[b-fgm2fup8wy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.reply-hint[b-fgm2fup8wy] { color: #94a3b8; font-size: .76rem; }
.reply-actions .btn.primary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.reply-actions .btn.primary:disabled[b-fgm2fup8wy] { opacity: .5; cursor: not-allowed; }

/* ===== New-ticket composer modal ===== */
/* Suffixed with -soporte to dodge the global .modal-backdrop / .modal
   selectors that exist elsewhere in the app (CLAUDE.md warns about
   them). Scoped via .razor.css too as a belt-and-suspenders measure. */
.modal-backdrop-soporte[b-fgm2fup8wy] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(2px);
    z-index: 200;
}
.modal-soporte[b-fgm2fup8wy] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    width: 560px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}
.modal-soporte header[b-fgm2fup8wy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid #e2e8f0;
}
.modal-soporte h2[b-fgm2fup8wy] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.modal-close-soporte[b-fgm2fup8wy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.modal-close-soporte:hover[b-fgm2fup8wy] { color: #0f172a; }
.modal-body-soporte[b-fgm2fup8wy] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.modal-body-soporte label[b-fgm2fup8wy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
}
.modal-body-soporte input[b-fgm2fup8wy],
.modal-body-soporte textarea[b-fgm2fup8wy] {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
}
.modal-body-soporte input:focus[b-fgm2fup8wy],
.modal-body-soporte textarea:focus[b-fgm2fup8wy] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.modal-soporte footer[b-fgm2fup8wy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #e2e8f0;
}
.modal-soporte footer .btn.primary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.modal-soporte footer .btn.secondary[b-fgm2fup8wy] {
    padding: 9px 18px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}
.modal-soporte footer .btn:disabled[b-fgm2fup8wy] { opacity: .55; cursor: not-allowed; }

.error[b-fgm2fup8wy] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .85rem;
}

@media (max-width: 900px) {
    .layout[b-fgm2fup8wy] { grid-template-columns: 1fr; }
    .ticket-list[b-fgm2fup8wy] { max-height: 280px; }
    .thread[b-fgm2fup8wy] { min-height: 420px; }
    .modal-soporte[b-fgm2fup8wy] { width: calc(100vw - 24px); }
}

/* ============================================================
   Dark theme — admin runs in dark mode, but this page was
   light-only, so the ticket list, thread panel, message area
   and "Nueva consulta" modal rendered white slabs inside the
   dark admin shell. Scoped .razor.css → only this page is
   affected. Palette matches the admin dark shell.
   ============================================================ */
:root[data-theme="dark"] .soporte-page[b-fgm2fup8wy] { color: #e6edf3; }

:root[data-theme="dark"] .filters[b-fgm2fup8wy] { background: #161b22; }
:root[data-theme="dark"] .filters button[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .filters button.active[b-fgm2fup8wy] { background: #30363d; color: #e6edf3; }
:root[data-theme="dark"] .filters button span[b-fgm2fup8wy] { background: #30363d; color: #c9d1d9; }
:root[data-theme="dark"] .filters button.active span[b-fgm2fup8wy] { background: #1f6feb; color: #fff; }

:root[data-theme="dark"] .empty-state[b-fgm2fup8wy],
:root[data-theme="dark"] .ticket-list[b-fgm2fup8wy],
:root[data-theme="dark"] .thread[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-soporte[b-fgm2fup8wy] {
    background: #161b22;
    border-color: #30363d;
}
:root[data-theme="dark"] .empty-state p[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .ticket-row[b-fgm2fup8wy] { border-bottom-color: #21262d; }
:root[data-theme="dark"] .ticket-row:hover[b-fgm2fup8wy] { background: #1c2128; }
:root[data-theme="dark"] .ticket-row.selected[b-fgm2fup8wy] { background: #1f2d44; border-left-color: #1f6feb; }

:root[data-theme="dark"] .thread-header[b-fgm2fup8wy],
:root[data-theme="dark"] .reply-box[b-fgm2fup8wy] { background: #1c2128; border-color: #21262d; }
:root[data-theme="dark"] .thread-msgs[b-fgm2fup8wy] { background: #0d1117; }

:root[data-theme="dark"] .msg-bubble[b-fgm2fup8wy] {
    background: #21262d;
    color: #e6edf3;
    border-color: #30363d;
}
/* .msg.mine keeps its blue bubble — already readable on dark. */
:root[data-theme="dark"] .msg.system .msg-bubble[b-fgm2fup8wy] { border-color: #30363d; color: #9aa7b4; }

:root[data-theme="dark"] .reply-input[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-body-soporte input[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-body-soporte textarea[b-fgm2fup8wy] {
    background: #0d1117;
    color: #e6edf3;
    border-color: #30363d;
}
:root[data-theme="dark"] .modal-soporte header[b-fgm2fup8wy],
:root[data-theme="dark"] .modal-soporte footer[b-fgm2fup8wy] { border-color: #30363d; }
:root[data-theme="dark"] .modal-body-soporte label[b-fgm2fup8wy] { color: #9aa7b4; }
:root[data-theme="dark"] .modal-soporte footer .btn.secondary[b-fgm2fup8wy] {
    background: #21262d; color: #c9d1d9; border-color: #30363d;
}
/* /Pages/Admin/StaffDiscount.razor.rz.scp.css */
/* Scoped (Blazor) dark theme for the staff-discount admin page. All classes
   are sd-* prefixed so nothing leaks globally even though this is a .razor.css
   (which is already isolated). Palette mirrors OnlineSettings. */

.sd-page[b-xyjhcq0hu1] { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }

.sd-header[b-xyjhcq0hu1] { padding: 20px 0 14px; }
.sd-header h1[b-xyjhcq0hu1] { margin: 0; font-size: 1.5rem; font-weight: 700; color: #f1f5f9; }
.sd-sub[b-xyjhcq0hu1] { display: block; margin-top: 6px; font-size: 0.85rem; color: #94a3b8; max-width: 660px; line-height: 1.45; }

.sd-msg[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.875rem; }
.sd-msg-ok[b-xyjhcq0hu1] { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.sd-msg-err[b-xyjhcq0hu1] { background: rgba(220,38,38,0.15); color: #f87171; border: 1px solid rgba(220,38,38,0.3); }
.sd-dismiss[b-xyjhcq0hu1] { background: none; border: none; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .7; padding: 0 4px; }
.sd-dismiss:hover[b-xyjhcq0hu1] { opacity: 1; }

.sd-loading[b-xyjhcq0hu1], .sd-empty[b-xyjhcq0hu1] { text-align: center; color: #94a3b8; font-size: .9rem; }
.sd-loading[b-xyjhcq0hu1] { padding: 48px 20px; }
.sd-empty[b-xyjhcq0hu1] { padding: 18px; }

.sd-card[b-xyjhcq0hu1] { background: #1e293b; border: 1px solid #334155; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.sd-card-head[b-xyjhcq0hu1] { padding: 14px 20px; border-bottom: 1px solid #334155; }
.sd-card-head h2[b-xyjhcq0hu1] { margin: 0; font-size: 1rem; font-weight: 600; color: #e2e8f0; }
.sd-card-head--row[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-month[b-xyjhcq0hu1] { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #94a3b8; }
.sd-month .sd-input[b-xyjhcq0hu1] { width: 150px; text-align: left; }
.sd-card-body[b-xyjhcq0hu1] { padding: 8px 20px 16px; }

.sd-row[b-xyjhcq0hu1] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #283449; }
.sd-row:last-of-type[b-xyjhcq0hu1] { border-bottom: none; }
.sd-row--default .sd-row-name[b-xyjhcq0hu1] { font-weight: 600; }
.sd-row-name[b-xyjhcq0hu1] { color: #e2e8f0; font-size: .9rem; }
.sd-row-name small[b-xyjhcq0hu1] { color: #64748b; font-weight: 400; }

.sd-pct[b-xyjhcq0hu1] { display: inline-flex; align-items: center; gap: 6px; }
.sd-unit[b-xyjhcq0hu1] { color: #94a3b8; font-size: .85rem; }
.sd-input[b-xyjhcq0hu1] { width: 90px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; color: #e2e8f0; font-size: .9rem; text-align: right; }
.sd-input:focus[b-xyjhcq0hu1] { outline: none; border-color: #6366f1; }
.sd-input:disabled[b-xyjhcq0hu1] { opacity: .45; cursor: not-allowed; }
.sd-input--budget[b-xyjhcq0hu1] { width: 120px; text-align: left; }

.sd-check[b-xyjhcq0hu1] { width: 18px; height: 18px; accent-color: #6366f1; cursor: pointer; }

.sd-actions[b-xyjhcq0hu1] { display: flex; justify-content: flex-end; padding-top: 14px; }
.sd-btn[b-xyjhcq0hu1] { background: #6366f1; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: .875rem; font-weight: 600; cursor: pointer; }
.sd-btn:hover[b-xyjhcq0hu1] { background: #4f46e5; }
.sd-btn:disabled[b-xyjhcq0hu1] { opacity: .55; cursor: not-allowed; }
.sd-btn--sm[b-xyjhcq0hu1] { padding: 6px 12px; font-size: .8rem; }

.sd-emp-head[b-xyjhcq0hu1], .sd-emp-row[b-xyjhcq0hu1] { display: grid; grid-template-columns: 2fr 0.55fr 1.05fr 0.8fr 1.2fr auto; align-items: center; gap: 10px; }
.sd-input--perday[b-xyjhcq0hu1] { width: 70px; text-align: center; }
.sd-emp-head[b-xyjhcq0hu1] { padding: 8px 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; border-bottom: 1px solid #334155; }
.sd-emp-row[b-xyjhcq0hu1] { padding: 12px 0; border-bottom: 1px solid #283449; }
.sd-emp-row:last-of-type[b-xyjhcq0hu1] { border-bottom: none; }
.sd-emp-name[b-xyjhcq0hu1] { color: #e2e8f0; font-size: .9rem; display: flex; flex-direction: column; gap: 3px; }
.sd-tags[b-xyjhcq0hu1] { display: inline-flex; gap: 8px; }
.sd-warn[b-xyjhcq0hu1] { font-size: .7rem; color: #fbbf24; }
.sd-muted[b-xyjhcq0hu1] { font-size: .7rem; color: #64748b; }
.sd-usage[b-xyjhcq0hu1] { color: #cbd5e1; font-size: .85rem; }
.sd-usage small[b-xyjhcq0hu1] { color: #64748b; }

@media (max-width: 640px) {
    .sd-emp-head[b-xyjhcq0hu1] { display: none; }
    .sd-emp-row[b-xyjhcq0hu1] { grid-template-columns: 1fr auto; row-gap: 6px; }
    .sd-input--budget[b-xyjhcq0hu1] { width: 100px; }
}

/* iPhone (~390px) fixes for "Tarifas por categoría": the rate inputs were cut
   off past the right edge because flex/grid items default to min-width:auto, so
   the input's intrinsic width overflowed the row. Constrain inputs + allow the
   row name to shrink + wrap header text. Additive, scoped, ≤600px only. */
@media (max-width: 600px) {
    /* Never let the page chrome exceed the viewport */
    .sd-page[b-xyjhcq0hu1] { padding-left: 12px; padding-right: 12px; }
    .sd-card[b-xyjhcq0hu1] { max-width: 100%; }

    /* Header description must wrap, not clip on the right */
    .sd-sub[b-xyjhcq0hu1] { max-width: 100%; overflow-wrap: anywhere; }

    /* Category rate rows: keep label | input on one row, let both shrink.
       min-width:0 is the load-bearing fix — without it the input's intrinsic
       width forces the row wider than the viewport. */
    .sd-row[b-xyjhcq0hu1] { gap: 10px; }
    .sd-row-name[b-xyjhcq0hu1] { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
    .sd-pct[b-xyjhcq0hu1] { min-width: 0; flex: 0 1 auto; }

    /* Constrain the rate input so it can never overflow its column */
    .sd-input[b-xyjhcq0hu1] { max-width: 100%; box-sizing: border-box; }
    .sd-row .sd-input[b-xyjhcq0hu1] { width: 88px; }
}
/* /Pages/Admin/StockTransfers.razor.rz.scp.css */
.transfers-container[b-vuau2u44un] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.page-header h1[b-vuau2u44un] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.subtitle[b-vuau2u44un] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
}

.header-actions[b-vuau2u44un] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-vuau2u44un] {
    background: #3b82f6;
    border: none;
    color: white;
}

.btn.primary:hover[b-vuau2u44un] {
    background: #2563eb;
}

.btn.outline[b-vuau2u44un] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

.btn.outline:hover[b-vuau2u44un] {
    background: #334155;
}

/* Status Tabs */
.status-tabs[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: #1e293b;
    padding: 0.5rem;
    border-radius: 10px;
    overflow-x: auto;
}

.tab[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.tab:hover[b-vuau2u44un] {
    background: #334155;
}

.tab.active[b-vuau2u44un] {
    background: #3b82f6;
    color: white;
}

.tab-badge[b-vuau2u44un] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-weight: 600;
}

.tab-badge.draft[b-vuau2u44un] {
    background: #fef3c7;
    color: #d97706;
}

.tab-badge.sent[b-vuau2u44un] {
    background: #dbeafe;
    color: #2563eb;
}

.tab.active .tab-badge[b-vuau2u44un] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Transfers List */
.transfers-list[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transfer-card[b-vuau2u44un] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 4px solid transparent;
    transition: box-shadow 0.2s;
}

.transfer-card:hover[b-vuau2u44un] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.transfer-card.draft[b-vuau2u44un] {
    border-left-color: #fbbf24;
}

.transfer-card.sent[b-vuau2u44un] {
    border-left-color: #3b82f6;
}

.transfer-card.partial[b-vuau2u44un] {
    border-left-color: #8b5cf6;
}

.transfer-card.received[b-vuau2u44un] {
    border-left-color: #10b981;
}

.transfer-card.cancelled[b-vuau2u44un] {
    border-left-color: #ef4444;
    opacity: 0.7;
}

.transfer-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.transfer-number[b-vuau2u44un] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.status-badge[b-vuau2u44un] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge.draft[b-vuau2u44un] {
    background: #fef3c7;
    color: #d97706;
}

.status-badge.sent[b-vuau2u44un] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.partial[b-vuau2u44un] {
    background: #ede9fe;
    color: #7c3aed;
}

.status-badge.received[b-vuau2u44un] {
    background: #d1fae5;
    color: #059669;
}

.status-badge.cancelled[b-vuau2u44un] {
    background: #fee2e2;
    color: #dc2626;
}

/* Transfer Route */
.transfer-route[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #0f172a;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.location[b-vuau2u44un] {
    flex: 1;
}

.location-label[b-vuau2u44un] {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.location-name[b-vuau2u44un] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #e2e8f0;
}

.route-arrow[b-vuau2u44un] {
    color: #64748b;
}

/* Transfer Meta */
.transfer-meta[b-vuau2u44un] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.meta-item[b-vuau2u44un] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* Transfer Actions */
.transfer-actions[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.btn-action[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #334155;
    background: #1e293b;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover[b-vuau2u44un] {
    background: #334155;
}

.btn-action.primary[b-vuau2u44un] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.btn-action.primary:hover[b-vuau2u44un] {
    background: #2563eb;
}

/* Empty & Loading States */
.empty-state[b-vuau2u44un], .loading-state[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #1e293b;
    border-radius: 12px;
}

.empty-state svg[b-vuau2u44un] {
    color: #475569;
    margin-bottom: 1rem;
}

.empty-state h2[b-vuau2u44un] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-vuau2u44un] {
    color: #94a3b8;
    margin: 0 0 1.5rem 0;
}

.spinner[b-vuau2u44un] {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-vuau2u44un 1s linear infinite;
}

.spinner-small[b-vuau2u44un] {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-vuau2u44un 1s linear infinite;
}

@keyframes spin-b-vuau2u44un {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-vuau2u44un] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal[b-vuau2u44un] {
    background: #1e293b;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal.large[b-vuau2u44un] {
    max-width: 700px;
}

.modal-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid #334155;
}

.modal-header h2[b-vuau2u44un] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.close-btn[b-vuau2u44un] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:hover[b-vuau2u44un] {
    background: #475569;
    color: #f1f5f9;
}

.close-btn:active[b-vuau2u44un] {
    transform: scale(0.95);
}

.modal-body[b-vuau2u44un] {
    padding: 1.25rem;
}

.form-group[b-vuau2u44un] {
    margin-bottom: 1rem;
}

.form-group label[b-vuau2u44un] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.form-input[b-vuau2u44un], .form-select[b-vuau2u44un] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: #0f172a;
    color: #f1f5f9;
}

.form-input:focus[b-vuau2u44un], .form-select:focus[b-vuau2u44un] {
    outline: none;
    border-color: #3b82f6;
}

.form-select[b-vuau2u44un] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option[b-vuau2u44un] {
    background: #1e293b;
    color: #e2e8f0;
}

.form-row[b-vuau2u44un] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Transfer Items Section */
.transfer-items-section[b-vuau2u44un] {
    background: #0f172a;
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.section-header[b-vuau2u44un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h3[b-vuau2u44un] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.btn-add-item[b-vuau2u44un] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #3b82f6;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

.transfer-lines[b-vuau2u44un] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.transfer-line[b-vuau2u44un] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.item-select[b-vuau2u44un] {
    flex: 1;
}

.qty-input[b-vuau2u44un] {
    width: 100px;
}

.btn-remove[b-vuau2u44un] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(220, 38, 38, 0.2);
    border-radius: 8px;
    color: #f87171;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-remove:active[b-vuau2u44un] {
    transform: scale(0.95);
}

.no-items[b-vuau2u44un] {
    text-align: center;
    padding: 2rem;
    color: #64748b;
}

.modal-footer[b-vuau2u44un] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid #334155;
}

/* Responsive */
@media (max-width: 768px) {
    .transfers-container[b-vuau2u44un] {
        padding: 1rem;
    }

    .page-header[b-vuau2u44un] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-vuau2u44un] {
        flex-direction: column;
    }

    .transfer-route[b-vuau2u44un] {
        flex-direction: column;
        text-align: center;
    }

    .route-arrow[b-vuau2u44un] {
        transform: rotate(90deg);
    }

    .form-row[b-vuau2u44un] {
        grid-template-columns: 1fr;
    }

    .transfer-line[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .item-select[b-vuau2u44un] {
        width: 100%;
    }
}

/* Phone (≤600px) — additive overflow fixes, never change desktop/base */
@media (max-width: 600px) {
    .transfers-container[b-vuau2u44un] {
        padding: 0.875rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header title + buttons wrap; buttons go full-width and stack */
    .page-header[b-vuau2u44un] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .header-left[b-vuau2u44un] {
        min-width: 0;
    }

    .header-actions[b-vuau2u44un] {
        width: 100%;
    }

    .header-actions .btn[b-vuau2u44un] {
        width: 100%;
    }

    /* Status tabs: horizontal scroll, chips never shrink */
    .status-tabs[b-vuau2u44un] {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .status-tabs .tab[b-vuau2u44un] {
        flex: 0 0 auto;
    }

    /* Transfer cards */
    .transfer-card[b-vuau2u44un] {
        padding: 1rem;
    }

    .transfer-header[b-vuau2u44un] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .transfer-meta[b-vuau2u44un] {
        gap: 0.75rem 1rem;
    }

    /* Action row wraps; each button can fill the row */
    .transfer-actions[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .transfer-actions .btn-action[b-vuau2u44un] {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Modal create form: inputs fit, qty no longer fixed-width */
    .qty-input[b-vuau2u44un] {
        width: 100%;
    }

    .modal-footer[b-vuau2u44un] {
        flex-wrap: wrap;
    }

    .modal-footer .btn[b-vuau2u44un] {
        flex: 1 1 auto;
    }
}

/* /Pages/Admin/SuperAdmin.razor.rz.scp.css */
/* ===== Login ===== */
.sa-login-overlay[b-vxypod8rd1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    z-index: 9999;
}

.sa-login-card[b-vxypod8rd1] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    width: 360px;
    text-align: center;
}

.sa-login-logo[b-vxypod8rd1] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 1.5rem;
}

.sa-login-card h2[b-vxypod8rd1] {
    color: #e4e4e7;
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.sa-login-hint[b-vxypod8rd1] {
    color: #71717a;
    font-size: 0.875rem;
    margin: 0 0 2rem;
}

.sa-pin-group[b-vxypod8rd1] {
    margin-bottom: 1.5rem;
}

.sa-pin-input[b-vxypod8rd1] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: #0a0a0f;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    color: #e4e4e7;
    font-size: 1.125rem;
    text-align: center;
    letter-spacing: 0.25em;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-pin-input:focus[b-vxypod8rd1] {
    border-color: #6366f1;
}

/* ===== Layout ===== */
.sa-layout[b-vxypod8rd1] {
    min-height: 100vh;
    background: #0a0a0f;
    color: #e4e4e7;
}

.sa-topbar[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: #16161e;
    border-bottom: 1px solid #2a2a3a;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sa-topbar-left[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sa-logo[b-vxypod8rd1] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

.sa-topbar h1[b-vxypod8rd1] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #e4e4e7;
}

/* ===== Tabs ===== */
.sa-tabs[b-vxypod8rd1] {
    display: flex;
    gap: 0;
    padding: 0 1.5rem;
    background: #16161e;
    border-bottom: 1px solid #2a2a3a;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sa-tab[b-vxypod8rd1] {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #71717a;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.sa-tab:hover[b-vxypod8rd1] {
    color: #a1a1aa;
}

.sa-tab.active[b-vxypod8rd1] {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

/* ===== Content ===== */
.sa-content[b-vxypod8rd1] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.sa-pin-warning[b-vxypod8rd1] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fecaca;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    text-align: center;
}

.sa-pin-warning code[b-vxypod8rd1] {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.sa-linklike[b-vxypod8rd1] {
    background: none;
    border: none;
    color: #fca5a5;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.sa-linklike:hover[b-vxypod8rd1] {
    color: #fff;
}

/* ===== Stats Grid ===== */
.sa-stats-grid[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.sa-stats-grid.cols-2[b-vxypod8rd1] {
    grid-template-columns: repeat(2, 1fr);
}

.sa-stat-card[b-vxypod8rd1] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 1.25rem;
}

.sa-stat-card.large[b-vxypod8rd1] {
    padding: 1.5rem;
}

.sa-stat-card.accent-blue[b-vxypod8rd1] { border-left: 3px solid #3b82f6; }
.sa-stat-card.accent-green[b-vxypod8rd1] { border-left: 3px solid #22c55e; }
.sa-stat-card.accent-purple[b-vxypod8rd1] { border-left: 3px solid #8b5cf6; }
.sa-stat-card.accent-orange[b-vxypod8rd1] { border-left: 3px solid #f59e0b; }

.sa-stat-value[b-vxypod8rd1] {
    font-size: 2rem;
    font-weight: 700;
    color: #f4f4f5;
    line-height: 1.1;
}

.sa-stat-label[b-vxypod8rd1] {
    font-size: 0.8125rem;
    color: #71717a;
    margin-top: 0.25rem;
}

.sa-stat-sub[b-vxypod8rd1] {
    font-size: 0.75rem;
    color: #52525b;
    margin-top: 0.25rem;
}

/* ===== Section Header ===== */
.sa-section-header[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sa-section-header h3[b-vxypod8rd1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e4e4e7;
}

.sa-section-header-actions[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "Bloqueados en setup" filter chip — three states:
     is-zero  — muted grey, "no candidates right now"
     has-some — amber accent, draws the eye
     active   — filled amber, filter is on
   Click to toggle the filter; the count badge updates live. */
.sa-stuck-chip[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    min-height: 38px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #2a2a3a;
    background: #15151f;
    color: #71717a;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sa-stuck-chip:hover[b-vxypod8rd1] {
    border-color: #3f3f4a;
    color: #d4d4d8;
}

.sa-stuck-chip.has-some[b-vxypod8rd1] {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fcd34d;
}

.sa-stuck-chip.has-some:hover[b-vxypod8rd1] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.7);
}

.sa-stuck-chip.active[b-vxypod8rd1] {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fcd34d;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.sa-stuck-chip-icon[b-vxypod8rd1] {
    font-size: 0.875rem;
    line-height: 1;
}

.sa-stuck-chip-count[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #27272a;
    color: #a1a1aa;
    font-size: 0.75rem;
    font-weight: 700;
}

.sa-stuck-chip.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: rgba(245, 158, 11, 0.3);
    color: #fef3c7;
}

/* Per-row stuck badge — sits next to the restaurant name so even with the
   filter off, the operator can spot which signups need a nudge. */
.sa-table .sa-stuck-badge[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: help;
    vertical-align: middle;
}

/* "Configurados sin uso" colorway — blue (calmer signal: not broken, just
   needs a value/conviction nudge vs. amber for "broken setup"). */
.sa-stuck-chip.variant-inactive.has-some[b-vxypod8rd1] {
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
}

.sa-stuck-chip.variant-inactive.has-some:hover[b-vxypod8rd1] {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.7);
}

.sa-stuck-chip.variant-inactive.active[b-vxypod8rd1] {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.7);
    color: #93c5fd;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
}

.sa-stuck-chip.variant-inactive.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-inactive.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: rgba(96, 165, 250, 0.3);
    color: #dbeafe;
}

.sa-table .sa-stuck-badge.variant-inactive[b-vxypod8rd1] {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}

/* "Trial expira pronto" colorway — pink/rose, time-sensitive urgency
   without the "alarm red" baggage. */
.sa-stuck-chip.variant-trial.has-some[b-vxypod8rd1] {
    border-color: rgba(244, 114, 182, 0.45);
    color: #f9a8d4;
}

.sa-stuck-chip.variant-trial.has-some:hover[b-vxypod8rd1] {
    background: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.7);
}

.sa-stuck-chip.variant-trial.active[b-vxypod8rd1] {
    background: rgba(244, 114, 182, 0.18);
    border-color: rgba(244, 114, 182, 0.7);
    color: #f9a8d4;
    box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.3);
}

.sa-stuck-chip.variant-trial.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-trial.active .sa-stuck-chip-count[b-vxypod8rd1] {
    background: rgba(244, 114, 182, 0.3);
    color: #fce7f3;
}

.sa-table .sa-stuck-badge.variant-trial[b-vxypod8rd1] {
    background: rgba(244, 114, 182, 0.18);
    border-color: rgba(244, 114, 182, 0.4);
    color: #f9a8d4;
}

/* Last-contacted chip — sits next to the segment badge to flag "you already
   emailed this one." Three recency tiers so the operator's eye can prioritize:
     recent (≤7d): saturated, "don't re-send unless you mean to"
     warm   (≤30d): muted, "okay to re-send if relevant"
     stale  (>30d): minimal, "fair game, just historical context" */
.sa-table .sa-contacted-chip[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.3;
    font-weight: 600;
    cursor: help;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sa-table .sa-contacted-chip.recent[b-vxypod8rd1] {
    background: rgba(132, 204, 22, 0.18);
    border-color: rgba(132, 204, 22, 0.4);
    color: #bef264;
}

.sa-table .sa-contacted-chip.warm[b-vxypod8rd1] {
    background: rgba(132, 204, 22, 0.08);
    border-color: rgba(132, 204, 22, 0.22);
    color: #84cc16;
}

.sa-table .sa-contacted-chip.stale[b-vxypod8rd1] {
    background: transparent;
    border-color: #2a2a3a;
    color: #71717a;
}

/* "Heavy" modifier — applied at 3+ sends. Slight tint shift toward amber/red
   regardless of recency tier so the operator's eye catches "I've nudged this
   one too many times". Pairs additively with .recent/.warm/.stale. */
.sa-table .sa-contacted-chip.heavy[b-vxypod8rd1] {
    background: rgba(251, 113, 133, 0.18);
    border-color: rgba(251, 113, 133, 0.45);
    color: #fda4af;
    font-weight: 700;
}

/* Clear-all-filters link — only visible when AnyFilterOn. Lower visual
   weight than the chips themselves (it's a meta-action) but still
   clickable-looking so the operator knows the filter can be lifted. */
.sa-clear-filters[b-vxypod8rd1] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 0.8125rem;
    color: #a1a1aa;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.sa-clear-filters:hover[b-vxypod8rd1] {
    color: #f4f4f5;
    background: rgba(148, 163, 184, 0.1);
}

/* ===== Table ===== */
.sa-table-wrapper[b-vxypod8rd1] {
    overflow-x: auto;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.sa-table[b-vxypod8rd1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sa-table th[b-vxypod8rd1] {
    background: #1e1e2a;
    padding: 0.625rem 0.75rem;
    text-align: left;
    color: #71717a;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.sa-table td[b-vxypod8rd1] {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid #1e1e2a;
    color: #d4d4d8;
    white-space: nowrap;
}

.sa-table tbody tr:hover[b-vxypod8rd1] {
    background: #1a1a24;
}

/* Sortable column header — same look as the static <th>, but a hand cursor
   and a hover tint so it's obvious you can click. The active column gets a
   subtle blue tint so the operator can spot the current sort key without
   reading the arrow indicator. */
.sa-table .sa-th-sortable[b-vxypod8rd1] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sa-table .sa-th-sortable:hover[b-vxypod8rd1] {
    background: #2a2a3a;
    color: #d4d4d8;
}

.sa-table .sa-th-sortable.active[b-vxypod8rd1] {
    color: #a5b4fc;
    background: #1e1e30;
}

.sa-table .row-inactive[b-vxypod8rd1] {
    opacity: 0.5;
}

.sa-table .cell-name[b-vxypod8rd1] {
    font-weight: 600;
    color: #f4f4f5;
}

/* Clickable restaurant-name button — looks like a link, opens the detail
   modal. Saves a horizontal scroll for ops who want to drill into a row
   without finding the Acciones column at the far right of the table. */
.sa-table .sa-rest-name-link[b-vxypod8rd1] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dashed rgba(165, 180, 252, 0.3);
    transition: color 0.15s, border-color 0.15s;
}

.sa-table .sa-rest-name-link:hover[b-vxypod8rd1] {
    color: #a5b4fc;
    border-bottom-color: #a5b4fc;
}

.sa-table .cell-date[b-vxypod8rd1] {
    color: #71717a;
    font-family: monospace;
}

.sa-table .cell-error[b-vxypod8rd1] {
    color: #ef4444;
    font-size: 0.75rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-table code[b-vxypod8rd1] {
    background: #1e1e2a;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #a5b4fc;
}

/* ===== Badge ===== */
.sa-badge[b-vxypod8rd1] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-active[b-vxypod8rd1] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge-inactive[b-vxypod8rd1] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ===== Card ===== */
.sa-card[b-vxypod8rd1] {
    background: #16161e;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sa-card h3[b-vxypod8rd1] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.sa-hint[b-vxypod8rd1] {
    color: #71717a;
    font-size: 0.8125rem;
    margin: 0 0 1.5rem;
}

/* ===== Forms ===== */
.sa-form-grid[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sa-form-group label[b-vxypod8rd1] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 0.375rem;
}

.sa-input[b-vxypod8rd1] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: #0a0a0f;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    color: #e4e4e7;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sa-input:focus[b-vxypod8rd1] {
    border-color: #6366f1;
}

.sa-textarea[b-vxypod8rd1] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.sa-field-hint[b-vxypod8rd1] {
    display: block;
    font-size: 0.6875rem;
    color: #52525b;
    margin-top: 0.25rem;
}

.sa-form-actions[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-add-setting[b-vxypod8rd1] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2a3a;
}

.sa-add-setting h4[b-vxypod8rd1] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: #a1a1aa;
}

/* ===== Buttons ===== */
.sa-btn[b-vxypod8rd1] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sa-btn.small[b-vxypod8rd1] {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    min-height: 36px; /* bigger tap target without bloating dense rows */
}

.sa-btn.full-width[b-vxypod8rd1] {
    width: 100%;
    justify-content: center;
}

.sa-btn.primary[b-vxypod8rd1] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.sa-btn.primary:hover[b-vxypod8rd1] {
    background: #4f46e5;
}

.sa-btn.outline[b-vxypod8rd1] {
    background: transparent;
    color: #a1a1aa;
    border-color: #2a2a3a;
}

.sa-btn.outline:hover[b-vxypod8rd1] {
    background: #1e1e2a;
    color: #e4e4e7;
}

.sa-btn.danger[b-vxypod8rd1] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.sa-btn.danger:hover[b-vxypod8rd1] {
    background: rgba(239, 68, 68, 0.25);
}

.sa-btn.warning[b-vxypod8rd1] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.sa-btn.warning:hover[b-vxypod8rd1] {
    background: rgba(245, 158, 11, 0.25);
}

.sa-btn.success[b-vxypod8rd1] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.sa-btn.success:hover[b-vxypod8rd1] {
    background: rgba(34, 197, 94, 0.25);
}

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

/* ===== Maintenance Toggle ===== */
.sa-maintenance-toggle[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sa-switch[b-vxypod8rd1] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.sa-switch input[b-vxypod8rd1] {
    opacity: 0;
    width: 0;
    height: 0;
}

.sa-slider[b-vxypod8rd1] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #2a2a3a;
    border-radius: 26px;
    transition: 0.3s;
}

.sa-slider[b-vxypod8rd1]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #71717a;
    border-radius: 50%;
    transition: 0.3s;
}

.sa-switch input:checked + .sa-slider[b-vxypod8rd1] {
    background: #ef4444;
}

.sa-switch input:checked + .sa-slider[b-vxypod8rd1]::before {
    transform: translateX(22px);
    background: #fff;
}

.sa-toggle-label[b-vxypod8rd1] {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ===== Misc ===== */
.sa-error[b-vxypod8rd1] {
    color: #ef4444;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.sa-success-msg[b-vxypod8rd1] {
    color: #22c55e;
    font-size: 0.8125rem;
    font-weight: 600;
}

.sa-masked[b-vxypod8rd1] {
    color: #52525b;
    letter-spacing: 0.15em;
}

.sa-empty[b-vxypod8rd1] {
    padding: 2rem;
    text-align: center;
    color: #52525b;
    font-size: 0.875rem;
}

.sa-loading[b-vxypod8rd1] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.sa-spinner[b-vxypod8rd1] {
    width: 32px;
    height: 32px;
    border: 3px solid #2a2a3a;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: sa-spin-b-vxypod8rd1 0.8s linear infinite;
}

@keyframes sa-spin-b-vxypod8rd1 {
    to { transform: rotate(360deg); }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .sa-stats-grid[b-vxypod8rd1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-stats-grid.cols-2[b-vxypod8rd1] {
        grid-template-columns: 1fr;
    }

    .sa-form-grid[b-vxypod8rd1] {
        grid-template-columns: 1fr;
    }

    .sa-content[b-vxypod8rd1] {
        padding: 1rem;
    }

    .sa-tabs[b-vxypod8rd1] {
        padding: 0 0.5rem;
    }

    .sa-tab[b-vxypod8rd1] {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ========================================================================
   Plan management — pills, modal, toast
   ======================================================================== */

/* Plan pill in the restaurants table — acts as a button so click opens
   the change-plan modal. Category colors mirror the landing-page pricing
   pills and the user-mgmt role badges so Mesero's visual language stays
   consistent: blue=Trial (informational), slate=Starter (neutral entry),
   purple=Pro (brand signature), amber=Enterprise (premium top tier). */
.plan-pill[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, border-color 0.15s;
    line-height: 1;
}

.plan-pill:hover[b-vxypod8rd1] { filter: brightness(1.12); border-color: rgba(255, 255, 255, 0.14); }
.plan-pill:active[b-vxypod8rd1] { transform: translateY(1px); }

.plan-pill-edit[b-vxypod8rd1] {
    opacity: 0.55;
    font-size: 0.68rem;
    margin-left: 0.1rem;
}
.plan-pill:hover .plan-pill-edit[b-vxypod8rd1] { opacity: 1; }

.plan-trial[b-vxypod8rd1]       { background: rgba(59, 130, 246, 0.18);  color: #93c5fd; }
.plan-starter[b-vxypod8rd1]     { background: rgba(100, 116, 139, 0.25); color: #e2e8f0; }
.plan-pro[b-vxypod8rd1]         { background: rgba(168, 85, 247, 0.25);  color: #d8b4fe; }
.plan-enterprise[b-vxypod8rd1]  { background: rgba(245, 158, 11, 0.22);  color: #fcd34d; }

/* Business-type pill — mirrors .plan-pill interaction model but a separate
   class so the two pill kinds read as distinct at a glance. Color palette
   is chosen to be orthogonal to the plan colors (teal/amber/rose/emerald
   vs blue/slate/purple/amber) so a row with the same tint in both columns
   doesn't happen by accident. */
.biz-pill[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s, border-color 0.15s;
    line-height: 1;
}
.biz-pill:hover[b-vxypod8rd1] { filter: brightness(1.12); border-color: rgba(255, 255, 255, 0.14); }
.biz-pill:active[b-vxypod8rd1] { transform: translateY(1px); }
.biz-fullservice[b-vxypod8rd1]  { background: rgba(20, 184, 166, 0.22); color: #5eead4; }
.biz-coffeeshop[b-vxypod8rd1]   { background: rgba(217, 119, 6, 0.22);  color: #fcd34d; }
.biz-bar[b-vxypod8rd1]          { background: rgba(244, 63, 94, 0.22);  color: #fda4af; }
.biz-takeaway[b-vxypod8rd1]     { background: rgba(34, 197, 94, 0.22);  color: #86efac; }

/* Toggle preview strip inside the business-type modal — renders a row of
   compact pills showing TablesEnabled / CoursesEnabled / … for context.
   Green "on" / dim "off" palette mirrors the rest of the Admin UI so ops
   eyes know which toggles are currently live without reading the copy. */
.biz-toggles-preview[b-vxypod8rd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
}
.biz-toggle[b-vxypod8rd1] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.biz-toggle.on[b-vxypod8rd1]  { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.biz-toggle.off[b-vxypod8rd1] { background: rgba(100, 116, 139, 0.2); color: #94a3b8; text-decoration: line-through; opacity: 0.7; }

.sa-hint[b-vxypod8rd1] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.4;
}

.plan-pill-static[b-vxypod8rd1] {
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.plan-pill-static:hover[b-vxypod8rd1] { filter: none; transform: none; }

/* Modal */
.sa-modal-backdrop[b-vxypod8rd1] {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.72);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: sa-fade-b-vxypod8rd1 0.15s ease-out;
}

@keyframes sa-fade-b-vxypod8rd1 { from { opacity: 0; } to { opacity: 1; } }

.sa-modal[b-vxypod8rd1] {
    width: 460px;
    max-width: 100%;
    max-height: 92vh;
    background: linear-gradient(180deg, #1f2a3d 0%, #1a2436 100%);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.26);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: sa-pop-b-vxypod8rd1 0.2s cubic-bezier(.2,.8,.3,1);
}

@keyframes sa-pop-b-vxypod8rd1 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-modal-head[b-vxypod8rd1] {
    padding: 1.15rem 1.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.sa-modal-head h2[b-vxypod8rd1] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}

.sa-modal-close[b-vxypod8rd1] {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sa-modal-close:hover[b-vxypod8rd1] { background: rgba(148, 163, 184, 0.12); color: #f1f5f9; }

.sa-modal-body[b-vxypod8rd1] {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
}

.sa-modal-sub[b-vxypod8rd1] {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 1.1rem;
}

.sa-modal-sub strong[b-vxypod8rd1] { color: #e2e8f0; font-weight: 600; }

.sa-inline-code[b-vxypod8rd1] {
    background: rgba(148, 163, 184, 0.12);
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    font-size: 0.8rem;
    color: #cbd5e1;
    margin-left: 0.35rem;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

.sa-field[b-vxypod8rd1] {
    margin-bottom: 1rem;
}

.sa-field label[b-vxypod8rd1] {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 0.4rem;
}

.sa-current-plan[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
}

.sa-current-plan-meta[b-vxypod8rd1] {
    color: #64748b;
    font-size: 0.78rem;
}

.sa-checkbox[b-vxypod8rd1] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: #cbd5e1;
    cursor: pointer;
    margin-top: 0.3rem;
}

.sa-checkbox input[type="checkbox"][b-vxypod8rd1] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.sa-modal-foot[b-vxypod8rd1] {
    padding: 0.95rem 1.4rem 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
}

/* Toast */
.sa-toast[b-vxypod8rd1] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8rem 1.1rem;
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 4px solid #10b981;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.88rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
    z-index: 10050;
    animation: sa-toast-in-b-vxypod8rd1 0.22s cubic-bezier(.2,.8,.3,1);
    max-width: 380px;
}

.sa-toast.error[b-vxypod8rd1] { border-left-color: #dc2626; color: #fca5a5; }

@keyframes sa-toast-in-b-vxypod8rd1 {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Print diagnostics tab ------------------------------------------------ */
.sa-print-summary[b-vxypod8rd1] {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.sa-print-summary.ok[b-vxypod8rd1] {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}
.sa-print-summary.alarm[b-vxypod8rd1] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.sa-print-summary strong[b-vxypod8rd1] { font-size: 1rem; }

.sa-print-grid[b-vxypod8rd1] {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.sa-print-block[b-vxypod8rd1] {
    padding: 0.9rem 1rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
}
.sa-print-block h4[b-vxypod8rd1] {
    margin: 0 0 0.7rem 0;
    font-size: 0.95rem;
    color: #cbd5e1;
}
.sa-print-block dl[b-vxypod8rd1] { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; margin: 0; font-size: 0.85rem; }
.sa-print-block dt[b-vxypod8rd1] { color: #94a3b8; }
.sa-print-block dd[b-vxypod8rd1] { margin: 0; color: #e2e8f0; }
.sa-print-block code[b-vxypod8rd1] { font-size: 0.78rem; color: #cbd5e1; word-break: break-all; }

.sa-warning-box[b-vxypod8rd1] {
    padding: 0.8rem 1rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    color: #fde68a;
    font-size: 0.88rem;
}

.sa-code-block[b-vxypod8rd1] {
    margin-top: 0.5rem;
    padding: 0.9rem;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #cbd5e1;
    overflow-x: auto;
    max-height: 400px;
}

/* ===== Negocio (SaaS metrics) tab ===== */
.sa-stat-card.accent-red[b-vxypod8rd1] { border-left: 3px solid #ef4444; }
.sa-muted-note[b-vxypod8rd1] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 8px 2px 0;
}
.sa-muted-note code[b-vxypod8rd1] {
    background: #1e293b;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.72rem;
}
.sa-negocio-cols[b-vxypod8rd1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 18px;
}
@media (max-width: 820px) {
    .sa-negocio-cols[b-vxypod8rd1] { grid-template-columns: 1fr; }
}
.sa-bars[b-vxypod8rd1] { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.sa-bar-row[b-vxypod8rd1] { display: flex; align-items: center; gap: 10px; }
.sa-bar-label[b-vxypod8rd1] { width: 64px; font-size: 0.78rem; color: #94a3b8; flex: 0 0 auto; }
.sa-bar-track[b-vxypod8rd1] { flex: 1 1 auto; background: #1e293b; border-radius: 5px; height: 16px; overflow: hidden; }
.sa-bar-fill[b-vxypod8rd1] { display: block; height: 100%; background: #3b82f6; border-radius: 5px; min-width: 2px; }
.sa-bar-value[b-vxypod8rd1] { width: 34px; text-align: right; font-size: 0.82rem; color: #e2e8f0; flex: 0 0 auto; }

/* "Pago fallido" colorway — red, revenue-at-risk urgency. */
.sa-stuck-chip.variant-pastdue.has-some[b-vxypod8rd1] { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }
.sa-stuck-chip.variant-pastdue.has-some:hover[b-vxypod8rd1] { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.75); }
.sa-stuck-chip.variant-pastdue.active[b-vxypod8rd1] { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.75); color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3); }
.sa-stuck-chip.variant-pastdue.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-pastdue.active .sa-stuck-chip-count[b-vxypod8rd1] { background: rgba(239, 68, 68, 0.32); color: #fee2e2; }

/* "Cancelan" colorway — amber, churn warning. */
.sa-stuck-chip.variant-cancelling.has-some[b-vxypod8rd1] { border-color: rgba(245, 158, 11, 0.5); color: #fcd34d; }
.sa-stuck-chip.variant-cancelling.has-some:hover[b-vxypod8rd1] { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.75); }
.sa-stuck-chip.variant-cancelling.active[b-vxypod8rd1] { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.75); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3); }
.sa-stuck-chip.variant-cancelling.has-some .sa-stuck-chip-count[b-vxypod8rd1],
.sa-stuck-chip.variant-cancelling.active .sa-stuck-chip-count[b-vxypod8rd1] { background: rgba(245, 158, 11, 0.32); color: #fef3c7; }

/* ===== Feature-flags matrix modal (#5) ===== */
.sa-flag-group[b-vxypod8rd1] { margin-bottom: 14px; }
.sa-flag-group-title[b-vxypod8rd1] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0 0 6px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 4px;
}
.sa-flag-row[b-vxypod8rd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px;
    cursor: pointer;
}
.sa-flag-row:hover[b-vxypod8rd1] { background: rgba(148, 163, 184, 0.06); border-radius: 6px; }
.sa-flag-label[b-vxypod8rd1] { font-size: 0.86rem; color: #e2e8f0; }
.sa-flag-row input[type="checkbox"][b-vxypod8rd1] { width: 18px; height: 18px; cursor: pointer; }

/* ===== Salud (system/node health) tab (#3) ===== */
.sa-health-ok[b-vxypod8rd1] { color: #22c55e; }
.sa-health-warn[b-vxypod8rd1] { color: #f59e0b; }
.sa-health-bad[b-vxypod8rd1] { color: #ef4444; }
.sa-pill-soft[b-vxypod8rd1] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #1e293b;
    color: #94a3b8;
    font-size: 0.68rem;
    vertical-align: middle;
}

/* ===== Sentry issue level badges (#7) ===== */
.sa-level[b-vxypod8rd1] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sa-level-fatal[b-vxypod8rd1] { background: rgba(239,68,68,0.25); color: #fca5a5; }
.sa-level-error[b-vxypod8rd1] { background: rgba(239,68,68,0.18); color: #f87171; }
.sa-level-warning[b-vxypod8rd1] { background: rgba(245,158,11,0.2); color: #fcd34d; }
.sa-level-info[b-vxypod8rd1] { background: rgba(59,130,246,0.2); color: #93c5fd; }
.sa-level-debug[b-vxypod8rd1] { background: #27272a; color: #a1a1aa; }

/* ===== Support ticket status badges (#8) — reuse .sa-level base ===== */
.sa-ticket-open[b-vxypod8rd1] { background: rgba(59,130,246,0.2); color: #93c5fd; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.sa-ticket-pending[b-vxypod8rd1] { background: rgba(245,158,11,0.2); color: #fcd34d; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.sa-ticket-closed[b-vxypod8rd1] { background: #27272a; color: #a1a1aa; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }

/* ===== RGPD actions in flags modal (#9) ===== */
.sa-rgpd-actions[b-vxypod8rd1] { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }

/* ===== Announcement preview (#10) ===== */
.sa-annprev[b-vxypod8rd1] {
    margin: 10px 0 4px;
    padding: 8px 14px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}
.sa-annprev-info[b-vxypod8rd1] { background: #2563eb; }
.sa-annprev-warning[b-vxypod8rd1] { background: #b45309; }
.sa-annprev-critical[b-vxypod8rd1] { background: #b91c1c; }
/* /Pages/Admin/SupplierAnalytics.razor.rz.scp.css */
.analytics-container[b-yvg0pyeqkw] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header h1[b-yvg0pyeqkw] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.header-actions[b-yvg0pyeqkw] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-select[b-yvg0pyeqkw] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.5rem center;
    font-size: 0.875rem;
    color: #e2e8f0;
    appearance: none;
    cursor: pointer;
}

.form-select option[b-yvg0pyeqkw] {
    background: #1e293b;
    color: #e2e8f0;
}

.btn[b-yvg0pyeqkw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.outline[b-yvg0pyeqkw] {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

.btn.outline:hover[b-yvg0pyeqkw] {
    background: #334155;
}

/* Section */
.section[b-yvg0pyeqkw] {
    background: #1e293b;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #334155;
}

.section h2[b-yvg0pyeqkw] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 1rem 0;
}

.section-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-yvg0pyeqkw] {
    margin: 0;
}

.btn-close[b-yvg0pyeqkw] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #334155;
    border-radius: 6px;
    color: #94a3b8;
    cursor: pointer;
}

.btn-close:hover[b-yvg0pyeqkw] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

/* Suppliers Grid */
.suppliers-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.supplier-card[b-yvg0pyeqkw] {
    background: #0f172a;
    border-radius: 10px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.supplier-card:hover[b-yvg0pyeqkw] {
    border-color: #3b82f6;
}

.supplier-card.selected[b-yvg0pyeqkw] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.supplier-header[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.supplier-header h3[b-yvg0pyeqkw] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.order-count[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #1e293b;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Metrics */
.metrics-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric[b-yvg0pyeqkw] {
    display: flex;
    flex-direction: column;
}

.metric-value[b-yvg0pyeqkw] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.metric-label[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.metric-bar[b-yvg0pyeqkw] {
    height: 4px;
    background: #334155;
    border-radius: 2px;
    overflow: hidden;
}

.metric-fill[b-yvg0pyeqkw] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.metric-fill.delivery[b-yvg0pyeqkw] {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.metric-fill.accuracy[b-yvg0pyeqkw] {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/* Supplier Stats */
.supplier-stats[b-yvg0pyeqkw] {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.stat[b-yvg0pyeqkw] {
    text-align: center;
}

.stat-value[b-yvg0pyeqkw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    display: block;
}

.stat-label[b-yvg0pyeqkw] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Spend Chart */
.chart-container[b-yvg0pyeqkw] {
    overflow-x: auto;
}

.spend-chart[b-yvg0pyeqkw] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 200px;
    padding: 1rem 0;
    min-width: 600px;
}

.chart-bar[b-yvg0pyeqkw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.bar-container[b-yvg0pyeqkw] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar[b-yvg0pyeqkw] {
    width: 80%;
    max-width: 60px;
    background: linear-gradient(180deg, #3b82f6 0%, #818cf8 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    transition: height 0.3s ease;
}

.bar:hover[b-yvg0pyeqkw] {
    opacity: 0.9;
}

.bar-value[b-yvg0pyeqkw] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 500;
    color: #f1f5f9;
    white-space: nowrap;
    padding-bottom: 4px;
    display: none;
}

.bar:hover .bar-value[b-yvg0pyeqkw] {
    display: block;
}

.bar-label[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}

/* Delivery Table */
.delivery-table-container[b-yvg0pyeqkw] {
    overflow-x: auto;
}

.delivery-table[b-yvg0pyeqkw] {
    width: 100%;
    border-collapse: collapse;
}

.delivery-table th[b-yvg0pyeqkw] {
    text-align: left;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #0f172a;
    border-bottom: 1px solid #334155;
}

.delivery-table td[b-yvg0pyeqkw] {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
}

.delivery-table tbody tr:hover[b-yvg0pyeqkw] {
    background: #334155;
}

.delivery-table .order-number[b-yvg0pyeqkw] {
    font-weight: 500;
    color: #3b82f6;
}

.delivery-table .total[b-yvg0pyeqkw] {
    font-weight: 500;
}

.delivery-table tr.late[b-yvg0pyeqkw] {
    background: rgba(220, 38, 38, 0.15);
}

.status-badge[b-yvg0pyeqkw] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.on-time[b-yvg0pyeqkw] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-badge.late[b-yvg0pyeqkw] {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

/* Comparison Grid */
.comparison-grid[b-yvg0pyeqkw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.comparison-card[b-yvg0pyeqkw] {
    background: #0f172a;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    position: relative;
}

.comparison-card.best[b-yvg0pyeqkw] {
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #10b981;
}

.best-badge[b-yvg0pyeqkw] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.comp-supplier[b-yvg0pyeqkw] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
}

.comp-price[b-yvg0pyeqkw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
}

.comp-diff[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: #f87171;
    margin-bottom: 0.5rem;
}

.comp-details[b-yvg0pyeqkw] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0.5rem 0;
}

.comp-orders[b-yvg0pyeqkw] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Quick Actions */
.quick-actions[b-yvg0pyeqkw] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn[b-yvg0pyeqkw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-yvg0pyeqkw] {
    background: #334155;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Empty & Loading States */
.empty-state[b-yvg0pyeqkw] {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}

.empty-state.small[b-yvg0pyeqkw] {
    padding: 1rem;
}

.loading-state[b-yvg0pyeqkw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #94a3b8;
}

.spinner[b-yvg0pyeqkw] {
    width: 40px;
    height: 40px;
    border: 3px solid #334155;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-yvg0pyeqkw 1s linear infinite;
}

@keyframes spin-b-yvg0pyeqkw {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-container[b-yvg0pyeqkw] {
        padding: 1rem;
    }

    .page-header[b-yvg0pyeqkw] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .suppliers-grid[b-yvg0pyeqkw] {
        grid-template-columns: 1fr;
    }

    .quick-actions[b-yvg0pyeqkw] {
        flex-direction: column;
    }

    .action-btn[b-yvg0pyeqkw] {
        justify-content: center;
    }
}

/* Phone (≤600px): the supplier-card metric rows used a fixed 2-col grid +
   a 3-up space-between stat row that overran a ~390px viewport (right column
   clipped off-screen). Collapse the metrics to one column and let the stats
   wrap; guard the page root against any residual horizontal overflow.
   Additive — desktop/base untouched. */
@media (max-width: 600px) {
    .analytics-container[b-yvg0pyeqkw] {
        max-width: 100%;
        overflow-x: hidden;
    }

    .metrics-grid[b-yvg0pyeqkw] {
        grid-template-columns: 1fr;
    }

    .supplier-stats[b-yvg0pyeqkw] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .supplier-stats .stat[b-yvg0pyeqkw] {
        flex: 1 1 40%;
        min-width: 0;
    }
}
/* /Pages/Admin/Tabs.razor.rz.scp.css */
.tabs-container[b-7som0fzxsq] { padding: 1.5rem; }
.page-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-7som0fzxsq] { font-size: 1.5rem; color: #f1f5f9; margin: 0; }
.subtitle[b-7som0fzxsq] { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
.form-input[b-7som0fzxsq] { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
.btn[b-7som0fzxsq] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-7som0fzxsq] { background: #3b82f6; color: white; }
.btn.primary:hover[b-7som0fzxsq] { background: #2563eb; }
.btn.outline[b-7som0fzxsq] { background: transparent; border: 1px solid #334155; color: #e2e8f0; }
.btn.danger-outline[b-7som0fzxsq] { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
.btn.danger-outline:hover[b-7som0fzxsq] { background: rgba(239,68,68,0.1); }
.btn:disabled[b-7som0fzxsq] { opacity: 0.5; cursor: not-allowed; }
.holds-grid[b-7som0fzxsq] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.hold-card[b-7som0fzxsq] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.hold-card.held[b-7som0fzxsq] { border-left: 3px solid #f59e0b; }
.hold-card.captured[b-7som0fzxsq] { border-left: 3px solid #22c55e; }
.hold-card.cancelled[b-7som0fzxsq] { border-left: 3px solid #94a3b8; opacity: 0.7; }
.hold-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.card-info[b-7som0fzxsq] { display: flex; gap: 0.5rem; align-items: center; }
.card-brand[b-7som0fzxsq] { font-weight: 600; color: #f1f5f9; text-transform: capitalize; }
.card-last4[b-7som0fzxsq] { color: #94a3b8; font-family: monospace; }
.status-badge[b-7som0fzxsq] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.status-badge.held[b-7som0fzxsq] { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-badge.captured[b-7som0fzxsq] { background: rgba(34,197,94,0.15); color: #22c55e; }
.status-badge.cancelled[b-7som0fzxsq] { background: rgba(148,163,184,0.15); color: #94a3b8; }
.status-badge.expired[b-7som0fzxsq] { background: rgba(148,163,184,0.15); color: #64748b; }
.hold-card.expired[b-7som0fzxsq] { border-left: 3px solid #64748b; opacity: 0.6; }
.hold-amount[b-7som0fzxsq] { font-size: 1.5rem; font-weight: 700; color: #f1f5f9; margin: 0.5rem 0; }
.hold-customer[b-7som0fzxsq] { color: #e2e8f0; font-size: 0.875rem; margin-bottom: 0.5rem; }
.hold-details[b-7som0fzxsq] { display: flex; gap: 1rem; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.75rem; }
.captured-amount[b-7som0fzxsq] { color: #22c55e; font-size: 0.875rem; margin-bottom: 0.75rem; }
.hold-actions[b-7som0fzxsq] { display: flex; gap: 0.5rem; }
.modal-overlay[b-7som0fzxsq] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-7som0fzxsq] { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; width: 90%; max-width: 420px; }
.modal-header[b-7som0fzxsq] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #334155; }
.modal-header h2[b-7som0fzxsq] { font-size: 1.1rem; color: #f1f5f9; margin: 0; }
.close-btn[b-7som0fzxsq] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.modal-body[b-7som0fzxsq] { padding: 1.25rem; }
.modal-body p[b-7som0fzxsq] { color: #e2e8f0; margin-bottom: 1rem; }
.form-group[b-7som0fzxsq] { margin-bottom: 1rem; }
.form-group label[b-7som0fzxsq] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.25rem; }
.modal-footer[b-7som0fzxsq] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #334155; }
.loading-state[b-7som0fzxsq] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-7som0fzxsq] { width: 2rem; height: 2rem; border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin-b-7som0fzxsq 0.8s linear infinite; }
@keyframes spin-b-7som0fzxsq { to { transform: rotate(360deg); } }
.empty-state[b-7som0fzxsq] { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state h2[b-7som0fzxsq] { color: #e2e8f0; margin-bottom: 0.5rem; }
.empty-state svg[b-7som0fzxsq] { margin-bottom: 1rem; }
/* /Pages/Admin/Templates.razor.rz.scp.css */
/* =============== Base / tokens =============== */
:root[b-adfsbpebe5] {
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --soft: #f8fafc;
    --primary: #2563eb;
    --warn: #b91c1c;
    --paper: #fff;
    --ruler-w: 18px;
    --toolbar-h: 120px;
}

/* ---- layout columns ---- */
.pane-1[b-adfsbpebe5], .pane-2[b-adfsbpebe5], .pane-3[b-adfsbpebe5] { /* if you use .pane-3 only, keep that; this is just for clarity */
    /* no bg here – each card sets its own bg */
}

.pane-3[b-adfsbpebe5] {
    display: grid;
    grid-template-columns: minmax(240px,280px) minmax(0,0.9fr) minmax(0,1.1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width:1280px) {
    .pane-3[b-adfsbpebe5] {
        grid-template-columns: 260px minmax(0,0.8fr) minmax(0,1.2fr);
    }
}

/* ---- toolbox card (left column) ---- */
.toolbox[b-adfsbpebe5] {
    position: sticky; /* keeps the whole card pinned while scrolling */
    top: calc(var(--toolbar-h) + 12px);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #fff; /* ✅ back to light card */
    max-width: 100%;
    max-height: calc(100vh - var(--toolbar-h) - 24px);
    overflow: auto; /* allow vertical scroll for long content */
    color: var(--ink);
}

    .toolbox h4[b-adfsbpebe5] {
        margin: 8px 0 6px;
    }

    /* compact rows/controls inside the toolbox */
    .toolbox .row[b-adfsbpebe5] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0;
    }

    .toolbox .tool-btn[b-adfsbpebe5] { /* don’t force full width in the sidebar */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .55rem .75rem;
        border-radius: .65rem;
        border: 1px solid var(--line);
        background: #111827;
        color: #fff;
    }

    .toolbox h4[b-adfsbpebe5] {
        margin: 8px 0 6px;
    }

    /* compact rows/controls inside the toolbox */
    .toolbox .row[b-adfsbpebe5] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0;
    }

    .toolbox .tool-btn[b-adfsbpebe5] { /* don’t force full width in the sidebar */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .55rem .75rem;
        border-radius: .65rem;
        border: 1px solid var(--line);
        background: #111827; /* dark buttons only */
        color: #fff;
        text-align: center;
        font-weight: 500;
    }

        .toolbox .tool-btn:hover[b-adfsbpebe5] {
            opacity: .9;
        }

/* ---- “Formato” group header strip (light, not full black) ---- */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft); /* ✅ subtle grey, not black */
}

/* ---- Editor / preview cards on the right ---- */
.editor-pane[b-adfsbpebe5],
.preview-pane[b-adfsbpebe5] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
}

.editor-host[b-adfsbpebe5] {
    height: calc(100% - 36px);
}
/* account for the little info row */

.preview-pane[b-adfsbpebe5] {
    display: flex;
    flex-direction: column;
}

/* preview frame */
#preview[b-adfsbpebe5] {
    position: absolute; /* we keep centering it with JS */
    top: var(--paper-top) !important;
    left: var(--paper-left) !important; /* this is fine; it only affects the iframe */
    width: var(--paper-px) !important;
    background: #fff;
    border: 0;
}

    #preview[b-ucchm158w4][b-adfsbpebe5] {
        width: var(--paper-px) !important;
    }


/* rulers */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - var(--ruler-v,18px));
    left: var(--paper-left);
    width: var(--paper-px);
    height: var(--ruler-w);
    background: repeating-linear-gradient(to right,#cbd5e1 0,#cbd5e1 1px,transparent 1px,transparent calc(var(--px-per-mm,3.78px)*10));
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - var(--ruler-w));
    width: var(--ruler-w);
    height: var(--paper-h, 400px);
    background: repeating-linear-gradient(to bottom,#cbd5e1 0,#cbd5e1 1px,transparent 1px,transparent calc(var(--px-per-mm,3.78px)*10));
}

.preview-box[b-adfsbpebe5] {
    position: relative; /* container for the absolute iframe/rulers */
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.38) 0, rgba(148,163,184,.38) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(135deg, rgba(99,102,241,.08) 25%, transparent 25%) -12px 0/24px 24px, linear-gradient(45deg, rgba(59,130,246,.05) 25%, transparent 25%) 0 0/24px 24px, repeating-linear-gradient(0deg, rgba(148,163,184,.18) 0, rgba(148,163,184,.18) 1px, transparent 1px, transparent calc(var(--px-per-mm,3.78px) * 8)), #f8fafc;
    background-blend-mode: soft-light, screen, normal, normal, normal;
    padding-bottom: 2px;
}

.preview-meta[b-adfsbpebe5] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    color: #666;
    font-size: .9rem;
}

/* ---- shared buttons (non-sidebar) ---- */
.btn[b-adfsbpebe5] {
    border: 0;
    background: #111827;
    color: #fff;
    padding: .55rem .75rem;
    border-radius: 8px;
    cursor: pointer;
}

    .btn:hover[b-adfsbpebe5] {
        opacity: .9;
    }

    .btn.primary[b-adfsbpebe5] {
        background: var(--primary);
    }

    .btn.warn[b-adfsbpebe5] {
        background: #fff5f5;
        color: #7f1d1d;
    }

/* inputs in the sidebar */
.toolbox input[type="text"][b-adfsbpebe5] {
    width: 100%;
}

/* keep the sidebar content from sliding under other panels */
html[b-adfsbpebe5], body[b-adfsbpebe5] {
    overflow-x: hidden;
}



/* Was a blue grid; make the whole host area plain white */
.preview-box[b-adfsbpebe5] {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff; /* ⟵ white outside the ruler/paper */
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
    padding-bottom: 2px;
}



/* Slight grey so rulers don't disappear on white */
.ruler[b-adfsbpebe5] {
    background: #f3f4f6; /* ⟵ light grey */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}


/* Clean format bar spacing */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .format-bar .divider[b-adfsbpebe5] {
        width: 1px;
        height: 26px;
        background: #e5e7eb;
        border-radius: 999px;
    }

/* Professional looking buttons in the bar */
.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

/* Real rulers drawn on canvas */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px);
    left: var(--paper-left);
    height: 18px;
    width: var(--paper-px);
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - 18px);
    width: 18px;
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }

/* Make preview “desk” clean & contrasty */
.preview-box[b-adfsbpebe5] {
    background: #fff;
}
/* canvas-like clean white outside the paper */

.format-bar[b-adfsbpebe5] {
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        gap: 8px;
        flex-wrap: wrap;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

.preview-box[b-adfsbpebe5] {
    background: radial-gradient(circle at 30% 10%, #ffffff, #f6f7fb 70%);
}


/* Format bar cleanup */
.format-bar[b-adfsbpebe5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .format-bar .divider[b-adfsbpebe5] {
        width: 1px;
        height: 26px;
        background: #e5e7eb;
        border-radius: 999px;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}

/* Clean “desk/canvas” outside the paper */
.preview-box[b-adfsbpebe5] {
    background: #fff;
}

/* Canvases for rulers */
.ruler[b-adfsbpebe5] {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px);
    left: var(--paper-left);
    height: 18px;
    width: var(--paper-px);
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - 18px);
    width: 18px;
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }




.format-bar[b-adfsbpebe5] {
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: var(--soft);
}

    .format-bar .group[b-adfsbpebe5] {
        gap: 8px;
        flex-wrap: wrap;
    }

.btn.sm[b-adfsbpebe5] {
    padding: .40rem .65rem;
    border-radius: .55rem;
    font-weight: 600;
}



/* Keep the ‘paper’ background behind the iframe */
.preview-box[b-adfsbpebe5] {
    position: relative;
}

#preview[b-adfsbpebe5] {
    position: absolute;
    top: var(--paper-top) !important; /* keep your existing top offset */
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    z-index: 2; /* above the sheet, below the rulers */
}
/* The sheet outline sits under the iframe */
.preview_box[b-adfsbpebe5]::before, /* if you still use :before for the sheet */
.preview-box[b-adfsbpebe5]::before {
    content: "";
    position: absolute;
    top: var(--paper-top);
    left: var(--paper-left);
    width: var(--paper-px);
    height: var(--paper-h, 400px);
    border: 1px solid #eef;
    border-radius: 8px;
    background: #fff; /* the paper fill */
    z-index: 1; /* push it behind the iframe */
}


/* Rulers must never cover content; keep them non-interactive and transparent */
.ruler[b-adfsbpebe5] {
    position: absolute;
    pointer-events: none; /* important */
    z-index: 3; /* above iframe */
    background: transparent; /* no white fill */
}

.ruler-x[b-adfsbpebe5] {
    /* keep outside the paper so it doesn’t cover the first text line */
    top: calc(var(--paper-top) - var(--ruler-h));
    left: var(--page-left); /* or var(--paper-left) */
    height: var(--ruler-h);
    width: var( --paper-px );
}

.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top);
    left: calc(var(--paper-left) - var(--ruler-w));
    width: var(--ruler-w);
    height: var(--paper-h, 400px);
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px));
    }



/* Optional: remove the extra white overlay completely */
.preview-box[b-adfsbpebe5]::before {
    display: none;
}


/* ---- FINAL OVERRIDES: keep ticket visible, rulers outside, no overlays ---- */

/* The paper “sheet” pseudo-element must not exist. Force remove. */
.preview-box[b-adfsbpebe5]::before {
    content: none !important;
    display: none !important;
}

/* The iframe is *the* paper. Keep it above backgrounds, below rulers. */
#preview[b-adfsbpebe5] {
    position: absolute !important;
    top: var(--paper-top) !important;
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    background: #fff !important;
    border: 0 !important;
    z-index: 10 !important; /* paper */
}

/* Rulers: decorative only, never block text or clicks. */
.ruler[b-adfsbpebe5] {
    position: absolute !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 20 !important; /* above paper, still transparent */
}

/* Horizontal ruler sits *above* paper, not overlapping it */
.ruler-x[b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px) !important; /* 18px tall ruler area */
    left: var(--paper-left) !important;
    height: 18px !important;
    width: var(--paper-px) !important;
}

/* Vertical rulers hug the sheet edges */
.ruler-y[b-adfsbpebe5] {
    top: var(--paper-top) !important;
    left: calc(var(--paper-left) - 18px) !important;
    width: 18px !important;
    height: var(--paper-h, 400px) !important;
}

    .ruler-y.right[b-adfsbpebe5] {
        left: calc(var(--paper-left) + var(--paper-px)) !important;
    }

/* The desk/canvas around the paper—clean white, no gradient, so rulers pop */
.preview-box[b-adfsbpebe5] {
    background: #fff !important;
}


.format-bar .group .btn.sm[b-adfsbpebe5] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.format-bar[b-adfsbpebe5] {
    column-gap: 16px;
    row-gap: 8px;
}



/* FINAL: no paper overlay, rulers transparent, correct stacking (scoped) */
.preview-box[b-ucchm158w4][b-adfsbpebe5]::before,
.preview_box[b-ucchm158w4][b-adfsbpebe5]::before { /* include both spellings */
    content: none !important;
    display: none !important;
}

#preview[b-ucchm158w4][b-adfsbpebe5] {
    position: absolute !important;
    top: var(--paper-top) !important;
    left: var(--paper-left) !important;
    width: var(--paper-px) !important;
    background: #fff !important;
    border: 0 !important;
    z-index: 10 !important;
}

.ruler[b-ucchm158w4][b-adfsbpebe5],
.ruler[b-ucchm158w4] *[b-adfsbpebe5] {
    background: transparent !important; /* defeat any earlier background */
    pointer-events: none !important;
    z-index: 20 !important;
}

.ruler-x[b-ucchm158w4][b-adfsbpebe5] {
    top: calc(var(--paper-top) - 18px) !important;
    left: var(--paper-left) !important;
    height: 18px !important;
    width: var(--paper-px) !important;
}

.ruler-y[b-ucchm158w4][b-adfsbpebe5] {
    top: var(--paper-top) !important;
    left: calc(var(--paper-left) - 18px) !important;
    width: 18px !important;
    height: var(--paper-h, 400px) !important;
}

.ruler-y.right[b-ucchm158w4][b-adfsbpebe5] {
    left: calc(var(--paper-left) + var(--paper-px)) !important;
}

.preview-box[b-ucchm158w4][b-adfsbpebe5] {
    background: #fff !important;
}


.toolbox .group.aeat[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .toolbox .group.aeat h4[b-adfsbpebe5] {
        margin: 2px 0 8px;
        font-size: .95rem;
        color: var(--ink);
        font-weight: 700;
    }

    .toolbox .group.aeat label[b-adfsbpebe5] {
        color: var(--ink);
    }


/* same column heights */
.toolbox[b-adfsbpebe5],
.editor-pane[b-adfsbpebe5],
.preview-pane[b-adfsbpebe5] {
    height: calc(100vh - var(--toolbar-h) - 24px);
}

/* grid background outside the paper */
.preview-box[b-adfsbpebe5] {
    background: linear-gradient(#e0f2ff 1px, transparent 1px) 0 0/12px 12px, linear-gradient(90deg,#e0f2ff 1px,transparent 1px) 0 0/12px 12px, #fff;
}

/* rulers stay above paper, non-blocking */
.ruler[b-adfsbpebe5] {
    pointer-events: none;
    background: transparent;
    z-index: 3;
}



/* compact card + full-width inputs */
.toolbox .group.aeat[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

    .toolbox .group.aeat .row[b-adfsbpebe5] {
        gap: 8px;
    }

    .toolbox .group.aeat select[b-adfsbpebe5] {
        width: 100%;
        max-width: 100%;
    }

/* pro header */
.toolbox .aeat-title[b-adfsbpebe5] {
    margin: 8px 0 6px;
    text-align: center;
    background: #111827;
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
}

/* =====================================================================
   Dark-mode control surfaces + 44px touch targets (Codex QA).
   Kept HERE (Blazor-scoped — each selector gets a [b-xxx] page attribute)
   instead of the page's global inline <style>, so these generic selectors
   (.toolbar / .btn.icon / .menu .item …) DON'T leak onto the other pages
   that reuse those class names. Admin is always dark (theme.js).
   ===================================================================== */

/* The top toolbar + editor line/col bar were hardcoded white slabs in the
   dark admin shell. (Ticket preview/paper stays white on purpose.) */
:root[data-theme="dark"] .toolbar[b-adfsbpebe5] { background: #1e293b; }
:root[data-theme="dark"] .editor-info[b-adfsbpebe5] { background: #0f172a; color: #cbd5e1; border-color: #334155; }
:root[data-theme="dark"] .format-bar .divider[b-adfsbpebe5] { background: #475569; }

/* Touch targets — floor genuine tap controls to 44px (were ~30-43px,
   sized by padding only). */
.toolbar .btn[b-adfsbpebe5],
.toolbar select[b-adfsbpebe5],
.toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5],
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5],
.toolbox input[type="text"][b-adfsbpebe5],
.toolbox .group.aeat select[b-adfsbpebe5],
.token-btn[b-adfsbpebe5],
.token-list .btn[b-adfsbpebe5] {
    min-height: 44px;
}
.btn.icon[b-adfsbpebe5] {
    width: 44px;
    height: 44px;
}
/* Centre the label-bearing buttons at the larger height. */
.toolbar .btn[b-adfsbpebe5],
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5],
.token-list .btn[b-adfsbpebe5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.menu .item[b-adfsbpebe5],
.toolbox .tool-btn[b-adfsbpebe5] { justify-content: flex-start; }   /* read left-aligned */
/* .token-btn stacks a bold token over a subtitle — COLUMN so the two lines
   don't collapse onto one row, just vertically centred at 44px. */
.token-btn[b-adfsbpebe5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* Zoom slider: enlarge hit area + thumb so it's tappable (was ~18px). */
.toolbar input[type="range"][b-adfsbpebe5] {
    min-height: 44px;
    accent-color: var(--primary);
}
.toolbar input[type="range"][b-adfsbpebe5]::-webkit-slider-thumb { width: 22px; height: 22px; }
.toolbar input[type="range"][b-adfsbpebe5]::-moz-range-thumb { width: 22px; height: 22px; }

/* =====================================================================
   Premium polish (Codex "not 10/10" follow-up). Scoped to this page.
   Pure CSS over the existing markup — groups the flat toolbar into cards,
   lifts the primary action, makes disabled controls read as intentional,
   and unifies control shape. Light + admin-dark both handled.
   ===================================================================== */

/* Group the toolbar's control rows into soft cards so the ~10 controls read
   as panels instead of one undifferentiated field. (The first row — Plantilla
   — and the action row are direct children; the rest are .row blocks.) */
.toolbar > .row[b-adfsbpebe5] {
    background: #f8fafc;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    padding: 12px 14px;
    row-gap: 10px;
}
:root[data-theme="dark"] .toolbar > .row[b-adfsbpebe5] {
    background: #161f2e;
    border-color: #2c3a4f;
}

/* Crisper labels above each control. */
.toolbar label[b-adfsbpebe5] {
    font-weight: 600;
    letter-spacing: .01em;
}

/* Unify select/input shape + a clear focus ring (was inconsistent radii). */
.toolbar select[b-adfsbpebe5],
.toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5] {
    border: 1px solid var(--line);
    border-radius: 10px;
}
.toolbar select:focus-visible[b-adfsbpebe5],
.toolbar input:focus-visible[b-adfsbpebe5] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

/* Disabled controls (Impresora when fixed by hardware, etc.) read as read-only
   — a dashed border + muted chrome signals "set elsewhere" while keeping any
   real value (e.g. the hardware IP) perfectly legible. No hatch: these often
   carry a genuine value, not an empty/N-A state. */
.toolbar select:disabled[b-adfsbpebe5],
.toolbar input:disabled[b-adfsbpebe5] {
    border-style: dashed;
    cursor: not-allowed;
    opacity: 1;          /* override the UA dim — keep the value readable */
}
:root[data-theme="dark"] .toolbar select:disabled[b-adfsbpebe5],
:root[data-theme="dark"] .toolbar input:disabled[b-adfsbpebe5] {
    border-color: #2c3a4f;
    color: #cbd5e1;
}

/* Primary action (Guardar) should dominate — bolder, with a lift. */
.toolbar .btn.primary[b-adfsbpebe5] {
    font-weight: 700;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .28);
}
.toolbar .btn.primary:hover[b-adfsbpebe5] {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, .36);
}
/* Secondary toolbar buttons recede slightly so they don't compete. */
.toolbar .btn:not(.primary):not(.warn)[b-adfsbpebe5] {
    font-weight: 500;
}

/* Toolbox action buttons: tile feel — subtle lift on hover/press. */
.toolbox .tool-btn[b-adfsbpebe5] {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.toolbox .tool-btn:hover[b-adfsbpebe5] { box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.toolbox .tool-btn:active[b-adfsbpebe5] { transform: translateY(1px); }

/* Token rows: gentle hover so the clickable list reads as interactive. */
.token-btn[b-adfsbpebe5] { transition: background .12s ease, border-color .12s ease; }
.token-btn:hover[b-adfsbpebe5] { border-color: var(--primary); }

/* =====================================================================
   Mobile (iPhone ~390px) — config form overflow fix. ADDITIVE, ≤600px
   only; desktop/base untouched. Scoped to this page (Blazor [b-xxx]).
   The "Plantillas de tickets" config form (.toolbar .row) lays its
   fields in flex pairs whose <select>/<input> carry inline min-width
   (220/200/180/160/140/120px). On a 390px screen the "Terminal | Tipo"
   and "Impresora | Papel" pairs sit side-by-side and overrun the right
   edge (Tipo / Papel cut off). Collapse each field to a single column
   and let the controls shrink to the row width.
   ===================================================================== */
@media (max-width: 600px) {
    /* Page root + sticky toolbar can't push past the viewport. */
    .pane-3[b-adfsbpebe5],
    .toolbar[b-adfsbpebe5] { max-width: 100%; }
    .toolbar[b-adfsbpebe5] { overflow-x: hidden; }

    /* The flex field-row already wraps; force every field wrapper to its
       own full-width line and allow flex children to shrink below their
       content (defeats the implicit min-width:auto that was overflowing). */
    .toolbar .row[b-adfsbpebe5] { min-width: 0; }
    .toolbar .row > *[b-adfsbpebe5] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Override the inline min-width/width on the text selects + inputs so
       they fill the column instead of forcing the row wider than 390px.
       (Checkbox/radio stay intrinsic; the zoom range keeps its own size
       inside its little flex sub-row.) */
    .toolbar select[b-adfsbpebe5],
    .toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="range"])[b-adfsbpebe5] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* The action block (Guardar / Imprimir prueba / …) is pushed right with
       margin-left:auto on desktop — drop that so it stacks full width and
       its button cluster wraps instead of overrunning. */
    .toolbar .row > div[style*="margin-left:auto"][b-adfsbpebe5] {
        margin-left: 0 !important;
        align-items: stretch;
    }
    .toolbar .row > div[style*="margin-left:auto"] > div[b-adfsbpebe5] { flex-wrap: wrap; }
}
/* /Pages/Admin/Tips.razor.rz.scp.css */
.tips-container[b-lykmvtouli] { padding: 1.5rem; }
.page-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-lykmvtouli] { font-size: 1.5rem; color: #f1f5f9; margin: 0; }
.subtitle[b-lykmvtouli] { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
.tab-bar[b-lykmvtouli] { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid #334155; }
.tab[b-lykmvtouli] { padding: 0.75rem 1.5rem; background: none; border: none; color: #94a3b8; font-size: 0.875rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab.active[b-lykmvtouli] { color: #3b82f6; border-bottom-color: #3b82f6; }
.tab:hover[b-lykmvtouli] { color: #e2e8f0; }
.btn[b-lykmvtouli] { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.15s; }
.btn.primary[b-lykmvtouli] { background: #3b82f6; color: white; }
.btn.primary:hover[b-lykmvtouli] { background: #2563eb; }
.btn.outline[b-lykmvtouli] { background: transparent; border: 1px solid #334155; color: #e2e8f0; }
.btn.outline:hover[b-lykmvtouli] { border-color: #475569; }
.btn.danger-outline[b-lykmvtouli] { background: transparent; border: 1px solid #ef4444; color: #ef4444; }
.btn.sm[b-lykmvtouli] { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.btn:disabled[b-lykmvtouli] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-lykmvtouli] { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.btn-icon.danger[b-lykmvtouli] { color: #ef4444; }
.pools-grid[b-lykmvtouli] { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
.pool-card[b-lykmvtouli] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 1.25rem; }
.pool-card.inactive[b-lykmvtouli] { opacity: 0.6; }
.pool-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.pool-header h3[b-lykmvtouli] { color: #f1f5f9; margin: 0; font-size: 1rem; }
.badge[b-lykmvtouli] { padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.badge.active[b-lykmvtouli] { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge.inactive[b-lykmvtouli] { background: rgba(148,163,184,0.15); color: #94a3b8; }
.pool-info[b-lykmvtouli] { margin-bottom: 0.75rem; }
.detail-row[b-lykmvtouli] { display: flex; justify-content: space-between; font-size: 0.8rem; color: #e2e8f0; padding: 0.15rem 0; }
.detail-row .label[b-lykmvtouli] { color: #94a3b8; }
.pool-members[b-lykmvtouli] { margin-bottom: 0.75rem; padding: 0.5rem; background: #0f172a; border-radius: 0.375rem; }
.member-row[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #e2e8f0; padding: 0.25rem 0; }
.points[b-lykmvtouli] { color: #f59e0b; font-weight: 600; }
.pool-actions[b-lykmvtouli] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-input[b-lykmvtouli] { background: #0f172a; border: 1px solid #334155; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; width: 100%; box-sizing: border-box; }
.form-input:focus[b-lykmvtouli] { border-color: #3b82f6; outline: none; }
.table-wrapper[b-lykmvtouli] { overflow-x: auto; background: #1e293b; border-radius: 0.5rem; border: 1px solid #334155; }
.data-table[b-lykmvtouli] { width: 100%; border-collapse: collapse; }
.data-table th[b-lykmvtouli] { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; border-bottom: 1px solid #334155; }
.data-table td[b-lykmvtouli] { padding: 0.75rem 1rem; font-size: 0.875rem; color: #e2e8f0; border-bottom: 1px solid #1e293b; }
.data-table tbody tr[b-lykmvtouli] { cursor: pointer; }
.data-table tbody tr:hover[b-lykmvtouli] { background: #334155; }
.amount[b-lykmvtouli] { font-weight: 600; color: #22c55e; }
.detail-row-expand td[b-lykmvtouli] { padding: 0 1rem 1rem; background: #0f172a; }
.dist-lines[b-lykmvtouli] { display: flex; flex-direction: column; gap: 0.25rem; }
.dist-line[b-lykmvtouli] { display: flex; justify-content: space-between; font-size: 0.8rem; color: #e2e8f0; padding: 0.25rem 0.5rem; }
.modal-overlay[b-lykmvtouli] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal[b-lykmvtouli] { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; width: 90%; max-width: 480px; }
.modal-header[b-lykmvtouli] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #334155; }
.modal-header h2[b-lykmvtouli] { font-size: 1.1rem; color: #f1f5f9; margin: 0; }
.close-btn[b-lykmvtouli] { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.modal-body[b-lykmvtouli] { padding: 1.25rem; }
.form-group[b-lykmvtouli] { margin-bottom: 1rem; }
.form-group label[b-lykmvtouli] { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.25rem; }
.form-row[b-lykmvtouli] { display: flex; gap: 1rem; }
.form-row .form-group[b-lykmvtouli] { flex: 1; }
.checkbox-label[b-lykmvtouli] { display: flex; align-items: center; gap: 0.5rem; color: #e2e8f0; font-size: 0.875rem; }
.modal-footer[b-lykmvtouli] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid #334155; }
.loading-state[b-lykmvtouli] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-lykmvtouli] { width: 2rem; height: 2rem; border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin-b-lykmvtouli 0.8s linear infinite; }
@keyframes spin-b-lykmvtouli { to { transform: rotate(360deg); } }
.empty-state[b-lykmvtouli] { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state h2[b-lykmvtouli] { color: #e2e8f0; margin-bottom: 0.5rem; }

/* ===== 44px touch targets (Codex QA) ===== */
/* Controls were ~36-39px (sized by padding only) — floor genuine tap targets
   to 44px for admin/tablet. inline-flex centres labels at the larger height. */
.btn[b-lykmvtouli],
.form-input[b-lykmvtouli],
.tab[b-lykmvtouli] {
    min-height: 44px;
}
.btn[b-lykmvtouli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Icon × buttons (modal close, member remove) → 44×44 tap box. */
.close-btn[b-lykmvtouli],
.btn-icon[b-lykmvtouli] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* The member remove × sits in a tight row — keep it from stretching the row. */
.member-row .btn-icon[b-lykmvtouli] { flex-shrink: 0; }
/* /Pages/Admin/UserPermissions.razor.rz.scp.css */
/* User Permissions Page - Dark Theme */
h3[b-utug3c5dwk] {
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Loading state */
div:only-child[b-utug3c5dwk] {
    color: #94a3b8;
    padding: 2rem;
    text-align: center;
}

/* Table styling */
table[b-utug3c5dwk] {
    width: 100%;
    border-collapse: collapse;
    background: #1e293b;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #334155;
}

thead tr[b-utug3c5dwk] {
    background: #0f172a;
}

th[b-utug3c5dwk] {
    text-align: left;
    padding: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    border-bottom: 1px solid #334155;
}

td[b-utug3c5dwk] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: #e2e8f0;
    border-bottom: 1px solid #334155;
}

tbody tr:hover[b-utug3c5dwk] {
    background: rgba(51, 65, 85, 0.5);
}

tbody tr:last-child td[b-utug3c5dwk] {
    border-bottom: none;
}

/* Checkbox styling */
input[type="checkbox"][b-utug3c5dwk] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

/* Empty state when no users */
.empty-state[b-utug3c5dwk] {
    padding: 3rem;
    text-align: center;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    table[b-utug3c5dwk] {
        display: block;
        overflow-x: auto;
    }

    th[b-utug3c5dwk], td[b-utug3c5dwk] {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* ---- Phone (≤600px): make the users table reachable ----
   At ~390px the 6-column table is wider than the viewport, so the
   EMAIL column was clipped and Rol/Estado/Anular/Acciones sat off-screen
   with no way to reach them. Wrap the table in a horizontal-scroll
   container so the user can swipe to the hidden columns. The table sizes
   to its content (min-width) so it overflows the wrapper and the
   wrapper's own scroll engages instead of the columns being crushed.
   Additive, ≤600px only — desktop/base untouched. */
@media (max-width: 600px) {
    /* Don't let the page constrain/clip the scroll container. */
    .permissions-page[b-utug3c5dwk] {
        max-width: 100%;
    }

    /* The scroll viewport: swipeable, momentum scrolling on iOS. */
    .table-scroll[b-utug3c5dwk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* The table draws its own rounded border; let it bleed to edge. */
        margin: 0;
        /* Subtle hint that there's more to the right. */
        scrollbar-width: thin;
    }

    /* Override the 768px rule above: a display:block table with no width
       just crushes columns. Keep it a real table and size to content so
       it overflows the .table-scroll wrapper (which then scrolls). */
    .table-scroll table[b-utug3c5dwk] {
        display: table;
        overflow: visible;
        width: max-content;
        min-width: 100%;
    }

    /* Keep the first columns readable while scrolling. */
    .permissions-table th[b-utug3c5dwk],
    .permissions-table td[b-utug3c5dwk] {
        white-space: nowrap;
    }

    /* Header subtitle was clipped on the right — let it wrap. */
    .page-header p[b-utug3c5dwk] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* /Pages/Admin/WaitlistSettings.razor.rz.scp.css */
.settings-page[b-6uppcw9poy] {
    min-height: 100vh;
    background: #0f172a;
}

.settings-header[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn[b-6uppcw9poy] {
    width: 36px;
    height: 36px;
    border: none;
    background: #334155;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
}

.settings-header h1[b-6uppcw9poy] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.loading[b-6uppcw9poy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: #94a3b8;
}

.spinner[b-6uppcw9poy] {
    width: 32px;
    height: 32px;
    border: 3px solid #334155;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-6uppcw9poy 1s linear infinite;
}

.spinner-small[b-6uppcw9poy] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6uppcw9poy 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin-b-6uppcw9poy {
    to { transform: rotate(360deg); }
}

.error-message[b-6uppcw9poy] {
    padding: 20px;
    margin: 20px;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #dc2626;
    border-radius: 12px;
    color: #f87171;
    text-align: center;
}

.error-message button[b-6uppcw9poy] {
    margin-top: 12px;
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.settings-content[b-6uppcw9poy] {
    padding: 16px;
    padding-bottom: 100px;
}

/* Section */
.setting-section[b-6uppcw9poy] {
    margin-bottom: 24px;
}

.section-title[b-6uppcw9poy] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin: 0 0 12px 4px;
}

/* Cards */
.setting-card[b-6uppcw9poy] {
    background: #1e293b;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #334155;
}

.toggle-card[b-6uppcw9poy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.setting-info h3[b-6uppcw9poy] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.setting-info p[b-6uppcw9poy] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Toggle Switch */
.switch[b-6uppcw9poy] {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input[b-6uppcw9poy] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-6uppcw9poy] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #475569;
    border-radius: 28px;
    transition: 0.3s;
}

.slider[b-6uppcw9poy]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch input:checked + .slider[b-6uppcw9poy] {
    background-color: #10b981;
}

.switch input:checked + .slider[b-6uppcw9poy]:before {
    transform: translateX(24px);
}

/* Form Fields */
.field-label[b-6uppcw9poy] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.field-hint[b-6uppcw9poy] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 8px 0 0;
}

/* Input with Suffix */
.input-with-suffix[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-suffix input[b-6uppcw9poy] {
    width: 100px;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 1rem;
    color: #e2e8f0;
    background: #0f172a;
}

.input-with-suffix input:focus[b-6uppcw9poy] {
    outline: none;
    border-color: #10b981;
}

.input-with-suffix .suffix[b-6uppcw9poy] {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Text Inputs */
.setting-card input[type="text"][b-6uppcw9poy],
.setting-card input[type="tel"][b-6uppcw9poy],
.setting-card input[type="password"][b-6uppcw9poy] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #e2e8f0;
    background: #0f172a;
}

.setting-card input:focus[b-6uppcw9poy] {
    outline: none;
    border-color: #10b981;
}

/* Textarea */
textarea[b-6uppcw9poy] {
    width: 100%;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
    background: #0f172a;
    color: #e2e8f0;
}

textarea:focus[b-6uppcw9poy] {
    outline: none;
    border-color: #10b981;
}

/* Twilio Notice */
.twilio-notice[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #fbbf24;
}

.notice-icon[b-6uppcw9poy] {
    font-size: 1rem;
}

/* Test Button */
.test-btn[b-6uppcw9poy] {
    width: 100%;
    padding: 12px;
    background: #334155;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.test-btn:hover[b-6uppcw9poy] {
    background: #475569;
}

.test-btn:disabled[b-6uppcw9poy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.test-result[b-6uppcw9poy] {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
}

.test-result.success[b-6uppcw9poy] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.test-result.error[b-6uppcw9poy] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

/* Link Card */
.link-card[b-6uppcw9poy] {
    background: #0f172a;
    border: 1px dashed #334155;
}

.link-preview[b-6uppcw9poy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #1e293b;
    border-radius: 8px;
    border: 1px solid #334155;
}

.link-url[b-6uppcw9poy] {
    flex: 1;
    font-size: 0.85rem;
    color: #4ade80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-btn[b-6uppcw9poy] {
    padding: 6px 14px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Save Section */
.save-section[b-6uppcw9poy] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: #1e293b;
    border-top: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-btn[b-6uppcw9poy] {
    flex: 1;
    padding: 14px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-btn:disabled[b-6uppcw9poy] {
    opacity: 0.7;
    cursor: not-allowed;
}

.save-success[b-6uppcw9poy] {
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 500;
}
/* /Pages/Admin/WhatsApp.razor.rz.scp.css */
/* WhatsApp admin hub. Scoped (Blazor) so none of these leak. Light-first with
   :root[data-theme="dark"] overrides, matching the other admin pages. */

.wa-page[b-0imyhujatr] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.wa-header[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.wa-header h1[b-0imyhujatr] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.wa-header .bi-whatsapp[b-0imyhujatr] { color: #25d366; margin-right: .35rem; }

.wa-back[b-0imyhujatr] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #374151;
}
.wa-back:hover[b-0imyhujatr] { background: #f9fafb; }

.wa-loading[b-0imyhujatr], .wa-error[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
    color: #6b7280;
}
.wa-error button[b-0imyhujatr] {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 8px;
    padding: .35rem .75rem;
    cursor: pointer;
}
.wa-spinner[b-0imyhujatr] {
    width: 20px; height: 20px;
    border: 3px solid #e5e7eb;
    border-top-color: #25d366;
    border-radius: 50%;
    animation: wa-spin-b-0imyhujatr 0.8s linear infinite;
}
@keyframes wa-spin-b-0imyhujatr { to { transform: rotate(360deg); } }

.wa-conn[b-0imyhujatr] {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.wa-conn .bi[b-0imyhujatr] { font-size: 1.4rem; margin-top: .1rem; }
.wa-conn strong[b-0imyhujatr] { display: block; font-size: 1.05rem; }
.wa-conn p[b-0imyhujatr] { margin: .2rem 0 0; font-size: .9rem; line-height: 1.4; }
.wa-conn.ok[b-0imyhujatr] { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.wa-conn.ok .bi[b-0imyhujatr] { color: #10b981; }
.wa-conn.warn[b-0imyhujatr] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.wa-conn.warn .bi[b-0imyhujatr] { color: #f59e0b; }

.wa-grid[b-0imyhujatr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.wa-card[b-0imyhujatr] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
}
.wa-card-head[b-0imyhujatr] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
}
.wa-card-head .bi[b-0imyhujatr] { color: #25d366; font-size: 1.05rem; }
.wa-card-head h2[b-0imyhujatr] { font-size: 1rem; font-weight: 700; margin: 0; color: #111827; }

.wa-big[b-0imyhujatr] { font-size: 1.6rem; font-weight: 700; margin: 0 0 .35rem; color: #111827; }
.wa-big span[b-0imyhujatr] { font-size: .85rem; font-weight: 500; color: #6b7280; }

.wa-sub[b-0imyhujatr] { font-size: .85rem; color: #6b7280; line-height: 1.45; margin: .35rem 0 .65rem; }
.wa-sub code[b-0imyhujatr], .wa-card code[b-0imyhujatr] {
    background: #f3f4f6;
    border-radius: 5px;
    padding: .05rem .3rem;
    font-size: .82em;
    color: #374151;
}

.wa-chips[b-0imyhujatr] { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.wa-chip[b-0imyhujatr] {
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.wa-chip.on[b-0imyhujatr] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.wa-chip.on[b-0imyhujatr]::before { content: "● "; color: #10b981; }
.wa-chip.off[b-0imyhujatr] { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.wa-chip.off[b-0imyhujatr]::before { content: "○ "; }

.wa-link[b-0imyhujatr] {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    /* Comfortable touch target on tablet admin screens. */
    min-height: 44px;
    line-height: 44px;
}
.wa-link:hover[b-0imyhujatr] { text-decoration: underline; }

/* ===== Dark mode (operators run admin in dark; light-first + overrides) ===== */
:root[data-theme="dark"] .wa-header h1[b-0imyhujatr],
:root[data-theme="dark"] .wa-card-head h2[b-0imyhujatr],
:root[data-theme="dark"] .wa-big[b-0imyhujatr] { color: #f3f4f6; }
:root[data-theme="dark"] .wa-big span[b-0imyhujatr],
:root[data-theme="dark"] .wa-sub[b-0imyhujatr] { color: #9ca3af; }
:root[data-theme="dark"] .wa-back[b-0imyhujatr] {
    background: #1f2937; border-color: #374151; color: #e5e7eb;
}
:root[data-theme="dark"] .wa-back:hover[b-0imyhujatr] { background: #374151; }
:root[data-theme="dark"] .wa-card[b-0imyhujatr] {
    background: #1f2937; border-color: #374151;
}
:root[data-theme="dark"] .wa-sub code[b-0imyhujatr], :root[data-theme="dark"] .wa-card code[b-0imyhujatr] {
    background: #374151; color: #e5e7eb;
}
:root[data-theme="dark"] .wa-chip.off[b-0imyhujatr] { background: #374151; color: #9ca3af; border-color: #4b5563; }
:root[data-theme="dark"] .wa-conn.ok[b-0imyhujatr] { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #6ee7b7; }
:root[data-theme="dark"] .wa-conn.warn[b-0imyhujatr] { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #fcd34d; }
:root[data-theme="dark"] .wa-link[b-0imyhujatr] { color: #60a5fa; }
/* /Pages/Board.razor.rz.scp.css */
/* Pickup board — a TV above the counter. High-contrast, large, glanceable from
   across a room. Two columns: Preparando (amber) / Listo (green). */
.board-page[b-4d9hogo5u9] {
    position: fixed;
    inset: 0;
    display: flex;
    background: #0d0f1a;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.board-col[b-4d9hogo5u9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.5vh 2vw;
}

.board-prep[b-4d9hogo5u9] { border-right: 2px solid rgba(255, 255, 255, 0.08); }

.board-head[b-4d9hogo5u9] {
    margin: 0 0 2.5vh;
    text-align: center;
    font-size: 4vh;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.board-prep .board-head[b-4d9hogo5u9] { color: #f5a623; }
.board-ready .board-head[b-4d9hogo5u9] { color: #2ecc71; }

.board-tickets[b-4d9hogo5u9] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1.4vh 1.2vw;
    overflow: hidden;
}

.board-ticket[b-4d9hogo5u9] {
    min-width: 7vw;
    padding: 1.4vh 1.6vw;
    border-radius: 1.4vh;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(245, 166, 35, 0.5);
    color: #fff;
    font-size: 5vh;
    font-weight: 800;
    text-align: center;
    line-height: 1;
}

.board-ticket-ready[b-4d9hogo5u9] {
    background: rgba(46, 204, 113, 0.16);
    border-color: #2ecc71;
    color: #eafff2;
    /* a gentle attention pulse when a ticket lands in "Listo" */
    animation: boardReadyIn-b-4d9hogo5u9 0.5s ease;
}

@keyframes boardReadyIn-b-4d9hogo5u9 {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.board-none[b-4d9hogo5u9] {
    width: 100%;
    text-align: center;
    font-size: 4vh;
    opacity: 0.25;
    margin-top: 4vh;
}

.board-fatal[b-4d9hogo5u9] {
    margin: auto;
    font-size: 8vh;
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .board-ticket-ready[b-4d9hogo5u9] { animation: none; }
}
/* /Pages/Home.razor.rz.scp.css */
[b-0myroo6v3o] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HERO ===== */

[b-0myroo6v3o] .hh-hero {
    position: relative;
    padding: 96px 0 0;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(239, 68, 68, 0.12) 0%, transparent 70%),
                radial-gradient(ellipse at 20% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 60%);
}

[b-0myroo6v3o] .hh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde047;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 28px;
}

[b-0myroo6v3o] .hh-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    animation: hh-pulse-b-0myroo6v3o 2s ease-in-out infinite;
}

@keyframes hh-pulse-b-0myroo6v3o {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05); }
}

[b-0myroo6v3o] .hh-hero h1 {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 900;
    margin: 0 0 18px;
    letter-spacing: -0.035em;
    line-height: 1.02;
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-0myroo6v3o] .hh-sub {
    color: #94a3b8;
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

[b-0myroo6v3o] .hh-cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

[b-0myroo6v3o] .hh-trust {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    color: #64748b;
    font-size: 0.85rem;
}

[b-0myroo6v3o] .hh-trust > span:first-child {
    color: #fbbf24;
}

[b-0myroo6v3o] .hh-mockup-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 80px;
    padding-bottom: 80px;
    flex-wrap: wrap;
    perspective: 1400px;
}

[b-0myroo6v3o] .hh-pos-mock {
    width: 360px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
    transform: rotateY(8deg) rotateX(4deg);
}

[b-0myroo6v3o] .hh-pos-tile {
    aspect-ratio: 1;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
}

[b-0myroo6v3o] .hh-pos-tile span:first-child { color: #f1f5f9; font-weight: 800; }
[b-0myroo6v3o] .hh-pos-tile strong { color: #fff; font-weight: 800; font-size: 0.78rem; }
[b-0myroo6v3o] .hh-pos-tile.t { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
[b-0myroo6v3o] .hh-pos-tile.free { background: #1e293b; }
[b-0myroo6v3o] .hh-pos-tile.free span { color: #475569; }
[b-0myroo6v3o] .hh-pos-tile.occ { background: linear-gradient(135deg, #064e3b, #047857); }
[b-0myroo6v3o] .hh-pos-tile.occ.warn { background: linear-gradient(135deg, #7c2d12, #ea580c); }
[b-0myroo6v3o] .hh-pos-tile.res { background: linear-gradient(135deg, #1e3a8a, #4338ca); }

[b-0myroo6v3o] .hh-qr-mock {
    width: 260px;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    border: 6px solid #1f2937;
    border-radius: 28px;
    padding: 16px 14px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
    transform: rotateY(-8deg) rotateX(4deg);
}

[b-0myroo6v3o] .hh-qr-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-round {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-0myroo6v3o] .hh-time {
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-0myroo6v3o] .hh-qr-title {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-qr-row {
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 10px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.85rem;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

[b-0myroo6v3o] .hh-qr-row .prem {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
}

[b-0myroo6v3o] .hh-qr-bar {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-top: 12px;
    font-weight: 600;
}

[b-0myroo6v3o] .hh-qr-bar strong { font-size: 1.05rem; font-weight: 900; }

/* ===== FEATURE STRIP ===== */

[b-0myroo6v3o] .hh-features {
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .hh-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

[b-0myroo6v3o] .hh-feat {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

[b-0myroo6v3o] .hh-feat:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

[b-0myroo6v3o] .hh-feat-new {
    border-color: rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-feat-new:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 12px 32px rgba(245, 158, 11, 0.15);
}

[b-0myroo6v3o] .hh-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

[b-0myroo6v3o] .hh-feat h3 {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-0myroo6v3o] .hh-feat p {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

[b-0myroo6v3o] .hh-new {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== BUFFET BIG CALLOUT ===== */

[b-0myroo6v3o] .hh-buffet {
    padding: 24px 0 72px;
}

[b-0myroo6v3o] .hh-buffet-card {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 24px;
    padding: 48px;
    align-items: center;
}

[b-0myroo6v3o] .hh-buffet-eye {
    color: #fde047;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

[b-0myroo6v3o] .hh-buffet-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

[b-0myroo6v3o] .hh-buffet-text p {
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 28px;
}

[b-0myroo6v3o] .hh-buffet-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

[b-0myroo6v3o] .hh-buffet-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 32px;
    border-left: 1px solid rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-buffet-stats > div {
    display: flex;
    flex-direction: column;
}

[b-0myroo6v3o] .hh-buffet-stats strong {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fde047;
    letter-spacing: -0.03em;
    line-height: 1;
}

[b-0myroo6v3o] .hh-buffet-stats span {
    color: #94a3b8;
    font-size: 0.88rem;
    margin-top: 4px;
}

/* ===== TYPES OF RESTAURANTS ===== */

[b-0myroo6v3o] .hh-types {
    padding: 72px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .hh-types h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    text-align: center;
}

[b-0myroo6v3o] .hh-types-sub {
    color: #94a3b8;
    text-align: center;
    margin: 0 0 36px;
    font-size: 1.05rem;
}

[b-0myroo6v3o] .hh-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

[b-0myroo6v3o] .hh-type {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

[b-0myroo6v3o] .hh-type:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

[b-0myroo6v3o] .hh-type-new {
    border-color: rgba(245, 158, 11, 0.3);
}

[b-0myroo6v3o] .hh-type-new:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

[b-0myroo6v3o] .hh-type-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

[b-0myroo6v3o] .hh-type h3 {
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
}

[b-0myroo6v3o] .hh-type p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

/* ===== SHARED CTAs ===== */

[b-0myroo6v3o] .btn-primary,
[b-0myroo6v3o] .btn-secondary {
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
    display: inline-block;
}

[b-0myroo6v3o] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-0myroo6v3o] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-0myroo6v3o] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-0myroo6v3o] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== FINAL CTA STRIP ===== */

[b-0myroo6v3o] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-0myroo6v3o] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-0myroo6v3o] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-0myroo6v3o] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-0myroo6v3o] .hh-feat-grid { grid-template-columns: repeat(2, 1fr); }
    [b-0myroo6v3o] .hh-types-grid { grid-template-columns: repeat(2, 1fr); }
    [b-0myroo6v3o] .hh-buffet-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
    }
    [b-0myroo6v3o] .hh-buffet-stats {
        flex-direction: row;
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid rgba(245, 158, 11, 0.3);
        gap: 32px;
    }
}

@media (max-width: 720px) {
    [b-0myroo6v3o] .hh-hero { padding: 64px 0 0; }
    [b-0myroo6v3o] .hh-mockup-row {
        gap: 16px;
        margin-top: 56px;
        padding-bottom: 56px;
    }
    [b-0myroo6v3o] .hh-pos-mock {
        width: 280px;
        transform: rotateY(4deg);
    }
    [b-0myroo6v3o] .hh-qr-mock {
        width: 220px;
        transform: rotateY(-4deg);
    }
    [b-0myroo6v3o] .hh-feat-grid { grid-template-columns: 1fr; }
    [b-0myroo6v3o] .hh-types-grid { grid-template-columns: 1fr; }
    [b-0myroo6v3o] .hh-buffet-stats {
        flex-direction: column;
        gap: 16px;
    }
}
/* /Pages/Kiosk.razor.rz.scp.css */
.kiosk-page[b-p15og3sva4] {
    /* Design tokens — one place to coordinate colour/type/elevation/motion, and the
       hook for per-restaurant brand theming (--k-accent is overridden inline from
       _menu.Branding.AccentColor, so every kiosk stops looking identically green). */
    --k-bg: #f5f6f8;
    --k-surface: #fff;
    --k-surface-2: #f5f7fa;
    --k-ink: #15161f;
    --k-ink-2: #5b6171;
    --k-ink-3: #9aa0ad;
    --k-line: #e8eaef;
    --k-accent: #2ecc71;
    --k-accent-press: #27ae60;
    --k-accent-soft: rgba(46, 204, 113, 0.14);
    --k-danger: #e74c3c;
    /* Constant dark chip (NOT overridden by themes) — qty badge / promo / combo badge
       always need dark-bg + white text, so they can't follow --k-ink (which inverts on
       dark themes → white-on-white). */
    --k-chip: #15161f;
    --k-chip-ink: #fff;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --e1: 0 1px 2px rgba(20, 22, 40, 0.05);
    --e2: 0 6px 20px -8px rgba(20, 22, 40, 0.16);
    --e3: 0 18px 56px -14px rgba(20, 22, 40, 0.32);
    --dur-1: 130ms;
    --dur-2: 240ms;
    --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);

    position: fixed;
    inset: 0;
    background: var(--k-bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Phase Transition ===== */
.kiosk-welcome[b-p15og3sva4],
.kiosk-fulfillment[b-p15og3sva4],
.kiosk-menu[b-p15og3sva4],
.kiosk-cart[b-p15og3sva4],
.kiosk-confirmation[b-p15og3sva4] {
    animation: fadeIn-b-p15og3sva4 0.25s ease;
}

/* Slide-only (no opacity fade): on a kiosk touchscreen the opacity:0 start made
   the fulfillment/cart screens look washed-out/blank for a moment. Keeping just
   the gentle upward slide animates the phase change without ever dropping contrast. */
@keyframes fadeIn-b-p15og3sva4 {
    from { transform: translateY(6px); }
    to { transform: translateY(0); }
}

/* ===== Loading / Fatal ===== */
.kiosk-loading[b-p15og3sva4],
.kiosk-fatal[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    padding: 40px;
}

.kiosk-fatal-icon[b-p15og3sva4] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.kiosk-fatal h2[b-p15og3sva4] { font-size: 2rem; margin: 0; }
.kiosk-fatal p[b-p15og3sva4] { font-size: 1.2rem; opacity: 0.6; margin: 0; max-width: 400px; }

.kiosk-spinner[b-p15og3sva4] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p15og3sva4 0.8s linear infinite;
}

@keyframes spin-b-p15og3sva4 { to { transform: rotate(360deg); } }

/* ===== Welcome Screen ===== */
.kiosk-welcome[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    cursor: pointer;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    padding: 40px;
}

.kiosk-logo[b-p15og3sva4] {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.kiosk-welcome h1[b-p15og3sva4] {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.kiosk-welcome:active[b-p15og3sva4] {
    background: linear-gradient(160deg, #0a0820, #252050, #1e1e34);
}

.kiosk-tap[b-p15og3sva4] {
    font-size: 1.4rem;
    opacity: 0.6;
    margin: 0;
}

.kiosk-tap-ring[b-p15og3sva4] {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: tapRing-b-p15og3sva4 2.5s ease-in-out infinite;
    margin-top: 8px;
}

@keyframes tapRing-b-p15og3sva4 {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(0.8); opacity: 0.6; }
}

/* Language picker */
.kiosk-lang-picker[b-p15og3sva4] {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.kiosk-lang-btn[b-p15og3sva4] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.kiosk-lang-btn:hover[b-p15og3sva4] {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.kiosk-lang-btn.active[b-p15og3sva4] {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
    font-weight: 600;
}

.kiosk-lang-btn:focus-visible[b-p15og3sva4] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.kiosk-paused-banner[b-p15og3sva4] {
    background: rgba(231, 76, 60, 0.9);
    backdrop-filter: blur(8px);
    color: white;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 12px;
    max-width: 500px;
}

/* ===== Fulfillment Choice ===== */
.kiosk-fulfillment[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: var(--k-bg);
}

.kiosk-fulfillment h2[b-p15og3sva4] {
    font-size: 2.2rem;
    color: var(--k-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Center + edge padding so the long title doesn't press the left edge in
       portrait (e.g. 390px) — h2 defaults to left-aligned and spans full width. */
    text-align: center;
    padding: 0 24px;
}

.kiosk-fulfillment-options[b-p15og3sva4] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 24px;
}

.kiosk-choice[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 56px;
    border: 2px solid var(--k-line);
    border-radius: 24px;
    background: var(--k-surface);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--k-ink);
    transition: all 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    min-width: 200px;
}

.kiosk-choice:hover[b-p15og3sva4] {
    border-color: #2ecc71;
    background: #f0fff4;
    box-shadow: 0 4px 20px rgba(46,204,113,0.15);
}

.kiosk-choice:active[b-p15og3sva4] {
    border-color: #2ecc71;
    background: #f0fff4;
    transform: scale(0.96);
    box-shadow: 0 2px 16px rgba(46,204,113,0.2);
}

.kiosk-choice:focus-visible[b-p15og3sva4] {
    outline: 2px solid #2ecc71;
    outline-offset: 2px;
}

.kiosk-choice-icon[b-p15og3sva4] { font-size: 3.5rem; }

.kiosk-btn-cancel-small[b-p15og3sva4] {
    background: none;
    border: none;
    color: #475569;            /* was #aaa — too faint to read on a kiosk */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;          /* touch target (was ~40px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    transition: color 0.15s;
}

.kiosk-btn-cancel-small:hover[b-p15og3sva4] { color: var(--k-ink-2); }

/* ===== Header ===== */
.kiosk-header[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-line);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.kiosk-header h2[b-p15og3sva4] {
    flex: 1;
    min-width: 0;                 /* allow the title to shrink instead of pushing the actions off-screen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--k-ink);
}

.kiosk-back[b-p15og3sva4] {
    background: none;
    border: 2px solid var(--k-line);
    border-radius: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--k-ink-2);
    transition: all 0.1s;
}

.kiosk-back:hover[b-p15og3sva4] { background: var(--k-surface-2); border-color: #ccc; }
.kiosk-back:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.95); }
.kiosk-back:focus-visible[b-p15og3sva4] { outline: 2px solid #2ecc71; outline-offset: 2px; }

.kiosk-cart-btn[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.1s;
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

.kiosk-cart-btn:hover[b-p15og3sva4] { background: #27ae60; box-shadow: 0 4px 14px rgba(46,204,113,0.4); }
.kiosk-cart-btn:active[b-p15og3sva4] { background: #27ae60; transform: scale(0.96); }
.kiosk-cart-btn:focus-visible[b-p15og3sva4] { outline: 2px solid #fff; outline-offset: 2px; }

.kiosk-cart-count[b-p15og3sva4] {
    background: rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.95rem;
}

.kiosk-cart-total[b-p15og3sva4] { font-size: 0.95rem; opacity: 0.9; }

/* ===== Menu / Grid ===== */
.kiosk-menu[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--k-bg);
}

.kiosk-grid[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 32px;
    display: grid;
    gap: 14px;
    align-content: start;
    /* Size rows to the tile's full content. Without this, a long flat/section grid
       inside this flex:1 + overflow container collapsed `auto` rows to min-content
       (the image area shrank to 0 → 25px "white pill" tiles); max-content keeps each
       row at the real card height and the grid scrolls instead. */
    grid-auto-rows: max-content;
    /* Center the grid on wide kiosk screens so categories/items don't sprawl
       edge-to-edge with big empty gaps (no effect ≤1100px, e.g. portrait). */
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
}

/* auto-fit (not auto-fill): with few categories the tracks collapse and the
   cards stretch to fill the centered 1100px grid instead of left-packing with
   empty columns on the right. Portrait (1 col) is unchanged. */
.kiosk-categories[b-p15og3sva4] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kiosk-items[b-p15og3sva4] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.kiosk-tile[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kiosk-tile:active[b-p15og3sva4] {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.kiosk-tile-added[b-p15og3sva4] {
    animation: addFlash-b-p15og3sva4 0.4s ease;
}

@keyframes addFlash-b-p15og3sva4 {
    0% { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    50% { box-shadow: 0 0 0 8px rgba(46,204,113,0.2); transform: scale(0.97); }
    100% { box-shadow: 0 2px 10px rgba(20,20,50,0.06); transform: scale(1); }
}

/* Media: image with a coloured-monogram fallback. The monogram sits underneath;
   a present, loaded <img> covers it. When the image has no URL (.no-img) or 404s
   (JS adds .img-failed) the gradient + monogram show instead of a broken-image. */
.kiosk-tile-media[b-p15og3sva4] {
    position: relative;
    width: 100%;
    height: 140px;
    flex: 0 0 140px;   /* never let the column-flex shrink the image area to 0 (the
                          long flat-grid compressed it → 25px "white pill" tiles) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mono-bg, linear-gradient(135deg, #eef1f5, #e2e6ec));
}

.kiosk-tile-media img[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-tile-media.img-failed img[b-p15og3sva4] { display: none; }

.kiosk-tile-mono[b-p15og3sva4] {
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(20, 20, 40, 0.34);
    letter-spacing: 0.02em;
}

.kiosk-tile-label[b-p15og3sva4] {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    color: var(--k-ink);
}

.kiosk-item-info[b-p15og3sva4] {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kiosk-item-name[b-p15og3sva4] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--k-ink);
}

.kiosk-item-price[b-p15og3sva4] {
    color: #2ecc71;
    font-weight: 700;
    font-size: 1.05rem;
}

.kiosk-badge[b-p15og3sva4] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--k-chip);
    color: white;
    border-radius: 10px;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ===== Empty State ===== */
.kiosk-empty-state[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #999;
    font-size: 1.2rem;
    padding: 40px;
}

/* ===== Cart ===== */
.kiosk-cart[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--k-bg);
}

.kiosk-cart-items[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px;
    -webkit-overflow-scrolling: touch;
}

.kiosk-cart-row[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--k-line);
}

.kiosk-cart-row:last-child[b-p15og3sva4] {
    border-bottom: none;
}

.kiosk-cart-item-info[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kiosk-cart-name[b-p15og3sva4] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--k-ink);
}

.kiosk-cart-variant[b-p15og3sva4] {
    font-size: 0.85rem;
    color: var(--k-ink-2);
}

.kiosk-cart-unit[b-p15og3sva4] {
    font-size: 0.8rem;
    color: #aaa;
}

.kiosk-cart-controls[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kiosk-qty-btn[b-p15og3sva4] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.kiosk-qty-minus[b-p15og3sva4] {
    background: var(--k-surface-2);
    color: var(--k-ink-2);
}

.kiosk-qty-minus:active[b-p15og3sva4] { background: var(--k-line); transform: scale(0.93); }

.kiosk-qty-plus[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
}

.kiosk-qty-plus:active[b-p15og3sva4] { background: #27ae60; transform: scale(0.93); }

.kiosk-qty[b-p15og3sva4] {
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    color: var(--k-ink);
}

.kiosk-cart-price[b-p15og3sva4] {
    font-weight: 700;
    font-size: 1.15rem;
    min-width: 80px;
    text-align: right;
    color: var(--k-ink);
}

.kiosk-cart-footer[b-p15og3sva4] {
    padding: 20px 24px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    background: var(--k-surface);
    border-top: 1px solid var(--k-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}

.kiosk-total[b-p15og3sva4] {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--k-ink);
}

.kiosk-btn-primary[b-p15og3sva4] {
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 16px;
    padding: 18px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(46,204,113,0.3);
}

.kiosk-btn-primary:active[b-p15og3sva4] {
    background: #27ae60;
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(46,204,113,0.3);
}

.kiosk-btn-primary:disabled[b-p15og3sva4] {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.kiosk-btn-spinner[b-p15og3sva4] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p15og3sva4 0.7s linear infinite;
}

.kiosk-btn-secondary[b-p15og3sva4] {
    background: none;
    border: 2px solid var(--k-line);
    border-radius: 16px;
    padding: 14px;
    font-size: 1.05rem;
    color: var(--k-ink-2);
    cursor: pointer;
    transition: all 0.1s;
}

.kiosk-btn-secondary:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.98); }

/* Destructive button for the cancel-order confirmation */
.kiosk-btn-danger[b-p15og3sva4] {
    border: none;
    border-radius: 16px;
    padding: 16px;
    min-height: 56px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: #e74c3c;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}
.kiosk-btn-danger:active[b-p15og3sva4] { background: #c0392b; transform: scale(0.98); }

/* Cart-cancel confirmation sheet — misfire guard on a public kiosk so a tap on
   "Cancelar" doesn't instantly wipe a built-up basket. */
.kiosk-confirm-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}
.kiosk-confirm-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.28);
}
.kiosk-confirm-sheet h2[b-p15og3sva4] {
    font-size: 1.6rem;
    color: var(--k-ink);
    font-weight: 700;
    margin: 0 0 24px;
}
.kiosk-confirm-sheet-actions[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Menú del Día "what's included" line */
.kiosk-mdd-includes[b-p15og3sva4] { color: var(--k-accent-press); font-weight: 600; }

/* Pay-at-kiosk (Stripe Payment Element) */
.kiosk-payment-body[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}
.kiosk-pay-total[b-p15og3sva4] { font-size: 1.4rem; color: var(--k-ink); margin: 0 0 20px; text-align: center; }
.kiosk-pay-total strong[b-p15og3sva4] { color: var(--k-accent-press); }
.kiosk-stripe-element[b-p15og3sva4] { min-height: 60px; }
.kiosk-pay-error[b-p15og3sva4] { color: #e74c3c; font-weight: 600; margin-top: 16px; text-align: center; }

/* Pay-method choice: card-on-screen vs phone (QR) */
.kiosk-pay-choice[b-p15og3sva4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 4px;
}
.kiosk-pay-option[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border: 2px solid var(--k-line, rgba(0,0,0,.1));
    border-radius: 18px;
    background: var(--k-surface);
    color: var(--k-ink);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, transform .05s;
}
.kiosk-pay-option:active[b-p15og3sva4] { transform: translateY(1px); }
.kiosk-pay-option:hover[b-p15og3sva4] { border-color: var(--k-accent, #16a34a); }
.kiosk-pay-option-icon[b-p15og3sva4] { font-size: 2rem; line-height: 1; }

/* Phone (QR) pay */
.kiosk-pay-qr[b-p15og3sva4] { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px 0; }
.kiosk-pay-qr-hint[b-p15og3sva4] { font-size: 1.15rem; color: var(--k-ink); text-align: center; margin: 0; }
.kiosk-pay-qr-img[b-p15og3sva4] {
    width: 240px;
    height: 240px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    image-rendering: pixelated;
}
.kiosk-pay-waiting[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--k-ink-2, #6b7280);
    font-size: 1.05rem;
}

/* Factura QR on the confirmation screen (printer-less kiosks) */
.kiosk-factura-qr[b-p15og3sva4] {
    margin: 14px auto 0;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.kiosk-factura-qr img[b-p15og3sva4] { width: 200px; height: 200px; image-rendering: pixelated; }
.kiosk-factura-qr p[b-p15og3sva4] { margin: 8px 0 0; color: #4b5563; font-size: 0.95rem; }
.kiosk-payment-footer[b-p15og3sva4] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--k-line);
    background: var(--k-surface);
}
.kiosk-pay-btn[b-p15og3sva4] { font-size: 1.2rem; padding: 18px; }

/* Drink/dessert gap-fill grid */
.kiosk-gapfill-grid[b-p15og3sva4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.kiosk-gapfill-tile[b-p15og3sva4] { border: none; background: var(--k-surface); padding: 0; text-align: left; cursor: pointer; }

/* Combo-upgrade prompt */
.kiosk-upsell-emoji[b-p15og3sva4] { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.kiosk-upsell-msg[b-p15og3sva4] { font-size: 1.1rem; color: var(--k-ink-2); margin: 4px 0 18px; }

/* ===== Confirmation ===== */
.kiosk-confirmation[b-p15og3sva4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(160deg, #0f0c29, #302b63, #24243e);
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 40px;
}

.kiosk-confirm-card[b-p15og3sva4] {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 400px;
    width: 100%;
}

.kiosk-check[b-p15og3sva4] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: popIn-b-p15og3sva4 0.4s ease;
    box-shadow: 0 4px 20px rgba(46,204,113,0.4);
}

@keyframes popIn-b-p15og3sva4 {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.kiosk-confirmation h1[b-p15og3sva4] {
    font-size: 2rem;
    margin: 0;
    font-weight: 700;
}

.kiosk-confirm-divider[b-p15og3sva4] {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 4px 0;
}

.kiosk-confirm-label[b-p15og3sva4] {
    font-size: 1.1rem;
    opacity: 0.5;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kiosk-ticket-big[b-p15og3sva4] {
    font-size: 4.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    /* No pop-in animation: this number is the customer's order proof, so it must
       be at full opacity the instant the confirmation appears (the delayed
       popIn left it invisible for ~0.15s after the "número de pedido" label). */
    letter-spacing: -0.02em;
}

.kiosk-confirm-fulfillment[b-p15og3sva4] {
    font-size: 1rem;
    opacity: 0.5;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.kiosk-confirm-total[b-p15og3sva4] {
    font-size: 1.2rem;
    opacity: 0.7;
    margin: 0;
}

.kiosk-wait[b-p15og3sva4] {
    font-size: 1.1rem;
    opacity: 0.5;
    margin: 0;
}

/* Explicit "new order" CTA — the deliberate way to reset (tapping the screen only
   extends the countdown now, so the pickup number can't be wiped by accident). */
.kiosk-new-order-btn[b-p15og3sva4] {
    margin-top: 28px;
    padding: 16px 40px;
    font-size: 1.1rem;
}

.kiosk-countdown[b-p15og3sva4] {
    font-size: 0.9rem;
    opacity: 0.3;
}

/* ===== Toast ===== */
.kiosk-toast[b-p15og3sva4] {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 1000;
    animation: slideUp-b-p15og3sva4 0.3s ease;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.kiosk-toast-error[b-p15og3sva4] { background: #e74c3c; }
.kiosk-toast-success[b-p15og3sva4] { background: #2ecc71; }

/* Error toast with a one-tap recovery action (e.g. "Quitar y enviar"). */
.kiosk-toast-action[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: default;
    padding: 14px 16px 14px 24px;
    text-align: left;
}
.kiosk-toast-action .kiosk-toast-msg[b-p15og3sva4] { flex: 1; }
.kiosk-toast-btn[b-p15og3sva4] {
    flex-shrink: 0;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #c0392b;
    font-weight: 700;
    font-size: 1rem;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.kiosk-toast-btn:active[b-p15og3sva4] { transform: scale(0.96); }

@keyframes slideUp-b-p15og3sva4 {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   Premium polish + new layouts (scroll / tabs / grid),
   header language control, item descriptions, language sheet.
   ============================================================ */

/* Softer, more premium tiles. */
.kiosk-tile[b-p15og3sva4] {
    border: 1px solid rgba(20, 20, 50, 0.05);
    box-shadow: 0 2px 10px rgba(20, 20, 50, 0.06);
}

/* Cap category cards + centre them so a 2-category menu doesn't stretch into two
   giant tiles stranded in whitespace (the old auto-fit/1fr did exactly that). */
.kiosk-categories[b-p15og3sva4] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: center;
}

/* Header right-side actions (language globe + cart). */
.kiosk-header-actions[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;               /* keep the language globe + cart button fully on screen */
}

.kiosk-lang-globe[b-p15og3sva4] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, background 0.12s;
}
.kiosk-lang-globe:active[b-p15og3sva4] { transform: scale(0.94); background: var(--k-surface-2); }
.kiosk-lang-globe:focus-visible[b-p15og3sva4] { outline: 2px solid #2ecc71; outline-offset: 2px; }

/* Item description (2-line clamp) under the name. */
.kiosk-item-desc[b-p15og3sva4] {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--k-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Tabs layout ===== */
/* Wrap (don't horizontal-scroll-with-hidden-scrollbar): on a self-service kiosk a
   first-time customer won't think to swipe, so trailing categories must stay
   visible. Same reasoning as the TableSlidePanel .edge-tabs--functions fix. */
.kiosk-tabs[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
    padding: 12px 20px;
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-line);
    flex-shrink: 0;
}

.kiosk-tab[b-p15og3sva4] {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--k-ink-2);
    cursor: pointer;
    min-height: 48px;
    transition: transform 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.kiosk-tab:active[b-p15og3sva4] { transform: scale(0.97); }
.kiosk-tab.active[b-p15og3sva4] {
    background: #2ecc71;
    border-color: #2ecc71;
    color: #fff;
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
}

/* ===== Scroll layout (one page, sticky category headers) ===== */
.kiosk-layout-scroll .kiosk-scroll[b-p15og3sva4] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}
.kiosk-layout-scroll .kiosk-grid[b-p15og3sva4] {
    flex: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    padding-top: 6px;
}
/* Offset scrollIntoView (tap-a-chip) so the section header isn't hidden behind the
   sticky category chips. ~chip-strip height. */
.kiosk-section[b-p15og3sva4] { scroll-margin-top: 64px; }
.kiosk-section-header[b-p15og3sva4] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 16px 20px 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--k-ink);
    background: linear-gradient(180deg, var(--k-bg) 72%, rgba(248, 249, 250, 0));
}

/* ===== Language sheet (opened from the menu header 🌐) ===== */
.kiosk-lang-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 60;
}
.kiosk-lang-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    border-radius: 24px;
    padding: 24px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.3);
}
.kiosk-lang-grid[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* Re-skin the (dark-on-light) language pills for the white sheet. */
.kiosk-lang-sheet .kiosk-lang-btn[b-p15og3sva4] {
    border: 1px solid var(--k-line);
    background: var(--k-surface-2);
    color: var(--k-ink-2);
}
.kiosk-lang-sheet .kiosk-lang-btn:hover[b-p15og3sva4] { background: #eef0f3; color: var(--k-ink); }
.kiosk-lang-sheet .kiosk-lang-btn.active[b-p15og3sva4] {
    background: var(--k-accent);
    border-color: var(--k-accent);
    color: #fff;
    font-weight: 700;
}

/* ============================================================
   Premium pass: brand-accent retint, merchandising chips,
   promo banner, featured rail, bottom cart bar, a11y.
   (Appended overrides win by source order.)
   ============================================================ */

/* Accent-driven elements now follow --k-accent (per-restaurant brand colour). */
.kiosk-btn-primary[b-p15og3sva4] { background: var(--k-accent); box-shadow: 0 4px 16px -4px var(--k-accent-soft); }
.kiosk-btn-primary:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-qty-plus[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-qty-plus:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-tab.active[b-p15og3sva4] { background: var(--k-accent); border-color: var(--k-accent); box-shadow: 0 4px 14px -4px var(--k-accent-soft); }
.kiosk-check[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-cart-btn[b-p15og3sva4] { background: var(--k-accent); }
.kiosk-cart-btn:hover[b-p15og3sva4], .kiosk-cart-btn:active[b-p15og3sva4] { background: var(--k-accent-press); }
.kiosk-choice:hover[b-p15og3sva4], .kiosk-choice:active[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); box-shadow: 0 4px 20px -6px var(--k-accent-soft); }
.kiosk-lang-globe:focus-visible[b-p15og3sva4], .kiosk-back:focus-visible[b-p15og3sva4] { outline-color: var(--k-accent); }

/* Premium tiles + high-contrast pricing (green-on-white failed WCAG AA). */
.kiosk-tile[b-p15og3sva4] { box-shadow: var(--e2); border-radius: var(--radius-md); }
.kiosk-item-price[b-p15og3sva4] { color: var(--k-ink); font-feature-settings: 'tnum'; }
.kiosk-total[b-p15og3sva4] { font-feature-settings: 'tnum'; }
.kiosk-cart-price[b-p15og3sva4] { font-feature-settings: 'tnum'; }

/* Was-price / happy-hour scheduled pricing (OriginalPrice + PriceRuleName). */
.kiosk-price-row[b-p15og3sva4] { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.kiosk-item-was[b-p15og3sva4] {
    text-decoration: line-through;
    color: var(--k-ink-3);
    font-size: 0.85rem;
    font-weight: 600;
    font-feature-settings: 'tnum';
}
.kiosk-item-price.is-deal[b-p15og3sva4] { color: var(--k-danger); }
.kiosk-rule-chip[b-p15og3sva4] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--k-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    box-shadow: var(--e1);
    z-index: 3;
}

/* Out-of-stock treatment (IsOutOfStock). */
.kiosk-tile-oos[b-p15og3sva4] { opacity: 0.72; }
.kiosk-tile-oos:active[b-p15og3sva4] { transform: none; box-shadow: var(--e2); }
.kiosk-oos-ribbon[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 22, 40, 0.5);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 3;
}

/* Dietary/spice/new tags + EU-FIC allergen icons (Tags + AllergenFlags). */
.kiosk-item-meta[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.kiosk-tag[b-p15og3sva4] {
    background: var(--k-surface-2);
    color: var(--k-ink-2);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
}
.kiosk-allergens[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.85rem;
    line-height: 1;
    /* now a tappable button — reset default button chrome */
    border: none;
    background: transparent;
    padding: 2px 4px;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.kiosk-allergens:active[b-p15og3sva4] { background: var(--k-surface-2); transform: scale(0.96); }
.kiosk-allergen-i[b-p15og3sva4] { margin-inline-start: 3px; font-size: 0.8rem; color: var(--k-ink-3); }

/* Operator promo ribbon (PromoBanner). */
.kiosk-promo-banner[b-p15og3sva4] {
    flex-shrink: 0;
    padding: 12px 20px;
    background: var(--k-chip);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

/* "Destacados" featured rail (IsFeatured / FeaturedOrder). */
.kiosk-featured[b-p15og3sva4] { flex-shrink: 0; padding: 14px 20px 6px; }
.kiosk-featured-head[b-p15og3sva4] {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--k-ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kiosk-featured-head[b-p15og3sva4]::before { content: "★"; color: var(--k-accent); }
.kiosk-featured-rail[b-p15og3sva4] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.kiosk-featured-rail .kiosk-tile[b-p15og3sva4] { flex: 0 0 196px; scroll-snap-align: start; }

/* Persistent bottom cart bar (thumb-reachable; replaces the corner pill). */
.kiosk-cartbar[b-p15og3sva4] {
    flex-shrink: 0;
    margin: 8px 16px max(16px, env(safe-area-inset-bottom));
    padding: 17px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--k-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--e3);
    transition: transform var(--dur-1) var(--ease-emph), background var(--dur-1);
}
.kiosk-cartbar:active[b-p15og3sva4] { transform: scale(0.99); background: var(--k-accent-press); }
.kiosk-cartbar-left[b-p15og3sva4] { display: flex; align-items: center; gap: 12px; }
.kiosk-cartbar-badge[b-p15og3sva4] {
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
}
.kiosk-cartbar-total[b-p15og3sva4] { font-feature-settings: 'tnum'; }
@keyframes cartbarBump-b-p15og3sva4 {
    0% { transform: scale(1); }
    35% { transform: scale(1.035); }
    70% { transform: scale(0.99); }
    100% { transform: scale(1); }
}
.kiosk-cartbar--bump[b-p15og3sva4] { animation: cartbarBump-b-p15og3sva4 var(--dur-2) var(--ease-emph); }

/* Accessibility: keyboard focus on every control + reduced-motion. */
.kiosk-tile:focus-visible[b-p15og3sva4],
.kiosk-tab:focus-visible[b-p15og3sva4],
.kiosk-cartbar:focus-visible[b-p15og3sva4],
.kiosk-btn-primary:focus-visible[b-p15og3sva4],
.kiosk-btn-secondary:focus-visible[b-p15og3sva4],
.kiosk-btn-danger:focus-visible[b-p15og3sva4],
.kiosk-qty-btn:focus-visible[b-p15og3sva4] {
    outline: 3px solid var(--k-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .kiosk-page *[b-p15og3sva4],
    .kiosk-page *[b-p15og3sva4]::before,
    .kiosk-page *[b-p15og3sva4]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* keep the loading spinners spinning */
    .kiosk-spinner[b-p15og3sva4], .kiosk-btn-spinner[b-p15og3sva4] {
        animation-duration: 0.8s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ============================================================
   Attract reel, colour themes, RTL.
   ============================================================ */

/* Attract reel behind the welcome screen. */
.kiosk-reel[b-p15og3sva4] { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.kiosk-reel-img[b-p15og3sva4] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s ease;
}
.kiosk-reel-img.active[b-p15og3sva4] { opacity: 0.35; }
/* keep the welcome content above the reel */
.kiosk-welcome > :not(.kiosk-reel)[b-p15og3sva4] { position: relative; z-index: 1; }

/* Themes override the --k-* surface/ink/line tokens. The brand --k-accent is set
   inline from Branding.AccentColor and still wins on top of any theme. */
.kiosk-theme-dark[b-p15og3sva4] {
    --k-bg: #0f1115; --k-surface: #1a1d24; --k-surface-2: #232831;
    --k-ink: #f1f3f7; --k-ink-2: #aab2c0; --k-ink-3: #6c7484; --k-line: #2a2f3a;
}
.kiosk-theme-midnight[b-p15og3sva4] {
    --k-bg: #14122b; --k-surface: #201d3f; --k-surface-2: #29254e;
    --k-ink: #f3f1ff; --k-ink-2: #b9b3e0; --k-ink-3: #7a749f; --k-line: #322c5c;
}
.kiosk-theme-sand[b-p15og3sva4] {
    --k-bg: #f4efe6; --k-surface: #fffdf8; --k-surface-2: #f1ead9;
    --k-ink: #2e2a23; --k-ink-2: #6b6356; --k-ink-3: #a59c8a; --k-line: #e7dfcd;
}
.kiosk-theme-fresh[b-p15og3sva4] {
    --k-bg: #eef7f1; --k-surface: #ffffff; --k-surface-2: #e3f1e9;
    --k-ink: #14241c; --k-ink-2: #4a5d53; --k-ink-3: #8aa097; --k-line: #d4e8dd;
}

/* On dark themes the .kiosk-menu/.kiosk-cart base bg becomes the dark surface and
   the header/cards read against it via the tokenised colours above. The welcome and
   confirmation screens keep their dramatic dark gradient on every theme. */

/* RTL: flip the corner badges/chips and arrow-adjacent spacing. */
[dir="rtl"] .kiosk-badge[b-p15og3sva4] { right: auto; left: 8px; }
[dir="rtl"] .kiosk-rule-chip[b-p15og3sva4] { left: auto; right: 10px; }
[dir="rtl"] .kiosk-oos-ribbon[b-p15og3sva4] { letter-spacing: 0; }
[dir="rtl"] .kiosk-item-meta[b-p15og3sva4] { flex-direction: row-reverse; justify-content: flex-end; }

/* ===== Item-detail sheet (variant + modifier picker) ===== */
.kiosk-detail-overlay[b-p15og3sva4] {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 41, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 70;
}
.kiosk-detail-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    color: var(--k-ink);
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--e3);
    animation: detailUp-b-p15og3sva4 0.28s var(--ease-emph);
}
@keyframes detailUp-b-p15og3sva4 {
    from { transform: translateY(40px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}
.kiosk-detail-head[b-p15og3sva4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 8px;
}
.kiosk-detail-head h2[b-p15og3sva4] { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--k-ink); }
.kiosk-detail-close[b-p15og3sva4] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--k-surface-2);
    color: var(--k-ink-2);
    font-size: 1.1rem;
    cursor: pointer;
}
.kiosk-detail-desc[b-p15og3sva4] { margin: 0 24px 8px; color: var(--k-ink-2); font-size: 0.95rem; }
.kiosk-detail-body[b-p15og3sva4] { flex: 1; overflow-y: auto; padding: 8px 24px; -webkit-overflow-scrolling: touch; }
.kiosk-detail-group[b-p15og3sva4] { padding: 14px 0; border-top: 1px solid var(--k-line); }
.kiosk-detail-group:first-child[b-p15og3sva4] { border-top: none; }
.kiosk-detail-group h3[b-p15og3sva4] {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--k-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.kiosk-req[b-p15og3sva4] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--k-accent-press);
    background: var(--k-accent-soft);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}
.kiosk-opt-hint[b-p15og3sva4] { color: var(--k-ink-2); background: var(--k-surface-2); }
.kiosk-detail-options[b-p15og3sva4] { display: flex; flex-wrap: wrap; gap: 10px; }
.kiosk-opt[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-height: 52px;
    border: 2px solid var(--k-line);
    border-radius: var(--radius-sm);
    background: var(--k-surface);
    color: var(--k-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
.kiosk-opt:active[b-p15og3sva4] { transform: scale(0.97); }
.kiosk-opt.selected[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); }
.kiosk-opt-delta[b-p15og3sva4] { color: var(--k-ink-2); font-weight: 700; font-feature-settings: 'tnum'; }
.kiosk-opt.selected .kiosk-opt-delta[b-p15og3sva4] { color: var(--k-accent-press); }
.kiosk-detail-footer[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--k-line);
    background: var(--k-surface);
}
.kiosk-detail-qty[b-p15og3sva4] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kiosk-detail-add[b-p15og3sva4] { flex: 1; }
.kiosk-detail-add:disabled[b-p15og3sva4] { background: var(--k-ink-3); box-shadow: none; cursor: not-allowed; }

/* ===== Combos rail ===== */
.kiosk-combos-head[b-p15og3sva4]::before { content: "🍔"; }
.kiosk-combo-badge[b-p15og3sva4] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--k-chip);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    z-index: 3;
}
[dir="rtl"] .kiosk-combo-badge[b-p15og3sva4] { left: auto; right: 10px; }

/* Fixed scrim over the attract reel so a bright photo can't wash out the welcome text. */
.kiosk-reel[b-p15og3sva4]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 12, 41, 0.35), rgba(15, 12, 41, 0.55));
}

/* Sold-out modifier option (disabled, struck). */
.kiosk-opt-soldout[b-p15og3sva4] {
    opacity: 0.55;
    text-decoration: line-through;
    cursor: not-allowed;
}
.kiosk-opt-soldout .kiosk-opt-delta[b-p15og3sva4] { color: var(--k-danger); text-decoration: none; }

/* Confirmation wait estimate (dark confirmation screen). */
.kiosk-confirm-eta[b-p15og3sva4] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 4px 0 0;
    color: #fff;
    opacity: 0.92;
}

/* ============================================================
   Branding: logo-in-header + welcome tagline
   ============================================================ */
.kiosk-logo-lg[b-p15og3sva4] {
    max-height: 168px;
    max-width: 78%;
    margin-bottom: 8px;
}
.kiosk-header-logo[b-p15og3sva4] {
    height: 38px;
    max-width: 200px;
    object-fit: contain;
    justify-self: start;
}
.kiosk-tagline[b-p15og3sva4] {
    margin: 6px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--k-ink, #1f2937);
    opacity: 0.78;
    max-width: 30ch;
    text-align: center;
    /* Bound a long (≤140-char) tagline so it can't push the tap-to-start CTA
       off a short/portrait kiosk screen. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* On the welcome (over the attract reel) the text sits on a dim scrim → keep it light */
.kiosk-welcome .kiosk-tagline[b-p15og3sva4] { color: #fff; opacity: 0.92; text-shadow: 0 1px 12px rgba(0,0,0,.45); }

/* ============================================================
   Liveliness: card entrance, featured polish, featured badge,
   gentle checkout-bar pulse. (prefers-reduced-motion is killed
   globally above, so all of this auto-stills for that setting.)
   ============================================================ */
@keyframes kioskCardIn-b-p15og3sva4 {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.kiosk-grid .kiosk-tile[b-p15og3sva4],
.kiosk-scroll .kiosk-tile[b-p15og3sva4],
.kiosk-tabs .kiosk-tile[b-p15og3sva4],
.kiosk-featured-rail .kiosk-tile[b-p15og3sva4] {
    animation: kioskCardIn-b-p15og3sva4 .34s cubic-bezier(.2,.7,.3,1) both;
}
/* light stagger so the first visible row ripples in instead of popping as one block */
.kiosk-grid .kiosk-tile:nth-child(1)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(1)[b-p15og3sva4] { animation-delay: .02s; }
.kiosk-grid .kiosk-tile:nth-child(2)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(2)[b-p15og3sva4] { animation-delay: .06s; }
.kiosk-grid .kiosk-tile:nth-child(3)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(3)[b-p15og3sva4] { animation-delay: .10s; }
.kiosk-grid .kiosk-tile:nth-child(4)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(4)[b-p15og3sva4] { animation-delay: .14s; }
.kiosk-grid .kiosk-tile:nth-child(5)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(5)[b-p15og3sva4] { animation-delay: .18s; }
.kiosk-grid .kiosk-tile:nth-child(6)[b-p15og3sva4],
.kiosk-scroll .kiosk-tile:nth-child(6)[b-p15og3sva4] { animation-delay: .22s; }

/* "⭐" featured corner badge. Bottom-left of the image so it never stacks on the
   top-left price-rule chip or the top-right qty badge (RTL mirrors to bottom-right). */
.kiosk-pop-badge[b-p15og3sva4] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd24d, #ffb017);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    animation: kioskStarPop-b-p15og3sva4 .4s ease both;
}
[dir="rtl"] .kiosk-pop-badge[b-p15og3sva4] { left: auto; right: 8px; }
@keyframes kioskStarPop-b-p15og3sva4 {
    from { opacity: 0; transform: scale(.4); }
    60%  { transform: scale(1.12); }
    to   { opacity: 1; transform: none; }
}

/* Featured rail: a touch more presence */
.kiosk-featured-head[b-p15og3sva4] {
    position: relative;
    padding-inline-start: 14px;
}
/* Accent bar for Destacados, but NOT the combos head — it keeps its 🍔 (equal-
   specificity ::before; without the :not() this content:"" wins by source order). */
.kiosk-featured-head:not(.kiosk-combos-head)[b-p15og3sva4]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.05em;
    border-radius: 3px;
    background: var(--k-accent, #16a34a);
}

/* Gentle breathing on the persistent checkout bar to pull the eye to the CTA.
   Transform-only so it's GPU-composited (no per-frame repaint) — important on an
   always-on kiosk; animating box-shadow here would repaint every frame for hours. */
@keyframes kioskCartPulse-b-p15og3sva4 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}
.kiosk-cartbar[b-p15og3sva4] { animation: kioskCartPulse-b-p15og3sva4 2.6s ease-in-out infinite; }
/* don't pulse while it's doing the add-bump */
.kiosk-cartbar.kiosk-cartbar--bump[b-p15og3sva4] { animation: cartbarBump-b-p15og3sva4 .4s ease; }

/* ============================================================
   UX pack — in-menu search + category quick-nav chips
   ============================================================ */
.kiosk-search[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px 6px;
    padding: 0 14px;
    background: var(--k-surface, #fff);
    border: 1px solid var(--k-line, rgba(0,0,0,.1));
    border-radius: 14px;
    flex-shrink: 0;
}
.kiosk-search-icon[b-p15og3sva4] { font-size: 1.1rem; opacity: .55; }
.kiosk-search-input[b-p15og3sva4] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 14px 0;
    font-size: 1.1rem;
    color: var(--k-ink, #1f2937);
    outline: none;
}
.kiosk-search-input[b-p15og3sva4]::placeholder { color: var(--k-ink, #1f2937); opacity: .42; }
.kiosk-search-clear[b-p15og3sva4] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--k-ink, #1f2937);
    opacity: .6;
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.kiosk-cat-chips[b-p15og3sva4] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 20px 10px;
    flex-shrink: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Center the chips when they fit (the common case — a short menu pins them left
       otherwise). The `safe` keyword falls back to flex-start when they overflow, so a
       long menu stays fully scrollable and the first chip is never clipped off-screen. */
    justify-content: safe center;
}
.kiosk-cat-chips[b-p15og3sva4]::-webkit-scrollbar { display: none; }
.kiosk-chip[b-p15og3sva4] {
    flex: 0 0 auto;
    border: 1px solid var(--k-line, rgba(0,0,0,.1));
    background: var(--k-chip, #fff);
    color: var(--k-chip-ink, #1f2937);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.kiosk-chip.active[b-p15og3sva4] {
    background: var(--k-accent, #16a34a);
    border-color: var(--k-accent, #16a34a);
    color: #fff;
}

/* Scroll-spy nav (one-page "scroll" layout): the chip strip is a fixed bar above the
   scrolling sections — a hairline separates it as content scrolls beneath. */
.kiosk-layout-scroll .kiosk-cat-chips--spy[b-p15og3sva4] {
    background: var(--k-bg);
    box-shadow: 0 1px 0 var(--k-line, rgba(0,0,0,.07));
    scroll-behavior: smooth;
}

/* ---- Idle "still there?" countdown ---- */
.kiosk-idle-count[b-p15og3sva4] {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--k-accent, #16a34a);
    margin: 6px 0 14px;
}

/* ---- Special-instructions note (item detail) ---- */
.kiosk-note-input[b-p15og3sva4] {
    width: 100%;
    border: 1px solid var(--k-line, rgba(0,0,0,.12));
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--k-ink, #1f2937);
    background: var(--k-surface, #fff);
    resize: none;
    outline: none;
    box-sizing: border-box;
}
.kiosk-note-input[b-p15og3sva4]::placeholder { color: var(--k-ink, #1f2937); opacity: .4; }

/* ---- Cart row thumbnail + note ---- */
.kiosk-cart-thumb[b-p15og3sva4] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}
.kiosk-cart-note[b-p15og3sva4] {
    display: block;
    font-size: .92rem;
    color: var(--k-ink-2, #5b6171);
    font-style: italic;
    margin-top: 2px;
}

/* ---- Cart upsell rail ---- */
.kiosk-cart-upsell[b-p15og3sva4] { padding: 10px 0 4px; }
.kiosk-upsell-tile[b-p15og3sva4] {
    flex: 0 0 150px;
    text-align: start;
    border: 1px solid var(--k-line, rgba(0,0,0,.06));
    background: var(--k-surface, #fff);
    border-radius: var(--radius-md, 18px);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--e2);
}
.kiosk-upsell-tile .kiosk-tile-media[b-p15og3sva4] { height: 96px; }

/* ===== Group C: accessibility text-size toggle + allergen detail ===== */

/* Header text-size button — small-A + large-A glyph (language-free). */
.kiosk-fontsize-btn[b-p15og3sva4] {
    flex-shrink: 0;
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    border-radius: 14px;
    border: 2px solid var(--k-line);
    background: var(--k-surface);
    color: var(--k-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    transition: transform 0.12s, background 0.12s, border-color 0.12s;
}
.kiosk-fontsize-btn .kiosk-fs-a[b-p15og3sva4] { font-weight: 800; line-height: 1; }
.kiosk-fontsize-btn .kiosk-fs-a-sm[b-p15og3sva4] { font-size: 0.95rem; }
.kiosk-fontsize-btn .kiosk-fs-a-lg[b-p15og3sva4] { font-size: 1.4rem; }
.kiosk-fontsize-btn:active[b-p15og3sva4] { transform: scale(0.94); background: var(--k-surface-2); }
.kiosk-fontsize-btn.active[b-p15og3sva4] { border-color: var(--k-accent); background: var(--k-accent-soft); color: var(--k-accent-press); }
.kiosk-fontsize-btn:focus-visible[b-p15og3sva4] { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* Allergen pills inside the item-detail sheet. */
.kiosk-detail-allergens[b-p15og3sva4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 24px 6px;
}
.kiosk-detail-allergens-label[b-p15og3sva4] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--k-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-inline-end: 2px;
}
.kiosk-allergen-pill[b-p15og3sva4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--k-surface-2);
    border: 1px solid var(--k-line);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--k-ink);
}

/* Standalone allergen sheet (reached from the tile's allergen icons). */
.kiosk-allergen-sheet[b-p15og3sva4] {
    background: var(--k-surface);
    color: var(--k-ink);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--e3);
    animation: detailUp-b-p15og3sva4 0.28s var(--ease-emph);
}
.kiosk-allergen-item-name[b-p15og3sva4] {
    margin: 0 24px 4px;
    color: var(--k-ink-2);
    font-size: 1rem;
    font-weight: 600;
}
.kiosk-allergen-list[b-p15og3sva4] {
    list-style: none;
    margin: 0;
    padding: 10px 24px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.kiosk-allergen-row[b-p15og3sva4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--k-line);
}
.kiosk-allergen-row:first-child[b-p15og3sva4] { border-top: none; }
.kiosk-allergen-row-icon[b-p15og3sva4] { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.kiosk-allergen-row-name[b-p15og3sva4] { font-size: 1.2rem; font-weight: 600; color: var(--k-ink); }
/* /Pages/KioskPay.razor.rz.scp.css */
.kpay[b-cgbkxcmw5s] {
    min-height: 100dvh;
    background: #f6f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.kpay-card[b-cgbkxcmw5s] {
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 28px 22px 20px;
}

.kpay-head[b-cgbkxcmw5s] { text-align: center; margin-bottom: 18px; }
.kpay-head h1[b-cgbkxcmw5s] { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; color: #16181d; }
.kpay-amount[b-cgbkxcmw5s] { font-size: 2rem; font-weight: 800; color: #16a34a; margin: 4px 0 0; }

.kpay-element[b-cgbkxcmw5s] { margin: 8px 0 14px; min-height: 40px; }

.kpay-btn[b-cgbkxcmw5s] {
    width: 100%;
    border: none;
    border-radius: 14px;
    background: #16a34a;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 16px;
    cursor: pointer;
    transition: background .12s, transform .05s;
}
.kpay-btn:active[b-cgbkxcmw5s] { transform: translateY(1px); }
.kpay-btn:disabled[b-cgbkxcmw5s] { opacity: .6; cursor: default; }

.kpay-msg-error[b-cgbkxcmw5s] { color: #dc2626; font-size: .95rem; text-align: center; margin: 8px 0; }

.kpay-state[b-cgbkxcmw5s] { text-align: center; padding: 18px 4px; }
.kpay-emoji[b-cgbkxcmw5s] { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.kpay-state h1[b-cgbkxcmw5s] { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; color: #16181d; }
.kpay-state p[b-cgbkxcmw5s] { color: #4b5563; margin: 0; line-height: 1.45; }
.kpay-ok h1[b-cgbkxcmw5s] { color: #16a34a; }
.kpay-error p[b-cgbkxcmw5s] { color: #b91c1c; }

.kpay-secure[b-cgbkxcmw5s] { text-align: center; color: #9aa1ab; font-size: .82rem; margin: 16px 0 2px; }

.kpay-spinner[b-cgbkxcmw5s] {
    width: 34px; height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #16a34a;
    border-radius: 50%;
    margin: 18px auto;
    animation: kpay-spin-b-cgbkxcmw5s .8s linear infinite;
}
@keyframes kpay-spin-b-cgbkxcmw5s { to { transform: rotate(360deg); } }
/* /Pages/OrderPanel.razor.rz.scp.css */
/* Kitchen Display - Eats order styling */

/* Base kitchen ticket */
.kitchen-ticket[b-x5umekbaiz] {
    transition: all 0.2s ease;
}

/* Delivery orders - red/urgent theme */
.kitchen-ticket-delivery[b-x5umekbaiz] {
    border-left: 6px solid #dc3545;
    background: linear-gradient(to right, rgba(220, 53, 69, 0.08), transparent);
}

.kitchen-ticket-delivery .card-header[b-x5umekbaiz] {
    background-color: rgba(220, 53, 69, 0.15);
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

/* TakeAway orders - orange/warning theme */
.kitchen-ticket-takeaway[b-x5umekbaiz] {
    border-left: 6px solid #ffc107;
    background: linear-gradient(to right, rgba(255, 193, 7, 0.08), transparent);
}

.kitchen-ticket-takeaway .card-header[b-x5umekbaiz] {
    background-color: rgba(255, 193, 7, 0.15);
    border-bottom-color: rgba(255, 193, 7, 0.3);
}

/* Kitchen course styling */
.kitchen-course[b-x5umekbaiz] {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.k-course-pending[b-x5umekbaiz] {
    background-color: #fff3cd;
}

.k-course-fired[b-x5umekbaiz] {
    background-color: #d1e7dd;
}

/* Kitchen board container */
.kitchen-board[b-x5umekbaiz] {
    padding: 1rem 0;
}
/* /Pages/Pos.razor.rz.scp.css */

:root[b-g2xxwyov9v] {
    --brand: #c62828;
    --brand-dark: #8e0000;
    --ink: #1f2937;
    --ok: #059669;
    --bg: #f7f7f8;
    --card: #ffffff;
    --muted: #6b7280;
}

.pos-shell[b-g2xxwyov9v] {
    height: 100vh;
    height: 100dvh; /* iPad Safari: excludes URL bar from height */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

/* Basket-full mode: two-column grid layout */
.pos-shell.basket-full[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: 62% 38%;
    flex-direction: unset;
}

/* Left section contains topbar + main-content */
.left-section[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* In compact mode, left-section fills full width */
.pos-shell.basket-compact .left-section[b-g2xxwyov9v] {
    width: 100%;
}

.topbar[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Extra left padding clears the fixed .sidebar-toggle (12px from edge,
       44px wide → ends at x=56). Without this, the printer/connection
       icons sit underneath the hamburger. The narrow-viewport breakpoint
       had this fix; the base rule didn't. */
    padding: 12px 16px 12px 64px;
    /* Respect the notch / status-bar inset so the connection + printer
       row isn't clipped at the top on phones (the "Conexión activa"
       cut-off). No-op on desktop: env() resolves to 0 there, so
       max(12px, 0) == the original 12px top padding. */
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: var(--card);
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Compact topbar in basket-full mode */
.pos-shell.basket-full .topbar[b-g2xxwyov9v] {
    gap: 10px;
    padding: 8px 12px 8px 60px;
}

.pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
    font-size: 0.9rem;
}

.pos-shell.basket-full .topbar .muted[b-g2xxwyov9v] {
    font-size: 0.85rem;
}

.pos-shell.basket-full .topbar .btn[b-g2xxwyov9v] {
    padding: 6px 10px;
    font-size: 0.85rem;
}

/* ========================================
   CONNECTION STATUS - Animated WiFi
   ======================================== */
.connection-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.wifi-icon[b-g2xxwyov9v] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.wifi-bar[b-g2xxwyov9v] {
    width: 3px;
    border-radius: 2px;
    background: #10b981;
    animation: wifi-pulse-b-g2xxwyov9v 1.4s ease-in-out infinite;
}

.wifi-bar.bar-1[b-g2xxwyov9v] {
    height: 5px;
    animation-delay: 0s;
}

.wifi-bar.bar-2[b-g2xxwyov9v] {
    height: 9px;
    animation-delay: 0.15s;
}

.wifi-bar.bar-3[b-g2xxwyov9v] {
    height: 14px;
    animation-delay: 0.3s;
}

@keyframes wifi-pulse-b-g2xxwyov9v {
    0%, 100% {
        opacity: 0.4;
        transform: scaleY(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Disconnected state */
.connection-status.offline .wifi-bar[b-g2xxwyov9v] {
    background: #ef4444;
    animation: none;
    opacity: 0.3;
}

/* Offline badge styling */
.connection-status.offline[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fecaca 0%, #fee2e2 100%);
    border: 1px solid #f87171;
    border-radius: 999px;
    padding: 4px 10px;
    animation: offline-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

.offline-icon[b-g2xxwyov9v] {
    font-size: 0.85rem;
    animation: offline-flash-b-g2xxwyov9v 0.8s ease-in-out infinite;
}

.offline-text[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes offline-pulse-b-g2xxwyov9v {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }
}

@keyframes offline-flash-b-g2xxwyov9v {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dark mode offline badge */
:root[data-theme="dark"] .connection-status.offline[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #ef4444;
}

:root[data-theme="dark"] .offline-text[b-g2xxwyov9v] {
    color: #fca5a5;
}

/* Reconnecting state - yellow/orange spinner */
.connection-status.reconnecting[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 999px;
    padding: 4px 10px;
}

.reconnect-spinner[b-g2xxwyov9v] {
    width: 14px;
    height: 14px;
    border: 2px solid #f59e0b;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

@keyframes spin-b-g2xxwyov9v {
    to { transform: rotate(360deg); }
}

:root[data-theme="dark"] .connection-status.reconnecting[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
}

:root[data-theme="dark"] .reconnect-spinner[b-g2xxwyov9v] {
    border-color: #fbbf24;
    border-top-color: transparent;
}

.title[b-g2xxwyov9v] {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}

/* Truncate long titles in compact mode */
.pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.muted[b-g2xxwyov9v] {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap
}

.flex-1[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0
}

.total[b-g2xxwyov9v] {
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    padding: 10px 14px;
    border-radius: 10px;
    letter-spacing: .3px;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 4px;
}

.total .total-label[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.85;
}

.actions[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.actions.actions-left[b-g2xxwyov9v] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}
.actions.actions-left .btn[b-g2xxwyov9v] {
    flex: 0 0 auto;
    min-width: auto;
    padding: 8px 10px;
    font-size: 0.9rem;
}
.actions.actions-left .dropdown[b-g2xxwyov9v] {
    display: inline-flex;
    flex: 0 0 auto;
}

/* ========================================
   RECENT ITEMS SECTION
   ======================================== */
.recent-section[b-g2xxwyov9v] {
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    flex-shrink: 0;
}

.recent-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.recent-icon[b-g2xxwyov9v] {
    font-size: 0.9rem;
}

.recent-title[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #059669;
}

.recent-items[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.recent-items[b-g2xxwyov9v]::-webkit-scrollbar {
    height: 4px;
}

.recent-items[b-g2xxwyov9v]::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.3);
    border-radius: 2px;
}

.recent-item[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    background: white;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    min-width: 90px;
    max-width: 140px;
}

.recent-item:hover[b-g2xxwyov9v] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.recent-item:active[b-g2xxwyov9v] {
    transform: translateY(0);
}

.recent-name[b-g2xxwyov9v] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.recent-price[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
}

/* Dark theme */
html[data-theme="dark"] .recent-section[b-g2xxwyov9v] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-bottom-color: rgba(16, 185, 129, 0.2);
}

html[data-theme="dark"] .recent-title[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .recent-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .recent-item:hover[b-g2xxwyov9v] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

html[data-theme="dark"] .recent-name[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .recent-price[b-g2xxwyov9v] {
    color: #34d399;
}

.btn[b-g2xxwyov9v] {
    border: 1px solid var(--action-neutral-border, #d5dde9);
    /* 12px vertical padding + min-height 48px puts these at the same tap
       footprint as the bumped category chips, so the action row reads as
       one consistent strip instead of two height bands. */
    padding: 12px 16px;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    transition: transform .08s ease,filter .12s ease
}

    .btn:hover[b-g2xxwyov9v] {
        filter: brightness(1.03);
        transform: translateY(-1px)
    }

    .btn:focus-visible[b-g2xxwyov9v] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

.btn-ghost[b-g2xxwyov9v] {
    background: var(--action-ghost, #fff);
    color: #0f172a;
    border: 1px solid var(--action-ghost-border, #e5e7eb)
}

.btn-ghost.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* Always-visible Reservas entry point in the topbar. The label collapses
   on narrow toolbars (the 📅 icon stays) so a long restaurant name doesn't
   force the header to wrap. */
.btn-reservas[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .btn-reservas-label[b-g2xxwyov9v] {
        display: none;
    }
}

/* Line-action modal: highlight the button matching the line's current state
   (discount % already applied, current course, comped status). Without this,
   the modal hides which action is the current one — the operator can't tell
   if they already applied 20% off, leading to double-taps or confusion. */
.modal-card .btn.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
    box-shadow: inset 0 0 0 2px rgba(2, 132, 199, 0.4);
}

.modal-card .btn.outline[b-g2xxwyov9v] {
    background: transparent;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.modal-card .btn.outline:hover[b-g2xxwyov9v] {
    background: #f1f5f9;
    color: #0f172a;
}

/* Danger button for Cortesía — a single tap zeros the line. Pre-fix the button
   looked identical to "Cambiar cantidad" / "Editar precio" and finger-slips
   were giving away meals. Red tint + danger badge make the gravity obvious;
   the confirm prompt added in CompLine() is the second line of defense. */
.modal-card .btn.danger[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.modal-card .btn.danger:hover[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.55);
}

.modal-card .btn.danger.active[b-g2xxwyov9v] {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
    box-shadow: inset 0 0 0 2px rgba(127, 29, 29, 0.5);
}

.btn-neutral[b-g2xxwyov9v] {
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    border: 1px solid var(--action-neutral-border, #d5dde9);
}

.btn-tint[b-g2xxwyov9v] {
    background: var(--action-tint, #0f172a);
    color: #fff;
    border: 1px solid var(--action-tint, #0f172a);
}

/* Square icon-only variant. Pre-fix the topbar's ⚙️ Sistema /
   🥡 Para Llevar / 🆕 Nuevo were full-width text buttons that
   wrapped to two lines on narrow restaurant-name + ADMIN-tag
   layouts. Sistema is the only icon-only survivor — Nuevo got
   removed, Para Llevar got its text restored — so the icon size
   is bumped to 1.35rem (operator on Wokamama reported the prior
   1.1rem ⚙ felt too small to find). 48px width still fits the
   row and matches the iOS minimum touch target. */
.btn.btn-icon[b-g2xxwyov9v] {
    padding: 0;
    width: 48px;
    min-width: 48px;
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dark theme stay legible */
html[data-theme="dark"][b-g2xxwyov9v] {
    --action-tint: #161f2e;
    --action-neutral: #2a3343;
    --action-neutral-border: #354155;
    --action-ghost: #1f2937;
    --action-ghost-border: #3b4250;
}

/* Dark theme button text visibility */
html[data-theme="dark"] .btn[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="light"][b-g2xxwyov9v] {
    --action-tint: #0f172a;
    --action-neutral: #e8edf4;
    --action-neutral-border: #d5dde9;
    --action-ghost: #ffffff;
    --action-ghost-border: #e5e7eb;
}

.btn-danger[b-g2xxwyov9v] {
    background: #c62828;
    color: #fff
}

    .btn-danger:hover[b-g2xxwyov9v] {
        background: #8e0000
    }

/* Secondary button - for utility actions like cash drawer */
.btn-secondary[b-g2xxwyov9v] {
    background: #374151;
    color: #fff;
    border: 1px solid #374151;
}

    .btn-secondary:hover[b-g2xxwyov9v] {
        background: #1f2937;
        border-color: #1f2937;
    }

/* Danger outline button - for destructive actions that need visual separation */
.btn-danger-outline[b-g2xxwyov9v] {
    background: transparent;
    color: #dc2626;
    border: 2px solid #dc2626;
    transition: all 0.15s ease;
}

.btn-danger-outline:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #b91c1c;
}

.btn-danger-outline:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #9ca3af;
    color: #9ca3af;
}

/* Visual separator for destructive actions */
.action-divider[b-g2xxwyov9v] {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #d1d5db;
    margin: 0 8px;
    flex-shrink: 0;
    align-self: center;
}

/* Dark theme support */
html[data-theme="dark"] .btn-danger-outline[b-g2xxwyov9v] {
    color: #f87171;
    border-color: #f87171;
}

html[data-theme="dark"] .btn-danger-outline:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #450a0a;
    border-color: #ef4444;
    color: #fecaca;
}

html[data-theme="dark"] .btn-danger-outline:disabled[b-g2xxwyov9v] {
    border-color: #6b7280;
    color: #6b7280;
}

html[data-theme="dark"] .action-divider[b-g2xxwyov9v] {
    background: #4b5563;
}

/* Action row search input - prominent position */
.action-search[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    gap: 6px;
    min-width: 130px;
    max-width: 200px;
    flex: 1;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.action-search:focus-within[b-g2xxwyov9v] {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.action-search-icon[b-g2xxwyov9v] {
    font-size: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.action-search-input[b-g2xxwyov9v] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    min-width: 0;
}

.action-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.action-search-clear[b-g2xxwyov9v] {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.action-search-clear:hover[b-g2xxwyov9v] {
    background: #ef4444;
    color: white;
}

/* Dark theme */
html[data-theme="dark"] .action-search[b-g2xxwyov9v] {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .action-search:focus-within[b-g2xxwyov9v] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

html[data-theme="dark"] .action-search-input[b-g2xxwyov9v] {
    color: #f1f5f9;
}

html[data-theme="dark"] .action-search-input[b-g2xxwyov9v]::placeholder {
    color: #64748b;
}

html[data-theme="dark"] .action-search-clear[b-g2xxwyov9v] {
    background: #334155;
    color: #94a3b8;
}

html[data-theme="dark"] .action-search-clear:hover[b-g2xxwyov9v] {
    background: #ef4444;
    color: white;
}

.icon[b-g2xxwyov9v] {
    opacity: .8;
    margin-right: 8px
}

.filters[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #fafbfc 0%, var(--card) 100%);
    border-bottom: 1px solid #e5e7eb;
}

html[data-theme="dark"] .filters[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #1a2332 0%, var(--card) 100%);
    border-bottom-color: #374151;
}

.filters.filters-left[b-g2xxwyov9v] {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.filters.filters-left .chipbar-wrap[b-g2xxwyov9v] {
    flex: 1 1 auto;
}

.filters.filters-left .search[b-g2xxwyov9v] {
    margin-left: 12px;
    max-width: 200px;
    flex-shrink: 0;
}

.filters.filters-left .layout-switch.global[b-g2xxwyov9v] {
    display: none;
}

.filters .search[b-g2xxwyov9v] {
    flex: 0 0 220px;
}

.filters .layout-switch.global[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Chipbar wrapper with scroll indicators */
.chipbar-wrap[b-g2xxwyov9v] {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chipbar-wrap[b-g2xxwyov9v]::before,
.chipbar-wrap[b-g2xxwyov9v]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.chipbar-wrap[b-g2xxwyov9v]::before {
    left: 0;
    background: linear-gradient(90deg, var(--card, #fafbfc) 0%, transparent 100%);
}

.chipbar-wrap[b-g2xxwyov9v]::after {
    right: 0;
    background: linear-gradient(270deg, var(--card, #fafbfc) 0%, transparent 100%);
}

.chipbar-wrap.can-scroll-left[b-g2xxwyov9v]::before {
    opacity: 1;
}

.chipbar-wrap.can-scroll-right[b-g2xxwyov9v]::after {
    opacity: 1;
}

.chipbar[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}

    .chipbar[b-g2xxwyov9v]::-webkit-scrollbar {
        display: none
    }

.chip[b-g2xxwyov9v] {
    white-space: nowrap;
    border: 1px solid transparent;
    /* ~44px tap target for rush-hour thumb accuracy. Anything smaller and
       servers mis-tap to the next category during peak service. */
    padding: 12px 20px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: #6b7280;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .chip:hover:not(.active)[b-g2xxwyov9v] {
        color: #374151;
        background: rgba(0, 0, 0, 0.04);
    }

    .chip.active[b-g2xxwyov9v] {
        border-color: #1f2937;
        color: #fff;
        background: #1f2937;
    }

/* Dark mode: invert the active chip so it actually stands out against the
   already-dark filters bar. Slate-200 fill + dark text mirrors how the rest
   of the dark theme handles selected states.
   Scoped with :not(.basket-toggle):not(.low-stock-chip) so the specialty
   chips (sky-blue basket toggle, orange low-stock filter) keep their own
   coloured active states — they signal different things and shouldn't
   collapse into the generic "category active" treatment. */
html[data-theme="dark"] .chip:not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    /* Inactive chips were #6b7280 (gray-500) on a dark panel — borderline at
       arm's length. Slate-300 reads cleanly without competing with the active
       state. */
    color: #cbd5e1;
}

html[data-theme="dark"] .chip.active:not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    border-color: #e2e8f0;
    color: #1f2937;
    background: #e2e8f0;
}

html[data-theme="dark"] .chip:hover:not(.active):not(.basket-toggle):not(.low-stock-chip)[b-g2xxwyov9v] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

.chip.basket-toggle[b-g2xxwyov9v] {
    background: #f0f9ff;
    border-color: #0ea5e9;
    color: #0284c7;
    font-weight: 800;
}

.chip.basket-toggle.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    border-color: #0284c7;
    color: #fff;
}

.chip.low-stock-chip[b-g2xxwyov9v] {
    background: #fffbeb;
    border-color: #fbbf24;
    color: #b45309;
    font-weight: 800;
}

.chip.low-stock-chip.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
    color: #fff;
}

.search[b-g2xxwyov9v] {
    margin-left: auto;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    border-radius: 10px;
    min-width: 260px;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search:focus-within[b-g2xxwyov9v] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.search .search-icon[b-g2xxwyov9v] {
    color: #9ca3af;
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.search .search-icon:hover[b-g2xxwyov9v] {
    background: rgba(0,0,0,0.05);
}

.search input[b-g2xxwyov9v] {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
    background: transparent;
}

.search .kbd-hint[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.search:focus-within .kbd-hint[b-g2xxwyov9v] {
    opacity: 0;
    pointer-events: none;
}

/* Keyboard trigger button */
.tk-trigger[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tk-trigger:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #e5e7eb, #d1d5db);
    border-color: #d1d5db;
    transform: scale(1.05);
}

.tk-trigger:active[b-g2xxwyov9v] {
    transform: scale(0.95);
    box-shadow: none;
}

/* Dark theme keyboard trigger */
html[data-theme="dark"] .tk-trigger[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
}

html[data-theme="dark"] .tk-trigger:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #4b5563, #374151);
    border-color: #6b7280;
}

.kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: linear-gradient(180deg, #f8f9fa, #e9ecef);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    box-shadow: 0 1px 0 #adb5bd;
}

/* Dark theme keyboard hint */
html[data-theme="dark"] .kbd[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    color: #9ca3af;
    box-shadow: 0 1px 0 #111827;
}

/* Workspace now only contains products (summary is outside) */
.workspace[b-g2xxwyov9v] {
    display: block;
    padding: 12px 16px 16px;
    height: 100%;
    position: relative;
}

.products-panel[b-g2xxwyov9v] {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    min-width: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.summary[b-g2xxwyov9v] {
    height: 100%;
    position: relative;
}

/* When TableSlidePanel is in auto-hide mode, add right padding so scrollbar isn't hidden under hot edge */
.page.with-tables.tables-auto .summary[b-g2xxwyov9v] {
    padding-right: 4px;
}

.workspace.full-products .summary[b-g2xxwyov9v] {
    display: none;
}

/* ========================================
   MAIN CONTENT LAYOUT MODES
   ======================================== */

/* Smooth transitions for mode switching */
.main-content[b-g2xxwyov9v] {
    transition: grid-template-columns 0.5s ease-in-out;
}

.summary[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.left-column[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.workspace[b-g2xxwyov9v] {
    transition: all 0.5s ease-in-out;
}

.actions[b-g2xxwyov9v], .filters[b-g2xxwyov9v] {
    transition: all 0.4s ease-in-out;
}

/* COMPACT MODE - simple two-column flexbox */
.main-content:not(.main-content-grid)[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}

/* Left column: 60% width, flex column layout */
.main-content:not(.main-content-grid) .left-column[b-g2xxwyov9v] {
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Actions bar - no shrink */
.main-content:not(.main-content-grid) .left-column .actions[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Filters bar - no shrink */
.main-content:not(.main-content-grid) .left-column .filters[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Workspace fills remaining height */
.main-content:not(.main-content-grid) .left-column .workspace[b-g2xxwyov9v] {
    flex: 1 1 auto;
    padding: 12px 16px;
    overflow: hidden;
    min-height: 0;
}

/* Products panel scrolls within workspace - grid is layout only */
.main-content:not(.main-content-grid) .left-column .workspace .products-panel[b-g2xxwyov9v] {
    height: 100%;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.main-content:not(.main-content-grid) .left-column .workspace .grid[b-g2xxwyov9v] {
    height: auto;
    overflow: visible;
}

/* Payment bar at bottom - no shrink */
.main-content:not(.main-content-grid) .left-column .payment-bar[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Summary: 40% width on right */
.main-content:not(.main-content-grid) .summary[b-g2xxwyov9v] {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    background: var(--card);
    overflow: hidden;
    min-height: 0;
    padding: 14px;
    margin: 8px 16px 8px 0;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* ========================================
   BASKET-FULL (ALTA) MODE - Two columns
   ======================================== */

/* Main content in basket-full mode - fills remaining height of left-section */
.main-content.main-content-grid[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Left column - flex column for internal layout */
.main-content-grid .left-column[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Workspace fills remaining height */
.main-content-grid .workspace[b-g2xxwyov9v] {
    flex: 1 1 auto;
    padding: 12px 16px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* Payment bar at bottom of left column */
.main-content-grid .payment-bar[b-g2xxwyov9v] {
    flex-shrink: 0;
}

/* Summary: right column - full height, direct child of pos-shell in basket-full mode */
.pos-shell.basket-full > .summary[b-g2xxwyov9v],
.summary.summary-full[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-left: 4px solid #e5e7eb;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    border-radius: 0;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;    /* explicit height constraint for scroll */
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* Visual order status - colored left border */
.summary.has-new[b-g2xxwyov9v] {
    border-left-color: #f59e0b; /* Yellow/amber - new items pending */
}

.summary.all-sent[b-g2xxwyov9v] {
    border-left-color: #10b981; /* Green - all items sent */
}

.summary.empty-basket[b-g2xxwyov9v] {
    border-left-color: #e5e7eb; /* Gray - no items */
}

/* Ensure ticket-bar is flush to top */
.pos-shell.basket-full > .summary .ticket-bar[b-g2xxwyov9v],
.summary.summary-full .ticket-bar[b-g2xxwyov9v] {
    margin-top: 0;
}

.pos-shell.basket-full > .summary .lines[b-g2xxwyov9v],
.summary.summary-full .lines[b-g2xxwyov9v] {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none;
    padding-bottom: 16px;
}

/* Basket content - scrollable area with padding */
.basket-content[b-g2xxwyov9v] {
    flex: 1 1 0;          /* 0 basis forces flex to constrain height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;   /* prevent scroll chaining to parent */
    padding: 0 14px;
    min-height: 0;
}

/* Kitchen button at bottom */
.pos-shell.basket-full > .summary .btn-kitchen[b-g2xxwyov9v],
.summary.summary-full .btn-kitchen[b-g2xxwyov9v] {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}

/* Left column items in basket-full mode - more compact */
.main-content-grid .actions[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
}

.main-content-grid .filters[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.grid-toggle-bar[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 6px;
}

.grid-toggle-btn[b-g2xxwyov9v] {
    border: 1px solid #d5dde9;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
}

.grid-toggle-btn:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}




.grid[b-g2xxwyov9v] {
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    padding-right: 8px; /* Space between content and scrollbar */
    overflow: visible; /* Let products-panel handle scrolling - fixes Chrome/Edge */
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Scrollbar styling moved to site.css (CSS isolation doesn't work with pseudo-elements) */

.tile[b-g2xxwyov9v] {
    position: relative; /* Required for absolute positioned badges */
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 90px; /* Consistent card height */
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.tile:hover[b-g2xxwyov9v] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    border-color: var(--brand);
    background: #fff;
}

.tile:active[b-g2xxwyov9v] {
    transform: translateY(-1px) scale(1.005);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    background: #f8f8f8;
    border-color: var(--brand-dark);
}

/* Sold-out (86'd) items */
.tile.sold-out[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
    opacity: 0.65;
    cursor: not-allowed;
    position: relative;
}

.tile.sold-out:hover[b-g2xxwyov9v] {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    border-color: #d1d5db;
    background: #f3f4f6;
}

.tile.sold-out:active[b-g2xxwyov9v] {
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    background: #f3f4f6;
    border-color: #d1d5db;
}

.tile.sold-out .tile-name[b-g2xxwyov9v] {
    color: #6b7280;
    text-decoration: line-through;
}

.tile.sold-out .price[b-g2xxwyov9v] {
    color: #9ca3af;
    text-decoration: line-through;
}

.sold-out-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.stock-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
}

/* Low stock quantity badge (top-right) - shows remaining stock for items running low */
.low-stock-qty-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.5);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}

/* Softer amber border for low-stock tiles - less glare */
.tile.low-stock[b-g2xxwyov9v] {
    border-color: #d4a574;
    border-width: 2px;
    background: linear-gradient(135deg, #fef9f3 0%, #fef3e2 100%);
}

.tile.low-stock:hover[b-g2xxwyov9v] {
    border-color: #c9956a;
    background: linear-gradient(135deg, #fef3e2 0%, #fde9cc 100%);
}

.tile-name[b-g2xxwyov9v] {
    font-weight: 700;
    color: var(--ink);
    /* Height-aware so the name stays large AND consistent across machines.
       The old fixed 1.5rem got cliff-dropped to 0.8rem by the max-height:768/800
       rules below — which a Mac 15" Retina (≈780px viewport) trips but a Windows
       15" at 1080p (≈960px viewport) doesn't, so "the same 15 inch" looked half
       the size on the Mac. This scales smoothly ~1.2rem→1.5rem with viewport
       height instead; the per-height .tile-name overrides below were removed. */
    font-size: clamp(1.15rem, 1.39vh + 0.6rem, 1.5rem);
    line-height: 1.2;
    letter-spacing: 0.005em;
    /* Always reserve 2 lines so single-line and two-line names produce equal
       tile heights — without this, "Beef Fried Rice" and "Black Pepper Beef"
       sit at different vertical positions and the grid feels jittery. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em; /* 2 lines × line-height (em scales with font-size on mobile breakpoints) */
}

.price[b-g2xxwyov9v] {
    margin-top: auto;
    align-self: flex-end;
    color: var(--ink);
    opacity: 0.72;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

/* Cards with images get different treatment */
.tile.has-img[b-g2xxwyov9v] {
    background: #fff;
    border-color: #e5e7eb;
    min-height: auto;
}

.tile.has-img:hover[b-g2xxwyov9v] {
    background: #fafafa;
    border-color: #d1d5db;
}

/* Thin colored stripe for image-less tiles — replaces the old
   tile-placeholder block. Gives a category-recognition cue without
   stealing visual weight from the item name. */
.tile-stripe[b-g2xxwyov9v] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 4px;
    flex-shrink: 0;
    opacity: 0.85;
}

.tile.no-img[b-g2xxwyov9v] {
    background: var(--card);
    border-color: transparent;
}

.tile.no-img:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

/* ========================================
   COMPACT VIEW - Smaller tiles for small screens
   ======================================== */
.grid.compact[b-g2xxwyov9v] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 10px;
}

.grid.compact .tile[b-g2xxwyov9v] {
    padding: 8px;
    gap: 4px;
    min-height: 50px;
    border-radius: 8px;
}

.grid.compact .tile-name[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 700;
    -webkit-line-clamp: 2;
}

.grid.compact .price[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 800;
}

.grid.compact .muted[b-g2xxwyov9v] {
    font-size: 0.7rem;
}

.summary[b-g2xxwyov9v] {
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    min-height: 0;
}

    .summary h3[b-g2xxwyov9v] {
        margin: 0 0 8px;
        color: var(--ink)
    }

    .summary .lines[b-g2xxwyov9v] {
        flex: 1;
        overflow: auto;
        overscroll-behavior: contain;
    }

/* Basket lines */
.line[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    min-height: 56px;
    position: relative;
}

    .line .info[b-g2xxwyov9v] {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .line .name[b-g2xxwyov9v] {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        column-gap: 8px;
        min-width: 0;
        white-space: nowrap;
    }

        .line .name .name-text[b-g2xxwyov9v] {
            min-width: 0;
            white-space: nowrap;
            overflow: visible;
            text-overflow: unset;
        }

.line-actions[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

/* Extra spacing before destructive action (trash) */
.line-actions .trash[b-g2xxwyov9v] {
    margin-left: 8px;
}

    .line-actions .qty[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

.line-total[b-g2xxwyov9v] {
    white-space: nowrap;
    font-weight: 800;
    min-width: 120px;
    text-align: right;
    margin-left: auto;
    margin-right: 12px;
    flex: 0 0 auto;
}

.line .more[b-g2xxwyov9v],
.line .trash[b-g2xxwyov9v] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.line-actions .qty button[b-g2xxwyov9v],
.line-actions .more[b-g2xxwyov9v],
.line-actions .trash[b-g2xxwyov9v] {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
}

/* Status styling */
.basket-item.status-new[b-g2xxwyov9v] {
    border-left: 4px solid #e0e0e0;
    background: #fff;
}

    .basket-item.status-new[b-g2xxwyov9v]::before {
        content: "•";
        color: #999;
        font-size: 18px;
        position: absolute;
        left: 8px;
        top: 10px;
    }

/* Group headers */
.section-header[b-g2xxwyov9v] {
    background: #f8f9fa;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

    .section-header:hover[b-g2xxwyov9v] {
        background: #e9ecef;
    }

.section-title[b-g2xxwyov9v] {
    font-weight: 800;
}

.section-count[b-g2xxwyov9v] {
    color: #6b7280;
    font-weight: 700;
}

.section-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 800;
}

.section-items[b-g2xxwyov9v] {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

    .section-items.collapsed[b-g2xxwyov9v] {
    max-height: 0;
    padding: 0;
    margin: 0;
}

.time-in-table[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 4px 0 8px;
    font-size: 0.9rem;
    background: #6b7280;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    transition: all 0.3s ease;
}

.time-in-table[b-g2xxwyov9v]::before {
    content: "⏱";
    font-size: 1.1rem;
}

.time-in-table .time-value[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.time-in-table .time-label[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.9;
}

.time-in-table .time-status[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.time-in-table .time-separator[b-g2xxwyov9v] {
    opacity: 0.7;
    font-weight: 400;
}

/* Green state - 0-30 minutes (normal) */
.time-in-table.timer-green[b-g2xxwyov9v] {
    background: #22c55e;
    color: #fff;
}

/* Amber state - 30-60 minutes (long) */
.time-in-table.timer-amber[b-g2xxwyov9v] {
    background: #f59e0b;
    color: #fff;
    animation: timer-amber-pulse-b-g2xxwyov9v 2s ease-in-out infinite;
}

@keyframes timer-amber-pulse-b-g2xxwyov9v {
    0%, 100% { background: #f59e0b; }
    50% { background: #d97706; }
}

/* Red state - 60+ minutes (attention) */
.time-in-table.timer-red[b-g2xxwyov9v] {
    background: #ef4444;
    color: #fff;
    animation: timer-red-pulse-b-g2xxwyov9v 1s ease-in-out infinite;
}

@keyframes timer-red-pulse-b-g2xxwyov9v {
    0%, 100% { background: #ef4444; transform: scale(1); }
    50% { background: #dc2626; transform: scale(1.02); }
}

.time-in-table .muted[b-g2xxwyov9v] {
    font-weight: 600;
    opacity: 0.9;
}

/* Partial Payment Indicator - shown when order has partial payment */
.partial-payment-indicator[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    font-size: 0.9rem;
    animation: partial-pulse-b-g2xxwyov9v 2s ease-in-out infinite;
}

@keyframes partial-pulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2); }
}

.partial-payment-indicator .partial-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
}

.partial-payment-indicator .partial-text[b-g2xxwyov9v] {
    font-weight: 800;
    color: #92400e;
}

.partial-payment-indicator .partial-pending[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: #b45309;
    background: rgba(180, 83, 9, 0.15);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.partial-payment-indicator .expand-icon[b-g2xxwyov9v] {
    color: #92400e;
    font-size: 0.7rem;
    margin-left: 8px;
}

/* Payment History List */
.payment-history-list[b-g2xxwyov9v] {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

.payment-history-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 0.85rem;
    border-bottom: 1px solid #fed7aa;
}

.payment-history-item:last-child[b-g2xxwyov9v] {
    border-bottom: none;
}

.payment-history-item .payment-method-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.payment-history-item .payment-method[b-g2xxwyov9v] {
    color: #92400e;
    font-weight: 500;
}

.payment-history-item .payment-amount[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: #b45309;
}

.payment-history-item .payment-time[b-g2xxwyov9v] {
    color: #78716c;
    font-size: 0.75rem;
    margin-left: 8px;
}

/* Fully Paid Indicator */
.partial-payment-indicator.fully-paid[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #6ee7b7;
    animation: none;
}

.partial-payment-indicator.fully-paid .partial-icon[b-g2xxwyov9v] {
    color: #059669;
}

.partial-payment-indicator.fully-paid .fully-paid-text[b-g2xxwyov9v] {
    color: #047857;
    font-weight: 800;
}

.partial-payment-indicator.fully-paid .expand-icon[b-g2xxwyov9v] {
    color: #059669;
}

/* QR Payment Badge */
.qr-payment-badge[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 4px;
}

/* QR Payment in history list */
.payment-history-item.qr-payment[b-g2xxwyov9v] {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
}

.payment-history-item.qr-payment .payment-method[b-g2xxwyov9v] {
    color: #7c3aed;
}

/* Fully paid history list */
.partial-payment-indicator.fully-paid + .payment-history-list[b-g2xxwyov9v],
.partial-payment-indicator.fully-paid ~ .payment-history-list[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Auto-promotion applied indicator */
.promo-applied-indicator[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px solid #60a5fa;
    border-radius: 12px;
    font-size: 0.85rem;
}

.promo-applied-indicator .promo-icon[b-g2xxwyov9v] {
    font-size: 1.1rem;
}

.promo-applied-indicator .promo-savings[b-g2xxwyov9v] {
    font-weight: 700;
    color: #1e40af;
}

/* Send to Kitchen button - inside basket */
.btn-kitchen[b-g2xxwyov9v] {
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
    transition: all 0.2s ease;
}

.btn-kitchen:hover:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.4);
}

.btn-kitchen:active:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(0);
}

.btn-kitchen:disabled[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

html[data-theme="dark"] .btn-kitchen:disabled[b-g2xxwyov9v] {
    background: #374151;
    color: #6b7280;
}

/* Inline nuevos total in kitchen button - always visible */
.btn-kitchen-total[b-g2xxwyov9v] {
    font-weight: 900;
    opacity: 0.9;
}

.basket-item.status-sent[b-g2xxwyov9v] {
    border-left: 4px solid #4CAF50;
    background: #e8f5e9;
}

.basket-item.status-pending[b-g2xxwyov9v] {
    border-left: 4px solid #FF9800;
    background: #fff3e0;
}

.basket-item.status-preparing[b-g2xxwyov9v] {
    border-left: 4px solid #2563eb;
    background: #e5edff;
}

.basket-item.status-cancelled[b-g2xxwyov9v] {
    border-left: 4px solid #ef4444;
    background: #ffebee;
}

    .basket-item.status-cancelled .name-text[b-g2xxwyov9v] {
        text-decoration: line-through;
    }

.basket-item.item-added[b-g2xxwyov9v] {
    animation: item-added-b-g2xxwyov9v 0.5s ease-out 1;
}

@keyframes item-added-b-g2xxwyov9v {
    0% {
        background: #ffeb3b40;
    }

    100% {
        background: #fff;
    }
}



/* Payment bar in left column */
.payment-bar[b-g2xxwyov9v] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card);
    border-top: 1px solid #ececec;
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    box-sizing: border-box;
}

.pay[b-g2xxwyov9v] {
    flex: 1 1 0%;
    padding: 14px 12px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    min-height: 52px;
    min-width: 0;
    max-width: none;
    position: relative;
    transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pay .shortcut-hint[b-g2xxwyov9v] {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 600;
}

.pay:hover:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.pay:active:not(:disabled)[b-g2xxwyov9v] {
    transform: translateY(0);
    filter: brightness(0.95);
}

.pay:disabled[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

html[data-theme="dark"] .pay:disabled[b-g2xxwyov9v] {
    background: #374151;
    color: #6b7280;
}

.pay-cash[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#10b981,#059669);
}

.pay-card[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#60a5fa,#2563eb);
}

.pay-screen[b-g2xxwyov9v] {
    background: linear-gradient(180deg,#f59e0b,#d97706);
}

/* Dark theme payment bar */
html[data-theme="dark"] .payment-bar[b-g2xxwyov9v] {
    background: var(--card);
    border-top-color: #374151;
}

.modal-root[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none
}

    .modal-root.open[b-g2xxwyov9v] {
        pointer-events: auto
    }

.modal-backdrop[b-g2xxwyov9v] {
    position: absolute;
    inset: 0;
    /* Explicit z-index so the backdrop can NEVER paint above its sibling
       .modal-card. Previously both relied on DOM order + z-index:auto,
       which is fragile against any ancestor/context that alters the
       card's positioning or stacking (e.g. the .page.with-tables
       .tablesbar !important neutralizers): the dark backdrop would then
       render over the modal and swallow clicks, dismissing it. Pinning
       backdrop:0 / card:1 makes the order unconditional. */
    z-index: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .2s ease
}

.modal-root.open .modal-backdrop[b-g2xxwyov9v] {
    opacity: 1
}

/* Base modal card — applies to every confirm/info/picker modal in
   Pos.razor. Custom modal classes (.move-table-modal, .history-modal,
   .shortcuts-modal, etc.) live in this same scoped stylesheet with
   specificity (0,2,0) equal to this base, and come later in source
   order — so they override the base naturally without specificity
   tricks. Previously this block used `:not(.discount-modal):not(.pin-modal)`
   which lifted the specificity to (0,4,0) and inadvertently beat every
   custom modifier class, forcing move-table-modal (dark, 520px), the
   history-modal, and every other modifier modal into the default white
   420px look. */
.modal-card[b-g2xxwyov9v] {
    position: relative;
    /* Always above the .modal-backdrop sibling — see backdrop note. */
    z-index: 1;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    border-radius: 16px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: all .22s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    box-sizing: border-box
}

.modal-card > div[b-g2xxwyov9v] {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word
}

/* Discount + PIN modals own their own sizing / layout / typography.
   Scoped here (rather than relying on site.css `.modal-card.discount-modal`)
   so specificity is (0,3,0) — beats the base (0,2,0) in the same scope
   and wins cleanly without having to fight scoped-CSS source order
   against the unscoped site.css rule. The content styling
   (.disc-hero, .disc-preview, chips, CTA gradient, etc.) still lives
   in site.css since those selectors don't conflict with anything here.

   word-wrap / overflow-wrap reset to `normal` so labels like
   "DESCUENTO", "A PAGAR", "MOTIVO (OPCIONAL)" can't break letter-by-
   letter on narrow columns — the original regression that kicked off
   this whole chain. */
.modal-card.discount-modal[b-g2xxwyov9v],
.modal-card.pin-modal[b-g2xxwyov9v] {
    width: 720px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    word-wrap: normal;
    overflow-wrap: normal;
}

.modal-card.pin-modal[b-g2xxwyov9v] {
    width: 460px;
}

.modal-card.discount-modal > div[b-g2xxwyov9v],
.modal-card.pin-modal > div[b-g2xxwyov9v] {
    max-width: none;
    word-wrap: normal;
    overflow-wrap: normal;
}

.modal-card .muted[b-g2xxwyov9v] {
    white-space: normal
}

.modal-root.open .modal-card[b-g2xxwyov9v] {
    transform: translateY(0) scale(1);
    opacity: 1
}

.modal-cta[b-g2xxwyov9v] {
    margin-top: 12px;
    background: #111827;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer
}

/* Confirm-modal action link (e.g. "Descargar Mesero Comandas →"). Primary
   blue so it's the obvious next step; the plain ACEPTAR drops to a muted
   secondary below it. Only appears when a caller sets ConfirmCtaUrl. */
.confirm-cta-primary[b-g2xxwyov9v], .confirm-cta-link[b-g2xxwyov9v] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(29, 78, 216, 0.35);
}
.modal-cta-secondary[b-g2xxwyov9v] {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: transparent;
    color: var(--muted, #94a3b8);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.modal-cta.cta-flash:not(:disabled)[b-g2xxwyov9v] {
    animation: cta-flash-b-g2xxwyov9v .8s ease-in-out 0s 2;
    background: #059669;
}

@keyframes cta-flash-b-g2xxwyov9v {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ========================================
   TABLE PICKER MODAL - Improved UI
   ======================================== */
.table-picker-modal[b-g2xxwyov9v] {
    width: 520px;
    max-width: 95vw;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.picker-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.picker-icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.picker-title[b-g2xxwyov9v] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.picker-grid-container[b-g2xxwyov9v] {
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px 20px;
    background: #111827;
}

.picker-section-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #10b981;
    margin-bottom: 10px;
    margin-top: 16px;
}

.picker-section-label[b-g2xxwyov9v]::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #374151);
}

.picker-section-label[b-g2xxwyov9v]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #374151, transparent);
}

.picker-section-label:first-child[b-g2xxwyov9v] {
    margin-top: 0;
}

.picker-section-label.muted[b-g2xxwyov9v] {
    color: #9ca3af;
}

.picker-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.picker-grid-busy[b-g2xxwyov9v] {
    opacity: 0.45;
}

.picker-table-btn[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 64px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.picker-table-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.picker-table-btn.selected[b-g2xxwyov9v] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.picker-table-btn.selected .table-seats[b-g2xxwyov9v] {
    color: rgba(255,255,255,0.85);
}

.picker-table-btn.busy[b-g2xxwyov9v] {
    cursor: not-allowed;
    background: #64748b;
    border-color: #475569;
    box-shadow: none;
    color: #fff;
}

.picker-table-btn.busy .table-label[b-g2xxwyov9v] {
    color: #fff;
}

.picker-table-btn .table-label[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: .95rem;
    color: #1e293b;
}

.picker-table-btn .table-seats[b-g2xxwyov9v] {
    font-size: .85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 2px;
}

.picker-guests[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 20px 16px;
    padding: 14px 16px;
    background: #1e293b;
    border-radius: 12px;
    border: 1px solid #334155;
}

.picker-guests label[b-g2xxwyov9v] {
    font-weight: 700;
    color: #e2e8f0;
    font-size: .9rem;
}

.guests-control[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid #475569;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.guests-control input[b-g2xxwyov9v] {
    width: 56px;
    text-align: center;
    border: none;
    padding: 10px 4px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: #0f172a;
    -moz-appearance: textfield;
    cursor: pointer;
}

.guests-control input[b-g2xxwyov9v]::-webkit-outer-spin-button,
.guests-control input[b-g2xxwyov9v]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.guests-btn[b-g2xxwyov9v] {
    width: 40px;
    height: 40px;
    border: none;
    background: #334155;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 700;
    color: #e2e8f0;
    transition: all 0.15s;
}

.guests-btn:hover[b-g2xxwyov9v] {
    background: #475569;
    color: #fff;
}

.guests-btn:active[b-g2xxwyov9v] {
    background: #1e293b;
}

.picker-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px 20px 20px;
    background: #1e293b;
    border-top: 1px solid #334155;
}

.picker-actions .modal-cta[b-g2xxwyov9v] {
    margin-top: 0;
    padding: 12px 24px;
    font-size: .95rem;
}

.picker-actions .btn[b-g2xxwyov9v] {
    padding: 10px 20px;
}

/* Input highlight when keypad active */
.guests-control input.keypad-active[b-g2xxwyov9v] {
    background: #1e3a5f;
    border-color: #3b82f6;
    outline: 2px solid #3b82f6;
}

/* ========================================
   NUMERIC KEYPAD MODAL
   ======================================== */
.numpad-modal[b-g2xxwyov9v] {
    background: #fff;
    border-radius: 20px;
    padding: 0;
    width: 280px;
    max-width: 90vw;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: all .2s ease;
}

.modal-root.open .numpad-modal[b-g2xxwyov9v] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.numpad-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.numpad-header span:first-child[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: .95rem;
}

.numpad-value[b-g2xxwyov9v] {
    font-size: 2rem;
    font-weight: 800;
    min-width: 60px;
    text-align: right;
}

.numpad-modal .numpad-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px;
}

.numpad-btn[b-g2xxwyov9v] {
    height: 56px;
    border: none;
    border-radius: 12px;
    background: #f1f5f9;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.1s ease;
}

.numpad-btn:hover[b-g2xxwyov9v] {
    background: #e2e8f0;
    transform: scale(1.03);
}

.numpad-btn:active[b-g2xxwyov9v] {
    transform: scale(0.97);
    background: #cbd5e1;
}

.numpad-clear[b-g2xxwyov9v] {
    background: #fef2f2;
    color: #dc2626;
}

.numpad-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
}

.numpad-ok[b-g2xxwyov9v] {
    background: #10b981;
    color: #fff;
}

.numpad-ok:hover[b-g2xxwyov9v] {
    background: #059669;
}

/* ========================================
   MOVE TABLE MODAL — Premium redesign
   ======================================== */
.move-table-modal[b-g2xxwyov9v] {
    width: 520px;
    max-width: 95vw;
    padding: 0;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
}

.move-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #1e293b;
}
.move-title-row[b-g2xxwyov9v] { display: flex; align-items: center; gap: 10px; }
.move-icon[b-g2xxwyov9v] { font-size: 1.25rem; color: #818cf8; }
.move-title[b-g2xxwyov9v] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}
.move-close-x[b-g2xxwyov9v] {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid #1e293b;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .15s;
}
.move-close-x:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

/* Source order summary */
.move-source[b-g2xxwyov9v] {
    padding: 14px 20px;
    background: #0c1424;
    border-bottom: 1px solid #1e293b;
}
.move-source-row[b-g2xxwyov9v] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.875rem;
    color: #cbd5e1;
    flex-wrap: wrap;
}
.src-label[b-g2xxwyov9v] { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.src-table[b-g2xxwyov9v] { color: #f8fafc; font-weight: 700; font-size: 1rem; }
.src-meta[b-g2xxwyov9v] { color: #64748b; font-size: 0.8125rem; }
.src-total[b-g2xxwyov9v] { margin-left: auto; color: #f8fafc; font-weight: 700; font-size: 1rem; }

.move-arrow-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
}
.move-arrow-row.merge[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
.arrow-down[b-g2xxwyov9v] { color: #818cf8; font-size: 1rem; font-weight: 700; }
.move-arrow-row.merge .arrow-down[b-g2xxwyov9v] { color: #fbbf24; }
.dst-table[b-g2xxwyov9v] { color: #f8fafc; font-weight: 700; font-size: 0.9375rem; }
.merge-pill[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Tables grid container */
.move-tables-grid-container[b-g2xxwyov9v] {
    max-height: 45vh;
    overflow-y: auto;
    padding: 16px 20px;
}

.table-section-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    margin: 0 0 10px 0;
}
.table-section-label:not(:first-child)[b-g2xxwyov9v] { margin-top: 18px; }
.table-section-label .status-dot[b-g2xxwyov9v] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.table-section-label .status-dot.free[b-g2xxwyov9v] { background: #22c55e; }
.table-section-label .status-dot.occupied[b-g2xxwyov9v] { background: #f59e0b; }
.count-badge[b-g2xxwyov9v] {
    background: #1e293b;
    color: #cbd5e1;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
}
.table-section-label .section-hint[b-g2xxwyov9v] {
    color: #64748b;
    font-style: italic;
    font-size: 0.6875rem;
    margin-left: 4px;
}

.move-tables-grid[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* Premium table buttons — subtle, no green flood */
.mt-btn[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 14px 6px;
    border: 1px solid #1e293b;
    border-left: 3px solid #1e293b;
    border-radius: 10px;
    background: #111827;
    cursor: pointer;
    transition: all .15s;
    position: relative;
}
.mt-btn:hover[b-g2xxwyov9v] {
    background: #1a2332;
    border-color: #334155;
    transform: translateY(-1px);
}
.mt-label[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mt-seats[b-g2xxwyov9v] {
    font-size: 0.6875rem;
    color: #64748b;
    font-weight: 500;
}

.mt-btn.free[b-g2xxwyov9v] { border-left-color: #22c55e; }
.mt-btn.occupied[b-g2xxwyov9v] { border-left-color: #f59e0b; }

.mt-btn.selected[b-g2xxwyov9v] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 0 0 1px #6366f1;
}
.mt-btn.selected.free[b-g2xxwyov9v] { border-left-color: #6366f1; }
.mt-btn.selected.occupied[b-g2xxwyov9v] { border-left-color: #6366f1; }
.mt-btn.selected .mt-label[b-g2xxwyov9v] { color: #f8fafc; }

/* Footer with proper button hierarchy */
.move-modal-footer[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #1e293b;
    background: #0c1424;
}

.mv-btn[b-g2xxwyov9v] {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mv-secondary[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    padding: 10px 14px;
}
.mv-secondary:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}
.mv-cancel[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    margin-left: auto;
}
.mv-cancel:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}
.mv-primary[b-g2xxwyov9v] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
.mv-primary:hover:not(:disabled):not(.disabled)[b-g2xxwyov9v] {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.mv-primary.disabled[b-g2xxwyov9v],
.mv-primary:disabled[b-g2xxwyov9v] {
    background: #1e293b;
    color: #475569;
    border-color: #1e293b;
    cursor: not-allowed;
}

/* Light mode override (modal stays dark for premium feel) */
html:not([data-theme="dark"]) .move-table-modal[b-g2xxwyov9v] {
    background: #0f172a;
    color: #f8fafc;
}

/* ============================================
   UNIR MESAS (link picker) — premium polish
   ============================================
   The link picker shares the .move-table-modal shell with the move-table
   modal but uses its own context/preview/hint/footer-button class names
   (.move-from-context, .move-preview, .move-hint, .move-confirm-btn,
   .move-cancel-btn). Those classes had NO CSS before this block — the
   "Mesa principal", "Mesa + Mesa 2", and the footer buttons were
   rendering as flat unstyled spans/buttons against the dark modal
   background, which made the screen read as an unfinished prototype
   rather than a premium 10/10 modal. Mirrors the move-table palette
   (slate + indigo accent) so both modals feel like one product. */
.move-from-context[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: #0c1424;
    border-bottom: 1px solid #1e293b;
    font-size: 0.875rem;
    color: #cbd5e1;
}
.move-from-context .from-label[b-g2xxwyov9v] {
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.move-from-context .from-table[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 700;
    font-size: 1rem;
}

.move-preview[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    color: #f8fafc;
    font-size: 0.9375rem;
    font-weight: 600;
    flex-wrap: wrap;
    text-align: center;
}
.move-preview .preview-from[b-g2xxwyov9v],
.move-preview .preview-to[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 700;
}
.move-preview .preview-arrow[b-g2xxwyov9v] {
    color: #818cf8;
    font-weight: 700;
    font-size: 1rem;
}

.move-hint[b-g2xxwyov9v] {
    margin: 14px 20px 0;
    padding: 10px 14px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px dashed #334155;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.8125rem;
    text-align: center;
}

/* Footer button hierarchy — mirror the .mv-primary / .mv-cancel pair so
   the modal is visually consistent with the move-table modal. */
.move-confirm-btn[b-g2xxwyov9v],
.move-cancel-btn[b-g2xxwyov9v] {
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    white-space: nowrap;
    min-height: 44px;
}
.move-confirm-btn[b-g2xxwyov9v] {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}
.move-confirm-btn:hover:not(:disabled):not(.disabled)[b-g2xxwyov9v] {
    background: #4f46e5;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.move-confirm-btn.disabled[b-g2xxwyov9v],
.move-confirm-btn:disabled[b-g2xxwyov9v] {
    background: #1e293b;
    color: #475569;
    border-color: #1e293b;
    cursor: not-allowed;
}
.move-cancel-btn[b-g2xxwyov9v] {
    background: transparent;
    color: #94a3b8;
    border-color: #1e293b;
    margin-left: auto;
}
.move-cancel-btn:hover[b-g2xxwyov9v] {
    background: #1e293b;
    color: #f8fafc;
}

/* Picker grid container needs a clear scrolling region; the markup
   currently calls it .move-tables-grid-container (not .picker-grid-
   container which is the dark variant). Bring it in line so the link
   picker also gets the dark canvas + scroll cap. */
.move-table-modal .move-tables-grid-container[b-g2xxwyov9v] {
    background: #111827;
}

@keyframes pulse-b-g2xxwyov9v {
    0% {
        box-shadow: 0 0 0 0 rgba(5,150,105,.75)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(5,150,105,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(5,150,105,0)
    }
}

.status-dot[b-g2xxwyov9v] {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 6px
}


    .status-dot.pulse[b-g2xxwyov9v]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        box-shadow: 0 0 0 0 rgba(5,150,105,.65);
        animation: line-pulse-b-g2xxwyov9v 1s ease-out 1
    }

.save-badge[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease,transform .18s ease
}

    .save-badge.show[b-g2xxwyov9v] {
        opacity: 1;
        transform: none
    }

.pulse-dot[b-g2xxwyov9v] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(5,150,105,.75);
    animation: pulse-b-g2xxwyov9v 1.4s ease-out 1
}



@keyframes line-pulse-b-g2xxwyov9v {
    0% {
        box-shadow: 0 0 0 0 rgba(5,150,105,.65);
        opacity: 1
    }

    100% {
        box-shadow: 0 0 0 12px rgba(5,150,105,0);
        opacity: 0
    }
}


.tile.has-img[b-g2xxwyov9v] {
    background: #fff;
    border: 1px solid #eee;
}

/* Light theme: tint the primary actions to dark, keep neutral/ghost/danger distinct */
html[data-theme="light"] .actions .btn.btn-tint[b-g2xxwyov9v] {
    background: #0f172a;
    color: #fff;
    border: 1px solid #0f172a;
}

    html[data-theme="light"] .actions .btn.btn-tint:hover[b-g2xxwyov9v] {
        filter: brightness(1.08);
    }

html[data-theme="light"] .actions .btn.btn-neutral[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #111827;
    border: 1px solid #d1d5db;
}

html[data-theme="light"] .actions .btn.btn-ghost[b-g2xxwyov9v] {
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
}

html[data-theme="light"] .actions .btn.btn-danger[b-g2xxwyov9v] {
    background: #c62828;
    border-color: #c62828;
}

.tile-img-wrap[b-g2xxwyov9v] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
}

.tile-img[b-g2xxwyov9v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Image-load fallback. The stripe sits inside the img-wrap, hidden while the
   image loads fine. If the <img> fails, onerror adds .tile-img-failed on the
   TILE, which makes the tile render exactly like an image-less .tile.no-img:
   drop the white has-img background, collapse the square img-wrap, and reveal
   the 4px category stripe — so a dead URL degrades to the normal no-image
   look instead of an empty grey square. */
.tile-stripe-fallback[b-g2xxwyov9v] {
    display: none;
}

/* Match .tile.no-img so a failed-image tile is visually identical to one
   that never had an image. */
.tile.tile-img-failed[b-g2xxwyov9v] {
    background: var(--card);
    border-color: transparent;
}

.tile.tile-img-failed:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

.tile.tile-img-failed .tile-img-wrap[b-g2xxwyov9v] {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.tile.tile-img-failed .tile-img[b-g2xxwyov9v] {
    display: none;
}

.tile.tile-img-failed .tile-stripe-fallback[b-g2xxwyov9v] {
    display: block;
}


/* Make sure the cash-drawer button is red */
.actions .btn.btn-danger[b-g2xxwyov9v] {
    background: #c62828 !important;
    color: #fff !important;
}

    .actions .btn.btn-danger:hover[b-g2xxwyov9v] {
        background: #8e0000 !important;
    }

.actions .dropdown[b-g2xxwyov9v] {
    display: inline-flex;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
}

.actions .dropdown .dropdown-main[b-g2xxwyov9v] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px 0 0 12px;
    border: 1px solid var(--action-neutral-border, #d5dde9);
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    font-weight: 800;
    cursor: pointer;
}

.actions .dropdown .dropdown-toggle[b-g2xxwyov9v] {
    width: 38px;
    border-radius: 0 12px 12px 0;
    border: 1px solid var(--action-neutral-border, #d5dde9);
    border-left: 0;
    background: var(--action-neutral, #e8edf4);
    color: #0f172a;
    cursor: pointer;
    font-weight: 900;
}

.actions .dropdown .dropdown-menu[b-g2xxwyov9v] {
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
    padding: 6px;
    display: grid;
    gap: 6px;
    z-index: 5;
}

.actions .dropdown .dropdown-menu button[b-g2xxwyov9v] {
    width: 100%;
    text-align: left;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    font-weight: 800;
    cursor: pointer;
}

.actions .dropdown .dropdown-menu button:hover[b-g2xxwyov9v] {
    background: #eef2ff;
}

/* Dark theme dropdown buttons */
html[data-theme="dark"] .actions .dropdown .dropdown-main[b-g2xxwyov9v],
html[data-theme="dark"] .actions .dropdown .dropdown-toggle[b-g2xxwyov9v] {
    color: #f3f4f6 !important;
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Dark theme dropdown menu */
html[data-theme="dark"] .actions .dropdown .dropdown-menu[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .actions .dropdown .dropdown-menu button[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .actions .dropdown .dropdown-menu button:hover[b-g2xxwyov9v] {
    background: #4b5563;
}



/* Optional: course pill */
.pill[b-g2xxwyov9v] {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
}

.pill-course[b-g2xxwyov9v] {
    color: #111827;
}


.hint-tip[b-g2xxwyov9v] {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    color: var(--muted);
    font-size: .9rem;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.hint-dismiss[b-g2xxwyov9v] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 700;
}


.course-pill[b-g2xxwyov9v] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    border: 1px dashed #e5e7eb;
    background: #fff;
    cursor: pointer;
}

    .course-pill.empty[b-g2xxwyov9v] {
        color: var(--muted);
    }

    .course-pill.app[b-g2xxwyov9v] {
        background: #e0f2fe;
        border-color: #bae6fd;
    }
    /* Entrante */
    .course-pill.main[b-g2xxwyov9v] {
        background: #ecfdf5;
        border-color: #bbf7d0;
    }
    /* Principal */
    .course-pill.des[b-g2xxwyov9v] {
        background: #fff7ed;
        border-color: #fed7aa;
    }
/* Postre */


/* ========================================
   SISTEMA DROPDOWN
   ======================================== */

.sistema-dropdown[b-g2xxwyov9v] {
    position: relative;
}

.sistema-backdrop[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.sistema-menu[b-g2xxwyov9v] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    padding: 12px;
    z-index: 100;
    animation: sistema-in-b-g2xxwyov9v 0.15s ease;
}

@keyframes sistema-in-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sistema-item[b-g2xxwyov9v] {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    font-weight: 700;
    transition: background 0.15s;
}

.sistema-item:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

/* Quick-stock entry: only surfaced in the menu on phones, where the
   action-row Stock button is hidden. Desktop keeps it in the action row. */
.sistema-stock[b-g2xxwyov9v] {
    display: none;
}

.sistema-divider[b-g2xxwyov9v] {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0;
}

.sistema-label[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 4px 8px;
}

.sistema-row[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sistema-chip[b-g2xxwyov9v] {
    flex: 1;
    min-width: 70px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sistema-chip:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sistema-chip.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    color: #fff;
    border-color: #0284c7;
}

/* Dark theme support */
html[data-theme="dark"] .sistema-menu[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .sistema-item[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .sistema-item:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .sistema-divider[b-g2xxwyov9v] {
    border-color: #374151;
}

html[data-theme="dark"] .sistema-label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .sistema-chip[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .sistema-chip:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .sistema-chip.active[b-g2xxwyov9v] {
    background: #0ea5e9;
    border-color: #0284c7;
}

html[data-theme="dark"] .chip.low-stock-chip[b-g2xxwyov9v] {
    background: #422006;
    border-color: #f59e0b;
    color: #fbbf24;
}

html[data-theme="dark"] .chip.low-stock-chip.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
    color: #1f2937;
}

/* Logout button */
.sistema-logout[b-g2xxwyov9v] {
    width: 100%;
    text-align: left;
    color: #dc2626;
    border: none;
    background: transparent;
    cursor: pointer;
}

.sistema-logout:hover[b-g2xxwyov9v] {
    background: #fef2f2;
}

html[data-theme="dark"] .sistema-logout[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .sistema-logout:hover[b-g2xxwyov9v] {
    background: #7f1d1d33;
}

/* ── Phone: settings becomes a native-feeling bottom sheet ──────────────
   A top-anchored 260px dropdown reads as cramped/desktop-y on a phone.
   On ≤600px we re-dock the same menu to the bottom edge, full width, with
   a grab handle, larger tap targets and a dimmed backdrop — the pattern
   users expect from an iOS/Android action sheet. Desktop is untouched. */
@media (max-width: 600px) {
    .sistema-backdrop[b-g2xxwyov9v] {
        background: rgba(0, 0, 0, .45);
        /* The dim area behind the sheet must be inert to touch — otherwise a drag
           there scrolls the POS underneath instead of doing nothing. */
        touch-action: none;
        overscroll-behavior: none;
    }

    .sistema-menu[b-g2xxwyov9v] {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Trap the scroll INSIDE the sheet — without this, scrolling the sheet
           (e.g. to reach Hardware below the fold) chains to the POS behind it. */
        overscroll-behavior: contain;
        touch-action: pan-y;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 22px 16px max(18px, env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
        animation: sistema-sheet-in-b-g2xxwyov9v 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Grab handle */
    .sistema-menu[b-g2xxwyov9v]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d1d5db;
    }
    html[data-theme="dark"] .sistema-menu[b-g2xxwyov9v]::before {
        background: #4b5563;
    }

    /* Roomier touch targets in the sheet */
    .sistema-menu .sistema-item[b-g2xxwyov9v],
    .sistema-menu .sistema-stock[b-g2xxwyov9v] {
        padding: 14px 12px;
        font-size: 1rem;
    }
    .sistema-menu .sistema-stock[b-g2xxwyov9v] {
        display: block;
    }
    .sistema-menu .sistema-chip[b-g2xxwyov9v] {
        padding: 12px 10px;
        min-height: 46px;
        font-size: 0.95rem;
    }
    .sistema-menu .sistema-label[b-g2xxwyov9v] {
        font-size: 0.78rem;
        padding: 6px 4px 8px;
    }
}

@keyframes sistema-sheet-in-b-g2xxwyov9v {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Clock in/out buttons */
.sistema-clock-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 6px;
    font-size: 0.8rem;
}

.sistema-clock-status.clocked-in[b-g2xxwyov9v] {
    background: #dcfce7;
    color: #166534;
}

.sistema-clock-status .clock-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.sistema-clockin[b-g2xxwyov9v] {
    color: #16a34a !important;
}

.sistema-clockin:hover[b-g2xxwyov9v] {
    background: #f0fdf4 !important;
}

.sistema-clockout[b-g2xxwyov9v] {
    color: #dc2626 !important;
}

.sistema-clockout:hover[b-g2xxwyov9v] {
    background: #fef2f2 !important;
}

html[data-theme="dark"] .sistema-clock-status.clocked-in[b-g2xxwyov9v] {
    background: #166534;
    color: #dcfce7;
}

html[data-theme="dark"] .sistema-clockin[b-g2xxwyov9v] {
    color: #4ade80 !important;
}

html[data-theme="dark"] .sistema-clockin:hover[b-g2xxwyov9v] {
    background: #14532d33 !important;
}

html[data-theme="dark"] .sistema-clockout[b-g2xxwyov9v] {
    color: #f87171 !important;
}

html[data-theme="dark"] .sistema-clockout:hover[b-g2xxwyov9v] {
    background: #7f1d1d33 !important;
}

/* Dark theme: totals toggle link */
html[data-theme="dark"] .totals-toggle-link[b-g2xxwyov9v] {
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .totals-toggle-link:hover[b-g2xxwyov9v] {
    background: #374151;
    border-color: #6b7280;
    color: #f3f4f6;
}

html[data-theme="dark"] .totals-card.totals-compact[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .totals-card.totals-compact .totals-head[b-g2xxwyov9v] {
    border-color: #374151;
}

html[data-theme="dark"] .totals-card.totals-compact .toggle-details[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .totals-card.totals-compact .toggle-details:hover[b-g2xxwyov9v] {
    color: #f3f4f6;
}

/* ========================================
   TOUCH KEYBOARD
   ======================================== */
.search.keyboard-active[b-g2xxwyov9v] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.touch-keyboard-overlay[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
    animation: tk-fade-in-b-g2xxwyov9v 0.15s ease;
}

@keyframes tk-fade-in-b-g2xxwyov9v {
    from { opacity: 0; }
    to { opacity: 1; }
}

.touch-keyboard[b-g2xxwyov9v] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 16px;
    z-index: 100;
    min-width: 520px;
    max-width: 95vw;
    animation: tk-slide-up-b-g2xxwyov9v 0.2s ease;
}

@keyframes tk-slide-up-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.tk-search-display[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 1.1rem;
    min-height: 52px;
}

.tk-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
    opacity: 0.6;
}

.tk-text[b-g2xxwyov9v] {
    flex: 1;
    font-weight: 600;
    color: #111827;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-text:empty[b-g2xxwyov9v]::before,
.tk-search-display .tk-text:first-child:last-child[b-g2xxwyov9v]::before {
    content: "buscar...";
    color: #9ca3af;
}

.tk-cursor[b-g2xxwyov9v] {
    color: #0ea5e9;
    animation: tk-blink-b-g2xxwyov9v 1s step-end infinite;
    font-weight: 400;
}

@keyframes tk-blink-b-g2xxwyov9v {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.tk-clear-inline[b-g2xxwyov9v] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tk-clear-inline:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.tk-rows[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tk-row[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.tk-key[b-g2xxwyov9v] {
    min-width: 44px;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #f3f4f6);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 #d1d5db;
}

.tk-key:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    border-color: #9ca3af;
}

.tk-key:active[b-g2xxwyov9v] {
    transform: translateY(2px);
    box-shadow: 0 0 0 #d1d5db;
    background: #e5e7eb;
}

.tk-backspace[b-g2xxwyov9v] {
    min-width: 60px;
    background: linear-gradient(180deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
    color: #dc2626;
    box-shadow: 0 2px 0 #fecaca;
}

.tk-backspace:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
}

.tk-action[b-g2xxwyov9v] {
    min-width: 90px;
    font-size: 0.75rem;
    background: linear-gradient(180deg, #f8fafc, #e5e7eb);
    color: #4b5563;
}

.tk-confirm[b-g2xxwyov9v] {
    min-width: 120px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-color: #16a34a;
    color: #fff;
    box-shadow: 0 2px 0 #15803d;
    font-size: 0.85rem;
}

.tk-confirm:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #16a34a, #15803d);
}

.tk-confirm:active[b-g2xxwyov9v] {
    box-shadow: 0 0 0 #15803d;
}

/* Hide keyboard hint on touch devices */
@media (pointer: coarse) {
    .search .kbd-hint[b-g2xxwyov9v] {
        display: none;
    }
}

/* Dark theme touch keyboard */
html[data-theme="dark"] .touch-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .tk-search-display[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tk-text[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .tk-clear-inline[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .tk-key[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    color: #f3f4f6;
    box-shadow: 0 2px 0 #111827;
}

html[data-theme="dark"] .tk-key:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #4b5563, #374151);
}

html[data-theme="dark"] .tk-key:active[b-g2xxwyov9v] {
    background: #111827;
}

html[data-theme="dark"] .tk-backspace[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #7f1d1d, #991b1b);
    border-color: #991b1b;
    color: #fecaca;
    box-shadow: 0 2px 0 #7f1d1d;
}

html[data-theme="dark"] .tk-action[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151, #1f2937);
    color: #9ca3af;
}

/* Touch keyboard footer with disable toggle */
.tk-footer[b-g2xxwyov9v] {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

.tk-disable-toggle[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.tk-disable-toggle input[type="checkbox"][b-g2xxwyov9v] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
}

.tk-disable-toggle span[b-g2xxwyov9v] {
    white-space: nowrap;
}

html[data-theme="dark"] .tk-footer[b-g2xxwyov9v] {
    border-top-color: #374151;
}

html[data-theme="dark"] .tk-disable-toggle[b-g2xxwyov9v],
html[data-theme="dark"] .tk-disable-toggle span[b-g2xxwyov9v] {
    color: #d1d5db;
}

/* ========================================
   SEARCH ENHANCEMENTS
   ======================================== */

/* Clear button inside search input */
.search-clear[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.search-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Results chip styling */
.chip.results-chip[b-g2xxwyov9v] {
    cursor: default;
    background: #0ea5e9;
    border-color: #0284c7;
    color: #fff;
}

/* Single match tile highlight */
.tile.single-match[b-g2xxwyov9v] {
    border: 2px solid #22c55e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 12px rgba(34, 197, 94, 0.15);
    animation: single-match-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

.tile.single-match:hover[b-g2xxwyov9v] {
    border-color: #16a34a;
    background: #dcfce7;
}

@keyframes single-match-pulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 12px rgba(34, 197, 94, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1), 0 6px 16px rgba(34, 197, 94, 0.2); }
}

/* Empty search state */
.empty-search[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.empty-search .empty-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    opacity: 0.5;
}

.empty-search .empty-text[b-g2xxwyov9v] {
    font-size: 1rem;
    font-weight: 600;
}

.empty-search .empty-clear[b-g2xxwyov9v] {
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.empty-search .empty-clear:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* Touch keyboard results hint */
.tk-results-hint[b-g2xxwyov9v] {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.tk-results-hint .tk-no-results[b-g2xxwyov9v] {
    color: #dc2626;
}

.tk-results-hint .tk-single-match[b-g2xxwyov9v] {
    color: #16a34a;
    background: #f0fdf4;
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-block;
}

.tk-results-hint .tk-count[b-g2xxwyov9v] {
    color: #0369a1;
}

/* Single match add button styling */
.tk-key.tk-add[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-color: #16a34a;
    box-shadow: 0 2px 0 #15803d;
}

.tk-key.tk-add:hover[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #16a34a, #15803d);
}

/* Dark theme search enhancements */
html[data-theme="dark"] .search-clear[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .search-clear:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

/* Dark theme tiles - use a muted slate/warm gray instead of harsh pink/red */
html[data-theme="dark"] .tile[b-g2xxwyov9v] {
    background: #292524; /* warm stone-900 */
    border-color: #44403c; /* stone-700 */
    color: #fafaf9; /* stone-50 */
}

html[data-theme="dark"] .tile:hover[b-g2xxwyov9v] {
    background: #3f3f46; /* zinc-700 */
    border-color: #52525b; /* zinc-600 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tile .tile-name[b-g2xxwyov9v] {
    color: #fafaf9;
}

html[data-theme="dark"] .tile .tile-price[b-g2xxwyov9v] {
    color: #a8a29e; /* stone-400 */
}

html[data-theme="dark"] .tile.single-match[b-g2xxwyov9v] {
    background: #14532d;
    border-color: #22c55e;
}

html[data-theme="dark"] .tile.single-match:hover[b-g2xxwyov9v] {
    background: #166534;
}

/* Dark theme for low stock badge - stronger orange for visibility */
html[data-theme="dark"] .low-stock-qty-badge[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.5);
}

/* Softer border in dark mode - muted brown/amber */
html[data-theme="dark"] .tile.low-stock[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #292117 0%, #2d241a 100%);
    border-color: #8b6b4a;
    border-width: 2px;
}

html[data-theme="dark"] .tile.low-stock:hover[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #2d241a 0%, #362c1f 100%);
    border-color: #a67c52;
}

html[data-theme="dark"] .empty-search[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-search .empty-clear[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .empty-search .empty-clear:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .tk-results-hint .tk-single-match[b-g2xxwyov9v] {
    background: #14532d;
    color: #86efac;
}

/* ========================================
   PRODUCT LOADING SKELETONS
   ======================================== */

@keyframes skeleton-shimmer-b-g2xxwyov9v {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tile.tile-skeleton[b-g2xxwyov9v] {
    background: #f8fafc;
    border-color: #e2e8f0;
    pointer-events: none;
    animation: skeleton-pulse-b-g2xxwyov9v 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-g2xxwyov9v {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.tile-skeleton .skeleton-name[b-g2xxwyov9v] {
    height: 18px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 80%;
}

.tile-skeleton .skeleton-category[b-g2xxwyov9v] {
    height: 12px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 50%;
    margin-top: 6px;
}

.tile-skeleton .skeleton-price[b-g2xxwyov9v] {
    height: 16px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer-b-g2xxwyov9v 1.5s infinite;
    width: 60px;
    margin-top: auto;
}

/* Dark theme skeletons */
html[data-theme="dark"] .tile.tile-skeleton[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tile-skeleton .skeleton-name[b-g2xxwyov9v],
html[data-theme="dark"] .tile-skeleton .skeleton-category[b-g2xxwyov9v],
html[data-theme="dark"] .tile-skeleton .skeleton-price[b-g2xxwyov9v] {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* ========================================
   EMPTY CATEGORY STATE
   ======================================== */

.empty-category[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
}

.empty-category-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.empty-category-title[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.empty-category-hint[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #9ca3af;
}

html[data-theme="dark"] .empty-category[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-category-title[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .empty-category-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

/* Brand-new restaurant onramp — shown when the whole menu is empty
   (Items.Count == 0). Replaces the terse "Sin productos" dead-end with
   a premium gradient card that converts the empty state into a guided
   CTA. Uses the same purple/indigo gradient as OnboardingBanner so the
   two surfaces feel like one system. */
.empty-onboarding[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.empty-onboarding-card[b-g2xxwyov9v] {
    max-width: 520px;
    width: 100%;
    padding: 36px 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 50px -15px rgba(99, 102, 241, .55);
    position: relative;
    overflow: hidden;
}

.empty-onboarding-card[b-g2xxwyov9v]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 50%),
        radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .14), transparent 55%);
    pointer-events: none;
}

.empty-onboarding-icon[b-g2xxwyov9v] {
    font-size: 3.5rem;
    margin-bottom: 14px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
    position: relative;
}

.empty-onboarding-title[b-g2xxwyov9v] {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
    position: relative;
}

.empty-onboarding-desc[b-g2xxwyov9v] {
    font-size: 0.95rem;
    opacity: 0.92;
    line-height: 1.5;
    margin-bottom: 22px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.empty-onboarding-actions[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    position: relative;
}

.empty-onboarding-cta[b-g2xxwyov9v] {
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    background: #fff;
    color: #4338ca;
    font-weight: 800;
    font-size: 1.02rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
    min-height: 52px; /* gloved tap target */
}

.empty-onboarding-cta:hover[b-g2xxwyov9v] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(0, 0, 0, .35);
}

.empty-onboarding-cta:active[b-g2xxwyov9v] { transform: translateY(0); }

.empty-onboarding-link[b-g2xxwyov9v] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: rgba(255, 255, 255, .85);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.empty-onboarding-link:hover[b-g2xxwyov9v] { color: #fff; }

/* No dark-theme override needed — the gradient is deliberately the same
   in light and dark. It's a premium accent, not a neutral surface. */

/* ========================================
   DARK THEME - BASKET/SUMMARY
   ======================================== */

/* Summary container */
html[data-theme="dark"] .summary[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

/* Summary in full/grid mode */
html[data-theme="dark"] .pos-shell.basket-full > .summary[b-g2xxwyov9v],
html[data-theme="dark"] .summary.summary-full[b-g2xxwyov9v] {
    background: #1f2937;
    border-left-color: #374151;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}

/* Summary header */
html[data-theme="dark"] .summary-head[b-g2xxwyov9v] {
    background: transparent;
}

html[data-theme="dark"] .summary h3[b-g2xxwyov9v] {
    color: #f3f4f6;
    background: transparent;
}

html[data-theme="dark"] .summary h3 .muted[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* Basket line items - text visibility */
html[data-theme="dark"] .line .name[b-g2xxwyov9v],
html[data-theme="dark"] .line .name-text[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .line[b-g2xxwyov9v] {
    border-bottom-color: #374151;
}

html[data-theme="dark"] .line-total[b-g2xxwyov9v] {
    color: #f3f4f6;
}

/* Section headers in basket */
html[data-theme="dark"] .section-header[b-g2xxwyov9v] {
    background: #374151;
    color: #f3f4f6;
}

html[data-theme="dark"] .section-header:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .section-count[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* Totals card */
html[data-theme="dark"] .totals-card[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .totals-card .label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .totals-card .value[b-g2xxwyov9v],
html[data-theme="dark"] .totals-card .total[b-g2xxwyov9v] {
    color: #f3f4f6;
}

html[data-theme="dark"] .totals-card hr[b-g2xxwyov9v] {
    border-color: #374151;
}

/* Course pills */
html[data-theme="dark"] .course-pill[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .course-pill.empty[b-g2xxwyov9v] {
    color: #9ca3af;
}

/* ========================================
   DARK THEME - DISABLED BUTTONS
   ======================================== */

html[data-theme="dark"] .btn:disabled[b-g2xxwyov9v],
html[data-theme="dark"] .btn[disabled][b-g2xxwyov9v] {
    color: #6b7280;
    opacity: 0.6;
}

html[data-theme="dark"] .actions .dropdown .dropdown-main:disabled[b-g2xxwyov9v],
html[data-theme="dark"] .actions .dropdown .dropdown-toggle:disabled[b-g2xxwyov9v] {
    color: #6b7280;
    opacity: 0.6;
}

/* ========================================
   PHASE 13: MODIFIER MODAL
   ======================================== */

.modifier-modal[b-g2xxwyov9v] {
    max-width: 780px;
    width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sticky footer for modifier modal */
.modifier-modal .modifier-footer[b-g2xxwyov9v] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-shrink: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.modifier-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.modifier-title[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1.2rem;
}

.modifier-title .edit-badge[b-g2xxwyov9v] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 8px;
    vertical-align: middle;
}

html[data-theme="dark"] .modifier-title .edit-badge[b-g2xxwyov9v] {
    color: #93c5fd;
    background: #1e3a5f;
}

.modifier-price[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 1.1rem;
    opacity: 0.9;
}

.modifier-groups[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    padding: 16px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.modifier-group[b-g2xxwyov9v] {
    margin-bottom: 20px;
    padding: 14px;
    background: #fafafa;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.modifier-group.needs-selection[b-g2xxwyov9v] {
    border-color: #fbbf24;
    background: #fffbeb;
}

.modifier-group.max-reached[b-g2xxwyov9v] {
    border-color: #10b981;
    background: #ecfdf5;
}

/* Minimum met but can still add more */
.modifier-group.min-met[b-g2xxwyov9v] {
    border-color: #86efac;
    background: #f0fdf4;
}

.modifier-group.min-met .group-hint[b-g2xxwyov9v] {
    color: #059669;
}

/* Configuration error: Min > Max */
.modifier-group.config-error[b-g2xxwyov9v] {
    border-color: #f97316;
    background: #fff7ed;
}

.modifier-group.config-error .group-hint[b-g2xxwyov9v]::after {
    content: " ⚠️";
}

.modifier-no-results[b-g2xxwyov9v] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 16px;
    color: var(--muted);
    font-style: italic;
    font-size: 0.9rem;
}

.modifier-no-results.modifier-config-warning[b-g2xxwyov9v] {
    color: #b45309;
    font-style: normal;
    font-weight: 500;
}

.modifier-no-groups[b-g2xxwyov9v] {
    text-align: center;
    padding: 24px 16px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 0.95rem;
}

.max-badge[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #059669;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 99px;
}

.modifier-group-header[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.group-name[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-hint[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: var(--muted);
}

/* When selection is complete, show hint in green */
.modifier-group.selection-complete .group-hint[b-g2xxwyov9v] {
    color: #059669;
    font-weight: 500;
}

/* Subtle green tint for completed single-select groups */
.modifier-group.selection-complete:not(.max-reached)[b-g2xxwyov9v] {
    border-color: #86efac;
    background: #f0fdf4;
}

.required-badge[b-g2xxwyov9v] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 99px;
}

.modifier-options[b-g2xxwyov9v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* 2 columns on medium screens */
@media (max-width: 650px) {
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Single column on very narrow screens */
@media (max-width: 400px) {
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MODIFIER MODAL — PHONE (≤ 500px)
   Fullscreen modal, compacted spacing
   ======================================== */
@media (max-width: 500px) {
    /* Fullscreen on phone — remove outer padding from .modal-card base */
    .modifier-modal[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding: 0;
        border-radius: 0;
    }

    .modifier-header[b-g2xxwyov9v] {
        padding: 12px 16px;
        border-radius: 0;
    }

    .modifier-title[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .modifier-price[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .modifier-groups[b-g2xxwyov9v] {
        padding: 10px;
    }

    .modifier-group[b-g2xxwyov9v] {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .modifier-group-header[b-g2xxwyov9v] {
        margin-bottom: 8px;
        gap: 6px;
    }

    .group-name[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .group-hint[b-g2xxwyov9v] {
        font-size: 0.75rem;
    }

    .max-badge[b-g2xxwyov9v],
    .required-badge[b-g2xxwyov9v] {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    /* Single column options for maximum readability */
    .modifier-options[b-g2xxwyov9v] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Touch-friendly option buttons */
    .modifier-option[b-g2xxwyov9v] {
        padding: 12px 10px;
        min-height: 44px;
        gap: 8px;
        border-radius: 8px;
    }

    .option-check[b-g2xxwyov9v] {
        width: 22px;
        height: 22px;
    }

    .option-name[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .option-price[b-g2xxwyov9v] {
        font-size: 0.8rem;
        padding: 2px 6px;
    }

    /* Compact footer */
    .modifier-footer[b-g2xxwyov9v] {
        padding: 12px 14px;
        border-radius: 0;
    }

    .modifier-total[b-g2xxwyov9v] {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .total-price[b-g2xxwyov9v] {
        font-size: 1.1rem;
    }

    .modifier-validation[b-g2xxwyov9v] {
        padding: 8px 12px;
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .modifier-actions[b-g2xxwyov9v] {
        flex-direction: column;
        gap: 8px;
    }

    .modifier-actions .btn-cancel[b-g2xxwyov9v],
    .modifier-actions .btn-confirm[b-g2xxwyov9v] {
        flex: none;
        width: 100%;
        padding: 14px;
        min-height: 48px;
    }

    /* Hide custom keyboard toggle on mobile — native keyboard is better */
    .modifier-keyboard-toggle[b-g2xxwyov9v] {
        display: none;
    }

    /* Compact search bar */
    .modifier-search[b-g2xxwyov9v] {
        padding: 8px 10px;
    }

    .modifier-search-input[b-g2xxwyov9v] {
        font-size: 14px;
        padding: 8px 10px;
    }
}

.modifier-option[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    min-width: 0;
}

.modifier-option:hover[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef7f7;
}

.modifier-option:focus-visible[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25);
}

.modifier-option.selected[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef2f2;
}

.option-check[b-g2xxwyov9v] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--brand);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    border: 2px solid #d1d5db;
    transition: all 0.15s ease;
}

/* Radio style for single-select groups */
.option-check.radio[b-g2xxwyov9v] {
    border-radius: 50%;
}

/* Checkbox style for multi-select groups (default square-ish) */
.option-check.checkbox[b-g2xxwyov9v] {
    border-radius: 4px;
}

.modifier-option.selected .option-check[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}

.modifier-option.disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modifier-option.disabled:hover[b-g2xxwyov9v] {
    border-color: #e5e7eb;
    background: white;
}

/* Sold-out (86'd) option — distinct from generic disabled so staff can
   tell "agotado" from "max reached". Name struck through, red badge. */
.modifier-option.sold-out .option-name[b-g2xxwyov9v] {
    text-decoration: line-through;
    color: #9ca3af;
}

.option-soldout-badge[b-g2xxwyov9v] {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    background: rgba(239, 68, 68, .12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

html[data-theme="dark"] .option-soldout-badge[b-g2xxwyov9v] {
    color: #f87171;
    background: rgba(239, 68, 68, .2);
}

.option-name[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--ink);
    /* Wrap to two lines instead of truncating — in the 3-col grid a short
       name like "Queso extra" was clipped to "Queso e..." even on a wide
       desktop modal. Line-clamp still caps pathologically long names. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.option-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
}

.option-price.price-add[b-g2xxwyov9v] {
    color: #dc2626;
    background: #fef2f2;
}

.option-price.price-discount[b-g2xxwyov9v] {
    color: #059669;
    background: #ecfdf5;
}

.modifier-footer[b-g2xxwyov9v] {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 16px 16px;
}

.modifier-validation[b-g2xxwyov9v] {
    padding: 10px 14px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
}

.modifier-total[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 1.1rem;
}

.total-price[b-g2xxwyov9v] {
    color: var(--brand);
    font-size: 1.3rem;
}

.modifier-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
}

.modifier-actions .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
}

.modifier-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

.modifier-actions .btn-cancel:focus-visible[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2);
}

.modifier-actions .btn-cancel:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modifier-actions .btn-cancel:disabled:hover[b-g2xxwyov9v] {
    background: white;
}

.modifier-actions .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background-color: #c62828 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.modifier-actions .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background-color: #8e0000 !important;
}

.modifier-actions .btn-confirm:focus-visible[b-g2xxwyov9v] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.4);
}

.modifier-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
    cursor: not-allowed;
}

/* Dark theme */
html[data-theme="dark"] .modifier-group[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-group.needs-selection[b-g2xxwyov9v] {
    background: #4a3d1a;
    border-color: #ca8a04;
}

html[data-theme="dark"] .modifier-group.max-reached[b-g2xxwyov9v] {
    background: #1a3a2a;
    border-color: #10b981;
}

html[data-theme="dark"] .modifier-group.min-met[b-g2xxwyov9v] {
    background: #14352a;
    border-color: #22c55e;
}

html[data-theme="dark"] .modifier-group.min-met .group-hint[b-g2xxwyov9v] {
    color: #6ee7b7;
}

html[data-theme="dark"] .modifier-group.config-error[b-g2xxwyov9v] {
    border-color: #f97316;
    background: #431407;
}

html[data-theme="dark"] .modifier-no-results[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-no-results.modifier-config-warning[b-g2xxwyov9v] {
    color: #fbbf24;
}

html[data-theme="dark"] .modifier-no-groups[b-g2xxwyov9v] {
    color: #fcd34d;
    background: #422006;
    border-color: #92400e;
}

html[data-theme="dark"] .modifier-group.selection-complete:not(.max-reached)[b-g2xxwyov9v] {
    background: #14352a;
    border-color: #22c55e;
}

html[data-theme="dark"] .modifier-group.selection-complete .group-hint[b-g2xxwyov9v] {
    color: #6ee7b7;
}

html[data-theme="dark"] .max-badge[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .group-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-option[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-option:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-option:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
}

html[data-theme="dark"] .modifier-option.selected[b-g2xxwyov9v] {
    background: #4a2020;
}

html[data-theme="dark"] .option-check[b-g2xxwyov9v] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .modifier-option.selected .option-check[b-g2xxwyov9v] {
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-option.disabled[b-g2xxwyov9v] {
    opacity: 0.4;
}

html[data-theme="dark"] .modifier-option.disabled:hover[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .option-price[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .option-price.price-add[b-g2xxwyov9v] {
    background: #4a2020;
    color: #fca5a5;
}

html[data-theme="dark"] .option-price.price-discount[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .option-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-footer[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .modifier-validation[b-g2xxwyov9v] {
    background: #4a3d1a;
    border-color: #ca8a04;
    color: #fcd34d;
}

html[data-theme="dark"] .modifier-actions .btn-cancel[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:focus-visible[b-g2xxwyov9v] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

html[data-theme="dark"] .modifier-actions .btn-cancel:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
}

html[data-theme="dark"] .modifier-actions .btn-cancel:disabled:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .modifier-actions .btn-confirm:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
}

html[data-theme="dark"] .modifier-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background-color: #374151 !important;
    color: #6b7280 !important;
}

/* ========================================
   MODIFIER SEARCH
   ======================================== */

.modifier-search[b-g2xxwyov9v] {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #eee;
}

.modifier-search-input[b-g2xxwyov9v] {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modifier-search-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.modifier-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

.modifier-search-clear[b-g2xxwyov9v] {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modifier-search-clear:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #dc2626;
}

.modifier-search-clear:focus-visible[b-g2xxwyov9v] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.4);
}

/* Dark theme modifier search */
html[data-theme="dark"] .modifier-search[b-g2xxwyov9v] {
    background: #1f2937;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .modifier-search-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .modifier-search-input:focus[b-g2xxwyov9v] {
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-search-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-search-clear[b-g2xxwyov9v] {
    background: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .modifier-search-clear:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .modifier-search-clear:focus-visible[b-g2xxwyov9v] {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
}

/* Modifier search row with keyboard toggle */
.modifier-search-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.modifier-search-row .modifier-search-input[b-g2xxwyov9v] {
    flex: 1;
    padding-right: 40px;
}

.modifier-search-row .modifier-search-clear[b-g2xxwyov9v] {
    position: absolute;
    right: 66px; /* Account for keyboard toggle button + gap */
    top: 50%;
    transform: translateY(-50%);
}

.modifier-keyboard-toggle[b-g2xxwyov9v] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.modifier-keyboard-toggle:hover[b-g2xxwyov9v],
.modifier-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: var(--brand);
}

html[data-theme="dark"] .modifier-keyboard-toggle[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-keyboard-toggle:hover[b-g2xxwyov9v],
html[data-theme="dark"] .modifier-keyboard-toggle.active[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--brand);
}

/* Modifier touch keyboard */
.modifier-touch-keyboard[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-theme="dark"] .modifier-touch-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
}

.mod-kb-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.mod-key[b-g2xxwyov9v] {
    min-width: 36px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: white;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.mod-key:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
}

.mod-key:active[b-g2xxwyov9v] {
    background: #e5e7eb;
    transform: scale(0.95);
}

html[data-theme="dark"] .mod-key[b-g2xxwyov9v] {
    background: #374151;
    color: #f9fafb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .mod-key:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

html[data-theme="dark"] .mod-key:active[b-g2xxwyov9v] {
    background: #6b7280;
}

.mod-key--shift[b-g2xxwyov9v],
.mod-key--delete[b-g2xxwyov9v] {
    width: 52px;
    font-size: 1.1rem;
}

.mod-key--shift.active[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
}

html[data-theme="dark"] .mod-key--shift.active[b-g2xxwyov9v] {
    background: var(--brand);
    color: white;
}

.mod-key--space[b-g2xxwyov9v] {
    flex: 1;
    max-width: 200px;
    font-size: 0.85rem;
    color: #6b7280;
}

html[data-theme="dark"] .mod-key--space[b-g2xxwyov9v] {
    color: #9ca3af;
}

.mod-key--done[b-g2xxwyov9v] {
    width: 60px;
    background: #22c55e;
    color: white;
    font-size: 1.2rem;
}

.mod-key--done:hover[b-g2xxwyov9v] {
    background: #16a34a;
}

html[data-theme="dark"] .mod-key--done[b-g2xxwyov9v] {
    background: #22c55e;
    color: white;
}

html[data-theme="dark"] .mod-key--done:hover[b-g2xxwyov9v] {
    background: #16a34a;
}

.mod-kb-row--bottom[b-g2xxwyov9v] {
    padding: 4px 8px 0;
}

/* ========================================
   UNIFIED TICKET MANAGER (Split/Merge)
   ======================================== */

.ticket-manager[b-g2xxwyov9v] {
    width: min(95vw, 580px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Tabs */
.tm-tabs[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}

.tm-tab[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 3px solid transparent;
}

.tm-tab:hover[b-g2xxwyov9v] {
    background: #f1f5f9;
    color: #374151;
}

.tm-tab.active[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
    border-bottom-color: var(--brand, #c62828);
    background: white;
}

.tm-close[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.tm-close:hover[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #dc2626;
}

/* Content area */
.tm-content[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tm-header[b-g2xxwyov9v] {
    padding: 16px 20px 12px;
    background: white;
}

.tm-title[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ink, #1f2937);
    margin-bottom: 4px;
}

.tm-subtitle[b-g2xxwyov9v] {
    font-size: 0.88rem;
    color: #6b7280;
}

.tm-current-badge[b-g2xxwyov9v] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--brand, #c62828);
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Quick actions */
.tm-quick-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    background: white;
}

.tm-quick-btn[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-quick-btn:hover[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef2f2;
    color: var(--brand, #c62828);
}

.tm-quick-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

/* Items list */
.tm-items-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

/* Section headers - matching basket */
.tm-section-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 0 4px 0;
    background: linear-gradient(135deg, #4a3d1a 0%, #5c4c2e 100%);
    border-radius: 10px;
    color: #fcd34d;
    font-size: 0.85rem;
    font-weight: 700;
}

.tm-section-icon[b-g2xxwyov9v] {
    font-size: 1rem;
}

.tm-section-title[b-g2xxwyov9v] {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tm-section-count[b-g2xxwyov9v] {
    color: #d4a574;
    font-weight: 500;
}

.tm-section-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: white;
}

.tm-item[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin: 8px 0;
    background: white;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.15s;
}

.tm-item.has-transfer[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef7f7;
}

.tm-item-info[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tm-item-name[b-g2xxwyov9v] {
    font-weight: 600;
    color: var(--ink, #1f2937);
    font-size: 0.95rem;
    flex: 1;
}

.tm-item-price[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-item-total[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
}

/* Course pill - matching basket */
.tm-course-pill[b-g2xxwyov9v] {
    padding: 3px 8px;
    background: #374151;
    color: #e5e7eb;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Modifiers - matching basket */
.tm-item-modifiers[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
    border-left: 2px solid #e5e7eb;
    margin-left: 4px;
}

.tm-modifier[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #6b7280;
}

.tm-item-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tm-qty-group[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.tm-qty-label[b-g2xxwyov9v] {
    font-size: 0.7rem;
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tm-qty-value[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
}

.tm-qty-value.stays[b-g2xxwyov9v] {
    color: #059669;
}

.tm-qty-value.moves[b-g2xxwyov9v] {
    color: #9ca3af;
}

.tm-qty-value.moves.active[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
}

.tm-transfer-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 10px;
}

.tm-qty-btn[b-g2xxwyov9v] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: white;
    color: var(--ink, #1f2937);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tm-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: var(--brand, #c62828);
    color: white;
    transform: scale(1.05);
}

.tm-qty-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tm-transfer-value[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand, #c62828);
    min-width: 28px;
    text-align: center;
}

/* Summary */
.tm-summary[b-g2xxwyov9v] {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.tm-summary-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.tm-summary-row.highlight[b-g2xxwyov9v] {
    padding: 10px 12px;
    margin-top: 6px;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

.tm-summary-label[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-summary-row.highlight .tm-summary-label[b-g2xxwyov9v] {
    color: var(--brand, #c62828);
    font-weight: 600;
}

.tm-summary-value[b-g2xxwyov9v] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
}

.tm-summary-row.highlight .tm-summary-value[b-g2xxwyov9v] {
    font-size: 1.15rem;
    color: var(--brand, #c62828);
}

/* Actions */
.tm-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
}

.tm-btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    color: #374151;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-btn-cancel:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.tm-btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: var(--brand, #c62828);
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #991b1b;
    transform: translateY(-1px);
}

.tm-btn-confirm:disabled[b-g2xxwyov9v] {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Merge tab specific */
.tm-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.tm-empty-icon[b-g2xxwyov9v] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.tm-empty-text[b-g2xxwyov9v] {
    font-size: 0.95rem;
    text-align: center;
}

.tm-merge-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-merge-ticket[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}

.tm-merge-ticket:hover[b-g2xxwyov9v] {
    border-color: #d1d5db;
    background: #f8fafc;
}

.tm-merge-ticket.selected[b-g2xxwyov9v] {
    border-color: var(--brand, #c62828);
    background: #fef7f7;
}

.tm-merge-ticket-info[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-merge-ticket-label[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink, #1f2937);
}

.tm-merge-ticket-total[b-g2xxwyov9v] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.tm-merge-check[b-g2xxwyov9v] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand, #c62828);
    color: white;
    border-radius: 50%;
    font-weight: 700;
}

.tm-merge-preview[b-g2xxwyov9v] {
    padding: 16px 20px;
    background: #fef7f7;
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
}

.tm-merge-arrow[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tm-merge-from[b-g2xxwyov9v],
.tm-merge-to[b-g2xxwyov9v] {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

.tm-merge-from[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #991b1b;
}

.tm-merge-to[b-g2xxwyov9v] {
    background: #d1fae5;
    color: #065f46;
}

.tm-merge-arrow-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
    color: #9ca3af;
}

.tm-merge-result[b-g2xxwyov9v] {
    text-align: center;
    font-size: 0.9rem;
    color: #374151;
}

.tm-merge-manual[b-g2xxwyov9v] {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-merge-manual-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #6b7280;
}

.tm-merge-input[b-g2xxwyov9v] {
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.15s;
}

.tm-merge-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: var(--brand, #c62828);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

/* ========================================
   TICKET MANAGER - DARK THEME
   ======================================== */

html[data-theme="dark"] .ticket-manager[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-tabs[b-g2xxwyov9v] {
    background: #111827;
    border-bottom-color: #374151;
}

html[data-theme="dark"] .tm-tab[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-tab:hover[b-g2xxwyov9v] {
    background: #1f2937;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-tab.active[b-g2xxwyov9v] {
    background: #1f2937;
    color: #f87171;
    border-bottom-color: #f87171;
}

html[data-theme="dark"] .tm-close:hover[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .tm-header[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-subtitle[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-current-badge[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-quick-actions[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tm-quick-btn[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-quick-btn:hover[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #4a2020;
    color: #f87171;
}

html[data-theme="dark"] .tm-items-list[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tm-section-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #4a3d1a 0%, #5c4c2e 100%);
}

html[data-theme="dark"] .tm-item-total[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-course-pill[b-g2xxwyov9v] {
    background: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-item-modifiers[b-g2xxwyov9v] {
    border-left-color: #4b5563;
}

html[data-theme="dark"] .tm-modifier[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-item.has-transfer[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #2a1f1f;
}

html[data-theme="dark"] .tm-item-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-item-price[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-qty-value[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-qty-value.stays[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .tm-qty-value.moves.active[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-transfer-controls[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .tm-qty-btn[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
    box-shadow: none;
}

html[data-theme="dark"] .tm-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-transfer-value[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-summary[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-summary-row.highlight[b-g2xxwyov9v] {
    background: #4a2020;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .tm-summary-label[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-summary-row.highlight .tm-summary-label[b-g2xxwyov9v] {
    color: #fca5a5;
}

html[data-theme="dark"] .tm-summary-value[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-summary-row.highlight .tm-summary-value[b-g2xxwyov9v] {
    color: #f87171;
}

html[data-theme="dark"] .tm-actions[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tm-btn-cancel[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .tm-btn-confirm[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #b91c1c;
}

html[data-theme="dark"] .tm-btn-confirm:disabled[b-g2xxwyov9v] {
    background: #4b5563;
    color: #6b7280;
}

html[data-theme="dark"] .tm-empty[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .tm-merge-list[b-g2xxwyov9v] {
    background: #111827;
}

html[data-theme="dark"] .tm-merge-ticket[b-g2xxwyov9v] {
    border-color: #374151;
    background: #1f2937;
}

html[data-theme="dark"] .tm-merge-ticket:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
    background: #374151;
}

html[data-theme="dark"] .tm-merge-ticket.selected[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #2a1f1f;
}

html[data-theme="dark"] .tm-merge-ticket-label[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .tm-merge-ticket-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .tm-merge-check[b-g2xxwyov9v] {
    background: #dc2626;
}

html[data-theme="dark"] .tm-merge-preview[b-g2xxwyov9v] {
    background: #2a1f1f;
    border-color: #7f1d1d;
}

html[data-theme="dark"] .tm-merge-from[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fecaca;
}

html[data-theme="dark"] .tm-merge-to[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

html[data-theme="dark"] .tm-merge-result[b-g2xxwyov9v] {
    color: #e5e7eb;
}

html[data-theme="dark"] .tm-merge-manual[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .tm-merge-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .tm-merge-input:focus[b-g2xxwyov9v] {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}

/* Ticket-manager — phone */
@media (max-width: 500px) {
    .ticket-manager[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .tm-tab[b-g2xxwyov9v] {
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    .tm-header[b-g2xxwyov9v] {
        padding: 12px 16px 10px;
    }

    .tm-title[b-g2xxwyov9v] {
        font-size: 1rem;
    }

    .tm-quick-actions[b-g2xxwyov9v] {
        padding: 0 12px 10px;
        gap: 6px;
    }

    .tm-quick-btn[b-g2xxwyov9v] {
        padding: 10px 8px;
        font-size: 0.82rem;
        min-height: 44px;
    }

    .tm-item[b-g2xxwyov9v] {
        padding: 10px;
        margin: 6px 0;
    }

    .tm-actions[b-g2xxwyov9v] {
        padding: 12px;
    }

    .tm-btn-cancel[b-g2xxwyov9v],
    .tm-btn-confirm[b-g2xxwyov9v] {
        min-height: 48px;
        font-size: 0.95rem;
    }
}

/* ============================================
   LABEL INPUT MODAL
   ============================================ */
.label-modal[b-g2xxwyov9v] {
    max-width: 400px;
    padding: 0;
    overflow: hidden;
}

.label-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    color: white;
}

.label-modal-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.label-modal-title[b-g2xxwyov9v] {
    font-size: 1.25rem;
    font-weight: 700;
}

.label-modal-body[b-g2xxwyov9v] {
    padding: 24px;
}

.label-input-label[b-g2xxwyov9v] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.label-input[b-g2xxwyov9v] {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.label-input:focus[b-g2xxwyov9v] {
    border-color: #c62828;
    box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.15);
}

.label-input[b-g2xxwyov9v]::placeholder {
    color: #9ca3af;
}

/* Note textarea (multiline) */
.note-textarea[b-g2xxwyov9v] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

.label-hint[b-g2xxwyov9v] {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #6b7280;
}

.label-modal-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.label-modal-actions .btn[b-g2xxwyov9v] {
    flex: 1;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
}

.label-modal-actions .btn-primary[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #c62828 0%, #8e0000 100%);
    color: white;
    border: none;
}

.label-modal-actions .btn-ghost[b-g2xxwyov9v] {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

/* ============================================
   NOTE MODAL IMPROVEMENTS
   ============================================ */
.note-modal-card[b-g2xxwyov9v] {
    max-width: 450px;
}

.note-modal-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.note-modal-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #fef3c7;
    border-bottom: 2px solid #fcd34d;
}

.note-modal-item-name[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
}

.note-modal-item-price[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #b45309;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    /* The price chip is a tight inline pill — without nowrap, "15,90 €"
       wraps when the article name pushes the row past the modal width
       (long names like "(Fesenjan) sallón Estafado de Nueces Y Grandas"
       make this routine). flex-shrink:0 stops the parent flex container
       from compressing the chip to the point of wrapping the price. */
    white-space: nowrap;
    flex-shrink: 0;
}

.note-modal-card .note-textarea[b-g2xxwyov9v] {
    background: #fffbeb;
    border: 2px solid #fcd34d;
    color: #1f2937;
    font-size: 1rem;
}

.note-modal-card .note-textarea:focus[b-g2xxwyov9v] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    outline: none;
}

.note-modal-card .note-textarea[b-g2xxwyov9v]::placeholder {
    color: #92400e;
    opacity: 0.6;
}

.note-modal-card .label-hint[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.note-shortcut[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: monospace;
}

.visually-hidden[b-g2xxwyov9v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dark theme - Note modal */
html[data-theme="dark"] .note-modal-item[b-g2xxwyov9v] {
    background: #78350f;
    border-color: #f59e0b;
}

html[data-theme="dark"] .note-modal-item-name[b-g2xxwyov9v] {
    color: #fef3c7;
}

html[data-theme="dark"] .note-modal-item-price[b-g2xxwyov9v] {
    background: #451a03;
    color: #fbbf24;
}

html[data-theme="dark"] .note-modal-card .note-textarea[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
    color: #f3f4f6;
}

html[data-theme="dark"] .note-modal-card .note-textarea[b-g2xxwyov9v]::placeholder {
    color: #fbbf24;
    opacity: 0.5;
}

/* Note modal touch keyboard */
.note-textarea-wrapper[b-g2xxwyov9v] {
    position: relative;
    display: flex;
    gap: 8px;
}

.note-textarea-wrapper .note-textarea[b-g2xxwyov9v] {
    flex: 1;
}

.note-keyboard-toggle[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    border: 2px solid #fcd34d;
    background: #fffbeb;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    align-self: flex-start;
}

.note-keyboard-toggle:hover[b-g2xxwyov9v] {
    background: #fef3c7;
}

.note-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #f59e0b;
    border-color: #d97706;
}

html[data-theme="dark"] .note-keyboard-toggle[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
}

html[data-theme="dark"] .note-keyboard-toggle:hover[b-g2xxwyov9v] {
    background: #374151;
}

html[data-theme="dark"] .note-keyboard-toggle.active[b-g2xxwyov9v] {
    background: #f59e0b;
}

.note-modal-card.with-keyboard[b-g2xxwyov9v] {
    max-width: 520px;
}

.note-keyboard[b-g2xxwyov9v] {
    padding: 12px 24px 16px;
    background: #fef3c7;
    border-top: 2px solid #fcd34d;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-theme="dark"] .note-keyboard[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #f59e0b;
}

.note-kb-row[b-g2xxwyov9v] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.note-key[b-g2xxwyov9v] {
    min-width: 32px;
    height: 40px;
    padding: 0 8px;
    border: none;
    background: #fff;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 #d1d5db;
    -webkit-tap-highlight-color: transparent;
}

.note-key:active[b-g2xxwyov9v] {
    transform: translateY(2px);
    box-shadow: 0 0 0 #d1d5db;
    background: #f59e0b;
    color: white;
}

html[data-theme="dark"] .note-key[b-g2xxwyov9v] {
    background: #374151;
    color: #f3f4f6;
    box-shadow: 0 2px 0 #1f2937;
}

html[data-theme="dark"] .note-key:active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

.note-key-shift[b-g2xxwyov9v],
.note-key-delete[b-g2xxwyov9v] {
    min-width: 48px;
    font-size: 1.1rem;
}

.note-key-shift.active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

.note-key-space[b-g2xxwyov9v] {
    flex: 1;
    max-width: 200px;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.note-key-comma[b-g2xxwyov9v],
.note-key-period[b-g2xxwyov9v] {
    min-width: 44px;
}

.note-kb-row-accents[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    margin: 2px 0;
}

.note-kb-row-accents .note-key[b-g2xxwyov9v] {
    background: #fef3c7;
    color: #92400e;
    box-shadow: 0 2px 0 #fcd34d;
}

.note-kb-row-accents .note-key:active[b-g2xxwyov9v] {
    background: #f59e0b;
    color: white;
}

html[data-theme="dark"] .note-kb-row-accents[b-g2xxwyov9v] {
    background: rgba(245, 158, 11, 0.15);
}

html[data-theme="dark"] .note-kb-row-accents .note-key[b-g2xxwyov9v] {
    background: #78350f;
    color: #fef3c7;
    box-shadow: 0 2px 0 #451a03;
}

.note-kb-row-bottom[b-g2xxwyov9v] {
    margin-top: 4px;
}

/* Responsive note keyboard for small screens */
@media (max-width: 480px) {
    .note-modal-card.with-keyboard[b-g2xxwyov9v] {
        max-width: 100%;
    }

    .note-keyboard[b-g2xxwyov9v] {
        padding: 8px 12px 12px;
        gap: 4px;
    }

    .note-kb-row[b-g2xxwyov9v] {
        gap: 2px;
    }

    .note-key[b-g2xxwyov9v] {
        min-width: 26px;
        height: 36px;
        padding: 0 4px;
        font-size: 0.85rem;
    }

    .note-key-shift[b-g2xxwyov9v],
    .note-key-delete[b-g2xxwyov9v] {
        min-width: 38px;
        font-size: 0.95rem;
    }

    .note-key-space[b-g2xxwyov9v] {
        max-width: 140px;
        font-size: 0.65rem;
    }

    .note-key-comma[b-g2xxwyov9v],
    .note-key-period[b-g2xxwyov9v] {
        min-width: 36px;
    }

    .note-kb-row-accents[b-g2xxwyov9v] {
        padding: 3px 6px;
    }
}

/* ============================================
   REDESIGNED TICKETS PANEL
   ============================================ */
.tickets-panel[b-g2xxwyov9v] {
    max-width: 420px;
    width: 90vw;
    padding: 0;
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.tickets-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
    color: white;
}

.tickets-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.tickets-title[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 700;
    flex: 1;
}

.tickets-count[b-g2xxwyov9v] {
    font-size: 0.85rem;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
}

/* Merged tables row inside tickets modal */
.tickets-merged-tables[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(30, 58, 95, 0.15);
    flex-wrap: wrap;
}

.tickets-merged-tables .merged-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
}

.tickets-list[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tickets-section-label[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #059669;
    padding: 8px 4px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tickets-section-label.empty-section[b-g2xxwyov9v] {
    color: #9ca3af;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.empty-hint[b-g2xxwyov9v] {
    font-weight: 400;
    font-size: 0.7rem;
}

.ticket-card[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ticket-card:hover[b-g2xxwyov9v] {
    border-color: #c62828;
    background: #fff;
}

.ticket-card.active[b-g2xxwyov9v] {
    border-color: #059669;
    background: #ecfdf5;
}

.ticket-card.empty[b-g2xxwyov9v] {
    border-style: dashed;
    background: #fafafa;
}

.ticket-card.empty:hover[b-g2xxwyov9v] {
    border-color: #9ca3af;
}

.ticket-main[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.ticket-info[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ticket-label[b-g2xxwyov9v] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-active-badge[b-g2xxwyov9v] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #059669;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.ticket-total[b-g2xxwyov9v] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #059669;
    flex-shrink: 0;
}

.ticket-total.empty-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

.ticket-action[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    background: transparent;
    border: none;
    border-left: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.ticket-action.merge-btn:hover[b-g2xxwyov9v] {
    background: #dbeafe;
}

.ticket-action.delete-btn:hover[b-g2xxwyov9v] {
    background: #fee2e2;
}

.no-tickets[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: #9ca3af;
}

.no-tickets-icon[b-g2xxwyov9v] {
    font-size: 2rem;
    opacity: 0.5;
}

.tickets-footer[b-g2xxwyov9v] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}

.tickets-footer .btn[b-g2xxwyov9v] {
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
}

.new-ticket-btn[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    border: none;
}

.new-ticket-btn span[b-g2xxwyov9v] {
    font-size: 1.2rem;
    font-weight: 300;
}

.tickets-footer .btn-ghost[b-g2xxwyov9v] {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

/* ============================================
   DARK THEME - Label Modal
   ============================================ */
html[data-theme="dark"] .label-modal-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
}

html[data-theme="dark"] .label-modal-body[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .label-input-label[b-g2xxwyov9v] {
    color: #d1d5db;
}

html[data-theme="dark"] .label-input[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

html[data-theme="dark"] .label-input:focus[b-g2xxwyov9v] {
    border-color: #f87171;
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2);
}

html[data-theme="dark"] .label-input[b-g2xxwyov9v]::placeholder {
    color: #6b7280;
}

html[data-theme="dark"] .label-hint[b-g2xxwyov9v] {
    color: #9ca3af;
}

html[data-theme="dark"] .label-modal-actions[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .label-modal-actions .btn-ghost[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

/* ============================================
   DARK THEME - Tickets Panel
   ============================================ */
html[data-theme="dark"] .tickets-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
}

html[data-theme="dark"] .tickets-list[b-g2xxwyov9v] {
    background: #1f2937;
}

html[data-theme="dark"] .tickets-section-label[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .tickets-section-label.empty-section[b-g2xxwyov9v] {
    color: #6b7280;
    border-color: #374151;
}

html[data-theme="dark"] .ticket-card[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .ticket-card:hover[b-g2xxwyov9v] {
    border-color: #f87171;
    background: #4b5563;
}

html[data-theme="dark"] .ticket-card.active[b-g2xxwyov9v] {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}

html[data-theme="dark"] .ticket-card.empty[b-g2xxwyov9v] {
    background: #2d3748;
}

html[data-theme="dark"] .ticket-label[b-g2xxwyov9v] {
    color: #f9fafb;
}

html[data-theme="dark"] .ticket-total[b-g2xxwyov9v] {
    color: #34d399;
}

html[data-theme="dark"] .ticket-total.empty-total[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .ticket-action[b-g2xxwyov9v] {
    border-color: #4b5563;
}

html[data-theme="dark"] .ticket-action.merge-btn:hover[b-g2xxwyov9v] {
    background: rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .ticket-action.delete-btn:hover[b-g2xxwyov9v] {
    background: rgba(248, 113, 113, 0.2);
}

html[data-theme="dark"] .no-tickets[b-g2xxwyov9v] {
    color: #6b7280;
}

html[data-theme="dark"] .tickets-footer[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

html[data-theme="dark"] .tickets-footer .btn-ghost[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

/* ============================================
   UNIFIED TICKET BAR
   ============================================ */
.ticket-bar[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
    border-radius: 0; /* Flush to edges */
    padding: 14px 16px;
    margin: 0;
    position: relative;
    flex-shrink: 0;
}

.ticket-bar-main[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.current-ticket[b-g2xxwyov9v] {
    flex: 1;
    min-width: 0; /* allow shrinking in narrow docked layouts */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.current-ticket:hover[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.15);
}

.current-ticket.empty[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.ticket-number[b-g2xxwyov9v] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    min-width: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 8px;
}

.ticket-info-stack[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.ticket-total-display[b-g2xxwyov9v] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #34d399;
}

.ticket-subtitle[b-g2xxwyov9v] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline pax edit — tap to change comensales */
.pax-edit[b-g2xxwyov9v] {
    cursor: pointer;
    border-radius: 4px;
    padding: 0 2px;
    transition: background .15s;
}
.pax-edit:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,.12);
}
.pax-value[b-g2xxwyov9v] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.ticket-expand[b-g2xxwyov9v] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.ticket-empty-text[b-g2xxwyov9v] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
}

.ticket-create[b-g2xxwyov9v] {
    color: #34d399;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Ticket Actions */
.ticket-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    flex-shrink: 0; /* keep action buttons visible, let text truncate */
}

.ticket-action-btn[b-g2xxwyov9v] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.ticket-action-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.ticket-action-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ticket-action-btn.split:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.3);
}

.ticket-action-btn.merge:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(59, 130, 246, 0.3);
}

/* More Dropdown */
.ticket-more-dropdown[b-g2xxwyov9v] {
    position: relative;
}

/* Invisible backdrop to catch clicks outside dropdown */
.dropdown-backdrop[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.ticket-dropdown-menu[b-g2xxwyov9v] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    padding: 6px;
    min-width: 180px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ticket-dropdown-menu button[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #f9fafb;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.ticket-dropdown-menu button:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.1);
}

.ticket-dropdown-menu button:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ticket-dropdown-menu button.danger[b-g2xxwyov9v] {
    color: #f87171;
}

.ticket-dropdown-menu button.danger:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(248, 113, 113, 0.15);
}

.ticket-dropdown-menu button span[b-g2xxwyov9v] {
    width: 24px;
    text-align: center;
}

/* Phone: the "···" ticket menu opened as an absolute dropdown that clipped /
   mis-positioned on narrow screens. Re-dock it as a bottom-sheet (like the ⚙️
   menu and the line-item modal that already read well), full-width with a
   dimmed backdrop, so it's always fully visible. */
@media (max-width: 600px) {
    .ticket-more-dropdown[b-g2xxwyov9v] { position: static; }
    .dropdown-backdrop[b-g2xxwyov9v] { background: rgba(0, 0, 0, .45); z-index: 9998; }
    .ticket-dropdown-menu[b-g2xxwyov9v] {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        margin: 0;
        width: 100%;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding: 10px 10px max(12px, env(safe-area-inset-bottom, 0px));
        z-index: 9999;
        animation: ticket-sheet-in-b-g2xxwyov9v 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ticket-dropdown-menu button[b-g2xxwyov9v] { padding: 14px 12px; font-size: 1rem; }
}
@keyframes ticket-sheet-in-b-g2xxwyov9v { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

/* Phone: lock the POS shell to the viewport so the whole page can't be dragged
   up to reveal empty space below — only the product grid / basket scroll. */
@media (max-width: 600px) {
    .pos-shell[b-g2xxwyov9v] { overscroll-behavior: none; }
    .products-panel[b-g2xxwyov9v],
    .basket-content[b-g2xxwyov9v],
    .summary .lines[b-g2xxwyov9v] { overscroll-behavior-y: contain; }
}

/* Phone: a ▲/▼ toggle on the ticket bar grows the basket from the default 40vh
   to most of the screen (and back) so the operator can see the whole order. */
.basket-expand-toggle[b-g2xxwyov9v] { display: none; }
@media (max-width: 600px) {
    .basket-expand-toggle[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--muted, #94a3b8);
        font-size: 1rem;
        padding: 6px 8px;
        min-width: 36px;
        cursor: pointer;
    }
    .pos-shell.basket-full > .summary.mobile-basket-expanded[b-g2xxwyov9v],
    .summary.summary-full.mobile-basket-expanded[b-g2xxwyov9v] {
        max-height: 75dvh;
    }
}

/* Quick Switch Pills */
.ticket-pills[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-pill[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.ticket-pill:hover[b-g2xxwyov9v] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-pill.active[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.2);
    border-color: #34d399;
}

.ticket-pill.empty[b-g2xxwyov9v] {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
}

.ticket-pill.empty .pill-total[b-g2xxwyov9v] {
    color: #9ca3af;
}

.pill-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.pill-total[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #34d399;
    font-weight: 600;
}

.ticket-pill.add[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
    font-size: 1.2rem;
    font-weight: 300;
    min-width: 44px;
    padding: 10px;
}

.ticket-pill.add:hover[b-g2xxwyov9v] {
    background: rgba(52, 211, 153, 0.25);
    border-color: #34d399;
}

/* Save Badge in Ticket Bar */
.ticket-bar .save-badge[b-g2xxwyov9v] {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.75rem;
}

/* ============================================
   LIGHT THEME - Ticket Bar
   ============================================ */
html:not([data-theme="dark"]) .ticket-bar[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
}

html:not([data-theme="dark"]) .current-ticket[b-g2xxwyov9v] {
    background: #fff;
    border: 1px solid #e2e8f0;
}

html:not([data-theme="dark"]) .current-ticket:hover[b-g2xxwyov9v] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

html:not([data-theme="dark"]) .current-ticket.empty[b-g2xxwyov9v] {
    background: #f9fafb;
    border: 2px dashed #d1d5db;
}

html:not([data-theme="dark"]) .ticket-number[b-g2xxwyov9v] {
    color: #1f2937;
    background: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-total-display[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-expand[b-g2xxwyov9v] {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .ticket-subtitle[b-g2xxwyov9v] {
    color: #6b7280;
}

html:not([data-theme="dark"]) .ticket-empty-text[b-g2xxwyov9v] {
    color: #9ca3af;
}

html:not([data-theme="dark"]) .ticket-create[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-action-btn[b-g2xxwyov9v] {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-action-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-action-btn.split:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fee2e2;
    border-color: #fca5a5;
}

html:not([data-theme="dark"]) .ticket-action-btn.merge:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #dbeafe;
    border-color: #93c5fd;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu[b-g2xxwyov9v] {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button[b-g2xxwyov9v] {
    color: #374151;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #f3f4f6;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button.danger[b-g2xxwyov9v] {
    color: #dc2626;
}

html:not([data-theme="dark"]) .ticket-dropdown-menu button.danger:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #fee2e2;
}

html:not([data-theme="dark"]) .ticket-pills[b-g2xxwyov9v] {
    border-color: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-pill[b-g2xxwyov9v] {
    background: #f9fafb;
    border-color: #e5e7eb;
}

html:not([data-theme="dark"]) .ticket-pill:hover[b-g2xxwyov9v] {
    background: #f3f4f6;
    border-color: #d1d5db;
}

html:not([data-theme="dark"]) .ticket-pill.active[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.empty[b-g2xxwyov9v] {
    border-color: #d1d5db;
}

html:not([data-theme="dark"]) .pill-label[b-g2xxwyov9v] {
    color: #1f2937;
}

html:not([data-theme="dark"]) .pill-total[b-g2xxwyov9v] {
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.add[b-g2xxwyov9v] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

html:not([data-theme="dark"]) .ticket-pill.add:hover[b-g2xxwyov9v] {
    background: #d1fae5;
    border-color: #059669;
}

/* ========================================
   LOW RESOLUTION SCREENS (1024x768, 4:3 monitors)
   Optimized for ELO Touch and similar POS monitors
   ======================================== */
@media (max-height: 800px) {
    /* Hide RECIENTES section to save vertical space */
    .recent-section[b-g2xxwyov9v] {
        display: none;
    }

    /* Compact topbar */
    .topbar[b-g2xxwyov9v] {
        padding: 8px 12px;
        gap: 10px;
    }


    /* Compact action buttons */
    .actions .btn[b-g2xxwyov9v] {
        padding: 6px 10px;
        min-height: 36px;
        font-size: 0.85rem;
    }

    /* Compact filters bar */
    .filters[b-g2xxwyov9v] {
        padding: 8px 12px;
        gap: 6px;
    }

    /* Smaller chips - scroll instead of wrap */
    .chipbar[b-g2xxwyov9v] {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
    }

    .chip[b-g2xxwyov9v] {
        padding: 6px 10px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    /* Smaller search */
    .search[b-g2xxwyov9v] {
        min-width: 180px;
        padding: 6px 10px;
    }

    /* Compact menu grid */
    .grid[b-g2xxwyov9v] {
        gap: 8px;
        padding: 8px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 10px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .tile .price[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    /* Compact payment buttons */
    .payment-bar[b-g2xxwyov9v] {
        gap: 6px;
        padding: 8px 12px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 8px;
        font-size: 0.9rem;
        min-height: 44px;
    }
}

/* Extra compact for very low resolution (768px height) */
@media (max-height: 768px) {
    .topbar[b-g2xxwyov9v] {
        padding: 6px 10px;
        gap: 8px;
    }


    .actions .btn[b-g2xxwyov9v] {
        padding: 5px 8px;
        min-height: 32px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .filters[b-g2xxwyov9v] {
        padding: 6px 10px;
    }

    .chip[b-g2xxwyov9v] {
        padding: 5px 8px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .search[b-g2xxwyov9v] {
        min-width: 140px;
        padding: 5px 8px;
        font-size: 0.85rem;
    }

    .grid[b-g2xxwyov9v] {
        gap: 6px;
        padding: 6px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 8px;
        border-radius: 8px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .tile .price[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    .payment-bar[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px 10px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 8px 6px;
        font-size: 0.85rem;
        min-height: 40px;
        border-radius: 8px;
    }

    /* Tighter basket in low-res */
    .summary-header[b-g2xxwyov9v] {
        padding: 8px 12px;
    }

    .summary-body[b-g2xxwyov9v] {
        padding: 8px;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 6px 10px;
    }

    .current-ticket[b-g2xxwyov9v] {
        padding: 6px 10px;
        gap: 8px;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 1.1rem;
        padding: 3px 8px;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 1.1rem;
    }

    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.6rem;
    }

    .ticket-action-btn[b-g2xxwyov9v] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Mobile / very narrow basket */
@media (max-width: 400px) {
    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.55rem;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 1rem;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 1rem;
        padding: 2px 6px;
    }
}

/* ===== KEYBOARD SHORTCUTS HELP MODAL ===== */
.shortcuts-modal[b-g2xxwyov9v] {
    max-width: 480px;
    width: 94vw;
}

.shortcuts-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.shortcuts-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.shortcuts-title[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    flex: 1;
}

.shortcuts-close[b-g2xxwyov9v] {
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #6b7280;
    transition: all 0.15s ease;
}

.shortcuts-close:hover[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #1f2937;
}

.shortcuts-body[b-g2xxwyov9v] {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.shortcuts-section[b-g2xxwyov9v] {
    margin-bottom: 20px;
}

.shortcuts-section:last-child[b-g2xxwyov9v] {
    margin-bottom: 0;
}

.shortcuts-section-title[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}

.shortcut-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

.shortcut-row:not(:last-child)[b-g2xxwyov9v] {
    border-bottom: 1px dashed #f1f5f9;
}

.shortcut-keys[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.shortcut-keys kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
}

.shortcut-desc[b-g2xxwyov9v] {
    font-size: 0.875rem;
    color: #4b5563;
    text-align: right;
}

.shortcuts-footer[b-g2xxwyov9v] {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    text-align: center;
}

.shortcuts-hint[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.shortcuts-hint kbd[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin: 0 2px;
}

/* Dark mode for shortcuts modal */
:root[data-theme="dark"] .shortcuts-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

:root[data-theme="dark"] .shortcuts-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .shortcuts-close[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .shortcuts-close:hover[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
}

:root[data-theme="dark"] .shortcuts-body[b-g2xxwyov9v] {
    background: #111827;
}

:root[data-theme="dark"] .shortcuts-section-title[b-g2xxwyov9v] {
    color: #9ca3af;
    border-color: #374151;
}

:root[data-theme="dark"] .shortcut-row[b-g2xxwyov9v] {
    border-color: #1f2937;
}

:root[data-theme="dark"] .shortcut-keys kbd[b-g2xxwyov9v] {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    border-color: #4b5563;
    color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

:root[data-theme="dark"] .shortcut-desc[b-g2xxwyov9v] {
    color: #d1d5db;
}

:root[data-theme="dark"] .shortcuts-footer[b-g2xxwyov9v] {
    background: #0f172a;
    border-color: #374151;
}

:root[data-theme="dark"] .shortcuts-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

:root[data-theme="dark"] .shortcuts-hint kbd[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

/* ===== TABLE ORDER HISTORY MODAL ===== */
.history-modal[b-g2xxwyov9v] {
    max-width: 420px;
    width: 94vw;
}

.history-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.history-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.history-title[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    flex: 1;
}

.history-close[b-g2xxwyov9v] {
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #6b7280;
    transition: all 0.15s ease;
}

.history-close:hover[b-g2xxwyov9v] {
    background: #e5e7eb;
    color: #1f2937;
}

.history-body[b-g2xxwyov9v] {
    padding: 16px 20px;
    max-height: 55vh;
    overflow-y: auto;
}

.history-loading[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6b7280;
}

.history-loading .spinner[b-g2xxwyov9v] {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

.history-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

.history-empty .empty-icon[b-g2xxwyov9v] {
    font-size: 2.5rem;
    opacity: 0.6;
}

.history-empty .empty-text[b-g2xxwyov9v] {
    color: #6b7280;
    font-size: 0.9rem;
}

.history-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item[b-g2xxwyov9v] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    transition: all 0.15s ease;
}

.history-item:hover[b-g2xxwyov9v] {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.history-item.closed[b-g2xxwyov9v] {
    border-left: 4px solid #10b981;
}

.history-item.open[b-g2xxwyov9v] {
    border-left: 4px solid #f59e0b;
}

.history-item.cancelled[b-g2xxwyov9v] {
    border-left: 4px solid #ef4444;
    opacity: 0.7;
}

.history-item-top[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.history-ticket-no[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1rem;
    color: var(--ink);
}

.history-label[b-g2xxwyov9v] {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #6b7280;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-status[b-g2xxwyov9v] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.history-status.closed[b-g2xxwyov9v] {
    background: #d1fae5;
    color: #065f46;
}

.history-status.open[b-g2xxwyov9v] {
    background: #fef3c7;
    color: #92400e;
}

.history-status.cancelled[b-g2xxwyov9v] {
    background: #fee2e2;
    color: #b91c1c;
}

.history-item-bottom[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: #6b7280;
}

.history-time[b-g2xxwyov9v] {
    color: #9ca3af;
}

.history-total[b-g2xxwyov9v] {
    margin-left: auto;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
}

.history-footer[b-g2xxwyov9v] {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    text-align: center;
}

.history-hint[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Dark mode for history modal */
:root[data-theme="dark"] .history-header[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

:root[data-theme="dark"] .history-title[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-close[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .history-close:hover[b-g2xxwyov9v] {
    background: #4b5563;
    color: #f9fafb;
}

:root[data-theme="dark"] .history-body[b-g2xxwyov9v] {
    background: #111827;
}

:root[data-theme="dark"] .history-empty .empty-text[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .history-item[b-g2xxwyov9v] {
    background: #1f2937;
    border-color: #374151;
}

:root[data-theme="dark"] .history-item:hover[b-g2xxwyov9v] {
    border-color: #4b5563;
}

:root[data-theme="dark"] .history-ticket-no[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-label[b-g2xxwyov9v] {
    background: #374151;
    color: #d1d5db;
}

:root[data-theme="dark"] .history-status.closed[b-g2xxwyov9v] {
    background: #064e3b;
    color: #6ee7b7;
}

:root[data-theme="dark"] .history-status.open[b-g2xxwyov9v] {
    background: #78350f;
    color: #fcd34d;
}

:root[data-theme="dark"] .history-status.cancelled[b-g2xxwyov9v] {
    background: #7f1d1d;
    color: #fca5a5;
}

:root[data-theme="dark"] .history-item-bottom[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .history-total[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .history-footer[b-g2xxwyov9v] {
    background: #0f172a;
    border-color: #374151;
}

:root[data-theme="dark"] .history-hint[b-g2xxwyov9v] {
    color: #6b7280;
}

/* ===== KITCHEN BUTTON GROUP ===== */
.kitchen-btn-group[b-g2xxwyov9v] {
    display: flex;
    gap: 0;
    margin: 0.5rem;
}

.kitchen-btn-group .btn-kitchen[b-g2xxwyov9v] {
    flex: 1;
    border-radius: 8px 0 0 8px;
    margin: 0;
}

.kitchen-btn-group .btn-preview[b-g2xxwyov9v] {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-size: 1.25rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.kitchen-btn-group .btn-preview:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.kitchen-btn-group .btn-preview:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== PRINT PREVIEW MODAL ===== */
.print-preview-modal[b-g2xxwyov9v] {
    width: min(95vw, 420px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.print-preview-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}

.print-preview-icon[b-g2xxwyov9v] {
    font-size: 1.5rem;
}

.print-preview-title[b-g2xxwyov9v] {
    font-size: 1.125rem;
    font-weight: 600;
    flex: 1;
}

.print-preview-close[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.print-preview-close:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.3);
}

.print-preview-body[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.print-preview-empty[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
    color: #6b7280;
}

.print-preview-empty .empty-icon[b-g2xxwyov9v] {
    font-size: 2.5rem;
    opacity: 0.6;
}

.print-preview-empty .empty-text[b-g2xxwyov9v] {
    font-size: 0.95rem;
}

.print-preview-summary[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #bbf7d0;
}

.summary-count[b-g2xxwyov9v] {
    font-weight: 500;
    color: #166534;
}

.summary-total[b-g2xxwyov9v] {
    font-weight: 700;
    color: #16a34a;
    font-size: 1.125rem;
}

.print-preview-items[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-section[b-g2xxwyov9v] {
    margin-bottom: 0.5rem;
}

.course-header[b-g2xxwyov9v] {
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
}

.course-badge[b-g2xxwyov9v] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 2.5rem;
    text-align: center;
}

.preview-item[b-g2xxwyov9v] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.preview-qty[b-g2xxwyov9v] {
    font-weight: 700;
    color: #16a34a;
    font-size: 1rem;
    min-width: 28px;
}

.preview-info[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-name[b-g2xxwyov9v] {
    font-weight: 500;
    color: #1f2937;
}

.preview-mods[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #9333ea;
    font-style: italic;
}

.preview-note[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #d97706;
    background: #fffbeb;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
}

.preview-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.print-preview-footer[b-g2xxwyov9v] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.print-preview-footer .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.print-preview-footer .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.print-preview-footer .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 0.75rem 1rem;
    border: none;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.print-preview-footer .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

.print-preview-footer .btn-confirm:disabled[b-g2xxwyov9v] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-small[b-g2xxwyov9v] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

/* Print Preview Modal - Dark Mode */
:root[data-theme="dark"] .print-preview-header[b-g2xxwyov9v] {
    border-color: #374151;
}

:root[data-theme="dark"] .print-preview-body[b-g2xxwyov9v] {
    background: #1f2937;
}

:root[data-theme="dark"] .print-preview-empty[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .print-preview-summary[b-g2xxwyov9v] {
    background: #14532d;
    border-color: #166534;
}

:root[data-theme="dark"] .summary-count[b-g2xxwyov9v] {
    color: #86efac;
}

:root[data-theme="dark"] .summary-total[b-g2xxwyov9v] {
    color: #4ade80;
}

:root[data-theme="dark"] .course-badge[b-g2xxwyov9v] {
    background: #374151;
    color: #9ca3af;
}

:root[data-theme="dark"] .preview-item[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

:root[data-theme="dark"] .preview-name[b-g2xxwyov9v] {
    color: #f9fafb;
}

:root[data-theme="dark"] .preview-mods[b-g2xxwyov9v] {
    color: #c4b5fd;
}

:root[data-theme="dark"] .preview-note[b-g2xxwyov9v] {
    background: #451a03;
    color: #fbbf24;
}

:root[data-theme="dark"] .preview-price[b-g2xxwyov9v] {
    color: #d1d5db;
}

:root[data-theme="dark"] .print-preview-footer[b-g2xxwyov9v] {
    background: #111827;
    border-color: #374151;
}

:root[data-theme="dark"] .print-preview-footer .btn-cancel[b-g2xxwyov9v] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

:root[data-theme="dark"] .print-preview-footer .btn-cancel:hover[b-g2xxwyov9v] {
    background: #4b5563;
}

/* ===== COURSE BATCH FEATURE ===== */
.course-batch-wrapper[b-g2xxwyov9v] {
    position: relative;
}

.btn-course-batch[b-g2xxwyov9v] {
    width: 48px;
    min-width: 48px;
    height: 100%;
    padding: 0;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    font-size: 1.25rem;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.btn-course-batch:hover:not(:disabled)[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.btn-course-batch:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-tiny[b-g2xxwyov9v] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-g2xxwyov9v 0.8s linear infinite;
}

.course-batch-menu[b-g2xxwyov9v] {
    position: absolute;
    bottom: 100%;
    left: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 0.5rem;
    margin-bottom: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.course-batch-title[b-g2xxwyov9v] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-batch-menu button[b-g2xxwyov9v] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: #f9fafb;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.course-batch-menu button:hover[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: #fff;
}

.course-batch-overlay[b-g2xxwyov9v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

/* Course Batch - Dark Mode */
:root[data-theme="dark"] .course-batch-menu[b-g2xxwyov9v] {
    background: #1f2937;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

:root[data-theme="dark"] .course-batch-title[b-g2xxwyov9v] {
    color: #9ca3af;
}

:root[data-theme="dark"] .course-batch-menu button[b-g2xxwyov9v] {
    background: #374151;
    color: #f9fafb;
}

:root[data-theme="dark"] .course-batch-menu button:hover[b-g2xxwyov9v] {
    background: #8b5cf6;
    color: #fff;
}

/* ========================================
   COMPACT MODE FOR SMALLER/TOUCH SCREENS
   (ELO 1024x768, tablets with scaling)
   ======================================== */

/* Hide keyboard shortcuts on smaller screens (768px height and below) */
@media (max-height: 800px) {
    .shortcut-hint[b-g2xxwyov9v] {
        display: none !important;
    }
}

@media (max-height: 700px) {
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 10px;
        min-height: 80px;
        gap: 6px;
    }

    .tile-stripe[b-g2xxwyov9v] {
        height: 3px;
        margin-bottom: 3px;
    }

    /* .tile-name handled by its height-aware clamp() base — no per-height cliff. */
    .price[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }
}

/* ========== EATS ORDER BADGE ========== */
.current-ticket.is-eats[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 3px solid #f7931e;
}

.eats-badge-small[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
    animation: eats-glow-b-g2xxwyov9v 2s infinite;
}

@keyframes eats-glow-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 4px rgba(247, 147, 30, 0.4); }
    50% { box-shadow: 0 0 12px rgba(247, 147, 30, 0.8); }
}

/* Dark mode */
[b-g2xxwyov9v] html[data-theme="dark"] .current-ticket.is-eats {
    background: linear-gradient(135deg, #422006 0%, #431407 100%);
    border-left-color: #f97316;
}

/* ========== DELIVERY ORDER BADGE (Glovo, Just Eat, etc.) ========== */
.current-ticket.is-delivery[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 3px solid #f59e0b;
}

.delivery-badge-small[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
    animation: delivery-glow-b-g2xxwyov9v 2s infinite;
}

@keyframes delivery-glow-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.8); }
}

/* Dark mode for delivery */
[b-g2xxwyov9v] html[data-theme="dark"] .current-ticket.is-delivery {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-left-color: #f59e0b;
}

/* ========== DELIVERY INFO PANEL (in basket) ========== */
.delivery-info-panel[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.delivery-platform-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.delivery-platform-icon[b-g2xxwyov9v] {
    font-size: 1.2rem;
}

.delivery-platform-name[b-g2xxwyov9v] {
    color: #92400e;
    flex: 1;
}

.delivery-order-id[b-g2xxwyov9v] {
    font-family: 'Consolas', monospace;
    font-size: 0.85rem;
    color: #b45309;
    background: rgba(245, 158, 11, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.delivery-customer-info[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-field[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #78350f;
}

.delivery-icon[b-g2xxwyov9v] {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.delivery-value[b-g2xxwyov9v] {
    flex: 1;
}

.delivery-instructions[b-g2xxwyov9v] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.9rem;
    color: #92400e;
    font-style: italic;
}

.delivery-instructions-text[b-g2xxwyov9v] {
    flex: 1;
    line-height: 1.4;
}

.delivery-address[b-g2xxwyov9v] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.95rem;
    color: #78350f;
}

.delivery-address-content[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-address-street[b-g2xxwyov9v] {
    font-weight: 500;
}

.delivery-address-detail[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #92400e;
}

.delivery-address-city[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #a16207;
}

/* Dark mode for delivery info panel */
[b-g2xxwyov9v] html[data-theme="dark"] .delivery-info-panel {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
}

[b-g2xxwyov9v] html[data-theme="dark"] .delivery-platform-name,
[b-g2xxwyov9v] html[data-theme="dark"] .delivery-field,
[b-g2xxwyov9v] html[data-theme="dark"] .delivery-instructions,
[b-g2xxwyov9v] html[data-theme="dark"] .delivery-address {
    color: #fef3c7;
}

[b-g2xxwyov9v] html[data-theme="dark"] .delivery-address-detail,
[b-g2xxwyov9v] html[data-theme="dark"] .delivery-address-city {
    color: #fcd34d;
}

[b-g2xxwyov9v] html[data-theme="dark"] .delivery-order-id {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

/* ========== WAITER CALL NOTIFICATIONS ========== */
.waiter-calls-container[b-g2xxwyov9v] {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
}

.waiter-call-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: waiterCallPulse-b-g2xxwyov9v 1s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.15s;
}

.waiter-call-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.waiter-call-toast .icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    animation: bellRing-b-g2xxwyov9v 0.5s ease-in-out infinite;
}

.waiter-call-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.waiter-call-toast .table-name[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.1rem;
}

.waiter-call-toast .zone-name[b-g2xxwyov9v] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.waiter-call-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waiter-call-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes waiterCallPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(220, 38, 38, 0.65); }
}

@keyframes bellRing-b-g2xxwyov9v {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

/* ========================================
   DELIVERY ORDER NOTIFICATIONS
   ======================================== */
.delivery-notifications-container[b-g2xxwyov9v] {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
}

.delivery-order-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: deliveryPulse-b-g2xxwyov9v 1s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.15s;
}

.delivery-order-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.delivery-order-toast .icon[b-g2xxwyov9v] {
    font-size: 1.8rem;
    animation: scooterWiggle-b-g2xxwyov9v 0.6s ease-in-out infinite;
}

.delivery-order-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.delivery-order-toast .platform-name[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.delivery-order-toast .customer-name[b-g2xxwyov9v] {
    font-size: 0.9rem;
    opacity: 0.95;
}

.delivery-order-toast .order-total[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 2px;
}

.delivery-order-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-order-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes deliveryPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(245, 158, 11, 0.65); }
}

@keyframes scooterWiggle-b-g2xxwyov9v {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
}

/* ========================================
   TIP RECEIVED NOTIFICATIONS
   ======================================== */
.tip-notifications-container[b-g2xxwyov9v] {
    position: fixed;
    top: 230px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
}

.tip-received-toast[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: tipPulse-b-g2xxwyov9v 1.2s ease-in-out infinite;
    cursor: default;
    transition: transform 0.15s;
}

.tip-received-toast:hover[b-g2xxwyov9v] {
    transform: scale(1.02);
}

.tip-received-toast .icon[b-g2xxwyov9v] {
    font-size: 1.6rem;
    animation: tipBounce-b-g2xxwyov9v 0.6s ease-in-out infinite;
}

.tip-received-toast .info[b-g2xxwyov9v] {
    flex: 1;
}

.tip-received-toast .tip-amount[b-g2xxwyov9v] {
    font-weight: 900;
    font-size: 1.15rem;
}

.tip-received-toast .table-name[b-g2xxwyov9v] {
    font-size: 0.9rem;
    opacity: 0.95;
    font-weight: 600;
}

.tip-received-toast .customer-name[b-g2xxwyov9v] {
    font-size: 0.8rem;
    opacity: 0.85;
}

.tip-received-toast .dismiss[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 900;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tip-received-toast .dismiss:hover[b-g2xxwyov9v] {
    background: rgba(255,255,255,0.35);
}

@keyframes tipPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(16, 185, 129, 0.65); }
}

@keyframes tipBounce-b-g2xxwyov9v {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ========================================
   ACCESSIBILITY UTILITIES
   ======================================== */
.visually-hidden[b-g2xxwyov9v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   MENÚ DEL DÍA BANNER
   ======================================== */
.menu-del-dia-banner[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 8px 12px;
    flex-shrink: 0;
}

.menu-del-dia-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    margin: -4px -8px 10px -8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.menu-del-dia-header:hover[b-g2xxwyov9v] {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-del-dia-banner.collapsed .menu-del-dia-header[b-g2xxwyov9v] {
    margin-bottom: 0;
}

.menu-del-dia-icon[b-g2xxwyov9v] {
    font-size: 1.3rem;
}

.menu-del-dia-title[b-g2xxwyov9v] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    flex: 1;
}

.menu-del-dia-toggle[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s ease;
}

/* Animation wrapper for collapse/expand */
.menu-del-dia-tiles-wrapper[b-g2xxwyov9v] {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
    opacity: 1;
}

.menu-del-dia-banner.collapsed .menu-del-dia-tiles-wrapper[b-g2xxwyov9v] {
    grid-template-rows: 0fr;
    opacity: 0;
}

.menu-del-dia-tiles-wrapper > .menu-del-dia-tiles[b-g2xxwyov9v] {
    overflow: hidden;
}

.menu-del-dia-banner.expanded .menu-del-dia-tiles-wrapper > .menu-del-dia-tiles[b-g2xxwyov9v] {
    overflow-x: auto;
}

.menu-del-dia-tiles[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
    padding-bottom: 4px;
    min-height: 0; /* Required for grid animation */
}

.menu-del-dia-tile[b-g2xxwyov9v] {
    background: white;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 160px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-del-dia-tile:hover[b-g2xxwyov9v] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.menu-del-dia-tile:active[b-g2xxwyov9v] {
    transform: scale(0.98);
}

.mdd-tile-name[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1rem;
    color: #2e7d32;
    margin-bottom: 0;
}

.mdd-tile-structure[b-g2xxwyov9v] {
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.mdd-tile-price[b-g2xxwyov9v] {
    font-weight: 800;
    font-size: 1.2rem;
    color: #4CAF50;
    margin: 2px 0 4px;
}

.mdd-tile-includes[b-g2xxwyov9v] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mdd-tag[b-g2xxwyov9v] {
    background: #e8f5e9;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.65rem;
    color: #2e7d32;
}

.mdd-tile-cta[b-g2xxwyov9v] {
    font-size: 0.65rem;
    color: #4CAF50;
    font-weight: 600;
    margin-top: 4px;
    opacity: 0.8;
}

.menu-del-dia-tile:hover .mdd-tile-cta[b-g2xxwyov9v] {
    opacity: 1;
}

/* ========================================
   SCHEDULED PRICING DISPLAY
   ======================================== */
.tile .price.scheduled-price[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.tile .scheduled-price .original-price[b-g2xxwyov9v] {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.85rem;
    opacity: 0.7;
}

.tile .scheduled-price .effective-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: #4CAF50;
}

.tile .scheduled-price .price-badge[b-g2xxwyov9v] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ========================================
   MENÚ DEL DÍA SELECTION MODAL
   ======================================== */
.mdd-modal[b-g2xxwyov9v] {
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}

.mdd-modal-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}

.mdd-modal-icon[b-g2xxwyov9v] {
    font-size: 1.8rem;
}

.mdd-modal-title[b-g2xxwyov9v] {
    font-size: 1.25rem;
    font-weight: 700;
    flex: 1;
}

.mdd-modal-price[b-g2xxwyov9v] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4CAF50;
}

.mdd-modal-desc[b-g2xxwyov9v] {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.mdd-modal-includes[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mdd-include-tag[b-g2xxwyov9v] {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.mdd-courses[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mdd-course[b-g2xxwyov9v] {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 12px;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.mdd-course.complete[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #f1f8e9;
}

.mdd-course-header[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mdd-course-name[b-g2xxwyov9v] {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
}

.mdd-course-hint[b-g2xxwyov9v] {
    color: var(--muted);
    font-size: 0.8rem;
}

.mdd-course-check[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.mdd-course-items[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdd-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-size: 0.9rem;
}

.mdd-item:hover[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #fafffe;
}

.mdd-item.selected[b-g2xxwyov9v] {
    border-color: #4CAF50;
    background: #e8f5e9;
}

.mdd-item-check[b-g2xxwyov9v] {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: transparent;
    flex-shrink: 0;
}

.mdd-item.selected .mdd-item-check[b-g2xxwyov9v] {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

.mdd-item-name[b-g2xxwyov9v] {
    flex: 1;
}

.mdd-item-supplement[b-g2xxwyov9v] {
    color: #ff9800;
    font-weight: 600;
    font-size: 0.85rem;
}

.mdd-modal-footer[b-g2xxwyov9v] {
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-top: 14px;
}

.mdd-qty-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mdd-qty-controls[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mdd-qty-btn[b-g2xxwyov9v] {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.mdd-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mdd-qty-btn:disabled[b-g2xxwyov9v] {
    opacity: 0.4;
    cursor: not-allowed;
}

.mdd-qty-value[b-g2xxwyov9v] {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 24px;
    text-align: center;
}

.mdd-total-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mdd-total-price[b-g2xxwyov9v] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4CAF50;
}

.mdd-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 10px;
}

.mdd-actions .btn-cancel[b-g2xxwyov9v] {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mdd-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mdd-actions .btn-confirm[b-g2xxwyov9v] {
    flex: 2;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #4CAF50;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mdd-actions .btn-confirm:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #43A047;
}

.mdd-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background: #ccc;
    cursor: not-allowed;
}

/* Dark mode for MDD Modal */
html[data-theme="dark"] .mdd-modal[b-g2xxwyov9v] {
    background: #1e293b;
}

html[data-theme="dark"] .mdd-modal-header[b-g2xxwyov9v] {
    border-bottom-color: #334155;
}

html[data-theme="dark"] .mdd-modal-title[b-g2xxwyov9v] {
    color: #f1f5f9;
}

html[data-theme="dark"] .mdd-modal-desc[b-g2xxwyov9v] {
    color: #94a3b8;
}

html[data-theme="dark"] .mdd-include-tag[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.2);
    color: #4ade80;
}

html[data-theme="dark"] .mdd-course[b-g2xxwyov9v] {
    background: #0f172a;
}

html[data-theme="dark"] .mdd-course.complete[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
}

html[data-theme="dark"] .mdd-course-title[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-course-selection[b-g2xxwyov9v] {
    color: #94a3b8;
}

html[data-theme="dark"] .mdd-items[b-g2xxwyov9v] {
    border-color: #334155;
}

html[data-theme="dark"] .mdd-item[b-g2xxwyov9v] {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-item:hover[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
}

html[data-theme="dark"] .mdd-item.selected[b-g2xxwyov9v] {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4CAF50;
}

html[data-theme="dark"] .mdd-item-name[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-row[b-g2xxwyov9v],
html[data-theme="dark"] .mdd-total-row[b-g2xxwyov9v] {
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-btn[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-qty-btn:hover:not(:disabled)[b-g2xxwyov9v] {
    background: #475569;
}

html[data-theme="dark"] .mdd-actions .btn-cancel[b-g2xxwyov9v] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .mdd-actions .btn-cancel:hover[b-g2xxwyov9v] {
    background: #475569;
}

html[data-theme="dark"] .mdd-actions .btn-confirm:disabled[b-g2xxwyov9v] {
    background: #475569;
    color: #94a3b8;
}

/* MDD modal — phone */
@media (max-width: 500px) {
    .mdd-modal[b-g2xxwyov9v] {
        padding: 14px;
        max-height: 90vh;
        max-height: 90dvh;
    }

    .mdd-modal-header[b-g2xxwyov9v] {
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .mdd-modal-icon[b-g2xxwyov9v] {
        font-size: 1.4rem;
    }

    .mdd-modal-title[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .mdd-modal-price[b-g2xxwyov9v] {
        font-size: 1.2rem;
    }

    .mdd-item[b-g2xxwyov9v] {
        padding: 10px;
        gap: 8px;
    }

    .mdd-course[b-g2xxwyov9v] {
        padding: 10px;
    }

    .mdd-modal-footer[b-g2xxwyov9v] {
        padding-top: 10px;
        margin-top: 10px;
    }

    .mdd-actions[b-g2xxwyov9v] {
        flex-direction: column;
        gap: 8px;
    }

    .mdd-actions .btn-cancel[b-g2xxwyov9v],
    .mdd-actions .btn-confirm[b-g2xxwyov9v] {
        width: 100%;
        min-height: 48px;
    }
}

/* ========== MENU MANAGEMENT MODAL (POS inline) ========== */

.menu-mgmt-modal[b-g2xxwyov9v] {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.mgmt-modal-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.mgmt-modal-header h2[b-g2xxwyov9v] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-close-btn[b-g2xxwyov9v] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    line-height: 1;
    /* 44px touch target for POS hardware (was ~30×32 from padding only). */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mgmt-tabs[b-g2xxwyov9v] {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}

.mgmt-tab[b-g2xxwyov9v] {
    min-height: 44px;            /* touch target for POS hardware (was ~38px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: all 0.15s ease;
}

.mgmt-tab:hover[b-g2xxwyov9v] {
    background: #e8e8e8;
}

.mgmt-tab.active[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

.mgmt-loading[b-g2xxwyov9v],
.mgmt-error[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: #666;
}

.mgmt-content[b-g2xxwyov9v] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.mgmt-search[b-g2xxwyov9v] {
    margin-bottom: 12px;
}

.mgmt-search input[b-g2xxwyov9v] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
}

.mgmt-search input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mgmt-empty[b-g2xxwyov9v] {
    text-align: center;
    padding: 40px;
    color: #666;
}

.mgmt-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mgmt-list.scrollable[b-g2xxwyov9v] {
    max-height: 400px;
    overflow-y: auto;
}

.mgmt-item[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.mgmt-item:hover[b-g2xxwyov9v] {
    background: #f0f0f0;
}

.mgmt-item.inactive[b-g2xxwyov9v] {
    opacity: 0.5;
}

.mgmt-item.unavailable[b-g2xxwyov9v] {
    background: #fff5f5;
}

.mgmt-item.has-active[b-g2xxwyov9v] {
    background: #fff8e1;
}

.mgmt-item-info[b-g2xxwyov9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    align-items: flex-start;
}

.mgmt-item-info strong[b-g2xxwyov9v] {
    font-size: 0.95rem;
    text-align: left;
}

.mgmt-item-category[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #888;
}

.mgmt-item-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #4CAF50;
}

.mgmt-item-price.base[b-g2xxwyov9v] {
    font-weight: 400;
    color: #666;
    font-size: 0.85rem;
}

.mgmt-item-schedule[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #888;
}

.mgmt-item-schedule.has-schedule[b-g2xxwyov9v] {
    color: #1976D2;
}

.mgmt-item-schedule.always[b-g2xxwyov9v] {
    color: #388E3C;
}

.mgmt-item-status[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mgmt-item-status .status-ok[b-g2xxwyov9v] {
    color: #4CAF50;
    font-weight: 600;
}

.mgmt-item-status .status-no[b-g2xxwyov9v] {
    color: #d32f2f;
    font-weight: 600;
}

.mgmt-item-price-status[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.mgmt-item-price-status .effective-price[b-g2xxwyov9v] {
    font-weight: 700;
    color: #ff9800;
    font-size: 1.1rem;
}

.mgmt-item-price-status .active-rule[b-g2xxwyov9v] {
    font-size: 0.75rem;
    color: #888;
}

.mgmt-item-price-status .current-price[b-g2xxwyov9v] {
    font-weight: 600;
    color: #333;
}

.mgmt-item-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Toggle Switch */
.toggle-switch[b-g2xxwyov9v] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle-switch input[b-g2xxwyov9v] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-g2xxwyov9v] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider[b-g2xxwyov9v]::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-g2xxwyov9v] {
    background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider[b-g2xxwyov9v]::before {
    transform: translateX(20px);
}

/* Small Toggle Switch */
.toggle-switch.small[b-g2xxwyov9v] {
    width: 36px;
    height: 20px;
}

.toggle-switch.small .toggle-slider[b-g2xxwyov9v] {
    border-radius: 20px;
}

.toggle-switch.small .toggle-slider[b-g2xxwyov9v]::before {
    height: 14px;
    width: 14px;
}

.toggle-switch.small input:checked + .toggle-slider[b-g2xxwyov9v]::before {
    transform: translateX(16px);
}

/* Price Rules Item Group */
.mgmt-item-group[b-g2xxwyov9v] {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #eee;
    text-align: left;
}

.mgmt-item-group.has-active[b-g2xxwyov9v] {
    background: #fff8e1;
    border-color: #FF9800;
}

.mgmt-item-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mgmt-item-header .mgmt-item-info[b-g2xxwyov9v] {
    text-align: left;
    align-items: flex-start;
}

.mgmt-rules-list[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

.mgmt-rule[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.mgmt-rule.inactive[b-g2xxwyov9v] {
    opacity: 0.6;
    background: #f5f5f5;
}

.rule-info[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rule-name[b-g2xxwyov9v] {
    font-weight: 600;
    color: #333;
}

.rule-time[b-g2xxwyov9v] {
    font-size: 0.8rem;
    color: #666;
}

.rule-discount[b-g2xxwyov9v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FF9800;
}

.mgmt-no-rules[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #999;
    text-align: left;
    padding: 12px 0;
    font-style: italic;
}

.mgmt-item-footer[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
}

/* Schedule Edit Sub-Modal */
.mgmt-sub-modal-overlay[b-g2xxwyov9v] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.mgmt-sub-modal[b-g2xxwyov9v] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.mgmt-sub-modal h3[b-g2xxwyov9v] {
    margin: 0 0 16px;
    font-size: 1.1rem;
}

.schedule-form[b-g2xxwyov9v] {
    margin-bottom: 16px;
}

.schedule-form .checkbox[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.schedule-form .hint[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 16px;
}

.days-config[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.day-row[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
}

.day-label[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    cursor: pointer;
}

.time-windows[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.time-window[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.time-window input[type="time"][b-g2xxwyov9v] {
    border: none;
    background: transparent;
    font-size: 0.85rem;
    width: 85px;
}

.preset-buttons[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.preset-label[b-g2xxwyov9v] {
    font-size: 0.85rem;
    color: #666;
}

.sub-modal-actions[b-g2xxwyov9v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* Buttons in mgmt modal */
.mgmt-item-actions .btn[b-g2xxwyov9v],
.mgmt-content .btn[b-g2xxwyov9v],
.mgmt-empty .btn[b-g2xxwyov9v],
.sub-modal-actions .btn[b-g2xxwyov9v] {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    background: #e8e8e8;
    color: #333;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mgmt-item-actions .btn:hover[b-g2xxwyov9v],
.mgmt-content .btn:hover[b-g2xxwyov9v],
.mgmt-empty .btn:hover[b-g2xxwyov9v],
.sub-modal-actions .btn:hover[b-g2xxwyov9v] {
    background: #ddd;
}

.mgmt-item-actions .btn.small[b-g2xxwyov9v] {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.mgmt-item-actions .btn.danger[b-g2xxwyov9v] {
    background: #ffebee;
    color: #d32f2f;
}

.mgmt-item-actions .btn.danger:hover[b-g2xxwyov9v] {
    background: #ffcdd2;
}

.mgmt-empty .btn.primary[b-g2xxwyov9v],
.sub-modal-actions .btn.primary[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

.mgmt-empty .btn.primary:hover[b-g2xxwyov9v],
.sub-modal-actions .btn.primary:hover[b-g2xxwyov9v] {
    background: #43A047;
}

/* Menú del Día inline creation - uses dark theme to match POS */
.mdd-pin-section[b-g2xxwyov9v] {
    background: #1e1e1e;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.mdd-pin-label[b-g2xxwyov9v] {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #e0e0e0;
}

.mdd-pin-input-row[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mdd-pin-input[b-g2xxwyov9v] {
    flex: 0 0 100px;
    padding: 8px 12px;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 2px;
    background: #2d2d2d;
    color: #e0e0e0;
}

.mdd-pin-input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mdd-error[b-g2xxwyov9v] {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
    border-radius: 6px;
    font-size: 0.85rem;
}

.mdd-success[b-g2xxwyov9v] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: fadeIn-b-g2xxwyov9v 0.3s ease;
}

@keyframes fadeIn-b-g2xxwyov9v {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mdd-create-form[b-g2xxwyov9v] {
    background: #1e1e1e;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.mdd-create-form h4[b-g2xxwyov9v] {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
}

.mdd-form-row[b-g2xxwyov9v] {
    margin-bottom: 12px;
}

.mdd-form-row label[b-g2xxwyov9v] {
    display: block;
    font-size: 0.85rem;
    color: #9e9e9e;
    margin-bottom: 4px;
}

.mdd-form-row input[type="text"][b-g2xxwyov9v],
.mdd-form-row input[type="number"][b-g2xxwyov9v] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #3d3d3d;
    border-radius: 6px;
    font-size: 0.95rem;
    background: #2d2d2d;
    color: #e0e0e0;
}

.mdd-form-row input:focus[b-g2xxwyov9v] {
    outline: none;
    border-color: #4CAF50;
}

.mdd-form-row.checkboxes[b-g2xxwyov9v] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-inline[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.checkbox-inline input[b-g2xxwyov9v] {
    width: auto;
    margin: 0;
}

.mdd-form-actions[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.mdd-form-hint[b-g2xxwyov9v] {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: #757575;
}

.mdd-create-btn-row[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #3d3d3d;
}

/* Note: MDD inline creation uses dark base colors to match POS dark theme */

/* Dark mode for menu mgmt modal */
:root[data-theme="dark"] .menu-mgmt-modal[b-g2xxwyov9v],
[data-theme="dark"] .menu-mgmt-modal[b-g2xxwyov9v] {
    background: #2d2d2d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-modal-header[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-modal-header[b-g2xxwyov9v] {
    border-bottom-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-tabs[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tabs[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-bottom-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-tab[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-tab:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab:hover[b-g2xxwyov9v] {
    background: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-search input[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-search input[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-item[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .mgmt-item:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item:hover[b-g2xxwyov9v] {
    background: #2a2a2a;
}

:root[data-theme="dark"] .mgmt-item.unavailable[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item.unavailable[b-g2xxwyov9v] {
    background: rgba(211, 47, 47, 0.1);
}

:root[data-theme="dark"] .mgmt-item.has-active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item.has-active[b-g2xxwyov9v] {
    background: rgba(255, 152, 0, 0.15);
}

:root[data-theme="dark"] .mgmt-item-group[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-group[b-g2xxwyov9v] {
    background: #1e1e1e;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-group.has-active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-group.has-active[b-g2xxwyov9v] {
    background: rgba(255, 152, 0, 0.15);
    border-color: #FF9800;
}

:root[data-theme="dark"] .mgmt-rules-list[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rules-list[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-rule[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rule[b-g2xxwyov9v] {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-rule.inactive[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-rule.inactive[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .rule-name[b-g2xxwyov9v],
[data-theme="dark"] .rule-name[b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .rule-time[b-g2xxwyov9v],
[data-theme="dark"] .rule-time[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-no-rules[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-no-rules[b-g2xxwyov9v] {
    color: #757575;
}

:root[data-theme="dark"] .mgmt-item-footer[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-footer[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-category[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-category[b-g2xxwyov9v] {
    color: #757575;
}

:root[data-theme="dark"] .mgmt-item-schedule[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-schedule[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-item-price-status .current-price[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-price-status .current-price[b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-sub-modal[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-sub-modal[b-g2xxwyov9v] {
    background: #2d2d2d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .day-row[b-g2xxwyov9v],
[data-theme="dark"] .day-row[b-g2xxwyov9v] {
    background: #1e1e1e;
}

:root[data-theme="dark"] .time-window[b-g2xxwyov9v],
[data-theme="dark"] .time-window[b-g2xxwyov9v] {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .time-window input[type="time"][b-g2xxwyov9v],
[data-theme="dark"] .time-window input[type="time"][b-g2xxwyov9v] {
    color: #e0e0e0;
}

:root[data-theme="dark"] .schedule-form .hint[b-g2xxwyov9v],
[data-theme="dark"] .schedule-form .hint[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .preset-buttons[b-g2xxwyov9v],
[data-theme="dark"] .preset-buttons[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .sub-modal-actions[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions[b-g2xxwyov9v] {
    border-top-color: #3d3d3d;
}

:root[data-theme="dark"] .mgmt-item-actions .btn[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-content .btn[b-g2xxwyov9v],
:root[data-theme="dark"] .sub-modal-actions .btn[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-content .btn[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions .btn[b-g2xxwyov9v] {
    background: #3d3d3d;
    color: #e0e0e0;
}

:root[data-theme="dark"] .mgmt-item-actions .btn:hover[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-content .btn:hover[b-g2xxwyov9v],
:root[data-theme="dark"] .sub-modal-actions .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-content .btn:hover[b-g2xxwyov9v],
[data-theme="dark"] .sub-modal-actions .btn:hover[b-g2xxwyov9v] {
    background: #4d4d4d;
}

:root[data-theme="dark"] .mgmt-item-actions .btn.danger[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-item-actions .btn.danger[b-g2xxwyov9v] {
    background: rgba(211, 47, 47, 0.2);
    color: #ef5350;
}

:root[data-theme="dark"] .mgmt-tab.active[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-tab.active[b-g2xxwyov9v] {
    background: #4CAF50;
    color: white;
}

:root[data-theme="dark"] .mgmt-empty[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-empty[b-g2xxwyov9v] {
    color: #9e9e9e;
}

:root[data-theme="dark"] .mgmt-loading[b-g2xxwyov9v],
:root[data-theme="dark"] .mgmt-error[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-loading[b-g2xxwyov9v],
[data-theme="dark"] .mgmt-error[b-g2xxwyov9v] {
    color: #9e9e9e;
}

/* Menu-mgmt modal — phone */
@media (max-width: 500px) {
    .menu-mgmt-modal[b-g2xxwyov9v] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        padding: 0;
    }

    .mgmt-modal-header[b-g2xxwyov9v] {
        padding: 12px 16px;
    }

    .mgmt-modal-header h2[b-g2xxwyov9v] {
        font-size: 1.05rem;
    }

    .mgmt-tabs[b-g2xxwyov9v] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .mgmt-tab[b-g2xxwyov9v] {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 44px;        /* touch target on mobile (was 40px) */
    }

    .mgmt-content[b-g2xxwyov9v] {
        padding: 12px;
    }

    .mgmt-item[b-g2xxwyov9v] {
        padding: 10px 12px;
        gap: 10px;
    }

    .mgmt-list.scrollable[b-g2xxwyov9v] {
        max-height: none;
    }

    .mgmt-sub-modal-overlay .mgmt-sub-modal[b-g2xxwyov9v] {
        width: 95vw;
        max-height: 85dvh;
    }
}

/* ---- Merged table chips ---- */
.merged-chip[b-g2xxwyov9v] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.merged-chip .chip-remove[b-g2xxwyov9v] {
    background: none;
    border: none;
    color: #1d4ed8;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.7;
}

.merged-chip .chip-remove:hover[b-g2xxwyov9v] {
    opacity: 1;
    color: #dc2626;
}

html[data-theme="dark"] .merged-chip[b-g2xxwyov9v] {
    background: #1e3a5f;
    color: #93c5fd;
}

html[data-theme="dark"] .merged-chip .chip-remove[b-g2xxwyov9v] {
    color: #93c5fd;
}

/* ========================================
   PHONE LAYOUT (≤ 600px width)
   Stack everything vertically, compact all UI
   ======================================== */
@media (max-width: 600px) {
    /* Force single-column layout even in basket-full mode */
    .pos-shell.basket-full[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
    }

    /* Left section takes remaining space, internal scroll chain intact.
       z-index:2 (vs the summary's 1 below) lifts this flex column — and the
       ⚙️ settings bottom-sheet that lives inside its .topbar — ABOVE the
       summary. Without it the summary (a later flex sibling) painted over the
       fixed sheet (the "config goes under the basket" bug). They don't overlap
       in normal flow, so this only affects the fixed sheet's paint order. */
    .left-section[b-g2xxwyov9v] {
        flex: 1 1 0%;
        min-height: 0;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

    /* Summary: fixed bottom panel with limited height */
    .pos-shell.basket-full > .summary[b-g2xxwyov9v],
    .summary.summary-full[b-g2xxwyov9v] {
        border-left: none;
        border-top: 3px solid #e5e7eb;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        max-height: 40vh;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    /* Empty basket doesn't need 40vh — it's just "+ Crear" + an empty hint. Cap
       it lower so the product grid stays visible instead of a tall empty basket
       hogging the screen (operator couldn't see the items to tap). Higher
       specificity than the 40vh rule above, so it wins. */
    .pos-shell.basket-full > .summary.empty-basket[b-g2xxwyov9v],
    .summary.summary-full.empty-basket[b-g2xxwyov9v] {
        max-height: 28vh;
    }

    .summary.has-new[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #f59e0b;
    }
    .summary.all-sent[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #10b981;
    }

    /* Dark mode: override left-border/shadow with top-border/shadow on phone */
    html[data-theme="dark"] .pos-shell.basket-full > .summary[b-g2xxwyov9v],
    html[data-theme="dark"] .summary.summary-full[b-g2xxwyov9v] {
        border-left-color: transparent;
        border-top-color: #374151;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    }

    /* Compact topbar — left padding makes room for the fixed hamburger
       (44px wide at left:12px → ends at x=56). 62px clears it with a buffer so
       the printer status chip no longer tucks under the hamburger. */
    .topbar[b-g2xxwyov9v] {
        padding: 6px 10px 6px 76px;
        gap: 6px;
    }

    .topbar .title[b-g2xxwyov9v] {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }

    .topbar .muted[b-g2xxwyov9v] {
        display: none;
    }

    .pos-shell.basket-full .topbar .btn[b-g2xxwyov9v],
    .topbar .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.75rem;
        min-height: 32px;
        border-radius: 8px;
    }

    /* Sistema dropdown compact */
    .sistema-dropdown .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Actions row on phones: ONE non-wrapping line. The base grid
       (minmax(140px,1fr)) wraps to 3 rows on a phone — instead lay the row
       out as a horizontal flex strip of icon-only buttons + the search box.
       Labels are hidden (.action-btn-label) leaving just the emoji, and the
       Stock quick-button is dropped here (it moves into the ⚙️ menu), so the
       remaining four icons + buscar fit without wrapping. Overflow scrolls. */
    .actions[b-g2xxwyov9v],
    .main-content-grid .actions[b-g2xxwyov9v] {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        align-items: center;
        padding: 6px 8px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .actions[b-g2xxwyov9v]::-webkit-scrollbar { display: none; }

    .actions .btn[b-g2xxwyov9v] {
        padding: 8px 10px;
        font-size: 1rem;          /* keep the emoji legible at icon-only size */
        min-height: 42px;
        border-radius: 10px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Icon-only: keep the leading emoji, hide the text label */
    .actions .action-btn-label[b-g2xxwyov9v] {
        display: none;
    }

    /* Stock quick-panel is offered in the ⚙️ menu on phones (see .sistema-stock) */
    .actions .action-stock[b-g2xxwyov9v] {
        display: none;
    }

    /* Search fills whatever width is left on the row */
    .action-search[b-g2xxwyov9v] {
        flex: 1 1 auto;
        min-width: 90px;
        max-width: none;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .action-search-input[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    /* Compact filters */
    .filters[b-g2xxwyov9v],
    .main-content-grid .filters[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 4px;
    }

    /* Category switching is a primary, high-frequency tap during service.
       The chipbar already scrolls horizontally, so width is free — keep the
       target ~40px, not the 26px a 4px/0.75rem chip collapses to (matches
       the established "no sub-44px tap targets" POS direction). */
    .chip[b-g2xxwyov9v] {
        padding: 8px 14px;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    /* Hide recent section on phone */
    .recent-section[b-g2xxwyov9v] {
        display: none;
    }

    /* Product grid: 2 columns, compact */
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
        padding: 6px;
    }

    .tile[b-g2xxwyov9v] {
        padding: 8px;
        border-radius: 8px;
    }

    .tile-name[b-g2xxwyov9v] {
        font-size: 0.75rem;
    }

    .tile .price[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    /* Compact payment bar — horizontal, short buttons. Sticky to the bottom of
       the scrolling left-column so it reads as "pay this ticket" and stops
       floating mid-screen above the products as you scroll. (Branch A already
       hides it entirely when the ticket is empty via .payment-bar-empty.) */
    .payment-bar[b-g2xxwyov9v] {
        padding: 6px 8px;
        gap: 4px;
        align-items: center;
        flex-grow: 0;
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--card, #0f172a);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18);
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 4px;
        font-size: 0.7rem;
        min-height: 36px;
        max-height: 48px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

    .pay .shortcut-hint[b-g2xxwyov9v] {
        display: none;
    }

    /* Hide payment icon emoji on very narrow screens */
    .pay .pay-icon[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 4px 8px;
    }

    .current-ticket[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 6px;
    }

    .ticket-number[b-g2xxwyov9v] {
        font-size: 0.9rem;
        padding: 2px 6px;
    }

    .ticket-total-display[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .ticket-subtitle[b-g2xxwyov9v] {
        font-size: 0.55rem;
    }

    /* Basket content compact */
    .basket-content[b-g2xxwyov9v] {
        padding: 0 8px;
    }

    .line[b-g2xxwyov9v] {
        padding: 6px 0;
        min-height: 40px;
    }

    .line-total[b-g2xxwyov9v] {
        min-width: 60px;
        font-size: 0.85rem;
    }

    /* Kitchen button compact */
    .btn-kitchen[b-g2xxwyov9v] {
        padding: 10px;
        font-size: 0.85rem;
    }

    /* Workspace compact padding */
    .workspace[b-g2xxwyov9v],
    .main-content-grid .workspace[b-g2xxwyov9v] {
        padding: 4px 6px;
    }

    /* Ensure products panel still scrolls on phone */
    .products-panel[b-g2xxwyov9v] {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* Line actions: tighter on phone */
    .line-actions[b-g2xxwyov9v] {
        gap: 10px;
    }

    .line-actions .qty[b-g2xxwyov9v] {
        gap: 8px;
    }

    /* Ticket action buttons compact */
    .ticket-action-btn[b-g2xxwyov9v] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Show the mobile-only Mesas button (opens the floor overlay). On desktop
       the tablesbar handles this; on phones that bar is hidden, so this is the
       only table-access entry point.
       NOTE: this MUST out-specify the base `.btn-mesas-mobile{display:none}`
       below. They have equal specificity and the base rule comes later in
       source, so a bare `.btn-mesas-mobile` here would LOSE the cascade and
       the button would stay hidden on phones (the long-standing bug that left
       phones with no tables entry point). Scoping to `.topbar` (0,2,0) wins. */
    .topbar .btn-mesas-mobile[b-g2xxwyov9v],
    .topbar .btn-list-mobile[b-g2xxwyov9v] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    /* Icon-only on phones so 📅 🪑 📋 ⚙️ all fit the topbar without wrapping. */
    .btn-mesas-mobile-label[b-g2xxwyov9v],
    .btn-list-mobile-label[b-g2xxwyov9v] {
        display: none;
    }
}

/* Mobile-only Mesas/Lista buttons are hidden on desktop/tablet (the tablesbar
   covers table access there via hover). Shown only inside the ≤600px block. */
.btn-mesas-mobile[b-g2xxwyov9v],
.btn-list-mobile[b-g2xxwyov9v] {
    display: none;
}

/* Visible edge tab (right screen edge) that opens the table-list panel on a
   tap — touch has no hover to reveal the off-canvas panel, and the old edge
   pill was invisible. Desktop hides it (the panel reveals on hover there). */
.tables-edge-tab[b-g2xxwyov9v] {
    display: none;
}
@media (max-width: 600px) {
    .tables-edge-tab[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: fixed;
        right: 0;
        top: 46%;
        transform: translateY(-50%);
        z-index: 40;                 /* below the panel (z-index 46): covered when the panel is open */
        padding: 12px 7px 12px 9px;
        border: none;
        border-radius: 14px 0 0 14px;
        background: var(--brand, #c62828);
        color: #fff;
        box-shadow: -6px 0 18px rgba(0, 0, 0, .35);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .tables-edge-tab__chev[b-g2xxwyov9v] { font-size: 1rem; font-weight: 900; line-height: 1; opacity: .9; }
    .tables-edge-tab__icon[b-g2xxwyov9v] { font-size: 1.25rem; line-height: 1; }
    .tables-edge-tab:active[b-g2xxwyov9v] { filter: brightness(1.1); }
}

/* Floor plan overlay — slide down from top */
.tables-overlay[b-g2xxwyov9v] {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #f5f6f8;
    animation: tables-slide-down-b-g2xxwyov9v 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tables-slide-down-b-g2xxwyov9v {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Compact layout for small/4:3 screens (1024x768 touch monitors) ===== */
@media (max-width: 1100px) {
    /* Widen left column to give catalog more space */
    .pos-shell.basket-full[b-g2xxwyov9v] {
        grid-template-columns: 58% 42%;
    }

    .pos-shell.basket-full .topbar[b-g2xxwyov9v] {
        gap: 6px;
        /* padding-left clears the fixed hamburger. This rule (0,3,0) out-specifies
           the plain `.topbar` mobile rule, so the clearance MUST live here too —
           a bare `padding: 6px 8px` reset the left to 8px and tucked the printer
           chip under the hamburger (the long-standing "printer under sandwich" bug). */
        padding: 6px 8px 6px 76px;
    }

    .pos-shell.basket-full .topbar .title[b-g2xxwyov9v] {
        max-width: 100px;
        font-size: 0.85rem;
    }

    /* Compact topbar buttons */
    .pos-shell.basket-full .topbar .btn[b-g2xxwyov9v] {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    /* Reduce tile grid min size for narrower catalog */
    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 6px !important;
    }

    /* Compact order lines */
    .line[b-g2xxwyov9v] {
        column-gap: 6px;
        row-gap: 4px;
        padding: 6px 0;
        min-height: 44px;
    }

    .line .name[b-g2xxwyov9v] {
        column-gap: 4px;
    }

    .line .name .name-text[b-g2xxwyov9v] {
        font-size: 0.85rem;
    }

    .line-actions[b-g2xxwyov9v] {
        gap: 6px;
    }

    .line-actions .qty[b-g2xxwyov9v] {
        gap: 4px;
    }

    .line-actions .qty button[b-g2xxwyov9v],
    .line-actions .more[b-g2xxwyov9v],
    .line-actions .trash[b-g2xxwyov9v] {
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
    }

    .line-total[b-g2xxwyov9v] {
        min-width: 56px;
        font-size: 0.85rem;
        margin-right: 2px;
    }

    /* Compact summary/basket area */
    .summary[b-g2xxwyov9v] {
        font-size: 0.9rem;
    }

    .summary .lines[b-g2xxwyov9v] {
        padding: 0 6px;
    }

    /* Compact bottom payment bar */
    .payment-bar[b-g2xxwyov9v],
    .summary .actions[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px;
    }

    .payment-bar .btn[b-g2xxwyov9v],
    .summary .actions .btn[b-g2xxwyov9v] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    /* Compact ticket bar */
    .ticket-bar[b-g2xxwyov9v] {
        padding: 4px 8px;
        gap: 6px;
    }

    /* Compact category tabs */
    .tabs[b-g2xxwyov9v] {
        gap: 4px;
        padding: 4px 8px;
    }

    .tabs .tab[b-g2xxwyov9v] {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    /* Tighter kitchen button group when space is limited */
    .kitchen-btn-group[b-g2xxwyov9v] {
        margin: 4px;
    }

    .kitchen-btn-group .btn-kitchen[b-g2xxwyov9v] {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    /* Hide "· Nuevos: X.XX €" to keep button single-line */
    .btn-kitchen-total[b-g2xxwyov9v] {
        display: none;
    }

    .kitchen-btn-group .btn-preview[b-g2xxwyov9v],
    .kitchen-btn-group .btn-course-batch[b-g2xxwyov9v] {
        width: 36px;
        min-width: 36px;
    }
}

/* ===== Compact for screens ≤ 800px — topbar, ticket, timer, payment ===== */
@media (max-width: 800px) {
    /* Sistema button: prevent icon wrapping above text */
    .sistema-dropdown .btn[b-g2xxwyov9v] {
        white-space: nowrap;
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
    }

    /* Topbar: tighter gaps */
    .topbar[b-g2xxwyov9v] {
        gap: 6px;
        padding: 6px 8px;
    }

    /* Ticket number: ensure background covers all digits */
    .ticket-number[b-g2xxwyov9v] {
        font-size: 1.1rem;
        padding: 3px 8px;
        min-width: fit-content;
        white-space: nowrap;
    }

    /* Timer badge: compact so it doesn't wrap */
    .time-in-table[b-g2xxwyov9v] {
        font-size: 0.75rem;
        padding: 4px 8px;
        gap: 4px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .time-in-table[b-g2xxwyov9v]::before {
        font-size: 0.85rem;
    }

    .time-in-table .time-value[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    .time-in-table .time-status[b-g2xxwyov9v] {
        font-size: 0.7rem;
    }

    /* Payment buttons: ensure equal sizing and no missing backgrounds */
    .payment-bar[b-g2xxwyov9v] {
        gap: 4px;
        padding: 6px 8px;
    }

    .pay[b-g2xxwyov9v] {
        padding: 10px 4px;
        font-size: 0.8rem;
        min-height: 44px;
        border-radius: 10px;
    }

    .pay .shortcut-hint[b-g2xxwyov9v] {
        display: none;
    }
}

/* ===== Very narrow screens — shrink tiles so they don't dominate ===== */
@media (max-width: 600px) {
    .tile-stripe[b-g2xxwyov9v] {
        height: 3px;
        margin-bottom: 2px;
    }

    .tile[b-g2xxwyov9v] {
        min-height: 60px;
        padding: 8px;
        gap: 4px;
    }

    /* Keep the product name dominant on phone too (established POS visual
       direction). 0.85rem ≈ 13.6px is undersized for arm's-length service;
       0.95rem still clamps to 2 lines via the existing -webkit-line-clamp. */
    .tile-name[b-g2xxwyov9v] {
        font-size: 0.95rem;
    }

    .tile .price[b-g2xxwyov9v] {
        font-size: 0.8rem;
    }

    .grid[b-g2xxwyov9v] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 4px !important;
    }

    /* --- Tap-target & overflow restorations ---
       These selectors are also redefined in the earlier @media (max-width:
       1100px)/(800px) blocks, which (equal specificity, later in source than
       the first ≤600 block) otherwise win at phone width and shrink primary
       interactions below the 44px the base rules deliberately set. This
       block is the last phone block in source order, so it reinstates them. */

    /* Basket qty +/- , more, trash — the most frequent in-service taps.
       The ≤1100 block forces these to 34×34; restore the base 44px. */
    .line-actions .qty button[b-g2xxwyov9v],
    .line-actions .more[b-g2xxwyov9v],
    .line-actions .trash[b-g2xxwyov9v] {
        min-width: 44px;
        min-height: 44px;
        width: auto;
        height: auto;
    }

    /* Primary commit action of the screen — never below 48px. */
    .kitchen-btn-group .btn-kitchen[b-g2xxwyov9v],
    .btn-kitchen[b-g2xxwyov9v] {
        min-height: 48px;
    }

    /* Long product/modifier names must truncate, not push the basket row
       past the panel (base rule is white-space:nowrap;overflow:visible). */
    .line .name .name-text[b-g2xxwyov9v] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Menu-del-Día qty steppers (32px base) and ticket action buttons
       (explicitly 32px in the first ≤600 block) → 44px. */
    .mdd-qty-btn[b-g2xxwyov9v] {
        min-width: 44px;
        min-height: 44px;
    }
    .ticket-action-btn[b-g2xxwyov9v] {
        width: 44px;
        height: 44px;
    }
}

/* Counter orders bar */
.counter-orders-bar[b-g2xxwyov9v] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
}
.counter-orders-header[b-g2xxwyov9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}
.counter-orders-header .close-btn[b-g2xxwyov9v] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px 6px;
}
.counter-orders-chips[b-g2xxwyov9v] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.counter-chip[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.counter-chip:hover[b-g2xxwyov9v] { border-color: var(--brand); }
.counter-chip.active[b-g2xxwyov9v] {
    border-color: var(--brand);
    background: #fef2f2;
    font-weight: 700;
}
.counter-chip.paid[b-g2xxwyov9v] {
    border-color: #10b981;
    background: #ecfdf5;
}
/* Ready for pickup — pulsing green halo so the operator spots the chip
   at a glance when "Laura" is done. Starbucks / coffee-shop convention:
   the order is ready to hand off. Uses a before-pseudo pulse ring to
   avoid interfering with the chip's own border. */
.counter-chip.ready[b-g2xxwyov9v] {
    border-color: #16a34a;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    animation: counterChipReadyPulse-b-g2xxwyov9v 1.6s ease-in-out infinite;
}
.counter-chip .chip-ready-dot[b-g2xxwyov9v] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    flex-shrink: 0;
}
@keyframes counterChipReadyPulse-b-g2xxwyov9v {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
.counter-chip .chip-label[b-g2xxwyov9v] { font-weight: 700; font-size: 14px; }
.counter-chip .chip-display-no[b-g2xxwyov9v] { color: #94a3b8; font-size: 11px; font-weight: 500; }
.counter-chip .chip-total[b-g2xxwyov9v] { color: #64748b; font-size: 12px; }
.counter-chip .chip-badge[b-g2xxwyov9v] {
    font-size: 10px;
    font-weight: 800;
    color: #10b981;
    text-transform: uppercase;
}
.counter-chip .chip-badge.ready-badge[b-g2xxwyov9v] {
    color: #15803d;
    font-weight: 900;
}
/* Fulfillment pill so staff never mistake a kiosk eat-in order for takeaway.
   Dine-in is amber (stands out = "do NOT bag this"); takeaway is calm blue. */
.counter-chip .chip-fulfillment[b-g2xxwyov9v] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.counter-chip .chip-fulfillment.dine-in[b-g2xxwyov9v] { background: #fef3c7; color: #92400e; }
.counter-chip .chip-fulfillment.takeaway[b-g2xxwyov9v] { background: #e0f2fe; color: #075985; }
.counter-chip .chip-items[b-g2xxwyov9v] {
    background: #e2e8f0;
    border-radius: 999px;
    font-size: 11px;
    padding: 0 6px;
    font-weight: 700;
}
.counter-label-active[b-g2xxwyov9v] {
    background: var(--brand) !important;
    color: #fff !important;
    opacity: 1 !important;
    font-weight: 700;
}

/* Trial warning notice */
.pos-trial-notice[b-g2xxwyov9v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.08);
    border-bottom: 1px solid rgba(245, 158, 11, 0.12);
    font-size: 0.75rem;
    color: #fbbf24;
    min-height: 30px;
}

.pos-trial-notice.urgent[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.08);
    border-bottom-color: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.pos-trial-dismiss[b-g2xxwyov9v] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.15s;
}

.pos-trial-dismiss:hover[b-g2xxwyov9v] {
    opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   Phone modal sizing. Several POS modals are `overflow:hidden` with no
   max-height and no scrollable body, so on a phone — especially with the
   in-app note keyboard up, or in landscape — the footer/action buttons get
   clipped with no way to scroll to them. Cap each at the dynamic viewport
   and make the long region scroll. Last in source order; no later
   un-mediated rule redefines these properties. */
@media (max-width: 600px) {
    /* Note / new-ticket modal: header + body + (optional keyboard) +
       actions. Flex column so the body scrolls and the action buttons
       stay reachable even with the keyboard open. */
    .label-modal[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        max-height: 96dvh;
    }
    .label-modal-header[b-g2xxwyov9v],
    .label-modal-actions[b-g2xxwyov9v],
    .note-keyboard[b-g2xxwyov9v] {
        flex-shrink: 0;
    }
    .label-modal-body[b-g2xxwyov9v] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }

    /* Table-picker / move-table: header + scroll grid + footer. Let the
       grid flex to fill instead of a rigid 45vh so header+grid+footer
       always fit within the capped card. */
    .table-picker-modal[b-g2xxwyov9v],
    .move-table-modal[b-g2xxwyov9v] {
        display: flex;
        flex-direction: column;
        max-height: 96dvh;
    }
    .picker-grid-container[b-g2xxwyov9v],
    .move-tables-grid-container[b-g2xxwyov9v] {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    /* mdd / menu-management already scroll (max-height:85vh + overflow);
       cap to the dynamic viewport so the mobile URL bar can't eat the
       footer, and tighten the mdd body padding for 390px. */
    .mdd-modal[b-g2xxwyov9v],
    .menu-mgmt-modal[b-g2xxwyov9v] {
        max-height: 92dvh;
    }
    .mdd-modal[b-g2xxwyov9v] {
        padding: 16px;
    }
}

/* Staff-discount PIN modal footer. The inherited .pin-actions is a horizontal
   row built for two buttons; this modal has three (Aplicar / Cancelar / Quitar)
   plus a long destructive label, which overflowed the narrow pin-modal and
   clipped "Cancelar". Stack them: full-width primary, full-width cancel, and a
   de-emphasized "Quitar" link underneath. Scoped — never touch global
   .pin-actions (shared by the manager-PIN and manual-discount modals). */
.sd-pin-actions[b-g2xxwyov9v] {
    flex-direction: column;
    gap: 8px;
}

.sd-pin-actions .modal-cta.pin-authorize[b-g2xxwyov9v],
.sd-pin-actions .pin-cancel[b-g2xxwyov9v] {
    width: 100%;
}

.sd-pin-remove[b-g2xxwyov9v] {
    width: 100%;
    background: transparent;
    border: none;
    color: #fca5a5;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.sd-pin-remove:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.12);
}

.sd-pin-remove:disabled[b-g2xxwyov9v] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Quitar promoted to the primary action when a discount is already applied. */
.sd-pin-remove--primary[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 13px;
    font-size: 0.9rem;
}
.sd-pin-remove--primary:hover:not(:disabled)[b-g2xxwyov9v] {
    background: rgba(239, 68, 68, 0.2);
}

/* Pre-apply preview: order total + per-category rate chips. */
.sd-preview[b-g2xxwyov9v] {
    text-align: center;
    margin-bottom: 14px;
}
.sd-preview-total[b-g2xxwyov9v] {
    color: #cbd5e1;
    font-size: 0.95rem;
}
.sd-preview-total b[b-g2xxwyov9v] {
    color: #f8fafc;
    font-weight: 800;
}
.sd-preview-chips[b-g2xxwyov9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}
.sd-chip[b-g2xxwyov9v] {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
}
.sd-chip b[b-g2xxwyov9v] {
    color: #e0e7ff;
    font-weight: 800;
}
.sd-chip--muted[b-g2xxwyov9v] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}
.sd-chip--muted b[b-g2xxwyov9v] {
    color: #cbd5e1;
}
.sd-preview-norates[b-g2xxwyov9v] {
    margin-top: 10px;
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Applied state: a confirmation banner instead of the PIN pad. */
.sd-applied[b-g2xxwyov9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 8px 10px;
    text-align: center;
}
.sd-applied-check[b-g2xxwyov9v] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
.sd-applied-text[b-g2xxwyov9v] {
    color: #e2e8f0;
    font-size: 0.95rem;
}
.sd-applied-text b[b-g2xxwyov9v] {
    color: #f8fafc;
}
.sd-applied-amt[b-g2xxwyov9v] {
    color: #4ade80;
    font-weight: 800;
    font-size: 1.5rem;
}
.sd-applied-sub[b-g2xxwyov9v] {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Indigo PIN dots — override the inherited amber so the modal matches the
   indigo accent. Extra .pin-modal qualifier beats the global dark rule
   (:root[data-theme="dark"] .pin-dot.filled) on specificity. */
.pin-modal .sd-pin-dots .pin-dot.filled[b-g2xxwyov9v] {
    background: #6366f1;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 2px 8px rgba(99, 102, 241, 0.35);
}


/* ---- Mobile POS polish (phone signups land here from web signup) ---- */
/* Comandas discovery: phone-only, hidden on desktop/tablet. */
.pos-comandas-hint[b-g2xxwyov9v] { display: none; }
@media (max-width: 600px) {
    /* The all-disabled payment bar floated mid-screen above an empty ticket
       and read as broken; hide it on phones until the ticket has lines. */
    .payment-bar.payment-bar-empty[b-g2xxwyov9v] { display: none; }
    /* Shrink the blue/purple empty-carta hero so it stops dominating the
       first phone screen and leaves room for the Comandas hint. */
    .empty-onboarding-card[b-g2xxwyov9v] { max-width: calc(100vw - 24px); }
    .empty-onboarding-card .empty-onboarding-icon[b-g2xxwyov9v] { font-size: 2.4rem; }
    /* Show the Comandas discovery link on phones. */
    .pos-comandas-hint[b-g2xxwyov9v] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fff;
        text-decoration: none;
        font-size: 0.86rem;
        line-height: 1.4;
    }
    .pos-comandas-hint strong[b-g2xxwyov9v] { font-weight: 700; }
}
/* /Pages/Pricing.razor.rz.scp.css */
[b-3ii1yr2186] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

[b-3ii1yr2186] .section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-3ii1yr2186] .section-sub {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0 0 32px;
}

/* ===== HERO ===== */

[b-3ii1yr2186] .pricing-hero {
    padding: 80px 0 56px;
    text-align: center;
    background: radial-gradient(ellipse at center top, rgba(239, 68, 68, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 30% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-3ii1yr2186] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-3ii1yr2186] .pricing-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-3ii1yr2186] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

[b-3ii1yr2186] .billing-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

[b-3ii1yr2186] .bt-btn {
    padding: 8px 22px;
    background: transparent;
    border: 0;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

[b-3ii1yr2186] .bt-btn.active {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

[b-3ii1yr2186] .bt-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 6px;
}

/* ===== PLANS ===== */

[b-3ii1yr2186] .plans {
    padding: 24px 0 64px;
}

[b-3ii1yr2186] .plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

[b-3ii1yr2186] .plan-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

[b-3ii1yr2186] .plan-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

[b-3ii1yr2186] .plan-highlight {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2), 0 12px 40px rgba(239, 68, 68, 0.15);
}

[b-3ii1yr2186] .plan-highlight:hover {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 18px 48px rgba(239, 68, 68, 0.25);
}

[b-3ii1yr2186] .plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

[b-3ii1yr2186] .plan-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f1f5f9;
}

[b-3ii1yr2186] .plan-tag {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 4px 0 0;
    min-height: 2.5em;
}

[b-3ii1yr2186] .plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 18px;
}

[b-3ii1yr2186] .plan-currency {
    color: #cbd5e1;
    font-size: 1.4rem;
    font-weight: 600;
}

[b-3ii1yr2186] .plan-amount {
    color: #f1f5f9;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

[b-3ii1yr2186] .plan-period {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

[b-3ii1yr2186] .plan-billed {
    color: #64748b;
    font-size: 0.78rem;
    margin-top: 4px;
}

[b-3ii1yr2186] .plan-cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-3ii1yr2186] .plan-cta.primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

[b-3ii1yr2186] .plan-cta.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
}

[b-3ii1yr2186] .plan-cta.secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-3ii1yr2186] .plan-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[b-3ii1yr2186] .plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-3ii1yr2186] .plan-features li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.45;
}

[b-3ii1yr2186] .plan-features .check {
    color: #34d399;
    font-weight: 800;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

[b-3ii1yr2186] .plan-features .check.star {
    color: #fbbf24;
}

[b-3ii1yr2186] .plan-features .feature-highlight {
    color: #f1f5f9;
    font-weight: 600;
}

/* ===== BUFFET CALLOUT ===== */

[b-3ii1yr2186] .buffet-callout {
    padding: 24px 0 48px;
}

[b-3ii1yr2186] .bc-card {
    display: flex;
    gap: 32px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 24px;
    padding: 40px;
    align-items: flex-start;
}

[b-3ii1yr2186] .bc-emoji {
    font-size: 4rem;
    line-height: 1;
    flex-shrink: 0;
}

[b-3ii1yr2186] .bc-eyebrow {
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

[b-3ii1yr2186] .bc-body h2 {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

[b-3ii1yr2186] .bc-body p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 18px;
}

[b-3ii1yr2186] .bc-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

[b-3ii1yr2186] .bc-bullets li {
    color: #cbd5e1;
    font-size: 0.92rem;
}

[b-3ii1yr2186] .bc-link {
    color: #fbbf24;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
}

[b-3ii1yr2186] .bc-link:hover {
    color: #fde047;
}

/* ===== COMPARISON TABLE ===== */

[b-3ii1yr2186] .compare {
    padding: 64px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .compare-wrapper {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
}

[b-3ii1yr2186] .compare-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    min-width: 720px;
}

[b-3ii1yr2186] .compare-table thead th {
    background: rgba(255, 255, 255, 0.03);
    color: #f1f5f9;
    font-weight: 700;
    text-align: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.92rem;
}

[b-3ii1yr2186] .compare-table thead .th-highlight {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.08) 100%);
    color: #fca5a5;
}

[b-3ii1yr2186] .compare-table .row-group td {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-weight: 700;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[b-3ii1yr2186] .compare-table tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 0.92rem;
    text-align: center;
}

[b-3ii1yr2186] .compare-table .cell-feature {
    text-align: left;
    color: #f1f5f9;
}

[b-3ii1yr2186] .compare-table tbody .th-highlight {
    background: rgba(239, 68, 68, 0.04);
}

[b-3ii1yr2186] .compare-table .tick {
    color: #34d399;
    font-weight: 800;
    font-size: 1.05rem;
}

[b-3ii1yr2186] .compare-table .dash {
    color: #475569;
}

[b-3ii1yr2186] .compare-table .tier-text {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===== FAQ ===== */

[b-3ii1yr2186] .faq {
    padding: 64px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

[b-3ii1yr2186] .faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px 22px;
}

[b-3ii1yr2186] .faq-item summary {
    cursor: pointer;
    color: #f1f5f9;
    font-weight: 600;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-3ii1yr2186] .faq-item summary::-webkit-details-marker { display: none; }

[b-3ii1yr2186] .faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    color: #94a3b8;
    transition: transform 0.2s;
}

[b-3ii1yr2186] .faq-item[open] summary::after {
    transform: rotate(45deg);
}

[b-3ii1yr2186] .faq-answer {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-top: 12px;
}

/* ===== CTA STRIP ===== */

[b-3ii1yr2186] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-3ii1yr2186] .cta-strip h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-3ii1yr2186] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-3ii1yr2186] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

[b-3ii1yr2186] .btn-primary,
[b-3ii1yr2186] .btn-secondary {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-3ii1yr2186] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-3ii1yr2186] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-3ii1yr2186] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-3ii1yr2186] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-3ii1yr2186] .plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    [b-3ii1yr2186] .bc-card {
        flex-direction: column;
        gap: 20px;
    }
    [b-3ii1yr2186] .bc-emoji {
        font-size: 3rem;
    }
    [b-3ii1yr2186] .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    [b-3ii1yr2186] .plan-grid {
        grid-template-columns: 1fr;
    }
    [b-3ii1yr2186] .bc-bullets {
        grid-template-columns: 1fr;
    }
    [b-3ii1yr2186] .pricing-hero {
        padding: 56px 0 40px;
    }
    [b-3ii1yr2186] .pricing-hero h1 {
        font-size: 2.2rem;
    }
    [b-3ii1yr2186] .section-title {
        font-size: 1.8rem;
    }
}
/* /Pages/Products.razor.rz.scp.css */
[b-wogah2zcxi] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HERO ===== */

[b-wogah2zcxi] .prod-hero {
    padding: 96px 0 48px;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-wogah2zcxi] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-wogah2zcxi] .prod-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-wogah2zcxi] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

[b-wogah2zcxi] .quick-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

[b-wogah2zcxi] .quick-jump a {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

[b-wogah2zcxi] .quick-jump a:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[b-wogah2zcxi] .quick-jump-new {
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fde047 !important;
}

[b-wogah2zcxi] .new-pill {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== FEATURE SECTION ===== */

[b-wogah2zcxi] .feat-section {
    padding: 72px 0;
}

[b-wogah2zcxi] .feat-section.feat-alt {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-wogah2zcxi] .feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

[b-wogah2zcxi] .feat-flip .feat-text { order: 2; }
[b-wogah2zcxi] .feat-flip .feat-mock { order: 1; }

[b-wogah2zcxi] .feat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

[b-wogah2zcxi] .feat-icon.big {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 18px;
    flex-shrink: 0;
}

[b-wogah2zcxi] .feat-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #f1f5f9;
}

[b-wogah2zcxi] .feat-lead {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

[b-wogah2zcxi] .feat-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-wogah2zcxi] .feat-bullets > div {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}

[b-wogah2zcxi] .feat-bullets > div::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 800;
}

[b-wogah2zcxi] .feat-bullets strong {
    color: #f1f5f9;
}

[b-wogah2zcxi] .feat-mock {
    display: flex;
    justify-content: center;
}

/* ===== POS MOCK ===== */

[b-wogah2zcxi] .pos-mock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 460px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .pos-tile {
    aspect-ratio: 1;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #f1f5f9;
}

[b-wogah2zcxi] .pos-tile.free {
    background: #1e293b;
    color: #94a3b8;
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .pos-tile.occupied {
    background: linear-gradient(135deg, #064e3b, #047857);
}

[b-wogah2zcxi] .pos-tile.occupied.warn {
    background: linear-gradient(135deg, #7c2d12, #ea580c);
}

[b-wogah2zcxi] .pos-tile.reserved {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .pos-label { font-weight: 800; }
[b-wogah2zcxi] .pos-time { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; }
[b-wogah2zcxi] .pos-total { font-weight: 800; font-size: 0.85rem; }
[b-wogah2zcxi] .pos-tag { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; margin-top: 2px; }

/* ===== KDS MOCK ===== */

[b-wogah2zcxi] .kds-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 520px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .kds-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-wogah2zcxi] .kds-h {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[b-wogah2zcxi] .kds-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid #34d399;
    border-radius: 6px;
    padding: 8px 10px;
}

[b-wogah2zcxi] .kds-card.prep { border-left-color: #fbbf24; }
[b-wogah2zcxi] .kds-card.ready { border-left-color: #34d399; opacity: 0.7; }

[b-wogah2zcxi] .kds-table {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.78rem;
    margin-bottom: 4px;
}

[b-wogah2zcxi] .kds-line {
    color: #cbd5e1;
    font-size: 0.74rem;
    padding: 1px 0;
}

/* ===== QR MOCK ===== */

[b-wogah2zcxi] .qr-frame {
    width: 280px;
    background: #1f2937;
    border-radius: 32px;
    padding: 14px 12px;
    border: 6px solid #111827;
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.6);
    transform: rotate(2deg);
}

[b-wogah2zcxi] .qr-mock-inner {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 22px;
    padding: 18px 16px;
    color: #1f2937;
}

[b-wogah2zcxi] .qrm-h { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
[b-wogah2zcxi] .qrm-cat { font-size: 0.78rem; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
[b-wogah2zcxi] .qrm-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(180, 83, 9, 0.2);
    font-size: 0.85rem;
}
[b-wogah2zcxi] .qrm-name { font-weight: 600; }
[b-wogah2zcxi] .qrm-price { font-weight: 800; }
[b-wogah2zcxi] .qrm-cart {
    display: flex;
    justify-content: space-between;
    background: #1f2937;
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 700;
}
[b-wogah2zcxi] .qrm-total { color: #fbbf24; }

/* ===== BUFFET HIGHLIGHT ===== */

[b-wogah2zcxi] .feat-buffet {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

[b-wogah2zcxi] .feat-buffet-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 40px;
    max-width: 760px;
}

[b-wogah2zcxi] .feat-eyebrow.buffet-eyebrow {
    display: inline-block;
    color: #fde047;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 999px;
    margin-bottom: 12px;
}

[b-wogah2zcxi] .feat-buffet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

[b-wogah2zcxi] .bf-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    transition: border-color 0.15s, transform 0.15s;
}

[b-wogah2zcxi] .bf-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
}

[b-wogah2zcxi] .bf-icon {
    font-size: 1.6rem;
    margin-bottom: 14px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.18));
    align-items: center;
    justify-content: center;
}

[b-wogah2zcxi] .bf-card h3 {
    font-size: 1.1rem;
    color: #f1f5f9;
    margin: 0 0 8px;
    font-weight: 700;
}

[b-wogah2zcxi] .bf-card p {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

[b-wogah2zcxi] .feat-buffet-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== RESERVAS ===== */

[b-wogah2zcxi] .res-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .res-h {
    color: #a78bfa;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

[b-wogah2zcxi] .res-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
}

[b-wogah2zcxi] .res-row:last-child { border-bottom: 0; }

[b-wogah2zcxi] .res-time { color: #a78bfa; font-weight: 700; font-family: 'Courier New', monospace; }

[b-wogah2zcxi] .res-state.ok { color: #34d399; font-weight: 600; font-size: 0.78rem; }
[b-wogah2zcxi] .res-state.pend { color: #fbbf24; font-weight: 600; font-size: 0.78rem; }

/* ===== INVENTARIO ===== */

[b-wogah2zcxi] .inv-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .inv-row {
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

[b-wogah2zcxi] .inv-name { color: #f1f5f9; font-size: 0.88rem; font-weight: 600; }

[b-wogah2zcxi] .inv-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
[b-wogah2zcxi] .inv-bar > div { height: 100%; }

[b-wogah2zcxi] .inv-q { color: #cbd5e1; font-size: 0.78rem; text-align: right; }
[b-wogah2zcxi] .inv-row.low .inv-q span { display: block; color: #ef4444; font-weight: 700; }
[b-wogah2zcxi] .inv-row.warn .inv-q { color: #fbbf24; }

/* ===== REPORTES ===== */

[b-wogah2zcxi] .rep-card {
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-wogah2zcxi] .rep-h {
    color: #38bdf8;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

[b-wogah2zcxi] .rep-big {
    color: #f1f5f9;
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

[b-wogah2zcxi] .rep-delta {
    color: #34d399;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 6px 0 18px;
}

[b-wogah2zcxi] .rep-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-items: end;
    height: 120px;
}

[b-wogah2zcxi] .rep-bars > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

[b-wogah2zcxi] .rb {
    width: 100%;
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    border-radius: 4px;
}

[b-wogah2zcxi] .rb.hot { background: linear-gradient(180deg, #f59e0b, #ef4444); }

[b-wogah2zcxi] .rep-bars span { color: #94a3b8; font-size: 0.72rem; font-weight: 700; }

/* ===== APP MOCK ===== */

[b-wogah2zcxi] .phone {
    width: 240px;
    background: #1f2937;
    border-radius: 36px;
    padding: 14px 10px;
    border: 5px solid #111827;
    box-shadow: 0 32px 60px rgba(0, 0, 0, 0.6);
    transform: rotate(-2deg);
}

[b-wogah2zcxi] .phone-screen {
    background: linear-gradient(180deg, #0f172a, #1e1b4b);
    border-radius: 26px;
    padding: 20px 14px;
    color: #f1f5f9;
}

[b-wogah2zcxi] .ph-h { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }

[b-wogah2zcxi] .ph-cart { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 12px; margin-bottom: 12px; }

[b-wogah2zcxi] .ph-l {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
    color: #cbd5e1;
}

[b-wogah2zcxi] .ph-btn {
    width: 100%;
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #fff;
    border: 0;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
}

/* ===== CTA STRIP ===== */

[b-wogah2zcxi] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-wogah2zcxi] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-wogah2zcxi] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-wogah2zcxi] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

[b-wogah2zcxi] .btn-primary,
[b-wogah2zcxi] .btn-secondary {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-wogah2zcxi] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

[b-wogah2zcxi] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.5);
}

[b-wogah2zcxi] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-wogah2zcxi] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1080px) {
    [b-wogah2zcxi] .feat-buffet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 880px) {
    [b-wogah2zcxi] .feat-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    [b-wogah2zcxi] .feat-flip .feat-text { order: unset; }
    [b-wogah2zcxi] .feat-flip .feat-mock { order: unset; }
    [b-wogah2zcxi] .feat-section { padding: 56px 0; }
    [b-wogah2zcxi] .feat-buffet-head { flex-direction: column; gap: 16px; }
}

@media (max-width: 640px) {
    [b-wogah2zcxi] .feat-buffet-grid {
        grid-template-columns: 1fr;
    }
    [b-wogah2zcxi] .pos-mock { grid-template-columns: repeat(3, 1fr); }
    [b-wogah2zcxi] .kds-board { grid-template-columns: 1fr; max-width: 360px; }
}
/* /Pages/Public/InvoiceRequest.razor.rz.scp.css */
/* Mobile-first responsive design */
.invoice-page[b-pyuz39gpsf] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading state */
.loading[b-pyuz39gpsf] {
    text-align: center;
    color: white;
}

.spinner[b-pyuz39gpsf] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-pyuz39gpsf 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-pyuz39gpsf {
    to { transform: rotate(360deg); }
}

/* Cards */
.invoice-card[b-pyuz39gpsf],
.error-card[b-pyuz39gpsf],
.success-card[b-pyuz39gpsf] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

/* Error card */
.error-card[b-pyuz39gpsf] {
    padding: 40px 24px;
    text-align: center;
}

.error-icon[b-pyuz39gpsf] {
    width: 64px;
    height: 64px;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    margin: 0 auto 16px;
}

.error-card h2[b-pyuz39gpsf] {
    margin: 0 0 8px;
    color: #1e293b;
}

.error-card p[b-pyuz39gpsf] {
    margin: 0;
    color: #64748b;
}

/* Success card */
.success-card[b-pyuz39gpsf] {
    padding: 40px 24px;
    text-align: center;
}

.success-icon[b-pyuz39gpsf] {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 20px;
}

.success-card h2[b-pyuz39gpsf] {
    margin: 0 0 8px;
    color: #1e293b;
}

.success-card p[b-pyuz39gpsf] {
    margin: 0 0 24px;
    color: #64748b;
}

/* Invoice card header */
.card-header[b-pyuz39gpsf] {
    background: #1e293b;
    color: white;
    padding: 24px;
    text-align: center;
}

.card-header h1[b-pyuz39gpsf] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}

.invoice-badge[b-pyuz39gpsf] {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
}

/* Invoice summary */
.invoice-summary[b-pyuz39gpsf] {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.summary-row[b-pyuz39gpsf] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.summary-row .label[b-pyuz39gpsf] {
    color: #64748b;
}

.summary-row .value[b-pyuz39gpsf] {
    font-weight: 500;
    color: #1e293b;
}

.summary-row.total .value[b-pyuz39gpsf] {
    font-size: 24px;
    font-weight: 700;
    color: #059669;
}

/* Already requested info */
.already-requested[b-pyuz39gpsf] {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: #eff6ff;
    border-bottom: 1px solid #e2e8f0;
}

.info-icon[b-pyuz39gpsf] {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.already-requested strong[b-pyuz39gpsf] {
    color: #1e40af;
    display: block;
    margin-bottom: 4px;
}

.already-requested p[b-pyuz39gpsf] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* Form */
form[b-pyuz39gpsf] {
    padding: 24px;
}

form h2[b-pyuz39gpsf] {
    margin: 0 0 20px;
    font-size: 18px;
    color: #1e293b;
}

.form-group[b-pyuz39gpsf] {
    margin-bottom: 16px;
}

.form-group label[b-pyuz39gpsf] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-group input[b-pyuz39gpsf] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-group input:focus[b-pyuz39gpsf] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input[b-pyuz39gpsf]::placeholder {
    color: #9ca3af;
}

.form-error[b-pyuz39gpsf] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Buttons */
.btn[b-pyuz39gpsf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    text-decoration: none;
}

.btn-primary[b-pyuz39gpsf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-pyuz39gpsf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

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

.btn-full[b-pyuz39gpsf] {
    width: 100%;
}

.btn-spinner[b-pyuz39gpsf] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-pyuz39gpsf 0.8s linear infinite;
}

/* Footer note */
.footer-note[b-pyuz39gpsf] {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.footer-note p[b-pyuz39gpsf] {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .invoice-page[b-pyuz39gpsf] {
        padding: 12px;
    }

    .card-header[b-pyuz39gpsf] {
        padding: 20px 16px;
    }

    .invoice-summary[b-pyuz39gpsf],
    form[b-pyuz39gpsf] {
        padding: 16px;
    }

    .summary-row.total .value[b-pyuz39gpsf] {
        font-size: 20px;
    }
}

/* Safe area for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .invoice-page[b-pyuz39gpsf] {
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}
/* /Pages/QrBuffet.razor.rz.scp.css */
[b-866ycawge1] .screen {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 800px 400px at 50% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, #0a0c12 0%, #1e1b4b 100%);
    color: #f1f5f9;
    padding: 24px 20px;
    box-sizing: border-box;
    /* Tells the browser to render native widgets (select dropdown
       options, scrollbars, focus rings) with dark-mode chrome. Without
       this, the lang <select>'s options render as black text on a
       white panel inside an otherwise-dark UI. */
    color-scheme: dark;
}

[b-866ycawge1] .screen.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
    padding-top: 56px;
    padding-bottom: 40px;
}

[b-866ycawge1] .screen.welcome {
    max-width: 520px;
    margin: 0 auto;
}

/* Soft glow sphere behind the title — gives the page a high-end feel
   on first paint without distracting from the content. */
[b-866ycawge1] .screen.welcome::before {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

[b-866ycawge1] .screen.welcome > * {
    position: relative;
    z-index: 1;
}

[b-866ycawge1] .muted {
    color: #94a3b8;
}

[b-866ycawge1] .hint {
    color: #94a3b8;
    font-size: 0.82rem;
    margin-top: 10px;
    text-align: left;
    padding-left: 2px;
}

[b-866ycawge1] .guest-row .hint {
    color: #fbbf24;
    margin-top: 10px;
    font-weight: 500;
}

[b-866ycawge1] .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-866ycawge1 1s linear infinite;
}

@keyframes spin-b-866ycawge1 {
    to { transform: rotate(360deg); }
}

/* Welcome heading — solid bright yellow with a strong drop shadow.
   We previously layered a gradient-text effect (color:transparent +
   background-clip:text) but the @supports gate matched on browsers
   where the effect rendered MUDDY/dark anyway (operator report
   2026-05-12 with screenshot). Dropping the effect entirely is the
   only way to guarantee the heading reads on every device. The
   solid colour is still vivid against the dark theme; the
   text-shadow gives it depth without the gradient gamble. */
[b-866ycawge1] .welcome h1 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin: 4px 0 6px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--qr-accent, #fde047) !important;
    -webkit-text-fill-color: var(--qr-accent, #fde047) !important;
    background: none !important;
    text-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}

/* When a hero image is configured the page sets the --qr-hero-bg
   variable to "linear-gradient(overlay, overlay), url(...)" — both the
   dark veil and the image come in together. When unset the background
   falls back to the page default (no overlay). */
[b-866ycawge1] .screen.welcome {
    background: var(--qr-hero-bg, transparent);
    background-size: cover;
    background-position: center;
}

/* Brand logo on the welcome screen — sits above the title. Restaurant
   sets it in Admin → Buffet → Apariencia. Falls back to nothing if not
   configured. Sized so it doesn't compete with the welcome headline. */
[b-866ycawge1] .qrbuf-brand-logo {
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    margin: 4px auto 8px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

/* Promo banner — single coloured pill above the featured strip. Background
   + text color come from the admin config; if not set, defaults to the
   restaurant's brand accent. Click navigates to the optional URL. */
[b-866ycawge1] .qbf-promo-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex-wrap: wrap;
    margin: 12px 8px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
[b-866ycawge1] .qbf-promo-text { flex: 1; min-width: 0; }
[b-866ycawge1] .qbf-promo-countdown {
    background: rgba(0, 0, 0, 0.22);
    color: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    white-space: nowrap;
}
[b-866ycawge1] a.qbf-promo-banner:hover { opacity: 0.92; }

/* Featured carousel — horizontal scroll strip with card-style tiles.
   On mobile the cards stay ~140px so 2 fit on screen with the third
   peeking; on desktop they grow. Snap-scrolling so swipe lands cleanly. */
[b-866ycawge1] .qbf-featured-strip {
    margin: 8px 0 12px;
    padding: 0 8px;
}
[b-866ycawge1] .qbf-featured-title {
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.03em;
}
[b-866ycawge1] .qbf-featured-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
[b-866ycawge1] .qbf-featured-track::-webkit-scrollbar { display: none; }
[b-866ycawge1] .qbf-featured-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column;
    padding: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
    color: inherit;
}
[b-866ycawge1] .qbf-featured-card:hover {
    transform: translateY(-2px);
    border-color: var(--qr-accent, #fde047);
}
[b-866ycawge1] .qbf-featured-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: rgba(15, 23, 42, 0.5);
    display: block;
}
[b-866ycawge1] .qbf-featured-img.empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    color: #475569;
}
[b-866ycawge1] .qbf-featured-name {
    padding: 8px 10px 4px;
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.88rem;
    line-height: 1.25;
    /* Clamp to 2 lines max so the carousel stays a consistent height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Customer feedback widget on the Expired view. 1-tap stars; the comment
   + buttons collapse until the customer signals intent. Light footprint;
   designed for the "I just paid, ask quickly" moment. */
[b-866ycawge1] .qbf-feedback {
    margin-top: 26px;
    padding: 18px 20px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    max-width: 360px;
    width: 100%;
}
[b-866ycawge1] .qbf-feedback-prompt {
    margin: 0 0 10px;
    text-align: center;
    color: #cbd5e1;
    font-weight: 600;
}
[b-866ycawge1] .qbf-stars {
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: 12px;
}
[b-866ycawge1] .qbf-star {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 2.2rem;
    color: rgba(148, 163, 184, 0.4);
    padding: 4px;
    line-height: 1;
    transition: transform 0.08s ease, color 0.12s ease;
}
[b-866ycawge1] .qbf-star:hover { transform: scale(1.08); }
[b-866ycawge1] .qbf-star.filled { color: var(--qr-accent, #fde047); }
[b-866ycawge1] .qbf-feedback-comment {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #f1f5f9;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 10px;
    box-sizing: border-box;
}
[b-866ycawge1] .qbf-feedback-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}
[b-866ycawge1] .qbf-feedback-skip {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
}
[b-866ycawge1] .qbf-feedback-submit {
    background: var(--qr-accent, #fde047);
    color: #1a1400;
    border: none;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}
[b-866ycawge1] .qbf-feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
[b-866ycawge1] .qbf-feedback-thanks {
    margin-top: 20px;
    color: #4ade80;
    font-weight: 600;
}

[b-866ycawge1] .qbf-featured-pill {
    margin: 4px 10px 10px;
    background: var(--qr-accent, #fde047);
    color: #1a1400;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    letter-spacing: 0.04em;
}

[b-866ycawge1] .welcome .muted {
    font-size: 0.95rem;
    color: #cbd5e1;
    max-width: 360px;
    margin-bottom: 8px;
}

[b-866ycawge1] .guest-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 16px 18px 18px;
    backdrop-filter: blur(8px);
}

[b-866ycawge1] .guest-row-label {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
}

[b-866ycawge1] .guest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

[b-866ycawge1] .kids-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* ===== Allergy notes (welcome screen + menu badge) ===== */

[b-866ycawge1] .allergy-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 380px;
    margin: 6px 0 0;
}

[b-866ycawge1] .allergy-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

[b-866ycawge1] .allergy-toggle:hover,
[b-866ycawge1] .allergy-toggle.open {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

[b-866ycawge1] .allergy-textarea {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f1f5f9;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.18s, box-shadow 0.18s;
}

[b-866ycawge1] .allergy-textarea:focus {
    outline: none;
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

[b-866ycawge1] .allergy-row .hint {
    color: #94a3b8;
    font-size: 0.78rem;
    margin: 0;
    text-align: left;
    padding-left: 2px;
}

/* Persistent allergy reminder on the menu view — sticky chip below
   the header so the customer sees their note is on file with the
   kitchen. Amber border to suggest "important info, not a warning". */
[b-866ycawge1] .allergy-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fcd34d;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0 0 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

[b-866ycawge1] .allergy-badge strong {
    color: #fde047;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

[b-866ycawge1] .waste-notice {
    /* Soft amber alert — sets expectation about the waste fee
       without scaring the customer. Sushi-bar industry norm. */
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    max-width: 380px;
    margin: 4px 0;
    text-align: center;
}

[b-866ycawge1] .group-banner {
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.98rem;
    margin: 12px 0 4px;
    box-shadow: 0 10px 28px rgba(236, 72, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    max-width: 380px;
    text-align: center;
    animation: gb-shimmer-b-866ycawge1 3s ease-in-out infinite;
}

@keyframes gb-shimmer-b-866ycawge1 {
    0%, 100% { box-shadow: 0 10px 28px rgba(236, 72, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 14px 36px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

/* Fade-up entrance for the welcome screen elements */
[b-866ycawge1] .screen.welcome > * {
    animation: welcome-in-b-866ycawge1 0.55s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
[b-866ycawge1] .screen.welcome > *:nth-child(1) { animation-delay: 0.05s; }
[b-866ycawge1] .screen.welcome > *:nth-child(2) { animation-delay: 0.12s; }
[b-866ycawge1] .screen.welcome > *:nth-child(3) { animation-delay: 0.18s; }
[b-866ycawge1] .screen.welcome > *:nth-child(4) { animation-delay: 0.24s; }
[b-866ycawge1] .screen.welcome > *:nth-child(5) { animation-delay: 0.30s; }
[b-866ycawge1] .screen.welcome > *:nth-child(6) { animation-delay: 0.36s; }
[b-866ycawge1] .screen.welcome > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes welcome-in-b-866ycawge1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-866ycawge1] .guest-btn {
    padding: 16px 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #f1f5f9;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[b-866ycawge1] .guest-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: -1;
}

[b-866ycawge1] .guest-btn:hover:not(:disabled) {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

[b-866ycawge1] .guest-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-866ycawge1] .guest-btn.selected {
    border-color: transparent;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4), 0 0 0 4px rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
}

[b-866ycawge1] .btn {
    padding: 16px 36px;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s, opacity 0.15s;
    margin-top: 8px;
    min-width: 240px;
}

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

[b-866ycawge1] .btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.5);
    position: relative;
}

/* Idle pulse — only when the button is actually actionable. Draws the
   eye on the welcome screen so the operator/customer's first instinct
   is to tap "Empezar". Stops on hover and when disabled so the cue
   doesn't fight active interaction or fire on a not-yet-ready state. */
[b-866ycawge1] .btn-primary:not(:disabled) {
    animation: btn-primary-pulse-b-866ycawge1 2.4s ease-in-out infinite;
}
[b-866ycawge1] .btn-primary:hover:not(:disabled),
[b-866ycawge1] .btn-primary:active:not(:disabled) {
    animation: none;
}
@keyframes btn-primary-pulse-b-866ycawge1 {
    0%, 100% {
        box-shadow: 0 10px 28px rgba(239, 68, 68, 0.4), 0 0 0 0 rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 14px 32px rgba(239, 68, 68, 0.55), 0 0 0 6px rgba(245, 158, 11, 0.15);
    }
}

[b-866ycawge1] .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
    pointer-events: none;
}

[b-866ycawge1] .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(239, 68, 68, 0.55), 0 0 0 4px rgba(245, 158, 11, 0.2);
}

[b-866ycawge1] .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

[b-866ycawge1] .btn-secondary {
    background: #334155;
    color: #cbd5e1;
}

[b-866ycawge1] .last-call-banner {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 35%, #f59e0b 50%, #dc2626 65%, #b91c1c 100%);
    background-size: 200% 100%;
    color: #fff;
    text-align: center;
    padding: 16px 14px;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: -20px -20px 18px;
    box-shadow: 0 8px 28px rgba(220, 38, 38, 0.6), 0 0 0 0 rgba(239, 68, 68, 0);
    animation: lc-pulse-b-866ycawge1 3s linear infinite, lc-glow-b-866ycawge1 1.6s ease-in-out infinite;
    position: relative;
    z-index: 5;
}

[b-866ycawge1] .last-call-banner::before {
    content: '⚠️';
    margin-right: 8px;
    font-size: 1.1rem;
    animation: lc-shake-b-866ycawge1 1.4s ease-in-out infinite;
    display: inline-block;
}

@keyframes lc-pulse-b-866ycawge1 {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes lc-glow-b-866ycawge1 {
    0%, 100% { box-shadow: 0 8px 28px rgba(220, 38, 38, 0.6), 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 12px 36px rgba(220, 38, 38, 0.75), 0 0 0 6px rgba(239, 68, 68, 0.15); }
}

@keyframes lc-shake-b-866ycawge1 {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}

[b-866ycawge1] .lang-bar.top {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

[b-866ycawge1] .lang-pill {
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}

[b-866ycawge1] .lang-pill:hover:not(.active) {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.04);
}

[b-866ycawge1] .lang-pill.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

[b-866ycawge1] .lang-select {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    padding: 6px 8px;
    font-size: 0.85rem;
}

[b-866ycawge1] .lang-select:focus {
    outline: none;
    border-color: #f59e0b;
}

[b-866ycawge1] .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-866ycawge1] .menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

[b-866ycawge1] .menu-header h2 {
    margin: 6px 0 0;
    font-size: 1.4rem;
}

[b-866ycawge1] .round-pill {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-866ycawge1] .time-left {
    text-align: right;
}

[b-866ycawge1] .time-left .label {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-866ycawge1] .time-left strong {
    font-size: 1.2rem;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

[b-866ycawge1] .cats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
[b-866ycawge1] .cats::-webkit-scrollbar { display: none; }

[b-866ycawge1] .cat-tab {
    flex-shrink: 0;
    padding: 9px 16px;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
}

[b-866ycawge1] .cat-tab:hover:not(.active) {
    border-color: rgba(245, 158, 11, 0.4);
    color: #f1f5f9;
}

[b-866ycawge1] .cat-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

[b-866ycawge1] .cat-tab.drinks-cat {
    border-color: rgba(56, 189, 248, 0.4);
}

[b-866ycawge1] .cat-tab.drinks-cat.active {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.4);
}

[b-866ycawge1] .drinks-notice {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 12px;
}

[b-866ycawge1] .items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 96px;
}

[b-866ycawge1] .item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
    backdrop-filter: blur(8px);
    position: relative;
}

[b-866ycawge1] .item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

[b-866ycawge1] .item.in-round {
    border-color: rgba(245, 158, 11, 0.55);
    background: linear-gradient(135deg, rgba(28, 22, 16, 0.95) 0%, rgba(45, 28, 16, 0.95) 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 8px 24px rgba(245, 158, 11, 0.18);
}

[b-866ycawge1] .item.premium {
    border-color: #a855f7;
    background: linear-gradient(135deg, #1e293b 0%, #2a1d3a 100%);
}

[b-866ycawge1] .item.premium.in-round {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #1c1610 0%, #2a1d3a 100%);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

/* Stock-remaining pill — red gradient, pulsing, sits next to the
   premium star. Only shown when ≤ 5 left today (counter-pressure
   to nudge customers to order before it runs out). */
[b-866ycawge1] .stock-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    background: linear-gradient(90deg, #b91c1c, #dc2626);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
    animation: stock-pulse-b-866ycawge1 1.6s ease-in-out infinite;
}

@keyframes stock-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4); }
    50%      { transform: scale(1.05); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.6); }
}

[b-866ycawge1] .premium-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

[b-866ycawge1] .qty.with-cap {
    color: #a855f7;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

[b-866ycawge1] .item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-866ycawge1] .item.in-round img {
    transform: scale(1.04);
}

[b-866ycawge1] .item-body {
    flex: 1;
    min-width: 0;
}

[b-866ycawge1] .item-title {
    font-weight: 600;
    color: #f1f5f9;
}

[b-866ycawge1] .item-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Precautionary cross-contamination warning — amber, prominent enough
   to read at a glance but not an error/blocker (the dish is allowed). */
[b-866ycawge1] .item-trace-warning {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fbbf24;
    margin-top: 4px;
}

[b-866ycawge1] .item-price {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-top: 4px;
}

[b-866ycawge1] .item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

[b-866ycawge1] .step {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.8);
    color: #f1f5f9;
    font-size: 1.4rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s, background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

[b-866ycawge1] .step:active:not(:disabled) {
    transform: scale(0.92);
}

[b-866ycawge1] .step:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

[b-866ycawge1] .step.plus {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

[b-866ycawge1] .step.plus:hover:not(:disabled) {
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55);
    transform: translateY(-1px);
}

[b-866ycawge1] .step.plus:active:not(:disabled) {
    transform: scale(0.92);
}

[b-866ycawge1] .qty {
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    color: #fbbf24;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[b-866ycawge1] .round-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0.85) 0%, rgba(10, 12, 18, 0.98) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(20px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

[b-866ycawge1] .round-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.5) 50%, transparent 100%);
    pointer-events: none;
}

[b-866ycawge1] .round-count {
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 600;
}

[b-866ycawge1] .round-count strong {
    color: #fbbf24;
    font-size: 1.25rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

[b-866ycawge1] .round-bar .btn-primary {
    margin-top: 0;
    min-width: 0;
    padding: 14px 22px;
    font-size: 1rem;
}

[b-866ycawge1] .cap-hit {
    color: #ef4444;
    font-size: 0.82rem;
}

[b-866ycawge1] .hint-inline {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 4px;
}

[b-866ycawge1] .screen.cooldown::before {
    content: '';
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: cd-glow-b-866ycawge1 4s ease-in-out infinite;
}

[b-866ycawge1] .screen.cooldown > * { position: relative; z-index: 1; }

@keyframes cd-glow-b-866ycawge1 {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

[b-866ycawge1] .cooldown h2 {
    font-size: clamp(1.4rem, 3.6vw, 1.8rem);
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 50%, #ef4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(245, 158, 11, 0.25));
}

[b-866ycawge1] .cooldown-text {
    font-size: 1.05rem;
    color: #cbd5e1;
}

[b-866ycawge1] .cooldown-text strong {
    color: #fbbf24;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

[b-866ycawge1] .cooldown-text .ready {
    color: #34d399;
    font-size: 1.3rem;
    font-weight: 800;
    display: inline-block;
    animation: ready-pulse-b-866ycawge1 1.6s ease-in-out infinite;
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.5);
}

@keyframes ready-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

[b-866ycawge1] .rounds-summary {
    color: #94a3b8;
    font-size: 0.9rem;
}

[b-866ycawge1] .rounds-summary strong {
    color: #fbbf24;
}

[b-866ycawge1] .expired h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.2));
}

[b-866ycawge1] .awaiting-icon {
    font-size: 4rem;
    animation: awaiting-bob-b-866ycawge1 2.4s ease-in-out infinite;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
}

[b-866ycawge1] .awaiting-icon::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.3);
    animation: awaiting-ring-b-866ycawge1 2.4s ease-out infinite;
}

/* Stage-specific tint on the awaiting icon — same animation, but the
   ring + radial glow shift colour to signal progress. Green for ready
   = the actionable state (waiter on the way). */
[b-866ycawge1] .awaiting-icon.stage-ready::before {
    border-color: rgba(52, 211, 153, 0.5);
}
[b-866ycawge1] .awaiting-icon.stage-ready::after {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.3) 0%, transparent 70%);
}
[b-866ycawge1] .awaiting-icon.stage-delivered::before {
    border-color: rgba(56, 189, 248, 0.5);
}
[b-866ycawge1] .awaiting-icon.stage-delivered::after {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%);
}

[b-866ycawge1] .awaiting-icon::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
    z-index: -1;
}

@keyframes awaiting-bob-b-866ycawge1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes awaiting-ring-b-866ycawge1 {
    0% { transform: scale(0.85); opacity: 0; border-color: rgba(251, 191, 36, 0.6); }
    50% { opacity: 1; }
    100% { transform: scale(1.18); opacity: 0; border-color: rgba(245, 158, 11, 0.1); }
}

[b-866ycawge1] .awaiting h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3.6vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

[b-866ycawge1] .awaiting .muted {
    max-width: 320px;
}

/* Call-waiter button — small bell in the menu header next to the
   language picker. Inline variant for cooldown/awaiting views uses
   the .btn .btn-secondary base + .call-waiter-inline class for a
   slightly muted look so it doesn't compete with the primary CTA. */
[b-866ycawge1] .call-waiter-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s, box-shadow 0.18s;
    -webkit-tap-highlight-color: transparent;
}

[b-866ycawge1] .call-waiter-btn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

[b-866ycawge1] .call-waiter-btn:active:not(:disabled) {
    transform: scale(0.92);
}

[b-866ycawge1] .call-waiter-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Cooldown state — the bell becomes a countdown chip. Neutral slate so
   it doesn't read as "primary" any more (the call already went out;
   the customer is just waiting). The number inside replaces the bell. */
[b-866ycawge1] .call-waiter-btn.cooldown {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
    opacity: 1;
    cursor: not-allowed;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
[b-866ycawge1] .call-waiter-btn.cooldown .cd-num {
    line-height: 1;
}
[b-866ycawge1] .call-waiter-inline.cooldown {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
    opacity: 1;
    cursor: not-allowed;
}

[b-866ycawge1] .call-waiter-inline {
    margin-top: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

[b-866ycawge1] .call-waiter-inline:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
}

/* Toast variant — the success-green pairs with the call-waiter
   confirmation; the error-red is the default. */
[b-866ycawge1] .error-toast.toast-success {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4);
}

/* Hub-state badge in the menu header — a subtle "reconnecting…" hint
   so the customer knows realtime updates may lag. Spins gently. */
[b-866ycawge1] .hub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fbbf24;
    font-size: 0.95rem;
    font-weight: 700;
    animation: hub-spin-b-866ycawge1 1.6s linear infinite;
    cursor: help;
}

@keyframes hub-spin-b-866ycawge1 {
    to { transform: rotate(360deg); }
}

/* Error toast — shown above the round-bar in the menu view, or under
   the welcome CTA. Replaces silent Console.Error.WriteLine failures. */
[b-866ycawge1] .error-toast {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    margin-top: 8px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.4);
    animation: toast-in-b-866ycawge1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 380px;
}

[b-866ycawge1] .error-toast.floating {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    margin: 0;
    width: calc(100% - 32px);
    max-width: 420px;
}

@keyframes toast-in-b-866ycawge1 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-866ycawge1] .error-toast.floating {
    animation: toast-in-float-b-866ycawge1 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-in-float-b-866ycawge1 {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Keyboard focus rings (orange to match the warm palette) */
[b-866ycawge1] .btn:focus-visible,
[b-866ycawge1] .step:focus-visible,
[b-866ycawge1] .cat-tab:focus-visible,
[b-866ycawge1] .lang-pill:focus-visible,
[b-866ycawge1] .guest-btn:focus-visible,
[b-866ycawge1] .lang-select:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

/* Respect users who prefer reduced motion — keep state changes
   visible but kill the looping/decorative animations. Setting
   `forwards` and explicit terminal opacity prevents the
   awaiting-ring / cd-glow keyframes from freezing mid-cycle and
   leaving the ring stuck visible. */
@media (prefers-reduced-motion: reduce) {
    [b-866ycawge1] *,
    [b-866ycawge1] *::before,
    [b-866ycawge1] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: forwards !important;
        transition-duration: 0.01ms !important;
    }
    [b-866ycawge1] .awaiting-icon::before { opacity: 0 !important; }
    [b-866ycawge1] .screen.cooldown::before { opacity: 0.6 !important; transform: translateX(-50%) scale(1) !important; }
}

/* Staff-driven guest-count waiting state. Big amber clock icon + a
   centered message. /status polls every 4s in this state so the
   transition is near-instant once the waiter opens the session. */
[b-866ycawge1] .staff-pending-icon {
    font-size: 5rem;
    line-height: 1;
    margin: 18px 0 8px;
    animation: staff-pending-pulse-b-866ycawge1 2.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 18px rgba(245, 158, 11, 0.35));
}

@keyframes staff-pending-pulse-b-866ycawge1 {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Allergen chip grid — 4 cols on mobile, taps toggle selection. Selected
   chips glow amber and add a checkmark; unselected stay neutral. The
   grid sits between the toggle button and the free-text textarea on
   the welcome screen. */
[b-866ycawge1] .allergen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 4px 0 10px;
}

[b-866ycawge1] .allergen-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

[b-866ycawge1] .allergen-chip .allergen-icon {
    font-size: 1.3rem;
    line-height: 1;
}

[b-866ycawge1] .allergen-chip .allergen-name {
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

[b-866ycawge1] .allergen-chip:hover {
    border-color: rgba(245, 158, 11, 0.45);
    color: #f1f5f9;
}

[b-866ycawge1] .allergen-chip.on {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

[b-866ycawge1] .allergen-chip.on .allergen-name {
    font-weight: 800;
}
/* /Pages/QrOrder.razor.rz.scp.css */
/* QR Order Page - Mobile-First Design with CSS Variables for Branding */

.qr-order-page[b-yi207ij61k] {
    /* Default values - overridden by inline style from branding */
    --accent: #2196F3;
    --secondary: #4CAF50;
    --header-bg: #FFFFFF;
    --header-text: #333333;

    --font-body: "Space Grotesk", "Segoe UI", sans-serif;
    --font-display: "Fraunces", "Space Grotesk", serif;
    --cart-bar-height: 0px;
    --header-offset: 64px;

    --page-bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #e7ecf2;
    --text: #1f2328;
    --text-muted: #5f6b7a;
    --text-subtle: #8a94a3;
    --border: #e0e0e0;
    --border-strong: #d4dbe3;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
    --input-bg: #f5f5f5;
    --input-text: var(--text);
    --input-placeholder: #9aa2ad;
    --chip-bg: #f2f4f7;
    --chip-text: var(--text-muted);

    --dark-bg: #111418;
    --dark-surface: #1b2026;
    --dark-surface-2: #252c35;
    --dark-surface-3: #2f3843;
    --dark-border: #313a44;
    --dark-border-strong: #3b4652;
    --dark-text: #f5f7fa;
    --dark-text-muted: #b5c0cc;
    --dark-text-subtle: #8793a1;

    min-height: 100vh;
    background: var(--page-bg);
    font-family: var(--font-body);
    color: var(--text);
}

.qr-order-page.theme-classic[b-yi207ij61k] {
    --page-bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #e7ecf2;
    --text: #1f2328;
    --text-muted: #5f6b7a;
    --text-subtle: #8a94a3;
    --border: #e0e0e0;
    --border-strong: #d4dbe3;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
    --input-bg: #f5f5f5;
    --chip-bg: #f2f4f7;

    --dark-bg: #111418;
    --dark-surface: #1b2026;
    --dark-surface-2: #252c35;
    --dark-surface-3: #2f3843;
    --dark-border: #313a44;
    --dark-border-strong: #3b4652;
    --dark-text: #f5f7fa;
    --dark-text-muted: #b5c0cc;
    --dark-text-subtle: #8793a1;
}

.qr-order-page.theme-sand[b-yi207ij61k] {
    --accent: #b8860b;
    --page-bg: linear-gradient(180deg, #f7f1e7 0%, #f3efe8 100%);
    --surface: #fff9f2;
    --surface-2: #f5eadd;
    --surface-3: #eee0d2;
    --text: #2b2118;
    --text-muted: #7c6653;
    --text-subtle: #9b8574;
    --border: #ead9c8;
    --border-strong: #ddc8b5;
    --shadow: rgba(56, 31, 12, 0.08);
    --shadow-strong: rgba(56, 31, 12, 0.18);
    --input-bg: #f7ecdf;
    --chip-bg: #f3e6d8;

    --dark-bg: #17120e;
    --dark-surface: #221a14;
    --dark-surface-2: #2d231b;
    --dark-surface-3: #3a2f24;
    --dark-border: #3a2f24;
    --dark-border-strong: #4a3a2c;
    --dark-text: #f5eee6;
    --dark-text-muted: #c5b4a3;
    --dark-text-subtle: #9f8d7c;
}

.qr-order-page.theme-coast[b-yi207ij61k] {
    --accent: #26a69a;
    --page-bg: linear-gradient(180deg, #edf7f6 0%, #f5fbfa 100%);
    --surface: #ffffff;
    --surface-2: #e8f3f2;
    --surface-3: #dae8e7;
    --text: #1c2a2a;
    --text-muted: #586d6d;
    --text-subtle: #7d9191;
    --border: #d4e4e4;
    --border-strong: #c0d6d6;
    --shadow: rgba(10, 30, 30, 0.08);
    --shadow-strong: rgba(10, 30, 30, 0.18);
    --input-bg: #eaf4f3;
    --chip-bg: #e5f0ef;

    --dark-bg: #0f1717;
    --dark-surface: #152120;
    --dark-surface-2: #1f2c2b;
    --dark-surface-3: #273635;
    --dark-border: #2b3a39;
    --dark-border-strong: #344746;
    --dark-text: #eef6f5;
    --dark-text-muted: #b6c7c5;
    --dark-text-subtle: #8ea09f;
}

.qr-order-page.theme-slate[b-yi207ij61k] {
    --accent: #5c7a99;
    --page-bg: linear-gradient(180deg, #f0f3f8 0%, #edf1f6 100%);
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #e1e7ef;
    --text: #1a2433;
    --text-muted: #5b6a7d;
    --text-subtle: #7b889b;
    --border: #d7dee7;
    --border-strong: #c8d1dc;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
    --input-bg: #eef2f6;
    --chip-bg: #e9eff5;

    --dark-bg: #10141c;
    --dark-surface: #171d27;
    --dark-surface-2: #202838;
    --dark-surface-3: #283244;
    --dark-border: #2c3648;
    --dark-border-strong: #354054;
    --dark-text: #f3f6fb;
    --dark-text-muted: #b7c1cf;
    --dark-text-subtle: #8c97a8;
}

.qr-order-page.theme-sage[b-yi207ij61k] {
    --accent: #5c8c5c;
    --page-bg: linear-gradient(180deg, #eef6ef 0%, #f5faf6 100%);
    --surface: #ffffff;
    --surface-2: #e8f1ea;
    --surface-3: #dbe6de;
    --text: #1f2b22;
    --text-muted: #5b6f61;
    --text-subtle: #7a8d80;
    --border: #d3e1d6;
    --border-strong: #c4d4c8;
    --shadow: rgba(19, 41, 26, 0.08);
    --shadow-strong: rgba(19, 41, 26, 0.18);
    --input-bg: #eef5ef;
    --chip-bg: #e6f0e8;

    --dark-bg: #121815;
    --dark-surface: #1a221d;
    --dark-surface-2: #232d26;
    --dark-surface-3: #2b372e;
    --dark-border: #2f3b31;
    --dark-border-strong: #3a483d;
    --dark-text: #eef5f0;
    --dark-text-muted: #b5c2ba;
    --dark-text-subtle: #8f9f94;
}

.qr-order-page.theme-ember[b-yi207ij61k] {
    --accent: #d97706;
    --page-bg: linear-gradient(180deg, #ffe4d0 0%, #fff1e6 100%);
    --surface: #fffaf6;
    --surface-2: #ffe7d1;
    --surface-3: #ffd7bc;
    --text: #2d2017;
    --text-muted: #7b5a44;
    --text-subtle: #9a7761;
    --border: #ffd0b0;
    --border-strong: #f2bfa0;
    --shadow: rgba(84, 36, 12, 0.1);
    --shadow-strong: rgba(84, 36, 12, 0.2);
    --input-bg: #ffefe1;
    --chip-bg: #ffe4cf;

    --dark-bg: #1b120c;
    --dark-surface: #24160e;
    --dark-surface-2: #2f1d12;
    --dark-surface-3: #3a2416;
    --dark-border: #3a2416;
    --dark-border-strong: #4a2d1b;
    --dark-text: #fff4ea;
    --dark-text-muted: #d3b6a2;
    --dark-text-subtle: #b08b74;
}

.qr-order-page.theme-graphite[b-yi207ij61k] {
    --accent: #6b7c8a;
    --page-bg: linear-gradient(180deg, #f1f3f6 0%, #eef1f4 100%);
    --surface: #ffffff;
    --surface-2: #edf0f4;
    --surface-3: #e0e5eb;
    --text: #1d2228;
    --text-muted: #5c6672;
    --text-subtle: #7d8792;
    --border: #d5dbe2;
    --border-strong: #c6ced7;
    --shadow: rgba(22, 28, 35, 0.08);
    --shadow-strong: rgba(22, 28, 35, 0.18);
    --input-bg: #eef1f4;
    --chip-bg: #e7ecf1;

    --dark-bg: #11151a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232a33;
    --dark-surface-3: #2c3541;
    --dark-border: #2f3844;
    --dark-border-strong: #394554;
    --dark-text: #f3f6f9;
    --dark-text-muted: #b7c1cb;
    --dark-text-subtle: #8c97a5;
}

/* Subtle Themes */
.qr-order-page.theme-lavender[b-yi207ij61k] {
    --accent: #8b7dc8;
    --page-bg: linear-gradient(180deg, #f5f3fa 0%, #f9f7fc 100%);
    --surface: #ffffff;
    --surface-2: #f0edf7;
    --surface-3: #e6e1f0;
    --text: #2a2635;
    --text-muted: #6b6480;
    --text-subtle: #8d86a0;
    --border: #ddd8eb;
    --border-strong: #cfc8e0;
    --shadow: rgba(59, 48, 84, 0.08);
    --shadow-strong: rgba(59, 48, 84, 0.16);
    --input-bg: #f3f0f9;
    --chip-bg: #eeebf5;

    --dark-bg: #14121a;
    --dark-surface: #1d1a25;
    --dark-surface-2: #262331;
    --dark-surface-3: #2f2b3d;
    --dark-border: #332f42;
    --dark-border-strong: #3e394f;
    --dark-text: #f5f3fa;
    --dark-text-muted: #c2bbd0;
    --dark-text-subtle: #9690a8;
}

.qr-order-page.theme-rose[b-yi207ij61k] {
    --accent: #c77d8e;
    --page-bg: linear-gradient(180deg, #faf5f6 0%, #fcf8f9 100%);
    --surface: #ffffff;
    --surface-2: #f7eff1;
    --surface-3: #f0e5e8;
    --text: #322629;
    --text-muted: #7d6369;
    --text-subtle: #9d8489;
    --border: #eddde0;
    --border-strong: #e3cfd4;
    --shadow: rgba(70, 40, 48, 0.08);
    --shadow-strong: rgba(70, 40, 48, 0.16);
    --input-bg: #f9f3f5;
    --chip-bg: #f4ecef;

    --dark-bg: #181416;
    --dark-surface: #221c1e;
    --dark-surface-2: #2c2528;
    --dark-surface-3: #362d31;
    --dark-border: #3a3034;
    --dark-border-strong: #463b40;
    --dark-text: #faf5f6;
    --dark-text-muted: #d0bfc3;
    --dark-text-subtle: #a8949a;
}

.qr-order-page.theme-mist[b-yi207ij61k] {
    --accent: #7a9eb8;
    --page-bg: linear-gradient(180deg, #f4f7f9 0%, #f8fafb 100%);
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --surface-3: #e4ebef;
    --text: #232a30;
    --text-muted: #5e6d78;
    --text-subtle: #818f9a;
    --border: #dae3e9;
    --border-strong: #ccd8e0;
    --shadow: rgba(35, 50, 60, 0.08);
    --shadow-strong: rgba(35, 50, 60, 0.16);
    --input-bg: #f2f6f8;
    --chip-bg: #ecf2f5;

    --dark-bg: #12161a;
    --dark-surface: #1a2027;
    --dark-surface-2: #232b33;
    --dark-surface-3: #2b3540;
    --dark-border: #2f3a46;
    --dark-border-strong: #394654;
    --dark-text: #f4f7f9;
    --dark-text-muted: #b8c5cf;
    --dark-text-subtle: #8d9ca8;
}

.qr-order-page.theme-cream[b-yi207ij61k] {
    --accent: #c9a86c;
    --page-bg: linear-gradient(180deg, #faf8f4 0%, #fcfbf8 100%);
    --surface: #fffefa;
    --surface-2: #f7f4ed;
    --surface-3: #f0ebe2;
    --text: #2e2b25;
    --text-muted: #6e6659;
    --text-subtle: #918779;
    --border: #e9e4da;
    --border-strong: #ddd6c9;
    --shadow: rgba(46, 43, 37, 0.08);
    --shadow-strong: rgba(46, 43, 37, 0.16);
    --input-bg: #f9f7f2;
    --chip-bg: #f4f1e9;

    --dark-bg: #161512;
    --dark-surface: #1f1d19;
    --dark-surface-2: #292621;
    --dark-surface-3: #33302a;
    --dark-border: #38352e;
    --dark-border-strong: #443f37;
    --dark-text: #faf8f4;
    --dark-text-muted: #cec6b8;
    --dark-text-subtle: #a69e8f;
}

/* Loading & Error Screens */
.loading-screen[b-yi207ij61k],
.error-screen[b-yi207ij61k],
.success-screen[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-yi207ij61k] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-yi207ij61k 1s linear infinite;
}

@keyframes spin-b-yi207ij61k {
    to { transform: rotate(360deg); }
}

.error-screen h2[b-yi207ij61k] {
    color: #e53935;
    margin-bottom: 0.5rem;
}

.btn-retry[b-yi207ij61k] {
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* Success Screen */
.success-screen[b-yi207ij61k] {
    background: var(--surface);
}

.success-icon[b-yi207ij61k] {
    width: 80px;
    height: 80px;
    background: var(--secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 1rem;
}

.success-screen h2[b-yi207ij61k] {
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.order-number[b-yi207ij61k] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.table-info[b-yi207ij61k] {
    color: var(--text-muted);
    margin: 0.25rem 0;
}

.success-screen .total[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 1rem 0;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.instructions[b-yi207ij61k] {
    color: var(--text-muted);
    margin: 1rem 0;
}

.btn-new-order[b-yi207ij61k] {
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* Wait Time Badge */
.wait-time-badge[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffb74d;
    border-radius: 12px;
    margin: 1rem 0;
    animation: pulse-badge-b-yi207ij61k 2s ease-in-out infinite;
}

.wait-time-badge .wait-icon[b-yi207ij61k] {
    font-size: 1.25rem;
}

.wait-time-badge .wait-text[b-yi207ij61k] {
    font-size: 1rem;
    font-weight: 600;
    color: #e65100;
}

@keyframes pulse-badge-b-yi207ij61k {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Loyalty earned banner */
.loyalty-earned-banner[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #92400e;
    margin: 0.5rem 0;
}

.loyalty-earned-banner .loyalty-icon[b-yi207ij61k] {
    font-size: 1.1rem;
}

/* Loyalty earn preview in cart */
.loyalty-earn-preview[b-yi207ij61k] {
    font-size: 0.78rem;
    color: #92400e;
    background: #fef3c7;
    padding: 4px 10px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 6px;
}

/* Header */
.qr-header[b-yi207ij61k] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 2px 4px var(--shadow);
    flex-wrap: nowrap;
}

.restaurant-info[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* Allow shrinking */
    flex: 1;
}

.restaurant-info .logo[b-yi207ij61k] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.restaurant-info h1[b-yi207ij61k] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--header-text);
    font-family: var(--font-display);
    letter-spacing: -0.01em; /* Tighter spacing for premium feel */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.header-sheet-btn[b-yi207ij61k] {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.header-sheet-btn .sheet-chevron[b-yi207ij61k] {
    font-size: 0.7rem;
    opacity: 0.6;
}

.language-selector select[b-yi207ij61k] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    max-width: 90px;
}

/* Mobile language button - hidden on desktop */
.lang-btn-mobile[b-yi207ij61k] {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0.8;
}

.lang-btn-mobile:hover[b-yi207ij61k] {
    opacity: 1;
}

.table-badge[b-yi207ij61k] {
    background: var(--accent);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.filters-sticky[b-yi207ij61k] {
    position: sticky;
    top: calc(var(--header-offset) + env(safe-area-inset-top));
    z-index: 90;
    background: var(--surface);
    box-shadow: 0 4px 12px var(--shadow);
}

/* Promotional Banner */
.promo-banner[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.promo-banner.clickable[b-yi207ij61k] {
    cursor: pointer;
}

.promo-banner.clickable:hover[b-yi207ij61k] {
    filter: brightness(1.1);
    transform: scale(1.005);
}

.promo-banner.clickable:active[b-yi207ij61k] {
    transform: scale(0.98);
    filter: brightness(0.95);
}

.promo-banner.clickable:focus-visible[b-yi207ij61k] {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Banner Styles */
.promo-banner.promo-inline[b-yi207ij61k] {
    /* Default inline style - scrolls with content */
}

.promo-banner.promo-sticky[b-yi207ij61k] {
    position: sticky;
    top: calc(var(--header-offset) + env(safe-area-inset-top));
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.promo-banner.promo-toast[b-yi207ij61k] {
    position: fixed;
    bottom: calc(80px + var(--cart-bar-height) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 200;
    animation: toastSlideIn-b-yi207ij61k 0.4s ease;
}

.promo-banner.promo-toast.toast-hidden[b-yi207ij61k] {
    animation: toastSlideOut-b-yi207ij61k 0.4s ease forwards;
}

@keyframes toastSlideIn-b-yi207ij61k {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastSlideOut-b-yi207ij61k {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.promo-content[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.promo-text[b-yi207ij61k] {
    word-break: break-word;
}

.promo-countdown[b-yi207ij61k] {
    font-size: 0.8rem;
    opacity: 0.85;
    font-weight: 500;
}

.promo-actions[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.promo-arrow[b-yi207ij61k] {
    font-size: 1.1rem;
    opacity: 0.8;
}

.promo-add-btn[b-yi207ij61k] {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.promo-banner:hover .promo-add-btn[b-yi207ij61k] {
    background: rgba(255, 255, 255, 0.3);
}

.promo-dismiss[b-yi207ij61k] {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    /* Increased padding for 44x44px minimum touch target (WCAG 2.5.5) */
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    border-radius: 50%;
    margin: -6px -6px -6px 0;
}

.promo-dismiss:hover[b-yi207ij61k],
.promo-dismiss:focus[b-yi207ij61k] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
}

.promo-dismiss:focus[b-yi207ij61k] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Enhanced Item Banner (for menu item promotions) */
.promo-item-banner[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}

.promo-item-image[b-yi207ij61k] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.promo-item-info[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.promo-item-banner .promo-text[b-yi207ij61k] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.promo-item-details[b-yi207ij61k] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.promo-item-name[b-yi207ij61k] {
    font-size: 1rem;
    font-weight: 700;
}

.promo-item-price[b-yi207ij61k] {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
}

.promo-item-banner .promo-countdown[b-yi207ij61k] {
    font-size: 0.75rem;
}

/* Countdown urgency styling */
.countdown-urgent[b-yi207ij61k] {
    animation: pulse-b-yi207ij61k 1s ease-in-out infinite;
}

.promo-banner.urgent[b-yi207ij61k] {
    animation: urgentPulse-b-yi207ij61k 2s ease-in-out infinite;
}

@keyframes pulse-b-yi207ij61k {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes urgentPulse-b-yi207ij61k {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* Welcome Banner */
.welcome-banner[b-yi207ij61k] {
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    color: white;
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 1rem;
}

/* Zone surcharge (terraza) disclosure — quiet, informational strip. */
.zone-surcharge-note[b-yi207ij61k] {
    background: var(--surface, #fff);
    color: var(--text-muted, #6b7280);
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 0.5rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* Category Navigation - with scroll indicators */
.category-nav-wrapper[b-yi207ij61k] {
    position: relative;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.category-nav-wrapper[b-yi207ij61k]::before,
.category-nav-wrapper[b-yi207ij61k]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 24px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
}

.category-nav-wrapper[b-yi207ij61k]::before {
    left: 0;
    background: linear-gradient(to right, var(--surface) 30%, transparent);
}

.category-nav-wrapper[b-yi207ij61k]::after {
    right: 0;
    background: linear-gradient(to left, var(--surface) 30%, transparent);
}

.category-nav-wrapper.scroll-left[b-yi207ij61k]::before {
    opacity: 1;
}

.category-nav-wrapper.scroll-right[b-yi207ij61k]::after {
    opacity: 1;
}

.category-nav[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

.category-nav[b-yi207ij61k]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-yi207ij61k] {
    flex-shrink: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--chip-bg);
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--chip-text);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    scroll-snap-align: start;
}

.category-tab.active[b-yi207ij61k] {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, #ffffff);
}

.category-tab .count[b-yi207ij61k] {
    margin-left: 0.25rem;
    opacity: 0.7;
}

/* Search Bar */
.search-bar[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.search-bar .search-icon[b-yi207ij61k] {
    font-size: 1rem;
    opacity: 0.5;
}

.search-bar input[b-yi207ij61k] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--input-text);
}

.search-bar input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

.search-bar input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.search-clear[b-yi207ij61k] {
    width: 28px;
    height: 28px;
    background: var(--surface-3);
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover[b-yi207ij61k] {
    background: var(--border-strong);
}

/* Collapsible Search - saves vertical space */
.search-bar.collapsed[b-yi207ij61k] {
    padding: 0.5rem 1rem;
}

.search-bar.expanded[b-yi207ij61k] {
    padding: 0.75rem 1rem;
}

.search-expand-btn[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-expand-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--surface);
}

.search-expand-btn .search-icon[b-yi207ij61k] {
    font-size: 1rem;
    opacity: 0.5;
}

.search-expand-btn .search-hint[b-yi207ij61k] {
    opacity: 0.6;
}

.search-close[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    background: var(--surface-3);
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-close:hover[b-yi207ij61k] {
    background: var(--border-strong);
}

/* Table Context Banner - Clear indication of which table */
.table-context-banner[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #4a6580; /* Muted blue-gray for premium feel */
    color: white;
    font-size: 0.875rem;
}

.table-context-icon[b-yi207ij61k] {
    font-size: 1rem;
}

.table-context-text[b-yi207ij61k] {
    font-weight: 400;
}

.table-context-text strong[b-yi207ij61k] {
    font-weight: 700;
}

.table-change-btn[b-yi207ij61k] {
    margin-left: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: transparent;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.table-change-btn:hover[b-yi207ij61k] {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
}

.view-toggle[b-yi207ij61k] {
    display: none;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.view-btn[b-yi207ij61k] {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.view-btn.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Allergen Filter */
.allergen-filter[b-yi207ij61k] {
    background: var(--surface);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.allergen-toggle[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #e65100;
    cursor: pointer;
    transition: all 0.2s;
}

.allergen-toggle.active[b-yi207ij61k] {
    background: #ffb74d;
    color: white;
}

.allergen-toggle .filter-icon[b-yi207ij61k] {
    font-size: 1rem;
}

.allergen-toggle .active-count[b-yi207ij61k] {
    background: #e65100;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.allergen-chips[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.allergen-chip[b-yi207ij61k] {
    padding: 0.4rem 0.75rem;
    background: var(--chip-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 0.8rem;
    color: var(--chip-text);
    cursor: pointer;
    transition: all 0.2s;
}

.allergen-chip:hover[b-yi207ij61k] {
    border-color: #ff7043;
    color: #ff7043;
}

.allergen-chip.active[b-yi207ij61k] {
    background: #ffccbc;
    border-color: #ff7043;
    color: #e64a19;
    font-weight: 500;
}

/* Items Grid */
.items-container[b-yi207ij61k] {
    padding: 1rem;
    padding-bottom: calc(100px + var(--cart-bar-height) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.item-card[b-yi207ij61k] {
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.item-card:active[b-yi207ij61k] {
    transform: scale(0.98);
}

.item-card.out-of-stock[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.item-image[b-yi207ij61k] {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}

.item-image.placeholder[b-yi207ij61k] {
    background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

.item-info[b-yi207ij61k] {
    padding: 0.75rem;
}

.item-info h3[b-yi207ij61k] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text);
    line-height: 1.3;
}

.item-info .description[b-yi207ij61k] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precautionary cross-contamination warning — amber, readable at a
   glance; the dish is still orderable (policy = warn, not hide). */
.item-info .trace-warning[b-yi207ij61k] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #d97706;
    margin: 0 0 0.5rem 0;
}

.price-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price[b-yi207ij61k] {
    font-weight: 700;
    font-size: 1.05em; /* Slightly larger for emphasis */
    color: var(--accent);
}

.stock-badge[b-yi207ij61k] {
    font-size: 0.7rem;
    background: #ff5722;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Floating Cart Button */
.cart-fab[b-yi207ij61k] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 90;
}

.cart-icon[b-yi207ij61k] {
    font-size: 1.25rem;
}

.cart-count[b-yi207ij61k] {
    background: var(--surface);
    color: var(--secondary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.cart-bar[b-yi207ij61k] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 24px var(--shadow);
    z-index: 95;
}

.cart-bar-summary[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cart-bar-count[b-yi207ij61k] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cart-bar-total[b-yi207ij61k] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.cart-bar-btn[b-yi207ij61k] {
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: none;
    background: var(--secondary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* Modal Overlay */
.modal-overlay[b-yi207ij61k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

.modal-content[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    animation: slideUp-b-yi207ij61k 0.3s ease-out;
}

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

.modal-close[b-yi207ij61k] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
}

.sheet-overlay[b-yi207ij61k] {
    align-items: flex-end;
}

.sheet-content[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px var(--shadow-strong);
}

.sheet-handle[b-yi207ij61k] {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 0 auto 12px;
}

.sheet-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.sheet-row select[b-yi207ij61k] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
}

.sheet-label[b-yi207ij61k] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.sheet-value[b-yi207ij61k] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.wrong-table-link[b-yi207ij61k] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

.wrong-table-link:hover[b-yi207ij61k] {
    color: var(--accent);
}

.sheet-close[b-yi207ij61k] {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* Item Modal */
.item-modal[b-yi207ij61k] {
    position: relative;
}

.modal-image[b-yi207ij61k] {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.modal-body[b-yi207ij61k] {
    padding: 1.5rem;
}

.modal-body h2[b-yi207ij61k] {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--text);
}

.modal-body .description[b-yi207ij61k] {
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

.base-price[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 1.5rem 0;
}

/* Option Groups */
.option-group[b-yi207ij61k] {
    margin-bottom: 1.5rem;
}

.option-group h4[b-yi207ij61k] {
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    color: var(--text);
}

.option-group .required[b-yi207ij61k] {
    color: #e53935;
}

.option-group .hint[b-yi207ij61k] {
    font-weight: 400;
    color: var(--text-subtle);
    font-size: 0.875rem;
}

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

.option[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-color: var(--accent);
}

.option input[b-yi207ij61k] {
    accent-color: var(--accent);
}

.option .delta[b-yi207ij61k] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Note Section */
.note-section[b-yi207ij61k] {
    margin-bottom: 1.5rem;
}

.note-section label[b-yi207ij61k] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.note-section textarea[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    resize: none;
    height: 80px;
    font-family: inherit;
    background: var(--surface);
    color: var(--input-text);
}

.note-section textarea:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

/* Quantity & Add Button */
.quantity-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.quantity-control[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 0.25rem;
}

.quantity-control button[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: none;
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
}

.quantity-control button:disabled[b-yi207ij61k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantity-control span[b-yi207ij61k] {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--text);
}

.btn-add[b-yi207ij61k] {
    flex: 1;
    padding: 1rem;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-add:disabled[b-yi207ij61k] {
    background: #ccc;
    cursor: not-allowed;
}

/* Cart Drawer */
.cart-drawer[b-yi207ij61k] {
    background: var(--surface);
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-yi207ij61k 0.3s ease-out;
}

.cart-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.cart-header h2[b-yi207ij61k] {
    margin: 0;
    font-size: 1.25rem;
}

.cart-close[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cart-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.cart-body[b-yi207ij61k] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cart-items[b-yi207ij61k] {
    padding: 1rem 1.5rem;
}

.cart-item[b-yi207ij61k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}

.cart-item-info[b-yi207ij61k] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.cart-item .qty[b-yi207ij61k] {
    color: var(--accent);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.cart-item .details[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.cart-item .name[b-yi207ij61k] {
    font-weight: 500;
    text-align: left;
}

.cart-item .mods[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cart-item .note[b-yi207ij61k] {
    font-size: 0.8rem;
    color: var(--text-subtle);
}

.cart-item-actions[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.line-total[b-yi207ij61k] {
    font-weight: 600;
}

.btn-remove[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    background: #ffebee;
    color: #e53935;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
}

/* Cart Footer (scrollable section) */
.cart-footer[b-yi207ij61k] {
    padding: 1rem 1.5rem;
    background: var(--surface-2);
}

/* Sticky Footer with Total + Submit */
.cart-sticky-footer[b-yi207ij61k] {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.sticky-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.sticky-total[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

/* Cart validation error message */
.cart-error[b-yi207ij61k] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
}

.cart-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.cart-total-row .total[b-yi207ij61k] {
    font-weight: 700;
    color: var(--text);
}

.customer-name[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.customer-name input[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
}

.customer-name input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.btn-submit[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-submit:disabled[b-yi207ij61k] {
    background: #ccc;
    cursor: not-allowed;
}

/* Tip Selection */
.tip-section[b-yi207ij61k] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.tip-section h4[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text);
}

.tip-buttons[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.tip-btn[b-yi207ij61k] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.tip-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    color: var(--accent);
}

.tip-btn.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

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

.custom-tip-input input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    text-align: right;
    background: var(--surface);
    color: var(--input-text);
}

.custom-tip-input input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.custom-tip-input span[b-yi207ij61k] {
    font-weight: 600;
    color: var(--text-muted);
}

.tip-amount[b-yi207ij61k] {
    margin-top: 0.75rem;
    text-align: center;
    color: var(--secondary);
    font-size: 0.9rem;
}

.tip-amount strong[b-yi207ij61k] {
    font-size: 1rem;
}

/* Cart breakdown (only shown when there are adjustments) */
.cart-breakdown[b-yi207ij61k] {
    background: var(--surface);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* Cart totals rows */
.cart-subtotal-row[b-yi207ij61k],
.cart-tip-row[b-yi207ij61k],
.cart-discount-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.cart-breakdown .cart-subtotal-row:last-child[b-yi207ij61k],
.cart-breakdown .cart-tip-row:last-child[b-yi207ij61k],
.cart-breakdown .cart-discount-row:last-child[b-yi207ij61k] {
    margin-bottom: 0;
}

.cart-discount-row .discount[b-yi207ij61k] {
    color: var(--secondary);
    font-weight: 600;
}

.cart-total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.cart-total-row .total[b-yi207ij61k] {
    color: var(--accent);
    font-size: 1.25rem;
    white-space: nowrap;
}

/* Customer Info - Name/Email inputs */
.customer-info[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.customer-info input[b-yi207ij61k] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
    transition: border-color 0.2s;
}

.customer-info input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.customer-info input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.save-info-checkbox[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.save-info-checkbox input[type="checkbox"][b-yi207ij61k] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Promo Section */
.promo-section[b-yi207ij61k] {
    margin: 1rem 0;
}

.promo-input[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
}

.promo-input input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--input-text);
}

.promo-input input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.btn-promo[b-yi207ij61k] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-promo:disabled[b-yi207ij61k] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-promo-clear[b-yi207ij61k] {
    width: 40px;
    background: var(--surface-3);
    color: var(--text-muted);
    border: none;
    border-radius: 8px;
    font-size: 1.25rem;
    cursor: pointer;
}

.promo-error[b-yi207ij61k] {
    color: #e53935;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.promo-success[b-yi207ij61k] {
    color: #4CAF50;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Upsell Modal */
.upsell-modal[b-yi207ij61k] {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    /* Clip to the 80vh box so the scrollable items area (flex:1) absorbs the
       overflow and the action footer stays pinned inside the viewport.
       Without this the product grid pushed the buttons below the fold. */
    overflow: hidden;
}

.upsell-header[b-yi207ij61k] {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.upsell-header h2[b-yi207ij61k] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text);
    font-family: var(--font-display);
}

.upsell-header p[b-yi207ij61k] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.upsell-items[b-yi207ij61k] {
    flex: 1;
    /* min-height:0 lets this flex child shrink below its content height so it
       actually scrolls (default min-height:auto would otherwise grow the modal
       and push the footer out). */
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.upsell-item[b-yi207ij61k] {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
}

.upsell-item:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--surface);
}

.upsell-image[b-yi207ij61k] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-3);
}

.upsell-image.placeholder[b-yi207ij61k] {
    background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

.upsell-info[b-yi207ij61k] {
    text-align: center;
}

.upsell-name[b-yi207ij61k] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.upsell-price[b-yi207ij61k] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.upsell-add[b-yi207ij61k] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.upsell-actions[b-yi207ij61k] {
    /* Pinned footer: never shrink so "No, gracias" / "Continuar" stay visible. */
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--border);
}

.btn-skip[b-yi207ij61k] {
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-continue[b-yi207ij61k] {
    padding: 1rem;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Order History Button */
.history-btn[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.history-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    color: var(--accent);
}

.history-count[b-yi207ij61k] {
    background: var(--accent);
    color: white;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.history-icon[b-yi207ij61k] {
    font-size: 1rem;
}

/* Customer Email */
.customer-email[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.customer-email input[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--input-text);
}

.customer-email input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

/* Promo Code Section */
.promo-section[b-yi207ij61k] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.promo-input-row[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
}

.promo-input-row input[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    text-transform: uppercase;
    background: var(--surface);
    color: var(--input-text);
}

.promo-input-row input:focus[b-yi207ij61k] {
    outline: none;
    border-color: var(--accent);
}

.promo-input-row input:disabled[b-yi207ij61k] {
    background: var(--surface-2);
}

.btn-promo[b-yi207ij61k] {
    padding: 0.75rem 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.btn-promo:disabled[b-yi207ij61k] {
    background: #ccc;
    cursor: not-allowed;
}

.btn-promo.clear[b-yi207ij61k] {
    background: #ff5252;
}

.promo-message[b-yi207ij61k] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.promo-message.success[b-yi207ij61k] {
    color: #4caf50;
}

.promo-message.error[b-yi207ij61k] {
    color: #f44336;
}

/* Cart Discount Row */
.cart-discount-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #4caf50;
    margin-bottom: 0.5rem;
}

.cart-discount-row .discount-label[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Order History Modal */
.history-modal[b-yi207ij61k] {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.history-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.history-header h2[b-yi207ij61k] {
    margin: 0;
    font-size: 1.25rem;
}

.btn-clear-history[b-yi207ij61k] {
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.btn-clear-history:hover[b-yi207ij61k] {
    border-color: #f44336;
    color: #f44336;
}

.history-list[b-yi207ij61k] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.history-empty[b-yi207ij61k] {
    text-align: center;
    color: var(--text-subtle);
    padding: 2rem;
}

.history-order[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.history-order:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.history-order-info h4[b-yi207ij61k] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--text);
}

.history-order-info p[b-yi207ij61k] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.history-order-meta[b-yi207ij61k] {
    text-align: right;
}

.history-order-meta .total[b-yi207ij61k] {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}

.history-order-meta .date[b-yi207ij61k] {
    font-size: 0.75rem;
    color: var(--text-subtle);
}

.history-footer[b-yi207ij61k] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

.btn-close-history[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    background: var(--surface-2);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* Theme Toggle Button */
.theme-toggle[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle:hover[b-yi207ij61k] {
    background: var(--surface-2);
}

/* Dark Mode Styles */
.qr-order-page.dark[b-yi207ij61k] {
    --page-bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --surface-3: var(--dark-surface-3);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --text-subtle: var(--dark-text-subtle);
    --border: var(--dark-border);
    --border-strong: var(--dark-border-strong);
    --input-bg: var(--dark-surface-2);
    --input-text: var(--dark-text);
    --input-placeholder: var(--dark-text-subtle);
    --chip-bg: var(--dark-surface-2);
    --chip-text: var(--dark-text-muted);
    --shadow: rgba(0,0,0,0.45);
    --shadow-strong: rgba(0,0,0,0.6);
    background: var(--page-bg);
    color: var(--text);
}

.qr-order-page.dark .qr-header[b-yi207ij61k] {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

.qr-order-page.dark .restaurant-info h1[b-yi207ij61k] {
    color: var(--text) !important;
}

.qr-order-page.dark .theme-toggle[b-yi207ij61k] {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.qr-order-page.dark .theme-toggle:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.qr-order-page.dark .table-badge[b-yi207ij61k] {
    background: var(--accent);
}

.qr-order-page.dark .category-nav-wrapper[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
}

.qr-order-page.dark .category-nav-wrapper[b-yi207ij61k]::before {
    background: linear-gradient(to right, var(--surface) 30%, transparent);
}

.qr-order-page.dark .category-nav-wrapper[b-yi207ij61k]::after {
    background: linear-gradient(to left, var(--surface) 30%, transparent);
}

.qr-order-page.dark .category-nav[b-yi207ij61k] {
    background: transparent;
}

.qr-order-page.dark .category-tab[b-yi207ij61k] {
    background: var(--chip-bg);
    color: var(--chip-text);
}

.qr-order-page.dark .category-tab.active[b-yi207ij61k] {
    background: var(--accent);
    color: white;
}

.qr-order-page.dark .filters-sticky[b-yi207ij61k] {
    background: var(--surface);
    box-shadow: 0 4px 12px var(--shadow-strong);
}

.qr-order-page.dark .view-toggle[b-yi207ij61k] {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.qr-order-page.dark .view-btn[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}

.qr-order-page.dark .view-btn.active[b-yi207ij61k] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.qr-order-page.dark .quick-stepper[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border);
}

.qr-order-page.dark .stepper-btn[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text);
}

.qr-order-page.dark .stepper-btn:last-child[b-yi207ij61k] {
    background: var(--accent);
    color: #fff;
}

.qr-order-page.dark .cart-bar[b-yi207ij61k] {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.qr-order-page.dark .cart-bar-total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-bar-count[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .header-sheet-btn[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.qr-order-page.dark .sheet-content[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .sheet-row[b-yi207ij61k] {
    border-bottom: 1px solid var(--border);
}

.qr-order-page.dark .sheet-row select[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

.qr-order-page.dark .item-card[b-yi207ij61k] {
    background: var(--surface);
    box-shadow: 0 2px 8px var(--shadow-strong);
}

.qr-order-page.dark .item-image.placeholder[b-yi207ij61k] {
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
}

.qr-order-page.dark .item-info h3[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .item-info .description[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .modal-content[b-yi207ij61k],
.qr-order-page.dark .cart-drawer[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .modal-body h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .modal-body .description[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .option[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: transparent;
}

.qr-order-page.dark .option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    border-color: var(--accent);
}

.qr-order-page.dark .note-section textarea[b-yi207ij61k],
.qr-order-page.dark .customer-name input[b-yi207ij61k],
.qr-order-page.dark .customer-email input[b-yi207ij61k],
.qr-order-page.dark .promo-input-row input[b-yi207ij61k],
.qr-order-page.dark .language-selector select[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .cart-header[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .cart-header h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-item[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .cart-item .name[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-item .mods[b-yi207ij61k],
.qr-order-page.dark .cart-item .note[b-yi207ij61k] {
    color: var(--text-subtle);
}

.qr-order-page.dark .line-total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-close[b-yi207ij61k] {
    color: var(--text-muted);
    border-color: var(--border);
}

.qr-order-page.dark .cart-close:hover[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text);
}

.qr-order-page.dark .cart-breakdown[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .cart-footer[b-yi207ij61k] {
    background: var(--page-bg);
    border-color: var(--border);
}

.qr-order-page.dark .cart-sticky-footer[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.qr-order-page.dark .sticky-total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .cart-subtotal-row[b-yi207ij61k],
.qr-order-page.dark .cart-tip-row[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .cart-discount-row[b-yi207ij61k] {
    color: var(--secondary);
}

.qr-order-page.dark .cart-total-row[b-yi207ij61k] {
    color: var(--text);
    background: transparent;
    border-color: var(--border-strong);
}

.qr-order-page.dark .cart-total-row .total[b-yi207ij61k] {
    color: var(--text);
    background: transparent;
    border: none;
    box-shadow: none;
}

.qr-order-page.dark .tip-section[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .tip-section h4[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .tip-btn[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.qr-order-page.dark .tip-btn:hover[b-yi207ij61k] {
    border-color: var(--accent);
    color: var(--accent);
}

.qr-order-page.dark .tip-btn.active[b-yi207ij61k] {
    background: var(--accent);
    color: white;
}

.qr-order-page.dark .allergen-filter[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
}

.qr-order-page.dark .allergen-chip[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.qr-order-page.dark .allergen-chip.active[b-yi207ij61k] {
    background: #4a2020;
    border-color: #ff7043;
    color: #ff9070;
}

.qr-order-page.dark .loyalty-earned-banner[b-yi207ij61k] {
    background: linear-gradient(135deg, #422006 0%, #78350f 100%);
    border-color: #d97706;
    color: #fde68a;
}

.qr-order-page.dark .loyalty-earn-preview[b-yi207ij61k] {
    background: #422006;
    color: #fde68a;
}

.qr-order-page.dark .loading-screen[b-yi207ij61k],
.qr-order-page.dark .error-screen[b-yi207ij61k],
.qr-order-page.dark .success-screen[b-yi207ij61k] {
    background: var(--page-bg);
}

.qr-order-page.dark .success-screen h2[b-yi207ij61k],
.qr-order-page.dark .order-number[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .success-screen .total[b-yi207ij61k] {
    color: var(--text);
    background: transparent;
}

.qr-order-page.dark .wait-time-badge[b-yi207ij61k] {
    background: linear-gradient(135deg, #3a2a1a 0%, #4a3a2a 100%);
    border-color: #8b6914;
}

.qr-order-page.dark .wait-time-badge .wait-text[b-yi207ij61k] {
    color: #ffc107;
}

.qr-order-page.dark .history-modal[b-yi207ij61k],
.qr-order-page.dark .upsell-modal[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .history-header[b-yi207ij61k],
.qr-order-page.dark .upsell-header[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .history-header h2[b-yi207ij61k],
.qr-order-page.dark .upsell-header h2[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .history-order[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .history-order:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.qr-order-page.dark .history-order-info h4[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .history-order-meta .total[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .upsell-item[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .upsell-name[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .customer-info input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .customer-info input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.qr-order-page.dark .customer-info input:focus[b-yi207ij61k] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.qr-order-page.dark .save-info-checkbox[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .promo-input input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .promo-input input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.qr-order-page.dark .btn-promo-clear[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text-muted);
}

.qr-order-page.dark .custom-tip-input input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .custom-tip-input span[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .quantity-row[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .quantity-control[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .quantity-control button[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text);
}

.qr-order-page.dark .quantity-control button:disabled[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-subtle);
}

.qr-order-page.dark .quantity-control span[b-yi207ij61k] {
    color: var(--text);
}

.qr-order-page.dark .search-bar[b-yi207ij61k] {
    background: var(--surface);
    border-color: var(--border);
}

.qr-order-page.dark .search-bar input[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border-strong);
    color: var(--input-text);
}

.qr-order-page.dark .search-bar input:focus[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--accent);
}

.qr-order-page.dark .search-bar input[b-yi207ij61k]::placeholder {
    color: var(--input-placeholder);
}

.qr-order-page.dark .search-clear[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text-muted);
}

.qr-order-page.dark .search-clear:hover[b-yi207ij61k] {
    background: var(--border-strong);
}

/* Dark mode - Collapsible Search */
.qr-order-page.dark .search-expand-btn[b-yi207ij61k] {
    background: var(--input-bg);
    border-color: var(--border);
    color: var(--text-muted);
}

.qr-order-page.dark .search-expand-btn:hover[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--accent);
}

.qr-order-page.dark .search-close[b-yi207ij61k] {
    background: var(--surface-3);
    color: var(--text-muted);
}

.qr-order-page.dark .search-close:hover[b-yi207ij61k] {
    background: var(--border-strong);
}

/* Dark mode - Table Context Banner (accent color works in both modes) */

/* ========== NEW FEATURES ========== */

/* Skeleton Loading */
.skeleton-loading[b-yi207ij61k] {
    padding: 0;
    background: var(--page-bg);
}

.skeleton-header[b-yi207ij61k] {
    height: 60px;
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-categories[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--surface);
}

.skeleton-pill[b-yi207ij61k] {
    width: 80px;
    height: 36px;
    border-radius: 18px;
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-grid[b-yi207ij61k] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.skeleton-card[b-yi207ij61k] {
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
}

.skeleton-image[b-yi207ij61k] {
    height: 120px;
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-text[b-yi207ij61k] {
    height: 16px;
    margin: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-yi207ij61k 1.5s infinite;
}

.skeleton-text.short[b-yi207ij61k] {
    width: 60%;
    height: 14px;
}

@keyframes skeleton-shimmer-b-yi207ij61k {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Quick Add Button - Refined flat style */
.quick-add-btn[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.quick-add-btn:hover[b-yi207ij61k] {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.quick-add-btn:active[b-yi207ij61k] {
    transform: scale(0.95);
}

.quick-stepper[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.stepper-btn[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--surface-3);
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:last-child[b-yi207ij61k] {
    background: var(--accent);
    color: #fff;
}

.stepper-qty[b-yi207ij61k] {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
    color: var(--text);
}

/* FAB Container - positioned bottom right (conventional for help/call actions) */
.fab-container[b-yi207ij61k] {
    position: fixed;
    bottom: calc(1rem + var(--cart-bar-height) + env(safe-area-inset-bottom));
    right: 1rem;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    z-index: 100;
}

/* Call Waiter FAB - compact circular icon by default */
.call-waiter-fab[b-yi207ij61k] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #ff9800;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Hide text by default - icon only */
.call-waiter-fab .fab-text[b-yi207ij61k] {
    display: none;
}

.call-waiter-fab:hover[b-yi207ij61k] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.5);
}

/* Expanded state when called - shows confirmation text */
.call-waiter-fab.called[b-yi207ij61k] {
    background: #4caf50;
    width: auto;
    border-radius: 24px;
    padding: 0 1rem;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.call-waiter-fab.called .fab-text[b-yi207ij61k] {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.call-waiter-fab:disabled[b-yi207ij61k] {
    cursor: default;
}

/* Success Screen Animations */
.success-screen.animated[b-yi207ij61k] {
    overflow: hidden;
}

.confetti-container[b-yi207ij61k] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
}

.confetti[b-yi207ij61k] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    left: 50%;
    transform: translateX(var(--x));
    animation: confetti-fall-b-yi207ij61k 2s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

.confetti:nth-child(odd)[b-yi207ij61k] {
    background: var(--accent);
    border-radius: 50%;
}

.confetti:nth-child(even)[b-yi207ij61k] {
    background: var(--secondary);
    border-radius: 2px;
    transform: translateX(var(--x)) rotate(45deg);
}

@keyframes confetti-fall-b-yi207ij61k {
    0% {
        opacity: 1;
        top: -10px;
        transform: translateX(var(--x)) rotate(0deg);
    }
    100% {
        opacity: 0;
        top: 200px;
        transform: translateX(calc(var(--x) * 2)) rotate(720deg);
    }
}

.bounce-in[b-yi207ij61k] {
    animation: bounce-in-b-yi207ij61k 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in-b-yi207ij61k {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.fade-in[b-yi207ij61k] {
    animation: fade-in-b-yi207ij61k 0.5s ease-out forwards;
    opacity: 0;
}

.fade-in:nth-child(2)[b-yi207ij61k] { animation-delay: 0.1s; }
.fade-in:nth-child(3)[b-yi207ij61k] { animation-delay: 0.2s; }
.fade-in:nth-child(4)[b-yi207ij61k] { animation-delay: 0.3s; }
.fade-in:nth-child(5)[b-yi207ij61k] { animation-delay: 0.4s; }
.fade-in:nth-child(6)[b-yi207ij61k] { animation-delay: 0.5s; }

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

/* Success Actions */
.success-actions[b-yi207ij61k] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-track-order[b-yi207ij61k] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-track-order:hover[b-yi207ij61k] {
    background: var(--accent);
    color: white;
}

/* Google Review Prompt */
.google-review-prompt[b-yi207ij61k] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, #fffdf5 0%, #fff9e6 100%);
    border-radius: 16px;
    text-align: center;
    border: 1px solid #d4a853;
    box-shadow: 0 2px 8px rgba(180, 140, 60, 0.12);
}

.google-review-prompt .review-stars[b-yi207ij61k] {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    letter-spacing: 0.1rem;
    opacity: 0.9;
}

.google-review-prompt .review-message[b-yi207ij61k] {
    font-size: 1rem;
    color: #5d4e37;
    margin: 0 0 1rem;
    line-height: 1.4;
    word-break: break-word;
    overflow-wrap: break-word;
}

.google-review-prompt .btn-review[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #5c7c3a 0%, #4a6b2d 100%);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(74, 107, 45, 0.25);
    max-width: 100%;
    text-align: center;
    word-break: break-word;
}

.google-review-prompt .btn-review.with-reward[b-yi207ij61k] {
    padding: 0.6rem 1rem;
    gap: 0.4rem;
}

.google-review-prompt .btn-review .reward-badge[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.google-review-prompt .btn-review:hover[b-yi207ij61k] {
    background: linear-gradient(135deg, #6a8c44 0%, #587a35 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(74, 107, 45, 0.35);
}

.google-review-prompt .review-redeem-hint[b-yi207ij61k] {
    font-size: 0.75rem;
    color: #8b7355;
    margin: 0.75rem 0 0;
    font-style: italic;
}

.google-review-prompt .btn-review:focus[b-yi207ij61k] {
    outline: 2px solid #5c7c3a;
    outline-offset: 2px;
}

.google-review-prompt .btn-review:focus-visible[b-yi207ij61k] {
    outline: 3px solid #5c7c3a;
    outline-offset: 2px;
}

/* Dark mode Google Review */
.qr-order-page.dark .google-review-prompt[b-yi207ij61k] {
    background: linear-gradient(145deg, #2a2518 0%, #342d1f 100%);
    border-color: #8b7340;
}

.qr-order-page.dark .google-review-prompt .review-stars[b-yi207ij61k] {
    opacity: 0.85;
}

.qr-order-page.dark .google-review-prompt .review-message[b-yi207ij61k] {
    color: #e5dcc8;
}

.qr-order-page.dark .google-review-prompt .btn-review[b-yi207ij61k] {
    background: linear-gradient(135deg, #4a6b2d 0%, #3d5a24 100%);
}

.qr-order-page.dark .google-review-prompt .btn-review:hover[b-yi207ij61k] {
    background: linear-gradient(135deg, #587a35 0%, #4a6b2d 100%);
}

.qr-order-page.dark .google-review-prompt .review-redeem-hint[b-yi207ij61k] {
    color: #a89878;
}

/* Dark mode for new features */
.qr-order-page.dark .skeleton-loading[b-yi207ij61k] {
    background: var(--page-bg);
}

.qr-order-page.dark .skeleton-header[b-yi207ij61k] {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
}

.qr-order-page.dark .skeleton-categories[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .skeleton-pill[b-yi207ij61k],
.qr-order-page.dark .skeleton-image[b-yi207ij61k],
.qr-order-page.dark .skeleton-text[b-yi207ij61k] {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
}

.qr-order-page.dark .skeleton-card[b-yi207ij61k] {
    background: var(--surface);
}

.qr-order-page.dark .quick-add-btn[b-yi207ij61k] {
    border-color: var(--accent);
    background: transparent;
    color: var(--accent);
}

.qr-order-page.dark .call-waiter-fab[b-yi207ij61k] {
    background: #ff9800;
}

.qr-order-page.dark .call-waiter-fab.called[b-yi207ij61k] {
    background: #4caf50;
}

.qr-order-page.dark .btn-track-order[b-yi207ij61k] {
    color: var(--accent);
    border-color: var(--accent);
}

.qr-order-page.dark .btn-track-order:hover[b-yi207ij61k] {
    background: var(--accent);
    color: white;
}

/* Confirmation Modal Overlay - higher z-index to ensure visibility */
.confirm-overlay[b-yi207ij61k] {
    z-index: 250;
}

/* Confirmation Modal */
.confirm-modal[b-yi207ij61k] {
    max-width: 320px;
    padding: 1.5rem;
    text-align: center;
    border-radius: 16px;
    margin: auto;
}

.confirm-modal h3[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    color: var(--text);
}

.confirm-modal p[b-yi207ij61k] {
    margin: 0 0 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.confirm-buttons[b-yi207ij61k] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-confirm-no[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    color: var(--text-muted);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-confirm-yes[b-yi207ij61k] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.qr-order-page.dark .confirm-modal[b-yi207ij61k] {
    background: #252525;
}

.qr-order-page.dark .confirm-modal h3[b-yi207ij61k] {
    color: #fff;
}

.qr-order-page.dark .confirm-modal p[b-yi207ij61k] {
    color: #bbb;
}

.qr-order-page.dark .btn-confirm-no[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* Fix promo button dark mode */
.qr-order-page.dark .btn-promo[b-yi207ij61k] {
    background: var(--accent);
    color: white;
}

.qr-order-page.dark .btn-promo:disabled[b-yi207ij61k] {
    background: #444;
    color: var(--text-subtle);
}

/* Call waiter button - icon only by default, expands when called */

/* RTL Support for Arabic */
.qr-order-page[dir="rtl"] .restaurant-info[b-yi207ij61k] {
    flex-direction: row-reverse;
}

.qr-order-page[dir="rtl"] .header-right[b-yi207ij61k] {
    flex-direction: row-reverse;
}

.qr-order-page[dir="rtl"] .category-nav[b-yi207ij61k] {
    direction: rtl;
}

/* RTL support for promotional banner */
.qr-order-page[dir="rtl"] .promo-banner[b-yi207ij61k] {
    direction: rtl;
}

.qr-order-page[dir="rtl"] .promo-item-banner[b-yi207ij61k] {
    flex-direction: row-reverse;
}

.qr-order-page[dir="rtl"] .promo-actions[b-yi207ij61k] {
    flex-direction: row-reverse;
}

.qr-order-page[dir="rtl"] .promo-arrow[b-yi207ij61k] {
    transform: scaleX(-1);
}

/* RTL support for Google Review prompt */
.qr-order-page[dir="rtl"] .google-review-prompt[b-yi207ij61k] {
    direction: rtl;
    text-align: center;
}

.qr-order-page[dir="rtl"] .google-review-prompt .review-incentive[b-yi207ij61k] {
    direction: rtl;
}

.qr-order-page[dir="rtl"] .google-review-prompt .btn-review[b-yi207ij61k] {
    flex-direction: row-reverse;
}

@media (max-width: 720px) {
    .qr-order-page[b-yi207ij61k] {
        --header-offset: 56px;
    }

    .qr-header[b-yi207ij61k] {
        padding: 0.5rem 0.75rem;
    }

    .restaurant-info .logo[b-yi207ij61k] {
        width: 32px;
        height: 32px;
    }

    .restaurant-info h1[b-yi207ij61k] {
        font-size: 0.95rem;
    }

    .header-right[b-yi207ij61k] {
        gap: 0.35rem;
    }

    .language-selector[b-yi207ij61k],
    .table-badge[b-yi207ij61k] {
        display: none;
    }

    .lang-btn-mobile[b-yi207ij61k] {
        display: inline-flex;
    }

    .header-sheet-btn[b-yi207ij61k] {
        display: inline-flex;
    }

    .view-toggle[b-yi207ij61k] {
        display: flex;
    }

    .cart-bar[b-yi207ij61k] {
        display: flex;
    }

    .cart-fab[b-yi207ij61k] {
        display: none;
    }

    .items-container.list-view[b-yi207ij61k] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .items-container.list-view .item-card[b-yi207ij61k] {
        display: flex;
        gap: 0.75rem;
        align-items: stretch;
    }

    .items-container.list-view .item-image[b-yi207ij61k] {
        width: 110px;
        height: 110px;
        flex-shrink: 0;
    }

    .items-container.list-view .item-info[b-yi207ij61k] {
        flex: 1;
        padding: 0.75rem 0.75rem 0.75rem 0;
    }

    .items-container.list-view .price-row[b-yi207ij61k] {
        margin-top: auto;
    }

    /* Mobile banner styles */
    .promo-banner[b-yi207ij61k] {
        padding: 10px 12px;
        gap: 8px;
        font-size: 0.9rem;
    }

    .promo-banner.promo-item-banner[b-yi207ij61k] {
        padding: 8px 10px;
        gap: 10px;
    }

    .promo-item-image[b-yi207ij61k] {
        width: 48px;
        height: 48px;
        border-radius: 6px;
    }

    .promo-item-info[b-yi207ij61k] {
        gap: 2px;
    }

    .promo-text[b-yi207ij61k] {
        font-size: 0.85rem;
        line-height: 1.3;
        /* Limit to 2 lines on mobile with word wrap */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .promo-item-name[b-yi207ij61k] {
        font-size: 0.9rem;
    }

    .promo-item-price[b-yi207ij61k] {
        font-size: 0.85rem;
    }

    .promo-countdown[b-yi207ij61k] {
        font-size: 0.8rem;
    }

    .promo-add-btn[b-yi207ij61k] {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .promo-banner.promo-toast[b-yi207ij61k] {
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }

    /* Google Review prompt mobile */
    .google-review-prompt[b-yi207ij61k] {
        margin-top: 1.5rem;
        padding: 1rem;
    }

    .google-review-prompt .review-stars[b-yi207ij61k] {
        font-size: 1.2rem;
    }

    .google-review-prompt .review-message[b-yi207ij61k] {
        font-size: 0.9rem;
    }

    .google-review-prompt .btn-review[b-yi207ij61k] {
        flex-direction: column;
        gap: 0.3rem;
    }

    .google-review-prompt .btn-review .reward-badge[b-yi207ij61k] {
        font-size: 0.8rem;
    }

    .google-review-prompt .review-redeem-hint[b-yi207ij61k] {
        font-size: 0.7rem;
    }

    .google-review-prompt .btn-review.standard[b-yi207ij61k] {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (min-width: 721px) {
    .items-container[b-yi207ij61k] {
        padding-bottom: 100px;
    }

    .fab-container[b-yi207ij61k] {
        bottom: 1rem;
    }
}

/* Tablet+ adjustments */
@media (min-width: 768px) {
    .items-container[b-yi207ij61k] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .modal-content[b-yi207ij61k],
    .cart-drawer[b-yi207ij61k] {
        max-width: 500px;
        margin: 0 auto;
        border-radius: 20px;
        margin-bottom: 2rem;
    }

    .modal-overlay[b-yi207ij61k] {
        align-items: center;
        justify-content: center;
    }

    .skeleton-grid[b-yi207ij61k] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Payment Section ========== */
.payment-section[b-yi207ij61k] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.payment-section h4[b-yi207ij61k] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

.payment-options[b-yi207ij61k] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.payment-option[b-yi207ij61k] {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.payment-option.selected[b-yi207ij61k] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.payment-icon[b-yi207ij61k] {
    font-size: 1.5rem;
}

.payment-label[b-yi207ij61k] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
}

.payment-required-notice[b-yi207ij61k] {
    margin: 0.75rem 0 0 0;
    padding: 0.5rem;
    background: #fff3cd;
    border-radius: 8px;
    color: #856404;
    font-size: 0.85rem;
    text-align: center;
}

/* Dark mode payment */
.qr-order-page.dark .payment-section[b-yi207ij61k] {
    border-top-color: var(--border);
}

.qr-order-page.dark .payment-section h4[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .payment-option[b-yi207ij61k] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.qr-order-page.dark .payment-option:hover[b-yi207ij61k] {
    border-color: var(--accent);
    background: var(--surface-3);
}

.qr-order-page.dark .payment-option.selected[b-yi207ij61k] {
    background: color-mix(in srgb, var(--accent) 20%, #1a1a1a);
}

.qr-order-page.dark .payment-label[b-yi207ij61k] {
    color: #eee;
}

.qr-order-page.dark .payment-required-notice[b-yi207ij61k] {
    background: #332b00;
    color: #ffc107;
}

/* ========== Stripe Payment Modal ========== */
.payment-modal[b-yi207ij61k] {
    max-width: 400px;
    padding: 1.5rem;
    border-radius: 16px;
    margin: auto;
}

.payment-header[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.payment-header h2[b-yi207ij61k] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.payment-amount[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.amount-label[b-yi207ij61k] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.amount-value[b-yi207ij61k] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.stripe-element[b-yi207ij61k] {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 100px;
    margin-bottom: 1rem;
}

.stripe-loading[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 80px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.spinner-small[b-yi207ij61k] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-yi207ij61k 0.8s linear infinite;
}

@keyframes spin-b-yi207ij61k {
    to { transform: rotate(360deg); }
}

.payment-error[b-yi207ij61k] {
    padding: 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.payment-actions[b-yi207ij61k] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-yi207ij61k] {
    flex: 1;
    padding: 0.875rem;
    background: var(--surface-2);
    color: var(--text-muted);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-pay[b-yi207ij61k] {
    flex: 2;
    padding: 0.875rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.btn-pay:disabled[b-yi207ij61k],
.btn-cancel:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark mode payment modal */
.qr-order-page.dark .payment-modal[b-yi207ij61k] {
    background: #1e1e1e;
}

.qr-order-page.dark .payment-header h2[b-yi207ij61k] {
    color: #fff;
}

.qr-order-page.dark .payment-amount[b-yi207ij61k] {
    background: #2a2a2a;
}

.qr-order-page.dark .amount-label[b-yi207ij61k] {
    color: #aaa;
}

.qr-order-page.dark .stripe-element[b-yi207ij61k] {
    background: #2a2a2a;
    border-color: #444;
}

.qr-order-page.dark .payment-error[b-yi207ij61k] {
    background: #4a1515;
    color: #f87171;
}

.qr-order-page.dark .btn-cancel[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* ========== View Bill Button & Modal ========== */

.bill-btn[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    transition: all 0.15s ease;
}

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

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

.bill-btn .bill-icon[b-yi207ij61k] {
    font-size: 1rem;
}

.bill-btn .bill-text[b-yi207ij61k] {
    white-space: nowrap;
}

.bill-btn .bill-amount[b-yi207ij61k] {
    font-weight: 700;
    font-size: 0.9rem;
    padding-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.3);
    margin-left: 4px;
}

.bill-btn.has-amount[b-yi207ij61k] {
    padding-right: 10px;
}

.qr-order-page.dark .bill-btn[b-yi207ij61k] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

/* Bill Modal */
.bill-modal[b-yi207ij61k] {
    max-width: 360px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    margin: auto;
    padding: 1rem;
}

.bill-header[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.bill-header h2[b-yi207ij61k] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.bill-order-ref[b-yi207ij61k] {
    text-align: center;
    margin-bottom: 1rem;
}

.bill-order-no[b-yi207ij61k] {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.bill-empty[b-yi207ij61k] {
    text-align: center;
    padding: 2rem 1rem;
}

.bill-empty .empty-icon[b-yi207ij61k] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.bill-empty h3[b-yi207ij61k] {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
}

.bill-empty p[b-yi207ij61k] {
    color: var(--text-subtle);
    margin-bottom: 1.5rem;
}

/* Bill Items */
.bill-items[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.bill-item[b-yi207ij61k] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.bill-item:last-child[b-yi207ij61k] {
    border-bottom: none;
}

.item-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-qty[b-yi207ij61k] {
    font-weight: 600;
    color: var(--accent);
    min-width: 30px;
}

.item-name[b-yi207ij61k] {
    flex: 1;
}

.item-price[b-yi207ij61k] {
    font-weight: 600;
}

.item-modifier[b-yi207ij61k] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 2rem;
    margin-top: 0.25rem;
}

/* Bill Totals */
.bill-totals[b-yi207ij61k] {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.total-row[b-yi207ij61k] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    gap: 0.5rem;
}

.total-row > span:last-child[b-yi207ij61k] {
    white-space: nowrap;
    flex-shrink: 0;
}

.total-row:first-child[b-yi207ij61k] {
    font-weight: 600;
    font-size: 1.1rem;
}

.total-row.paid[b-yi207ij61k] {
    color: var(--secondary);
}

.total-row.pending[b-yi207ij61k] {
    color: #f57c00;
}

.total-amount[b-yi207ij61k] {
    font-size: 1.2rem;
}

.pending-amount[b-yi207ij61k] {
    font-weight: 700;
}

/* Payment History */
.bill-payments[b-yi207ij61k] {
    margin-bottom: 1rem;
}

.bill-payments h4[b-yi207ij61k] {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.payment-row[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-2);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.pay-icon[b-yi207ij61k] {
    font-size: 1.2rem;
}

.pay-method[b-yi207ij61k] {
    flex: 1;
}

.pay-amount[b-yi207ij61k] {
    font-weight: 600;
}

.pay-time[b-yi207ij61k] {
    color: var(--text-subtle);
    font-size: 0.85rem;
}

/* Pay Actions */
.bill-pay-actions[b-yi207ij61k] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Primary Pay CTA */
.btn-pay-cta[b-yi207ij61k] {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-pay-cta:hover:not(:disabled)[b-yi207ij61k] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-pay-cta:active:not(:disabled)[b-yi207ij61k] {
    transform: translateY(0);
}

.btn-pay-cta:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Secondary PayPal button */
.btn-paypal-alt[b-yi207ij61k] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: #0070ba;
    border: 1px solid #0070ba;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-paypal-alt:hover:not(:disabled)[b-yi207ij61k] {
    background: rgba(0, 112, 186, 0.08);
}

.btn-paypal-alt:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Legacy button styles (keep for compatibility) */
.btn-stripe[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    background: #635bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-stripe:hover:not(:disabled)[b-yi207ij61k] {
    background: #5347d8;
}

.btn-stripe:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-paypal[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    background: #0070ba;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-paypal:hover:not(:disabled)[b-yi207ij61k] {
    background: #005ea6;
}

.btn-paypal:disabled[b-yi207ij61k] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pay at counter info */
.bill-pay-info[b-yi207ij61k] {
    text-align: center;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Fully Paid Badge */
.bill-paid-badge[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.bill-paid-badge span[b-yi207ij61k] {
    font-size: 1.5rem;
}

/* Close Button */
.btn-close-bill[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    background: var(--surface-2);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
}

.btn-close-bill:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

/* Dark Mode for Bill */
.qr-order-page.dark .bill-modal[b-yi207ij61k] {
    background: var(--surface);
    color: var(--text);
}

.qr-order-page.dark .bill-header[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .bill-item[b-yi207ij61k] {
    border-color: var(--border);
}

.qr-order-page.dark .item-modifier[b-yi207ij61k] {
    color: var(--text-subtle);
}

.qr-order-page.dark .bill-totals[b-yi207ij61k] {
    background: #2a2a2a;
}

.qr-order-page.dark .payment-row[b-yi207ij61k] {
    background: #2a2a2a;
}

.qr-order-page.dark .bill-payments h4[b-yi207ij61k],
.qr-order-page.dark .bill-pay-actions h4[b-yi207ij61k] {
    color: var(--text-muted);
}

.qr-order-page.dark .bill-paid-badge[b-yi207ij61k] {
    background: #1b3a1b;
    color: #4caf50;
}

.qr-order-page.dark .btn-close-bill[b-yi207ij61k] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.qr-order-page.dark .btn-close-bill:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

/* ========== Menú del Día Styles ========== */

/* Banner on main page */
.menu-del-dia-banner[b-yi207ij61k] {
    margin: 1rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-del-dia-banner:hover[b-yi207ij61k] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.mddia-content[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mddia-icon[b-yi207ij61k] {
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
}

.mddia-image[b-yi207ij61k] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.mddia-info[b-yi207ij61k] {
    flex: 1;
    min-width: 0;
}

.mddia-title[b-yi207ij61k] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.mddia-desc[b-yi207ij61k] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mddia-includes[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mddia-tag[b-yi207ij61k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.mddia-price[b-yi207ij61k] {
    text-align: right;
    flex-shrink: 0;
}

.mddia-price-value[b-yi207ij61k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.mddia-cta[b-yi207ij61k] {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.25rem;
}

/* Menú del Día Modal */
.mddia-modal[b-yi207ij61k] {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.mddia-includes-detail[b-yi207ij61k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mddia-includes-detail .mddia-tag[b-yi207ij61k] {
    background: var(--accent-light, rgba(33, 150, 243, 0.1));
    color: var(--accent);
}

.mddia-base-price[b-yi207ij61k] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0.5rem 0 1.5rem;
}

.mddia-course[b-yi207ij61k] {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.mddia-course:last-child[b-yi207ij61k] {
    border-bottom: none;
}

.course-title[b-yi207ij61k] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-items[b-yi207ij61k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-item[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.course-item:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.course-item.selected[b-yi207ij61k] {
    background: var(--accent-light, rgba(33, 150, 243, 0.15));
    border: 2px solid var(--accent);
}

.course-item input[type="radio"][b-yi207ij61k] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

.course-item .item-name[b-yi207ij61k] {
    flex: 1;
    font-weight: 500;
}

.course-item .item-supplement[b-yi207ij61k] {
    font-size: 0.9rem;
    color: var(--secondary);
    font-weight: 600;
}

.mddia-quantity[b-yi207ij61k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: 12px;
    margin: 1rem 0;
}

.qty-label[b-yi207ij61k] {
    font-weight: 500;
}

.qty-controls[b-yi207ij61k] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qty-btn[b-yi207ij61k] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover[b-yi207ij61k] {
    opacity: 0.9;
}

.qty-value[b-yi207ij61k] {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
}

.mddia-add[b-yi207ij61k] {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Scheduled Price Display */
.price-row .price-original[b-yi207ij61k] {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.85em;
    margin-right: 0.5rem;
}

.price-row .price.discounted[b-yi207ij61k] {
    color: var(--secondary);
    font-weight: 700;
}

.price-rule-badge[b-yi207ij61k] {
    display: inline-block;
    background: var(--secondary);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

/* Dark mode adjustments for Menú del Día */
.qr-order-page.dark .mddia-includes-detail .mddia-tag[b-yi207ij61k] {
    background: rgba(33, 150, 243, 0.2);
}

.qr-order-page.dark .course-item[b-yi207ij61k] {
    background: var(--surface-2);
}

.qr-order-page.dark .course-item:hover[b-yi207ij61k] {
    background: var(--surface-3);
}

.qr-order-page.dark .course-item.selected[b-yi207ij61k] {
    background: rgba(33, 150, 243, 0.2);
}

.qr-order-page.dark .mddia-quantity[b-yi207ij61k] {
    background: var(--surface-2);
}
/* /Pages/QrOrderStatus.razor.rz.scp.css */
/* Order Status Page - Mobile-First Design */

.order-status-page[b-29c1h8ggci] {
    --accent: #2196F3;
    --secondary: #4CAF50;
    --header-bg: #FFFFFF;
    --header-text: #333333;

    --font-body: "Space Grotesk", "Segoe UI", sans-serif;
    --font-display: "Fraunces", "Space Grotesk", serif;

    --page-bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #e7ecf2;
    --text: #1f2328;
    --text-muted: #5f6b7a;
    --text-subtle: #8a94a3;
    --border: #e0e0e0;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);

    min-height: 100vh;
    background: var(--page-bg);
    font-family: var(--font-body);
    color: var(--text);
}

.order-status-page.theme-classic[b-29c1h8ggci] {
    --page-bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #e7ecf2;
    --text: #1f2328;
    --text-muted: #5f6b7a;
    --text-subtle: #8a94a3;
    --border: #e0e0e0;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
}

.order-status-page.theme-sand[b-29c1h8ggci] {
    --accent: #b8860b;
    --page-bg: linear-gradient(180deg, #f7f1e7 0%, #f3efe8 100%);
    --surface: #fff9f2;
    --surface-2: #f5eadd;
    --surface-3: #eee0d2;
    --text: #2b2118;
    --text-muted: #7c6653;
    --text-subtle: #9b8574;
    --border: #ead9c8;
    --shadow: rgba(56, 31, 12, 0.08);
    --shadow-strong: rgba(56, 31, 12, 0.18);
}

.order-status-page.theme-coast[b-29c1h8ggci] {
    --accent: #26a69a;
    --page-bg: linear-gradient(180deg, #edf7f6 0%, #f5fbfa 100%);
    --surface: #ffffff;
    --surface-2: #e8f3f2;
    --surface-3: #dae8e7;
    --text: #1c2a2a;
    --text-muted: #586d6d;
    --text-subtle: #7d9191;
    --border: #d4e4e4;
    --shadow: rgba(10, 30, 30, 0.08);
    --shadow-strong: rgba(10, 30, 30, 0.18);
}

.order-status-page.theme-slate[b-29c1h8ggci] {
    --accent: #5c7a99;
    --page-bg: linear-gradient(180deg, #f0f3f8 0%, #edf1f6 100%);
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #e1e7ef;
    --text: #1a2433;
    --text-muted: #5b6a7d;
    --text-subtle: #7b889b;
    --border: #d7dee7;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.18);
}

.order-status-page.theme-sage[b-29c1h8ggci] {
    --accent: #5c8c5c;
    --page-bg: linear-gradient(180deg, #eef6ef 0%, #f5faf6 100%);
    --surface: #ffffff;
    --surface-2: #e8f1ea;
    --surface-3: #dbe6de;
    --text: #1f2b22;
    --text-muted: #5b6f61;
    --text-subtle: #7a8d80;
    --border: #d3e1d6;
    --shadow: rgba(19, 41, 26, 0.08);
    --shadow-strong: rgba(19, 41, 26, 0.18);
}

.order-status-page.theme-ember[b-29c1h8ggci] {
    --accent: #d97706;
    --page-bg: linear-gradient(180deg, #fff1e6 0%, #fff6ef 100%);
    --surface: #fffaf6;
    --surface-2: #ffe7d1;
    --surface-3: #ffd7bc;
    --text: #2d2017;
    --text-muted: #7b5a44;
    --text-subtle: #9a7761;
    --border: #ffd0b0;
    --shadow: rgba(84, 36, 12, 0.1);
    --shadow-strong: rgba(84, 36, 12, 0.2);
}

.order-status-page.theme-graphite[b-29c1h8ggci] {
    --accent: #6b7c8a;
    --page-bg: linear-gradient(180deg, #f1f3f6 0%, #eef1f4 100%);
    --surface: #ffffff;
    --surface-2: #edf0f4;
    --surface-3: #e0e5eb;
    --text: #1d2228;
    --text-muted: #5c6672;
    --text-subtle: #7d8792;
    --border: #d5dbe2;
    --shadow: rgba(22, 28, 35, 0.08);
    --shadow-strong: rgba(22, 28, 35, 0.18);
}

/* Subtle Themes */
.order-status-page.theme-lavender[b-29c1h8ggci] {
    --accent: #8b7dc8;
    --page-bg: linear-gradient(180deg, #f5f3fa 0%, #f9f7fc 100%);
    --surface: #ffffff;
    --surface-2: #f0edf7;
    --surface-3: #e6e1f0;
    --text: #2a2635;
    --text-muted: #6b6480;
    --text-subtle: #8d86a0;
    --border: #ddd8eb;
    --shadow: rgba(59, 48, 84, 0.08);
    --shadow-strong: rgba(59, 48, 84, 0.16);
}

.order-status-page.theme-rose[b-29c1h8ggci] {
    --accent: #c77d8e;
    --page-bg: linear-gradient(180deg, #faf5f6 0%, #fcf8f9 100%);
    --surface: #ffffff;
    --surface-2: #f7eff1;
    --surface-3: #f0e5e8;
    --text: #322629;
    --text-muted: #7d6369;
    --text-subtle: #9d8489;
    --border: #eddde0;
    --shadow: rgba(70, 40, 48, 0.08);
    --shadow-strong: rgba(70, 40, 48, 0.16);
}

.order-status-page.theme-mist[b-29c1h8ggci] {
    --accent: #7a9eb8;
    --page-bg: linear-gradient(180deg, #f4f7f9 0%, #f8fafb 100%);
    --surface: #ffffff;
    --surface-2: #eef3f6;
    --surface-3: #e4ebef;
    --text: #232a30;
    --text-muted: #5e6d78;
    --text-subtle: #818f9a;
    --border: #dae3e9;
    --shadow: rgba(35, 50, 60, 0.08);
    --shadow-strong: rgba(35, 50, 60, 0.16);
}

.order-status-page.theme-cream[b-29c1h8ggci] {
    --accent: #c9a86c;
    --page-bg: linear-gradient(180deg, #faf8f4 0%, #fcfbf8 100%);
    --surface: #fffefa;
    --surface-2: #f7f4ed;
    --surface-3: #f0ebe2;
    --text: #2e2b25;
    --text-muted: #6e6659;
    --text-subtle: #918779;
    --border: #e9e4da;
    --shadow: rgba(46, 43, 37, 0.08);
    --shadow-strong: rgba(46, 43, 37, 0.16);
}

/* Dark Mode */
.order-status-page.dark[b-29c1h8ggci] {
    --page-bg: #111418;
    --surface: #1b2026;
    --surface-2: #252c35;
    --surface-3: #2f3843;
    --text: #f5f7fa;
    --text-muted: #b5c0cc;
    --text-subtle: #8793a1;
    --border: #313a44;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    --header-bg: #1b2026;
    --header-text: #f5f7fa;
}

/* Dark mode item status adjustments */
.order-status-page.dark .item-status.pending[b-29c1h8ggci],
.order-status-page.dark .item-status.sent[b-29c1h8ggci] {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

.order-status-page.dark .item-status.preparing[b-29c1h8ggci] {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.order-status-page.dark .item-status.ready[b-29c1h8ggci] {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.order-status-page.dark .estimated-time[b-29c1h8ggci] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.loading-screen[b-29c1h8ggci],
.error-screen[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-29c1h8ggci] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-29c1h8ggci 1s linear infinite;
}

@keyframes spin-b-29c1h8ggci {
    to { transform: rotate(360deg); }
}

.btn-primary[b-29c1h8ggci] {
    padding: 0.75rem 2rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary[b-29c1h8ggci] {
    padding: 0.75rem 2rem;
    background: var(--surface);
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Header */
.status-header[b-29c1h8ggci] {
    background: var(--header-bg);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    box-shadow: 0 2px 4px var(--shadow);
}

.restaurant-name[b-29c1h8ggci] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--header-text);
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-logo[b-29c1h8ggci] {
    height: 40px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.header-actions[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.theme-toggle[b-29c1h8ggci] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s, transform 0.2s;
}

.theme-toggle:hover[b-29c1h8ggci] {
    background: var(--surface-3);
    transform: scale(1.05);
}

.theme-toggle:active[b-29c1h8ggci] {
    transform: scale(0.95);
}

.order-badge[b-29c1h8ggci] {
    background: var(--accent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Secondary, neutral pill (matches the theme-toggle's surface/border) so the
   table reads as context while the order # stays the primary accent badge. */
.table-badge[b-29c1h8ggci] {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Main Content */
.status-content[b-29c1h8ggci] {
    padding: 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Main Status Card */
.main-status[b-29c1h8ggci] {
    background: var(--surface);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.main-status.status-received[b-29c1h8ggci] {
    border-top: 4px solid #2196F3;
}

.main-status.status-preparing[b-29c1h8ggci] {
    border-top: 4px solid #FF9800;
}

.main-status.status-ready[b-29c1h8ggci] {
    border-top: 4px solid #4CAF50;
}

.main-status.status-complete[b-29c1h8ggci] {
    border-top: 4px solid #9E9E9E;
}

.status-icon[b-29c1h8ggci] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse-b-29c1h8ggci 2s ease-in-out infinite;
}

@keyframes pulse-b-29c1h8ggci {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.main-status h1[b-29c1h8ggci] {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--text);
    font-family: var(--font-display);
}

.status-message[b-29c1h8ggci] {
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

.estimated-time[b-29c1h8ggci] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #92400e;
    border: 1px solid #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.time-icon[b-29c1h8ggci] {
    font-size: 1.75rem;
}

.last-updated[b-29c1h8ggci] {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-subtle);
    text-align: center;
}

/* Progress Steps */
.progress-steps[b-29c1h8ggci] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
}

.step[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.step.active[b-29c1h8ggci],
.step.complete[b-29c1h8ggci] {
    opacity: 1;
}

.step.active .step-icon[b-29c1h8ggci] {
    animation: bounce-b-29c1h8ggci 1s ease-in-out infinite;
}

@keyframes bounce-b-29c1h8ggci {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.step-icon[b-29c1h8ggci] {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 50%;
}

.step.complete .step-icon[b-29c1h8ggci] {
    background: var(--secondary);
}

.step.active .step-icon[b-29c1h8ggci] {
    background: var(--accent);
    color: white;
}

.step-label[b-29c1h8ggci] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 60px;
}

.step-line[b-29c1h8ggci] {
    width: 30px;
    height: 2px;
    background: var(--border);
    margin: 0 0.25rem;
    margin-bottom: 1.5rem;
}

.step-line.active[b-29c1h8ggci] {
    background: var(--secondary);
}

/* Order Items */
.order-items[b-29c1h8ggci] {
    background: var(--surface);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.order-items h3[b-29c1h8ggci] {
    font-size: 1rem;
    margin: 0 0 1rem 0;
    color: var(--text);
}

.order-item[b-29c1h8ggci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.order-item:last-child[b-29c1h8ggci] {
    border-bottom: none;
}

.item-info[b-29c1h8ggci] {
    display: flex;
    gap: 0.5rem;
}

.item-qty[b-29c1h8ggci] {
    color: var(--accent);
    font-weight: 600;
}

.item-name[b-29c1h8ggci] {
    color: var(--text);
}

.item-status[b-29c1h8ggci] {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
}

.item-status.pending[b-29c1h8ggci],
.item-status.sent[b-29c1h8ggci] {
    background: #e3f2fd;
    color: #1976D2;
}

.item-status.preparing[b-29c1h8ggci] {
    background: #fff3e0;
    color: #E65100;
}

.item-status.ready[b-29c1h8ggci] {
    background: #e8f5e9;
    color: #2E7D32;
}

.item-status.delivered[b-29c1h8ggci] {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* Order Total */
.order-total[b-29c1h8ggci] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px var(--shadow);
    font-size: 1.125rem;
}

.total-amount[b-29c1h8ggci] {
    font-weight: 700;
    color: var(--text);
}

/* Social Links */
.social-links[b-29c1h8ggci] {
    background: var(--surface);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px var(--shadow);
    text-align: center;
}

.social-links-title[b-29c1h8ggci] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.social-links-row[b-29c1h8ggci] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link[b-29c1h8ggci] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.social-link:hover[b-29c1h8ggci] {
    transform: scale(1.1);
}

.social-link .social-icon[b-29c1h8ggci] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.social-link.instagram .social-icon[b-29c1h8ggci] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link.facebook .social-icon[b-29c1h8ggci] {
    background: #1877f2;
}

.social-link.tiktok .social-icon[b-29c1h8ggci] {
    background: #000;
}

/* Actions - Sticky at bottom */
.actions[b-29c1h8ggci] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface);
    padding: 1rem;
    margin: 1.5rem -1.5rem 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px var(--shadow);
    z-index: 10;
}

.actions button[b-29c1h8ggci] {
    width: 100%;
}

/* Live Indicator */
.live-indicator[b-29c1h8ggci] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--shadow-strong);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.live-dot[b-29c1h8ggci] {
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    animation: blink-b-29c1h8ggci 1.5s ease-in-out infinite;
}

@keyframes blink-b-29c1h8ggci {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Tablet+ */
@media (min-width: 768px) {
    .status-content[b-29c1h8ggci] {
        padding: 2rem;
    }

    .progress-steps[b-29c1h8ggci] {
        padding: 1.5rem 2rem;
    }

    .step-line[b-29c1h8ggci] {
        width: 50px;
    }
}
/* /Pages/ReservationBook.razor.rz.scp.css */
/* ==================== Variables ==================== */
.reservation-book-page[b-i37dyljti1] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0 0 2rem;
    transition: background 0.3s, color 0.3s;
}

.reservation-book-page.dark[b-i37dyljti1] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-i37dyljti1],
.error-screen[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-i37dyljti1] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-i37dyljti1 1s linear infinite;
}

.spinner-small[b-i37dyljti1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-i37dyljti1 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-i37dyljti1 {
    to { transform: rotate(360deg); }
}

.error-icon[b-i37dyljti1] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn-retry[b-i37dyljti1] {
    margin-top: 1rem;
    padding: 12px 24px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* ==================== Header ==================== */
.reservation-header[b-i37dyljti1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.restaurant-branding[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.restaurant-branding .logo[b-i37dyljti1] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.restaurant-branding h1[b-i37dyljti1] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.header-actions[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle[b-i37dyljti1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

.language-selector select[b-i37dyljti1] {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
}

/* ==================== Step Indicator ==================== */
.step-indicator[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    gap: 0;
}

.step[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.step.active[b-i37dyljti1] {
    opacity: 1;
}

.step-number[b-i37dyljti1] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.3s, color 0.3s;
}

.step.active .step-number[b-i37dyljti1] {
    background: var(--brand-primary);
    color: white;
}

.step.completed .step-number[b-i37dyljti1] {
    background: var(--success);
    color: white;
}

.step-label[b-i37dyljti1] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.step.active .step-label[b-i37dyljti1] {
    color: var(--brand-primary);
}

.step-line[b-i37dyljti1] {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 8px;
    margin-bottom: 20px;
    transition: background 0.3s;
}

.step-line.completed[b-i37dyljti1] {
    background: var(--success);
}

/* ==================== Booking Form ==================== */
.booking-form[b-i37dyljti1] {
    margin: 0 1.25rem;
}

.form-section[b-i37dyljti1] {
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.form-section h2[b-i37dyljti1] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

.step-header[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.step-header h2[b-i37dyljti1] {
    margin: 0;
    flex: 1;
    text-align: center;
    padding-right: 40px;
}

.btn-back[b-i37dyljti1] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group[b-i37dyljti1] {
    margin-bottom: 1.25rem;
}

.form-group label[b-i37dyljti1] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.form-group label .required[b-i37dyljti1] {
    color: var(--error);
}

.form-group input[b-i37dyljti1],
.form-group textarea[b-i37dyljti1] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-i37dyljti1],
.form-group textarea:focus[b-i37dyljti1] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-hint[b-i37dyljti1] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==================== Welcome Back Message ==================== */
.welcome-back-message[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: welcomeFadeIn-b-i37dyljti1 0.4s ease-out;
}

.welcome-back-message.platinum[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.1));
    border-color: rgba(168, 85, 247, 0.4);
}

.welcome-back-message.gold[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 179, 8, 0.1));
    border-color: rgba(245, 158, 11, 0.4);
}

.welcome-back-message.silver[b-i37dyljti1] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.1));
    border-color: rgba(148, 163, 184, 0.4);
}

.welcome-back-message .vip-badge[b-i37dyljti1] {
    font-size: 1.25rem;
    animation: welcomeBounce-b-i37dyljti1 0.6s ease-out 0.2s;
}

.welcome-back-message .welcome-text[b-i37dyljti1] {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}

@keyframes welcomeFadeIn-b-i37dyljti1 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes welcomeBounce-b-i37dyljti1 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.blacklist-warning[b-i37dyljti1] {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.85rem;
}

/* ==================== Party Size Selector ==================== */
.party-size-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.party-btn[b-i37dyljti1] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.party-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.party-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.large-party-input[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.large-party-input input[b-i37dyljti1] {
    width: 80px;
    text-align: center;
}

/* ==================== Date Pills ==================== */
.date-pills-container[b-i37dyljti1] {
    overflow-x: auto;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.date-pills[b-i37dyljti1] {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
}

.date-pill[b-i37dyljti1] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
}

.date-pill:hover:not(:disabled)[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.date-pill.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.date-pill.closed[b-i37dyljti1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.date-day[b-i37dyljti1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.date-num[b-i37dyljti1] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.date-month[b-i37dyljti1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.date-closed[b-i37dyljti1] {
    font-size: 0.6rem;
    color: var(--error);
    margin-top: 4px;
}

.date-pill.selected .date-closed[b-i37dyljti1] {
    color: rgba(255,255,255,0.8);
}

/* ==================== Time Slots ==================== */
.selected-date-display[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.date-icon[b-i37dyljti1] {
    font-size: 1.25rem;
}

.hours-info[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--brand-primary);
}

.hours-icon[b-i37dyljti1] {
    font-size: 1rem;
}

.loading-slots[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 2rem;
    color: var(--text-muted);
}

.no-slots[b-i37dyljti1] {
    text-align: center;
    padding: 2rem;
}

.no-slots-icon[b-i37dyljti1] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.time-slots[b-i37dyljti1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 1.5rem;
}

.time-slot[b-i37dyljti1] {
    padding: 14px 8px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.time-slot:hover:not(:disabled)[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.time-slot.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.time-slot.unavailable[b-i37dyljti1] {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.slot-status[b-i37dyljti1] {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.slot-status.few[b-i37dyljti1] {
    color: #f59e0b;
}

.time-slot.selected .slot-status.few[b-i37dyljti1] {
    color: rgba(255,255,255,0.8);
}

/* ==================== Capacity Indicator ==================== */
.capacity-indicator[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 10px;
}

.capacity-bar[b-i37dyljti1] {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.capacity-fill[b-i37dyljti1] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.capacity-fill.high[b-i37dyljti1] {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.capacity-fill.medium[b-i37dyljti1] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.capacity-fill.low[b-i37dyljti1] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.capacity-text[b-i37dyljti1] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.capacity-text span[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==================== Booking Preview ==================== */
.booking-preview[b-i37dyljti1] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.preview-item[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.preview-icon[b-i37dyljti1] {
    font-size: 1rem;
}

/* ==================== Phone Input ==================== */
.phone-input-wrapper[b-i37dyljti1] {
    display: flex;
    align-items: stretch;
}

.phone-input-wrapper input[b-i37dyljti1] {
    border-radius: 0 10px 10px 0;
    flex: 1;
}

/* ==================== Country Code Picker ==================== */
.country-code-picker[b-i37dyljti1] {
    position: relative;
}

.country-code-btn[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 95px;
    transition: all 0.2s;
}

.country-code-btn:hover[b-i37dyljti1] {
    background: var(--bg-hover);
}

.country-code-btn:focus[b-i37dyljti1] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -1px;
}

.selected-country[b-i37dyljti1] {
    flex: 1;
    text-align: left;
}

.dropdown-arrow[b-i37dyljti1] {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.country-backdrop[b-i37dyljti1] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.country-dropdown[b-i37dyljti1] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 1000;
    margin-top: 4px;
    overflow: hidden;
}

.country-search[b-i37dyljti1] {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.country-search input[b-i37dyljti1] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.country-search input:focus[b-i37dyljti1] {
    outline: none;
    border-color: var(--brand-primary);
}

.country-search input[b-i37dyljti1]::placeholder {
    color: var(--text-muted);
}

.country-list[b-i37dyljti1] {
    max-height: 300px;
    overflow-y: auto;
}

.country-option[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.country-option:hover[b-i37dyljti1] {
    background: var(--bg-hover);
}

.country-option.selected[b-i37dyljti1] {
    background: rgba(99, 102, 241, 0.15);
}

.country-flag[b-i37dyljti1] {
    font-size: 1.2rem;
    line-height: 1;
}

.country-name[b-i37dyljti1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-code[b-i37dyljti1] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Custom scrollbar for country list */
.country-list[b-i37dyljti1]::-webkit-scrollbar {
    width: 6px;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-track {
    background: transparent;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.country-list[b-i37dyljti1]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==================== Zone Selector ==================== */
.zone-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-btn[b-i37dyljti1] {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
}

.zone-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Occasion Selector ==================== */
.occasion-selector[b-i37dyljti1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.occasion-btn[b-i37dyljti1] {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.occasion-btn:hover[b-i37dyljti1] {
    border-color: var(--brand-primary);
    background: rgba(99, 102, 241, 0.05);
}

.occasion-btn.selected[b-i37dyljti1] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Special Requests ==================== */
.expand-btn[b-i37dyljti1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.expand-btn .chevron[b-i37dyljti1] {
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.expand-btn .chevron.expanded[b-i37dyljti1] {
    transform: rotate(90deg);
}

.form-group textarea[b-i37dyljti1] {
    resize: none;
    margin-top: 8px;
}

/* ==================== Buttons ==================== */
.btn-next[b-i37dyljti1],
.btn-book[b-i37dyljti1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    margin-top: 1rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-next:hover:not(:disabled)[b-i37dyljti1],
.btn-book:hover:not(:disabled)[b-i37dyljti1] {
    background: var(--brand-primary-hover);
}

.btn-next:active:not(:disabled)[b-i37dyljti1],
.btn-book:active:not(:disabled)[b-i37dyljti1] {
    transform: scale(0.98);
}

.btn-next:disabled[b-i37dyljti1],
.btn-book:disabled[b-i37dyljti1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-i37dyljti1] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

.submit-error[b-i37dyljti1] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Success Screen ==================== */
.success-screen[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-icon[b-i37dyljti1] {
    width: 80px;
    height: 80px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.success-screen h2[b-i37dyljti1] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.booking-summary[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.summary-row[b-i37dyljti1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.summary-icon[b-i37dyljti1] {
    font-size: 1.25rem;
}

.confirmation-message[b-i37dyljti1] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 280px;
}

.btn-track[b-i37dyljti1] {
    padding: 16px 48px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-track:hover[b-i37dyljti1] {
    background: var(--brand-primary-hover);
}

.btn-track:active[b-i37dyljti1] {
    transform: scale(0.98);
}

/* Confirmation actions container */
.confirmation-actions[b-i37dyljti1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

.btn-calendar[b-i37dyljti1] {
    padding: 14px 24px;
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-calendar:hover[b-i37dyljti1] {
    background: var(--brand-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.btn-calendar:active[b-i37dyljti1] {
    transform: scale(0.98);
}

/* ==================== Confetti ==================== */
.confetti-container[b-i37dyljti1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-i37dyljti1] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    top: -10px;
    left: 50%;
    transform: translateX(var(--x));
    animation: confetti-fall-b-i37dyljti1 3s ease-out var(--delay) forwards;
    border-radius: 2px;
}

.confetti:nth-child(2n)[b-i37dyljti1] {
    background: var(--success);
    width: 8px;
    height: 12px;
}

.confetti:nth-child(3n)[b-i37dyljti1] {
    background: #f59e0b;
    width: 12px;
    height: 8px;
}

.confetti:nth-child(5n)[b-i37dyljti1] {
    background: #ec4899;
}

@keyframes confetti-fall-b-i37dyljti1 {
    0% {
        opacity: 1;
        transform: translateX(var(--x)) translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(var(--x) + 30px)) translateY(100vh) rotate(720deg);
    }
}

/* ==================== Animations ==================== */
.bounce-in[b-i37dyljti1] {
    animation: bounce-in-b-i37dyljti1 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in-b-i37dyljti1 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in[b-i37dyljti1] {
    animation: fade-in-b-i37dyljti1 0.5s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fade-in-b-i37dyljti1 {
    to {
        opacity: 1;
    }
}

/* ==================== RTL Support (Arabic) ==================== */
[dir="rtl"] .country-code-btn[b-i37dyljti1] {
    border-right: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

[dir="rtl"] .country-dropdown[b-i37dyljti1] {
    left: auto;
    right: 0;
}

[dir="rtl"] .phone-input-wrapper input[b-i37dyljti1] {
    border-radius: 10px 0 0 10px;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .party-btn[b-i37dyljti1] {
        width: 40px;
        height: 40px;
    }

    .time-slots[b-i37dyljti1] {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .booking-preview[b-i37dyljti1] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .step-line[b-i37dyljti1] {
        width: 24px;
    }
}

/* ==================== Payment Step ==================== */
.deposit-info[b-i37dyljti1] {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    color: white;
    margin-bottom: 1.5rem;
}

.deposit-info h3[b-i37dyljti1] {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
    opacity: 0.9;
}

.deposit-amount[b-i37dyljti1] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.deposit-description[b-i37dyljti1] {
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
    opacity: 0.85;
}

.payment-element-container[b-i37dyljti1] {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.payment-error[b-i37dyljti1] {
    background: #fee;
    color: var(--error);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 0.875rem;
    border-left: 4px solid var(--error);
}

.btn-book[b-i37dyljti1] {
    width: 100%;
    padding: 16px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.btn-book:hover:not(:disabled)[b-i37dyljti1] {
    background: var(--brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-book:disabled[b-i37dyljti1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-book:active:not(:disabled)[b-i37dyljti1] {
    transform: translateY(0);
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for party size buttons */
.party-btn[b-i37dyljti1] {
    min-width: 48px;
    min-height: 48px;
}

/* Better touch targets for time slots */
.time-slot[b-i37dyljti1] {
    min-height: 44px;
    padding: 12px 16px;
}

/* Larger booking button for touch */
.btn-book[b-i37dyljti1] {
    min-height: 52px;
    padding: 16px 24px;
}

/* Form inputs touch-friendly */
.form-field input[b-i37dyljti1],
.form-field textarea[b-i37dyljti1],
.form-field select[b-i37dyljti1] {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom */
}

/* Tap feedback */
.party-btn:active[b-i37dyljti1],
.time-slot:active[b-i37dyljti1],
.zone-btn:active[b-i37dyljti1] {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Prevent text selection on interactive elements */
.party-btn[b-i37dyljti1],
.time-slot[b-i37dyljti1],
.zone-btn[b-i37dyljti1],
.step-indicator[b-i37dyljti1],
.booking-preview[b-i37dyljti1] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
.reservation-book-page[b-i37dyljti1] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ========================================
   MICRO-INTERACTIONS & POLISH
   ======================================== */

/* Selected time slot glow */
.time-slot.selected[b-i37dyljti1] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Party size button pulse on selection */
.party-btn.selected[b-i37dyljti1] {
    animation: selectPop-b-i37dyljti1 0.3s ease-out;
}

@keyframes selectPop-b-i37dyljti1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Form field focus animation */
.form-field input:focus[b-i37dyljti1],
.form-field textarea:focus[b-i37dyljti1] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    transition: box-shadow 0.2s ease;
}

/* Step indicator progress animation */
.step-indicator.completed .step-circle[b-i37dyljti1] {
    animation: stepComplete-b-i37dyljti1 0.4s ease-out;
}

@keyframes stepComplete-b-i37dyljti1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Booking preview card hover */
.booking-preview:hover[b-i37dyljti1] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Zone button selection effect */
.zone-btn.selected[b-i37dyljti1] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Success animation for confirmation */
@keyframes successBounce-b-i37dyljti1 {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(-5px); }
    75% { transform: translateY(-2px); }
}

.confirmation-icon[b-i37dyljti1] {
    animation: successBounce-b-i37dyljti1 0.6s ease-out;
}

/* Calendar day hover effect */
.calendar-day:hover:not(.disabled):not(.selected)[b-i37dyljti1] {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.05);
    transition: all 0.15s ease;
}

.calendar-day.selected[b-i37dyljti1] {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .form-field input[b-i37dyljti1],
    .form-field textarea[b-i37dyljti1] {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .btn-book[b-i37dyljti1] {
        position: sticky;
        bottom: 16px;
        width: calc(100% - 32px);
        margin: 1rem 16px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* RGPD privacy-consent checkbox (gates the submit / payment step) */
.privacy-consent[b-i37dyljti1] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
}

.privacy-consent input[type="checkbox"][b-i37dyljti1] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 1px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.privacy-consent a[b-i37dyljti1] {
    color: var(--brand-primary);
    text-decoration: underline;
}
/* /Pages/ReservationStatus.razor.rz.scp.css */
/* ==================== Variables ==================== */
.reservation-status-page[b-9r09c9b738] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.3s, color 0.3s;
}

.reservation-status-page.dark[b-9r09c9b738] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-9r09c9b738],
.error-screen[b-9r09c9b738],
.status-screen[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-9r09c9b738] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-9r09c9b738 1s linear infinite;
}

.spinner-small[b-9r09c9b738] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9r09c9b738 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-9r09c9b738 {
    to { transform: rotate(360deg); }
}

.error-icon[b-9r09c9b738],
.status-icon[b-9r09c9b738] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.error-screen .error-icon[b-9r09c9b738] {
    background: var(--error);
    color: white;
}

.status-screen.cancelled .status-icon[b-9r09c9b738] {
    background: var(--error);
    color: white;
}

.status-screen.no-show .status-icon[b-9r09c9b738] {
    background: var(--warning);
    color: white;
}

.status-screen.completed .status-icon[b-9r09c9b738] {
    background: var(--success);
    color: white;
}

.status-screen h2[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.status-screen p[b-9r09c9b738] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.btn-primary[b-9r09c9b738] {
    padding: 14px 32px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary[b-9r09c9b738] {
    padding: 14px 32px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

/* ==================== Confirmed Screen ==================== */
.confirmed-screen[b-9r09c9b738] {
    min-height: 100vh;
    padding-bottom: 2rem;
}

.status-header[b-9r09c9b738] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.restaurant-name[b-9r09c9b738] {
    font-size: 1.125rem;
    font-weight: 600;
}

.theme-toggle[b-9r09c9b738] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

/* ==================== Confirmation Badge ==================== */
.confirmation-badge[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem;
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
}

.badge-icon[b-9r09c9b738] {
    width: 24px;
    height: 24px;
    background: white;
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
}

.badge-text[b-9r09c9b738] {
    font-weight: 600;
    font-size: 1rem;
}

/* ==================== Confirmation Code Card ==================== */
.confirmation-code-card[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 1.25rem 0;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 2px dashed var(--border);
}

.code-label[b-9r09c9b738] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.code-value[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    color: var(--brand-primary);
}

/* ==================== Restaurant Info Card ==================== */
.restaurant-info-card[b-9r09c9b738] {
    margin: 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.info-row[b-9r09c9b738] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.info-row:last-child[b-9r09c9b738] {
    border-bottom: none;
}

.info-row:hover[b-9r09c9b738] {
    background: rgba(99, 102, 241, 0.05);
}

.info-row .info-icon[b-9r09c9b738] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-row .info-content[b-9r09c9b738] {
    flex: 1;
    min-width: 0;
}

.info-row .info-label[b-9r09c9b738] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.info-row .info-value[b-9r09c9b738] {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.3;
}

.info-row .arrow[b-9r09c9b738] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ==================== Quick Actions ==================== */
.quick-actions[b-9r09c9b738] {
    display: flex;
    gap: 12px;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}

.quick-actions .btn-calendar[b-9r09c9b738],
.quick-actions .btn-share[b-9r09c9b738] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-actions .btn-calendar:hover[b-9r09c9b738],
.quick-actions .btn-share:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
    background: rgba(99, 102, 241, 0.05);
}

.quick-actions .cal-icon[b-9r09c9b738],
.quick-actions .share-icon[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Booking Card ==================== */
.booking-card[b-9r09c9b738] {
    margin: 1.25rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.booking-header[b-9r09c9b738] {
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    text-align: center;
}

.date-day[b-9r09c9b738] {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 4px;
}

.date-full[b-9r09c9b738] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.booking-details[b-9r09c9b738] {
    padding: 1.25rem;
}

.detail-row[b-9r09c9b738] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child[b-9r09c9b738] {
    border-bottom: none;
}

.detail-icon[b-9r09c9b738] {
    font-size: 1.25rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.detail-content[b-9r09c9b738] {
    flex: 1;
}

.detail-label[b-9r09c9b738] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.detail-value[b-9r09c9b738] {
    display: block;
    font-size: 1rem;
    font-weight: 500;
}

.special-requests .detail-value[b-9r09c9b738] {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==================== Calendar Actions ==================== */
.calendar-actions[b-9r09c9b738] {
    display: flex;
    justify-content: center;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}

.btn-calendar[b-9r09c9b738] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s;
}

.btn-calendar:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
}

.cal-icon[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Status Info ==================== */
.status-info[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin: 0 1.25rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.status-info.pending[b-9r09c9b738] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.status-info.reminded[b-9r09c9b738] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--brand-primary);
}

.status-icon-small[b-9r09c9b738] {
    font-size: 1rem;
}

/* ==================== Cancel Button ==================== */
.btn-cancel[b-9r09c9b738] {
    display: block;
    width: calc(100% - 2.5rem);
    margin: 1.5rem auto 0;
    padding: 14px;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-cancel:hover[b-9r09c9b738] {
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== Modal ==================== */
.modal-overlay[b-9r09c9b738] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content[b-9r09c9b738] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.modal-content h3[b-9r09c9b738] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.modal-content p[b-9r09c9b738] {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.modal-actions[b-9r09c9b738] {
    display: flex;
    gap: 12px;
}

.modal-actions button[b-9r09c9b738] {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger[b-9r09c9b738] {
    background: var(--error);
    color: white;
    border: none;
}

.btn-danger:disabled[b-9r09c9b738] {
    opacity: 0.6;
}

/* ==================== Arrival Confirmation ==================== */
.arrival-confirmed[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    margin: 0 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    animation: confirmFadeIn-b-9r09c9b738 0.4s ease-out;
}

.arrival-confirmed .confirmed-icon[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
}

.arrival-confirmed .confirmed-text[b-9r09c9b738] {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

.btn-on-my-way[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 2.5rem);
    margin: 0 1.25rem 1rem;
    padding: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-on-my-way:hover:not(:disabled)[b-9r09c9b738] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

.btn-on-my-way:disabled[b-9r09c9b738] {
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-on-my-way.confirming[b-9r09c9b738] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.btn-on-my-way .spinner-small[b-9r09c9b738] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-9r09c9b738 0.8s linear infinite;
}

@keyframes confirmFadeIn-b-9r09c9b738 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== Action Buttons ==================== */
.action-buttons[b-9r09c9b738] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 2.5rem);
    margin: 1.5rem auto 0;
}

.btn-edit[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-edit:hover[b-9r09c9b738] {
    background: var(--brand-primary-hover);
}

.action-buttons .btn-cancel[b-9r09c9b738] {
    width: 100%;
    margin: 0;
}

/* ==================== Edit Modal ==================== */
.edit-modal[b-9r09c9b738] {
    max-width: 360px;
    width: calc(100% - 2rem);
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
}

.edit-modal h3[b-9r09c9b738] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.edit-field[b-9r09c9b738] {
    margin-bottom: 1.25rem;
}

.edit-field label[b-9r09c9b738] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.edit-field input[type="date"][b-9r09c9b738] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
}

.slots-loading[b-9r09c9b738] {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.time-slot-grid[b-9r09c9b738] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.time-slot-btn[b-9r09c9b738] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.time-slot-btn:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
}

.time-slot-btn.selected[b-9r09c9b738] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.no-slots[b-9r09c9b738] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.party-size-selector[b-9r09c9b738] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.size-btn[b-9r09c9b738] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.size-btn:hover[b-9r09c9b738] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.size-value[b-9r09c9b738] {
    font-size: 1.5rem;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.size-hint[b-9r09c9b738] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
}

.edit-error[b-9r09c9b738] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 1rem;
}

.edit-modal .modal-actions[b-9r09c9b738] {
    margin-top: 1.5rem;
}

.btn-primary[b-9r09c9b738] {
    background: var(--brand-primary);
    color: white;
    border: none;
}

.btn-primary:hover[b-9r09c9b738] {
    background: var(--brand-primary-hover);
}

.btn-primary:disabled[b-9r09c9b738] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-9r09c9b738] {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover[b-9r09c9b738] {
    background: var(--bg);
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .booking-header[b-9r09c9b738] {
        padding: 1rem;
    }

    .date-full[b-9r09c9b738] {
        font-size: 1.125rem;
    }

    .modal-actions[b-9r09c9b738] {
        flex-direction: column;
    }
}
/* /Pages/Shared/Components/AiMenuImportPanel.razor.rz.scp.css */
/* Mobile-first AI menu import. Self-contained dark panel; safe inside the
   admin page OR an inline full-screen modal. Everything is width-bounded so it
   never overflows a phone viewport. */
.aimi[b-wi0v608spu] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 14px 28px;
    box-sizing: border-box;
    color: #f1f5f9;
    -webkit-text-size-adjust: 100%;
}
.aimi *[b-wi0v608spu] { box-sizing: border-box; }

.aimi-head[b-wi0v608spu] { position: relative; margin-bottom: 1rem; }
.aimi-close[b-wi0v608spu] {
    position: absolute;
    top: -2px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #30363d;
    background: #161b22;
    color: #cbd5e1;
    font-size: 1.1rem;
    cursor: pointer;
}
.aimi-close:active[b-wi0v608spu] { background: rgba(255,255,255,.06); }
.aimi-head h1[b-wi0v608spu] { margin: 0 44px 0.4rem 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.aimi-lede[b-wi0v608spu] { margin: 0; color: #94a3b8; font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }

.aimi-card[b-wi0v608spu] {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}
.aimi-card-title[b-wi0v608spu] { font-size: 0.98rem; font-weight: 800; margin-bottom: 4px; }
.aimi-center[b-wi0v608spu] { text-align: center; padding: 2.25rem 1rem; }

/* styled file picker (hides the ugly default input) */
.aimi-file-btn[b-wi0v608spu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px dashed #4b3f8f;
    background: rgba(124,92,255,.08);
    color: #c4b5fd;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    text-align: center;
}
.aimi-file-btn:active[b-wi0v608spu] { background: rgba(124,92,255,.16); }
.aimi-file-chosen[b-wi0v608spu] {
    margin-top: 10px;
    color: #cbd5e1;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.aimi-or[b-wi0v608spu] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0;
}
.aimi-or[b-wi0v608spu]::before, .aimi-or[b-wi0v608spu]::after { content: ""; flex: 1; height: 1px; background: #30363d; }
.aimi-or span[b-wi0v608spu] { padding: 0 12px; }

.aimi-textarea[b-wi0v608spu] {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    padding: 12px 14px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 10px;
    color: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    outline: none;
}
.aimi-textarea:focus[b-wi0v608spu] { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.2); }

.aimi-row[b-wi0v608spu] { display: flex; align-items: center; justify-content: space-between; margin-top: 0.8rem; gap: 12px; }
.aimi-hint[b-wi0v608spu] { color: #64748b; font-size: 0.8rem; }

.aimi-btn[b-wi0v608spu] {
    border: none;
    border-radius: 11px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 46px;
    white-space: nowrap;
}
.aimi-btn.block[b-wi0v608spu] { display: block; width: 100%; margin-top: 12px; }
.aimi-btn.sm[b-wi0v608spu] { padding: 8px 12px; min-height: 38px; font-size: 0.85rem; }
.aimi-btn.primary[b-wi0v608spu] {
    background: linear-gradient(135deg, #7c5cff 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 4px 14px -3px rgba(99,102,241,.4);
}
.aimi-btn.primary:disabled[b-wi0v608spu] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.aimi-btn.ghost[b-wi0v608spu] { background: transparent; border: 1px solid #30363d; color: #cbd5e1; }
.aimi-btn.ghost:active[b-wi0v608spu] { background: rgba(255,255,255,.05); }

.aimi-error[b-wi0v608spu] {
    margin-top: 1rem;
    padding: 12px 14px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.aimi-spinner[b-wi0v608spu] {
    width: 36px; height: 36px;
    border: 3px solid #30363d;
    border-top-color: #a78bfa;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: aimi-spin-b-wi0v608spu 0.8s linear infinite;
}
@keyframes aimi-spin-b-wi0v608spu { to { transform: rotate(360deg); } }

.aimi-review-head[b-wi0v608spu] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 0.85rem; color: #cbd5e1; font-size: 0.9rem; line-height: 1.4;
}
.aimi-flag-count[b-wi0v608spu] {
    display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
    background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4); color: #fcd34d;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.aimi-note[b-wi0v608spu] {
    margin-bottom: 14px; padding: 11px 13px;
    background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3);
    border-radius: 10px; color: #fcd34d; font-size: 0.84rem; line-height: 1.5;
}
.aimi-note strong[b-wi0v608spu] { color: #fde68a; }

.aimi-cat[b-wi0v608spu] { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 13px; margin-bottom: 12px; }
.aimi-cat-head[b-wi0v608spu] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.aimi-cat-name[b-wi0v608spu] {
    flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px dashed #30363d;
    color: #fff; font-size: 1.02rem; font-weight: 800; padding: 4px 2px; outline: none;
}
.aimi-cat-name:focus[b-wi0v608spu] { border-bottom-color: #a78bfa; }

.aimi-cat-map[b-wi0v608spu] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.aimi-map-label[b-wi0v608spu] { color: #94a3b8; font-size: 0.8rem; }
.aimi-select[b-wi0v608spu] {
    flex: 1; min-width: 140px; max-width: 100%;
    background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    color: #f1f5f9; padding: 8px 10px; font-size: 0.86rem; outline: none;
}
.aimi-select:focus[b-wi0v608spu] { border-color: #a78bfa; }
.aimi-badge[b-wi0v608spu] { padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.aimi-badge.new[b-wi0v608spu] { background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.4); color: #c4b5fd; }
.aimi-badge.exist[b-wi0v608spu] { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #86efac; }

.aimi-item-block[b-wi0v608spu] { padding: 9px 0; border-bottom: 1px solid rgba(48,54,61,.5); }
.aimi-item-block:last-child[b-wi0v608spu] { border-bottom: none; }
.aimi-item-block.lowconf[b-wi0v608spu] { background: rgba(245,158,11,.06); border-left: 3px solid rgba(245,158,11,.6); border-radius: 6px; padding-left: 8px; margin-left: -8px; }
.aimi-lowconf-note[b-wi0v608spu] { color: #fcd34d; font-size: 0.76rem; margin: 4px 0 2px; }

.aimi-item[b-wi0v608spu] { display: flex; align-items: center; gap: 7px; }
.aimi-item-name[b-wi0v608spu] {
    flex: 1; min-width: 0; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    color: #f1f5f9; padding: 9px 10px; font-size: 0.9rem; outline: none;
}
.aimi-item-name:focus[b-wi0v608spu] { border-color: #a78bfa; }
.aimi-item-price[b-wi0v608spu] {
    width: 78px; flex-shrink: 0; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    color: #f1f5f9; padding: 9px 8px; font-size: 0.9rem; text-align: right; outline: none;
}
.aimi-item-price:focus[b-wi0v608spu] { border-color: #a78bfa; }
.aimi-eur[b-wi0v608spu] { color: #94a3b8; font-size: 0.9rem; flex-shrink: 0; }
.aimi-del[b-wi0v608spu] {
    background: transparent; border: none; color: #64748b; font-size: 0.95rem; cursor: pointer;
    padding: 6px 6px; border-radius: 6px; flex-shrink: 0; min-width: 32px;
}
.aimi-del:active[b-wi0v608spu] { background: rgba(239,68,68,.12); color: #fca5a5; }

.aimi-item-desc[b-wi0v608spu] {
    width: 100%; margin-top: 6px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    color: #cbd5e1; padding: 7px 10px; font-size: 0.83rem; outline: none;
}
.aimi-item-desc:focus[b-wi0v608spu] { border-color: #a78bfa; }

.aimi-chips[b-wi0v608spu] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.aimi-chip[b-wi0v608spu] { border: 1px solid #30363d; background: #0d1117; color: #cbd5e1; border-radius: 999px; padding: 4px 10px; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.aimi-chip.alg[b-wi0v608spu] { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); color: #fca5a5; }
.aimi-chip.diet[b-wi0v608spu] { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #86efac; }
.aimi-chip.add[b-wi0v608spu] { background: transparent; border-style: dashed; color: #a78bfa; }

.aimi-allergen-grid[b-wi0v608spu] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
    margin-top: 8px; padding: 8px; background: #0d1117; border: 1px solid #30363d; border-radius: 10px;
}
.aimi-alg-toggle[b-wi0v608spu] { border: 1px solid #30363d; background: #161b22; color: #94a3b8; border-radius: 8px; padding: 8px; font-size: 0.78rem; text-align: left; cursor: pointer; min-height: 40px; }
.aimi-alg-toggle.on[b-wi0v608spu] { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.5); color: #fca5a5; font-weight: 700; }

.aimi-actions[b-wi0v608spu] { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 1rem; }
.aimi-actions .aimi-btn[b-wi0v608spu] { flex: 1; }

.aimi-done-icon[b-wi0v608spu] {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(34,197,94,.15); border: 2px solid rgba(34,197,94,.5); color: #4ade80;
    font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.aimi h2[b-wi0v608spu] { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; }

/* PIN step-up */
.aimi-pin-backdrop[b-wi0v608spu] { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 4100; padding: 16px; }
.aimi-pin-card[b-wi0v608spu] { background: #161b22; border: 1px solid #30363d; border-radius: 14px; padding: 1.4rem; max-width: 380px; width: 100%; color: #f1f5f9; box-sizing: border-box; }
.aimi-pin-card h3[b-wi0v608spu] { margin: 0 0 0.5rem; font-size: 1.12rem; font-weight: 800; }
.aimi-pin-card p[b-wi0v608spu] { margin: 0 0 1rem; color: #94a3b8; font-size: 0.86rem; line-height: 1.5; }
.aimi-pin-input[b-wi0v608spu] { width: 100%; box-sizing: border-box; background: #0d1117; border: 1px solid #30363d; border-radius: 10px; color: #f1f5f9; padding: 12px 14px; font-size: 1.3rem; letter-spacing: 0.3em; text-align: center; outline: none; }
.aimi-pin-input:focus[b-wi0v608spu] { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167,139,250,.2); }
/* /Pages/Shared/Components/AllergenPicker.razor.rz.scp.css */
.allergen-picker[b-hcd1j3vxa4] {
    margin-bottom: 12px;
}

.picker-label[b-hcd1j3vxa4] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
}

.allergen-grid[b-hcd1j3vxa4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.allergen-badge[b-hcd1j3vxa4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    min-height: 44px;
    border: 2px solid #334155;
    border-radius: 8px;
    background: #1e293b;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.7rem;
    -webkit-tap-highlight-color: transparent;
}

.allergen-badge:hover[b-hcd1j3vxa4], .allergen-badge:active[b-hcd1j3vxa4] {
    border-color: #475569;
    background: #263548;
}

.allergen-badge.active[b-hcd1j3vxa4] {
    border-color: #f59e0b;
    background: #451a03;
    color: #fbbf24;
}

.allergen-badge.readonly[b-hcd1j3vxa4],
.allergen-badge:disabled[b-hcd1j3vxa4] {
    opacity: 0.6;
    cursor: not-allowed;
}

.badge-icon[b-hcd1j3vxa4] {
    font-size: 1.2rem;
    line-height: 1;
}

.badge-code[b-hcd1j3vxa4] {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.allergen-summary[b-hcd1j3vxa4] {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #f59e0b;
    line-height: 1.4;
}

.allergen-badge:focus-visible[b-hcd1j3vxa4] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .allergen-grid[b-hcd1j3vxa4] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 480px) {
    .allergen-grid[b-hcd1j3vxa4] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Pages/Shared/Components/BasketSummary.razor.rz.scp.css */
/* ========================================
   BASKET SCROLLBAR - Thicker for easy grabbing
   ======================================== */
.lines[b-719aae8r8e] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: auto; /* Firefox - use standard width instead of thin */
    scrollbar-color: #9ca3af #f1f5f9; /* thumb track */
}

.lines[b-719aae8r8e]::-webkit-scrollbar {
    width: 16px;
}

.lines[b-719aae8r8e]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}

.lines[b-719aae8r8e]::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 6px;
    border: 2px solid #f1f5f9; /* Creates padding effect */
}

.lines[b-719aae8r8e]::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Dark theme scrollbar */
html[data-theme="dark"] .lines[b-719aae8r8e] {
    scrollbar-color: #4b5563 #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-track {
    background: #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-color: #1f2937;
}

html[data-theme="dark"] .lines[b-719aae8r8e]::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ========================================
   LINE ACTIONS - Touch-friendly layout
   ======================================== */

/* Action group (options + delete) */
.line-actions .action-group[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.line-actions .action-group button[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.line-actions .action-group button:hover[b-719aae8r8e] {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.line-actions .action-group .trash[b-719aae8r8e] {
    color: #6b7280;
}

.line-actions .action-group .trash:hover[b-719aae8r8e] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Quantity group - visually unified */
.line-actions .qty-group[b-719aae8r8e] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2px;
    gap: 0;
}

.line-actions .qty-group button[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    color: #374151;
    border-radius: 10px;
    transition: all 0.1s ease;
}

.line-actions .qty-group button:hover[b-719aae8r8e] {
    background: #e2e8f0;
}

.line-actions .qty-group button:active[b-719aae8r8e] {
    background: #cbd5e1;
    transform: scale(0.95);
}

.line-actions .qty-group button:disabled[b-719aae8r8e] {
    opacity: 0.4;
    cursor: not-allowed;
}

.line-actions .qty-group .count[b-719aae8r8e] {
    min-width: 36px;
    text-align: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: #111827;
    padding: 0 4px;
}

/* Legacy support for old .qty class */
.line-actions .qty button[b-719aae8r8e],
.line-actions .qty .trash[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    text-align: center;
    flex-shrink: 0;
}

.line-actions .more[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

.line-actions .qty .count[b-719aae8r8e] {
    min-width: 30px;
    text-align: center;
    font-weight: 800;
}

/* ========================================
   NOTE BUTTON - Clear affordance
   ======================================== */
.line-actions .note-btn[b-719aae8r8e] {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
}

.line-actions .note-btn:hover[b-719aae8r8e] {
    background: #fef3c7;
    border-color: #fcd34d;
}

/* Note button with existing note - highlighted */
.line-actions .note-btn.has-note[b-719aae8r8e] {
    background: #fef3c7;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.line-actions .note-btn.has-note:hover[b-719aae8r8e] {
    background: #fde68a;
    border-color: #d97706;
}

/* Note indicator dot */
.line-actions .note-btn .note-btn-indicator[b-719aae8r8e] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: note-pulse-b-719aae8r8e 2s ease-in-out infinite;
}

@keyframes note-pulse-b-719aae8r8e {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Trash button - standalone with more spacing */
.line-actions .trash[b-719aae8r8e] {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all 0.15s ease;
    color: #6b7280;
    margin-left: 8px;
}

.line-actions .trash:hover[b-719aae8r8e] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.line-actions .trash:disabled[b-719aae8r8e] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Dark theme - Note button */
html[data-theme="dark"] .line-actions .note-btn[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
}

html[data-theme="dark"] .line-actions .note-btn:hover[b-719aae8r8e] {
    background: #78350f;
    border-color: #f59e0b;
}

html[data-theme="dark"] .line-actions .note-btn.has-note[b-719aae8r8e] {
    background: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

html[data-theme="dark"] .line-actions .note-btn.has-note:hover[b-719aae8r8e] {
    background: #92400e;
    border-color: #fbbf24;
}

html[data-theme="dark"] .line-actions .note-btn .note-btn-indicator[b-719aae8r8e] {
    border-color: #374151;
}

html[data-theme="dark"] .line-actions .trash[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

html[data-theme="dark"] .line-actions .trash:hover[b-719aae8r8e] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

.basket-item[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Alternating backgrounds for better separation */
.basket-item:nth-child(odd)[b-719aae8r8e] {
    background: rgba(0,0,0,.02);
}

/* New items - white/clean look */
.basket-item.status-new[b-719aae8r8e] {
    background: #fff;
    border-color: #e5e7eb;
    border-left: 3px solid #e5e7eb;
}

/* Sent items - subtle gray to show "done" */
.basket-item.status-sent[b-719aae8r8e] {
    background: #f8fafc;
    border-color: #e5e7eb;
    border-left: 3px solid #22c55e;
}

/* Preparing items */
.basket-item.status-preparing[b-719aae8r8e] {
    background: #eff6ff;
    border-color: #dbeafe;
    border-left: 3px solid #3b82f6;
}

.basket-item .line-head[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.basket-item .line-head .info[b-719aae8r8e] {
    flex: 1 1 auto;
    min-width: 80px;
    overflow: hidden;
}

/* Item name container */
.basket-item .line-head .info .name[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

/* Item name text - truncate with ellipsis */
.basket-item .line-head .info .name .name-text[b-719aae8r8e] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Status dot */
.basket-item .line-head .info .name .status-dot[b-719aae8r8e] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Time badge - don't shrink */
.basket-item .line-head .info .name .time-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 6px;
    background: #e5e7eb;
    border-radius: 4px;
    color: #6b7280;
    white-space: nowrap;
}

/* Batch badge for duplicate items - shows order sequence */
.basket-item .line-head .info .name .batch-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 1px 5px;
    background: #ddd6fe;
    border-radius: 4px;
    color: #6d28d9;
    font-weight: 600;
    white-space: nowrap;
}

html[data-theme="dark"] .basket-item .line-head .info .name .batch-badge[b-719aae8r8e] {
    background: #4c1d95;
    color: #c4b5fd;
}

/* Low stock badge for items running low */
.basket-item .line-head .info .name .low-stock-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.6rem;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ea580c, #c2410c);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

html[data-theme="dark"] .basket-item .line-head .info .name .low-stock-badge[b-719aae8r8e] {
    background: linear-gradient(135deg, #ea580c, #9a3412);
    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.4);
}

/* Course pill - positioned between info and price */
.basket-item .line-head .course-pill[b-719aae8r8e] {
    flex: 0 0 auto;
    max-width: 48px;
    min-width: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px dashed #d1d5db;
    background: #f8fafc;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-align: center;
}

.basket-item .line-head .course-pill:hover[b-719aae8r8e] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.basket-item .line-head .course-pill.empty[b-719aae8r8e] {
    color: #9ca3af;
    border-color: #e5e7eb;
}

.basket-item .line-head .course-pill.app[b-719aae8r8e] {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

.basket-item .line-head .course-pill.main[b-719aae8r8e] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.basket-item .line-head .course-pill.des[b-719aae8r8e] {
    background: #ffedd5;
    border-color: #fdba74;
    color: #c2410c;
}

.basket-item .line-actions[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 12px; /* Spacing between note, trash, and qty group */
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 4px 0;
}

/* Legacy .qty support */
.basket-item .line-actions .qty[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: fit-content;
}

.basket-item .line-total[b-719aae8r8e] {
    font-weight: 900;
    font-size: 1.05rem;
    min-width: 80px;
    text-align: right;
    padding: 0 4px;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    color: #111827;
}

.basket-item .line-actions .more[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    color: #111827;
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 8px;
}

.basket-item.item-added[b-719aae8r8e] {
    animation: item-added-b-719aae8r8e 0.5s ease-out 1;
}

@keyframes item-added-b-719aae8r8e {
    0% { background: #ffeb3b40; }
    100% { background: #fff; }
}

/* Subtle highlight animation for newly added items */
.basket-item.pulse-in[b-719aae8r8e] {
    animation: highlight-fade-b-719aae8r8e 0.8s ease-out 1;
}

@keyframes highlight-fade-b-719aae8r8e {
    0% {
        background: rgba(34, 197, 94, 0.3);
        box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.5);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Dark theme variant */
html[data-theme="dark"] .basket-item.pulse-in[b-719aae8r8e] {
    animation: highlight-fade-dark-b-719aae8r8e 0.8s ease-out 1;
}

@keyframes highlight-fade-dark-b-719aae8r8e {
    0% {
        background: rgba(34, 197, 94, 0.35);
        box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.6);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

/* Item note display - Kitchen notes are critical */
.item-note[b-719aae8r8e] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Kitchen note - softer but still visible styling */
.item-note.kitchen-note[b-719aae8r8e] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 6px;
}

.item-note .note-label[b-719aae8r8e] {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.7rem;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.item-note .note-icon[b-719aae8r8e] {
    flex-shrink: 0;
}

.item-note .note-text[b-719aae8r8e] {
    color: #78350f;
    font-weight: 500;
    line-height: 1.3;
    /* 1-line truncation with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Expand note text on hover */
.item-note:hover .note-text[b-719aae8r8e] {
    white-space: normal;
    max-width: none;
}

/* Light theme */
:root[data-theme="light"] .item-note[b-719aae8r8e],
html[data-theme="light"] .item-note[b-719aae8r8e] {
    background: #fef3c7;
}

:root[data-theme="light"] .item-note .note-text[b-719aae8r8e],
html[data-theme="light"] .item-note .note-text[b-719aae8r8e] {
    color: #92400e;
}

/* Dark theme */
html[data-theme="dark"] .item-note[b-719aae8r8e] {
    background: rgba(245, 158, 11, 0.2);
}

html[data-theme="dark"] .item-note.kitchen-note[b-719aae8r8e] {
    background: #422006;
    border-color: #92400e;
    border-left-color: #f59e0b;
}

html[data-theme="dark"] .item-note .note-label[b-719aae8r8e] {
    color: #fbbf24;
}

html[data-theme="dark"] .item-note .note-text[b-719aae8r8e] {
    color: #fde68a;
}

.item-mods[b-719aae8r8e] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mod-pill[b-719aae8r8e] {
    padding: 2px 6px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 700;
}

/* Phase 13: Selected modifiers from modifier groups */
.mod-pill.mod-selected[b-719aae8r8e] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mod-pill.mod-selected small[b-719aae8r8e] {
    font-size: 10px;
    color: #16a34a;
    font-weight: 600;
}

.selected-mods[b-719aae8r8e] {
    margin-top: 2px;
}

.time-badge[b-719aae8r8e] {
    margin-left: 8px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid #e5e7eb;
}

.section-header[b-719aae8r8e] {
    background: linear-gradient(180deg, #f8f9fa, #f1f3f5);
    padding: 12px 14px;
    cursor: pointer;
    border-radius: 10px;
    margin: 12px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    transition: all 0.15s ease;
}

.section-header:hover[b-719aae8r8e] {
    background: linear-gradient(180deg, #f1f3f5, #e9ecef);
    border-color: #d1d5db;
}

.section-header:first-child[b-719aae8r8e] {
    margin-top: 0;
}

.section-title[b-719aae8r8e] {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.section-count[b-719aae8r8e] {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.85rem;
}

.section-total[b-719aae8r8e] {
    margin-left: auto;
    font-weight: 900;
    font-size: 1rem;
    color: #111827;
}

/* Section-specific styling */
.section-header.section-new[b-719aae8r8e] {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
}

.section-header.section-sent[b-719aae8r8e] {
    border-left: 3px solid #22c55e;
    background: linear-gradient(180deg, #f0fdf4, #dcfce7);
}

.section-header.section-preparing[b-719aae8r8e] {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

.section-items[b-719aae8r8e] {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.section-items.collapsed[b-719aae8r8e] {
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* ========================================
   DARK THEME
   ======================================== */
html[data-theme="dark"] .line-actions .action-group button[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .line-actions .action-group button:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .line-actions .action-group .trash:hover[b-719aae8r8e] {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fecaca;
}

html[data-theme="dark"] .line-actions .qty-group[b-719aae8r8e] {
    background: #1f2937;
    border-color: #374151;
}

html[data-theme="dark"] .line-actions .qty-group button[b-719aae8r8e] {
    color: #e5e7eb;
}

html[data-theme="dark"] .line-actions .qty-group button:hover[b-719aae8r8e] {
    background: #374151;
}

html[data-theme="dark"] .line-actions .qty-group button:active[b-719aae8r8e] {
    background: #4b5563;
}

html[data-theme="dark"] .line-actions .qty-group .count[b-719aae8r8e] {
    color: #f3f4f6;
}

/* ========================================
   SOFT DELETE WITH UNDO
   ======================================== */
.basket-item.pending-delete[b-719aae8r8e] {
    background: #fef2f2 !important;
    border-left-color: #ef4444 !important;
    opacity: 0.85;
}

.basket-item.pending-delete .name-text[b-719aae8r8e] {
    text-decoration: line-through;
    color: #9ca3af;
}

.basket-item.pending-delete .line-total[b-719aae8r8e] {
    text-decoration: line-through;
    color: #9ca3af;
}

.undo-delete[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 2px solid #22c55e;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: undo-pulse-b-719aae8r8e 0.5s ease;
}

.undo-delete:hover[b-719aae8r8e] {
    background: #dcfce7;
    border-color: #16a34a;
}

@keyframes undo-pulse-b-719aae8r8e {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.delete-countdown[b-719aae8r8e] {
    flex: 1;
    height: 4px;
    background: #fee2e2;
    border-radius: 2px;
    overflow: hidden;
    margin-left: 12px;
}

.delete-countdown .countdown-bar[b-719aae8r8e] {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    width: 100%;
    animation: countdown-shrink-b-719aae8r8e 0.5s linear forwards;
}

@keyframes countdown-shrink-b-719aae8r8e {
    from { width: 100%; }
    to { width: 0%; }
}

/* Item being deleted - quick exit animation */
.basket-item.deleting[b-719aae8r8e] {
    animation: slideOutDelete-b-719aae8r8e 0.25s ease-out forwards;
    pointer-events: none;
}

@keyframes slideOutDelete-b-719aae8r8e {
    0% { opacity: 1; transform: translateX(0); max-height: 200px; }
    70% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 0; transform: translateX(30px); max-height: 0; margin: 0; padding: 0; }
}

/* Dark theme soft delete */
html[data-theme="dark"] .basket-item.pending-delete[b-719aae8r8e] {
    background: #450a0a !important;
}

html[data-theme="dark"] .basket-item.pending-delete .name-text[b-719aae8r8e],
html[data-theme="dark"] .basket-item.pending-delete .line-total[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .undo-delete[b-719aae8r8e] {
    background: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

html[data-theme="dark"] .undo-delete:hover[b-719aae8r8e] {
    background: #166534;
}

html[data-theme="dark"] .delete-countdown[b-719aae8r8e] {
    background: #7f1d1d;
}

/* ========================================
   DARK THEME - SECTION HEADERS
   ======================================== */
html[data-theme="dark"] .section-header[b-719aae8r8e] {
    background: linear-gradient(180deg, #374151, #1f2937);
    border-color: #4b5563;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

html[data-theme="dark"] .section-header:hover[b-719aae8r8e] {
    background: linear-gradient(180deg, #4b5563, #374151);
    border-color: #6b7280;
}

html[data-theme="dark"] .section-title[b-719aae8r8e] {
    color: #f3f4f6;
}

html[data-theme="dark"] .section-count[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .section-total[b-719aae8r8e] {
    color: #f3f4f6;
}

/* Section-specific dark theme */
html[data-theme="dark"] .section-header.section-new[b-719aae8r8e] {
    background: linear-gradient(180deg, #451a03, #78350f);
    border-left-color: #f59e0b;
}

html[data-theme="dark"] .section-header.section-sent[b-719aae8r8e] {
    background: linear-gradient(180deg, #14532d, #166534);
    border-left-color: #22c55e;
}

html[data-theme="dark"] .section-header.section-preparing[b-719aae8r8e] {
    background: linear-gradient(180deg, #1e3a5f, #1e40af);
    border-left-color: #3b82f6;
}

/* ========================================
   DARK THEME - BASKET ITEMS
   ======================================== */
html[data-theme="dark"] .basket-item[b-719aae8r8e] {
    background: #1f2937;
}

html[data-theme="dark"] .basket-item:nth-child(odd)[b-719aae8r8e] {
    background: #111827;
}

html[data-theme="dark"] .basket-item.status-new[b-719aae8r8e] {
    background: #1f2937;
    border-color: #374151;
    border-left: 3px solid #4b5563;
}

html[data-theme="dark"] .basket-item.status-sent[b-719aae8r8e] {
    background: #111827;
    border-color: #374151;
    border-left: 3px solid #22c55e;
}

html[data-theme="dark"] .basket-item.status-preparing[b-719aae8r8e] {
    background: #1e3a5f;
    border-color: #2d4a7c;
    border-left: 3px solid #3b82f6;
}

/* Item name text - must be white/light */
html[data-theme="dark"] .basket-item .name-text[b-719aae8r8e],
html[data-theme="dark"] .basket-item .info[b-719aae8r8e] {
    color: #f3f4f6;
}

/* Line total */
html[data-theme="dark"] .basket-item .line-total[b-719aae8r8e] {
    color: #f3f4f6;
}

/* More button */
html[data-theme="dark"] .basket-item .line-actions .more[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

html[data-theme="dark"] .basket-item .line-actions .more:hover[b-719aae8r8e] {
    background: #4b5563;
}

/* Course pills in dark mode */
html[data-theme="dark"] .basket-item .line-head .course-pill[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .basket-item .line-head .course-pill:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.empty[b-719aae8r8e] {
    color: #9ca3af;
    border-color: #4b5563;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.app[b-719aae8r8e] {
    background: #1e3a5f;
    border-color: #3b82f6;
    color: #7dd3fc;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.main[b-719aae8r8e] {
    background: #14532d;
    border-color: #22c55e;
    color: #86efac;
}

html[data-theme="dark"] .basket-item .line-head .course-pill.des[b-719aae8r8e] {
    background: #7c2d12;
    border-color: #f97316;
    color: #fed7aa;
}

/* Mod pills */
html[data-theme="dark"] .mod-pill[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Time badge */
html[data-theme="dark"] .time-badge[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
}

/* ========================================
   EXPANDABLE MODIFIERS SECTION
   ======================================== */
.modifiers-section[b-719aae8r8e] {
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden;
}

.modifiers-toggle[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.15s ease;
}

.modifiers-toggle:hover[b-719aae8r8e] {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.modifiers-section.expanded .modifiers-toggle[b-719aae8r8e] {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
}

.modifiers-toggle .mod-icon[b-719aae8r8e] {
    font-size: 1rem;
}

.modifiers-toggle .mod-count[b-719aae8r8e] {
    color: #1e40af;
    font-weight: 700;
}

.modifiers-toggle .mod-total[b-719aae8r8e] {
    margin-left: auto;
    color: #16a34a;
    font-weight: 800;
}

.modifiers-toggle .mod-arrow[b-719aae8r8e] {
    color: #9ca3af;
    font-size: 0.75rem;
    margin-left: 4px;
}

.modifiers-list[b-719aae8r8e] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 12px;
}

.modifier-item[b-719aae8r8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 0.85rem;
}

.modifier-item:last-child[b-719aae8r8e] {
    border-bottom: none;
    padding-bottom: 0;
}

.modifier-item:first-child[b-719aae8r8e] {
    padding-top: 0;
}

.modifier-name[b-719aae8r8e] {
    color: #374151;
    font-weight: 500;
}

.modifier-price[b-719aae8r8e] {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Dark theme - Expandable modifiers */
html[data-theme="dark"] .modifiers-toggle[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

html[data-theme="dark"] .modifiers-toggle:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
}

html[data-theme="dark"] .modifiers-toggle .mod-count[b-719aae8r8e] {
    color: #60a5fa;
}

html[data-theme="dark"] .modifiers-toggle .mod-total[b-719aae8r8e] {
    color: #4ade80;
}

html[data-theme="dark"] .modifiers-toggle .mod-arrow[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .modifiers-list[b-719aae8r8e] {
    background: #1f2937;
    border-color: #4b5563;
}

html[data-theme="dark"] .modifier-item[b-719aae8r8e] {
    border-color: #374151;
}

html[data-theme="dark"] .modifier-name[b-719aae8r8e] {
    color: #e5e7eb;
}

html[data-theme="dark"] .modifier-price[b-719aae8r8e] {
    color: #4ade80;
}

/* ========================================
   ALWAYS-VISIBLE SELECTED MODIFIERS
   ======================================== */
.selected-modifiers-list[b-719aae8r8e] {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #d1d5db;
    margin-left: 4px;
}

.selected-modifier-row[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 0.8rem;
    color: #6b7280;
}

.selected-modifier-bullet[b-719aae8r8e] {
    color: #9ca3af;
    font-size: 0.75rem;
}

.selected-modifier-name[b-719aae8r8e] {
    color: #4b5563;
    font-weight: 500;
    font-style: italic;
}

.selected-modifier-price[b-719aae8r8e] {
    margin-left: auto;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Dark theme - Always-visible modifiers */
html[data-theme="dark"] .selected-modifiers-list[b-719aae8r8e] {
    border-left-color: #4b5563;
}

html[data-theme="dark"] .selected-modifier-row[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .selected-modifier-bullet[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .selected-modifier-name[b-719aae8r8e] {
    color: #d1d5db;
}

html[data-theme="dark"] .selected-modifier-price[b-719aae8r8e] {
    color: #4ade80;
}

/* ========================================
   MENU DEL DÍA INDICATOR & HINT
   ======================================== */
.menu-dia-badge[b-719aae8r8e] {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-left: 4px;
}

.menu-dia-hint[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 0 4px 20px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 0.8rem;
}

.menu-dia-structure[b-719aae8r8e] {
    font-weight: 700;
    color: #1e40af;
    letter-spacing: 0.02em;
}

.menu-dia-cta[b-719aae8r8e] {
    color: #3b82f6;
    font-weight: 500;
    font-style: italic;
}

/* Dark theme - Menu del Día */
html[data-theme="dark"] .menu-dia-hint[b-719aae8r8e] {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #3b82f6;
}

html[data-theme="dark"] .menu-dia-structure[b-719aae8r8e] {
    color: #93c5fd;
}

html[data-theme="dark"] .menu-dia-cta[b-719aae8r8e] {
    color: #60a5fa;
}

/* ========================================
   LINE EXTRAS (Modifiers section below item name)
   ======================================== */
.line-extras[b-719aae8r8e] {
    padding: 4px 0 4px 20px;
    margin-top: -4px;
}

.edit-modifiers-btn[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.edit-modifiers-btn:hover[b-719aae8r8e] {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #1f2937;
}

/* Dark theme - Edit modifiers button */
html[data-theme="dark"] .edit-modifiers-btn[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

html[data-theme="dark"] .edit-modifiers-btn:hover[b-719aae8r8e] {
    background: #4b5563;
    border-color: #6b7280;
    color: #f9fafb;
}

/* ========================================
   EMPTY BASKET STATE
   ======================================== */
.empty-basket-state[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    animation: fadeIn-b-719aae8r8e 0.3s ease;
}

@keyframes fadeIn-b-719aae8r8e {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.empty-basket-icon[b-719aae8r8e] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-basket-title[b-719aae8r8e] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink, #1f2937);
    margin-bottom: 8px;
}

.empty-basket-hint[b-719aae8r8e] {
    font-size: 0.9rem;
    color: var(--muted, #6b7280);
    margin-bottom: 16px;
}

/* First-run primary action. The rich onboarding card lives in the products
   panel, which is off-screen on a phone, so on first run this is the only
   "create your menu" action the operator can actually see — it must read as
   the primary CTA, not a quiet link. Matches the app's purple primary
   gradient (btn-kitchen / setup-step-action). */
.empty-basket-cta[b-719aae8r8e] {
    margin-top: 4px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c5cff 0%, #9333ea 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px; /* gloved tap target */
    box-shadow: 0 6px 16px -5px rgba(124, 92, 255, 0.6);
    transition: filter 0.15s ease, transform 0.06s ease;
}

.empty-basket-cta:hover[b-719aae8r8e] { filter: brightness(1.08); }
.empty-basket-cta:active[b-719aae8r8e] { transform: translateY(1px); }

.empty-basket-shortcut[b-719aae8r8e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted, #6b7280);
}

.empty-basket-shortcut .kbd[b-719aae8r8e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Dark theme */
html[data-theme="dark"] .empty-basket-title[b-719aae8r8e] {
    color: #f3f4f6;
}

html[data-theme="dark"] .empty-basket-hint[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-basket-shortcut[b-719aae8r8e] {
    color: #9ca3af;
}

html[data-theme="dark"] .empty-basket-shortcut .kbd[b-719aae8r8e] {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* ========================================
   DISCOUNT INDICATORS
   ======================================== */
.discount-badge[b-719aae8r8e] {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3);
}

/* Discounted line total - stack prices vertically */
.line-total.discounted[b-719aae8r8e] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.1;
}

.line-total.discounted .original-price[b-719aae8r8e] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
}

.line-total.discounted > span:last-child[b-719aae8r8e] {
    color: #059669;
    font-weight: 900;
}

/* Dark theme - Discount indicators */
html[data-theme="dark"] .discount-badge[b-719aae8r8e] {
    background: linear-gradient(135deg, #065f46, #047857);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .line-total.discounted .original-price[b-719aae8r8e] {
    color: #6b7280;
}

html[data-theme="dark"] .line-total.discounted > span:last-child[b-719aae8r8e] {
    color: #10b981;
}

/* ========================================
   RESPONSIVE - Smaller screens (1024x768 and below)
   ======================================== */
@media (max-width: 1100px), (max-height: 800px) {
    .basket-item[b-719aae8r8e] {
        padding: 8px 6px;
        gap: 6px;
    }

    .basket-item .line-head[b-719aae8r8e] {
        gap: 6px;
    }

    .basket-item .line-head .info .name .name-text[b-719aae8r8e] {
        font-size: 0.85rem;
    }

    .basket-item .line-head .course-pill[b-719aae8r8e] {
        padding: 3px 6px;
        font-size: 0.7rem;
    }

    .basket-item .line-total[b-719aae8r8e] {
        font-size: 0.95rem;
        min-width: 65px;
    }

    .basket-item .line-actions[b-719aae8r8e] {
        gap: 6px;
    }

    .basket-item .line-actions button[b-719aae8r8e],
    .basket-item .line-actions .more[b-719aae8r8e],
    .basket-item .line-actions .trash[b-719aae8r8e] {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 16px;
    }

    .line-actions .note-btn[b-719aae8r8e] {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        font-size: 15px;
    }

    .qty-group[b-719aae8r8e] {
        gap: 2px;
    }

    .qty-group .count[b-719aae8r8e] {
        min-width: 22px;
        font-size: 0.85rem;
    }

    .section-header[b-719aae8r8e] {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .discount-badge[b-719aae8r8e] {
        padding: 1px 4px;
        font-size: 0.6rem;
    }

    .line-total.discounted .original-price[b-719aae8r8e] {
        font-size: 0.65rem;
    }
}

/* Phone: the empty-basket state sits in the bottom summary panel, which is
   capped at ~40vh on a phone (see Pos.razor.css). The desktop 48px vertical
   padding + 3rem icon makes the block taller than that panel, so the hint
   line ends up scrolled under the fixed "ENVIAR A COCINA" bar and reads as
   clipped on first run. Compact it so the whole message fits above the bar
   without scrolling, and drop the "/" keyboard-search hint — there is no
   "/" key on a touch phone, so it's noise that only costs vertical space. */
@media (max-width: 600px) {
    .empty-basket-state[b-719aae8r8e] {
        padding: 18px 16px 22px;
    }

    .empty-basket-icon[b-719aae8r8e] {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .empty-basket-title[b-719aae8r8e] {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .empty-basket-hint[b-719aae8r8e] {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .empty-basket-shortcut[b-719aae8r8e] {
        display: none;
    }
}
/* /Pages/Shared/Components/BuffetActiveBanner.razor.rz.scp.css */
.ba-banner[b-7185l3ylyq] {
    /* Sized to sit alongside the function tabs (Eats/Espera/Reservas)
       inside TableSlidePanel's edge-tabs--functions row. Tighter
       padding than the original standalone banner so it visually
       balances with the tab pills. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
    transition: transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ba-banner:hover[b-7185l3ylyq] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.35);
    color: #fff;
}

.ba-icon[b-7185l3ylyq] {
    font-size: 1rem;
    line-height: 1;
}

.ba-text strong[b-7185l3ylyq] {
    font-weight: 800;
}

.ba-warn[b-7185l3ylyq] {
    margin-left: 4px;
    color: #fef9c3;
    font-weight: 700;
}

.ba-cta[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== Overlay (click "Ver" to expand the table list) ===== */
.ba-overlay-bg[b-7185l3ylyq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 900;
    padding: 60px 16px 16px;
    color-scheme: dark;
    animation: ba-bg-in-b-7185l3ylyq 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ba-bg-in-b-7185l3ylyq {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ba-overlay[b-7185l3ylyq] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    color: #f1f5f9;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: ba-overlay-in-b-7185l3ylyq 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ba-overlay-in-b-7185l3ylyq {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ba-overlay-head[b-7185l3ylyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ba-overlay-head h3[b-7185l3ylyq] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ba-overlay-close[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ba-overlay-close:hover[b-7185l3ylyq] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.ba-overlay-list[b-7185l3ylyq] {
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ba-row[b-7185l3ylyq] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "main  arrow"
        "meta  arrow";
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: #f1f5f9;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
}

.ba-row:hover[b-7185l3ylyq] {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(30, 41, 59, 0.8);
    transform: translateX(2px);
}

.ba-row.awaiting[b-7185l3ylyq] {
    border-color: rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.ba-row.last-call[b-7185l3ylyq] {
    border-color: rgba(239, 68, 68, 0.55);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    animation: ba-row-pulse-b-7185l3ylyq 1.6s ease-in-out infinite;
}

@keyframes ba-row-pulse-b-7185l3ylyq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}

.ba-row.cooldown[b-7185l3ylyq] {
    border-color: rgba(56, 189, 248, 0.4);
}

.ba-row-main[b-7185l3ylyq] {
    grid-area: main;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ba-row-table[b-7185l3ylyq] {
    font-size: 1.05rem;
    font-weight: 800;
}

.ba-row-status[b-7185l3ylyq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #94a3b8;
}

.ba-row.awaiting .ba-row-status[b-7185l3ylyq] { color: #fbbf24; }
.ba-row.last-call .ba-row-status[b-7185l3ylyq] { color: #fca5a5; }
.ba-row.cooldown .ba-row-status[b-7185l3ylyq] { color: #7dd3fc; }
.ba-row.active .ba-row-status[b-7185l3ylyq] { color: #6ee7b7; }

.ba-row-meta[b-7185l3ylyq] {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.78rem;
    align-items: center;
}

.ba-row-pill[b-7185l3ylyq] {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-weight: 600;
}

.ba-row-pill.round[b-7185l3ylyq] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 700;
}

.ba-row-time[b-7185l3ylyq] {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    margin-left: 2px;
}

.ba-row-time.warn[b-7185l3ylyq] {
    color: #fca5a5;
    font-weight: 700;
}

.ba-row-arrow[b-7185l3ylyq] {
    grid-area: arrow;
    color: #f59e0b;
    font-size: 1.1rem;
    font-weight: 700;
    align-self: center;
}

.ba-overlay-footer[b-7185l3ylyq] {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

.ba-overlay-link[b-7185l3ylyq] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ba-overlay-link:hover[b-7185l3ylyq] {
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

/* Paused-state banner — same shape as .ba-banner but red-tinted so POS
   staff see at a glance that new rounds are blocked. Click triggers
   the immediate Resume. Pulses gently to draw attention without being
   alarming. */
.ba-banner-paused[b-7185l3ylyq] {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08));
    border-color: rgba(220, 38, 38, 0.55) !important;
    color: #fee2e2;
    animation: ba-pause-pulse-b-7185l3ylyq 2.2s ease-in-out infinite;
}
.ba-banner-paused .ba-warn[b-7185l3ylyq] { color: #fca5a5; }
.ba-banner-paused:hover[b-7185l3ylyq] { background: linear-gradient(90deg, rgba(220, 38, 38, 0.28), rgba(220, 38, 38, 0.12)); }
.ba-banner-paused .ba-cta[b-7185l3ylyq] {
    background: #fff;
    color: #b91c1c;
    border-color: #fff;
    font-weight: 700;
}
@keyframes ba-pause-pulse-b-7185l3ylyq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Pause action row in the overlay footer — 4 duration presets for when
   cocina says "please stop new rounds for 10 min". Compact pills that
   sit above the existing kiosk link. */
.ba-pause-row[b-7185l3ylyq] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-right: auto;
}
.ba-pause-label[b-7185l3ylyq] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-right: 4px;
}
.ba-pause-btn[b-7185l3ylyq] {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fee2e2;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ba-pause-btn:hover[b-7185l3ylyq] { background: rgba(220, 38, 38, 0.22); }
.ba-pause-btn:disabled[b-7185l3ylyq] { opacity: 0.55; cursor: not-allowed; }
.ba-overlay-footer[b-7185l3ylyq] { flex-wrap: wrap; gap: 12px; }
/* /Pages/Shared/Components/BuffetCountdown.razor.rz.scp.css */
.bc-wrap[b-pv61j15ihb] {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 24px auto;
}

.bc-ring[b-pv61j15ihb] {
    width: 100%;
    height: 100%;
}

.bc-track[b-pv61j15ihb] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 12;
}

.bc-progress[b-pv61j15ihb] {
    fill: none;
    stroke: url(#bcGrad);
    stroke: #f59e0b;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.95s linear;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.bc-label[b-pv61j15ihb] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.bc-time[b-pv61j15ihb] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.bc-sub[b-pv61j15ihb] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    max-width: 140px;
}

.bc-ready[b-pv61j15ihb] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #34d399;
    animation: bc-pulse-b-pv61j15ihb 1.4s ease-in-out infinite;
}

@keyframes bc-pulse-b-pv61j15ihb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
/* /Pages/Shared/Components/BuffetOrderHeader.razor.rz.scp.css */
.buf-order-header[b-j5hxq5xplo] {
    margin: 8px 12px 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1c1610 0%, #422006 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.buf-order-header.awaiting[b-j5hxq5xplo] {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #422006 0%, #78350f 100%);
    animation: buf-oh-pulse-b-j5hxq5xplo 2s ease-in-out infinite;
}

.buf-order-header.lastcall[b-j5hxq5xplo] {
    border-color: #ef4444;
    background: linear-gradient(135deg, #1c1610 0%, #7f1d1d 100%);
    animation: buf-oh-pulse-b-j5hxq5xplo 1.2s ease-in-out infinite;
}

.buf-order-header.closed[b-j5hxq5xplo],
.buf-order-header.expired[b-j5hxq5xplo] {
    opacity: 0.6;
    border-color: #475569;
    background: #1e293b;
}

@keyframes buf-oh-pulse-b-j5hxq5xplo {
    0%, 100% { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
    50% { box-shadow: 0 4px 18px rgba(245, 158, 11, 0.40); }
}

.buf-row[b-j5hxq5xplo] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.buf-row.main[b-j5hxq5xplo] {
    font-size: 0.82rem;
}

.buf-row.meta[b-j5hxq5xplo] {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.buf-pill[b-j5hxq5xplo] {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f5f9;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.buf-pill.round[b-j5hxq5xplo] {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
}

.buf-pill.items[b-j5hxq5xplo],
.buf-pill.guests[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.buf-pill.status.active[b-j5hxq5xplo] {
    background: #064e3b;
    color: #d1fae5;
}

.buf-pill.status.cooldown[b-j5hxq5xplo] {
    background: #082f49;
    color: #bae6fd;
}

.buf-pill.status.awaiting[b-j5hxq5xplo] {
    background: #78350f;
    color: #fef9c3;
}

.buf-pill.status.lastcall[b-j5hxq5xplo] {
    background: #7f1d1d;
    color: #fecaca;
}

.buf-pill.status.closed[b-j5hxq5xplo],
.buf-pill.status.expired[b-j5hxq5xplo] {
    background: #1f2937;
    color: #94a3b8;
}

.buf-meta.awaiting[b-j5hxq5xplo] {
    color: #fbbf24;
    font-weight: 700;
}

/* Allergy banner inside the BuffetOrderHeader — high-visibility so
   waiters and runners never miss it when checking the order panel. */
.buf-allergy[b-j5hxq5xplo] {
    margin-top: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 8px;
    color: #fcd34d;
    font-size: 0.85rem;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}

.buf-allergy strong[b-j5hxq5xplo] {
    color: #fde047;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.buf-actions[b-j5hxq5xplo] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.buf-btn[b-j5hxq5xplo] {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

.buf-btn:disabled[b-j5hxq5xplo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.buf-btn.confirm[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    flex: 1;
}

.buf-btn.confirm:hover:not(:disabled)[b-j5hxq5xplo] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
}

.buf-btn.skip[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.buf-btn.skip:hover:not(:disabled)[b-j5hxq5xplo] {
    background: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.buf-btn.secondary[b-j5hxq5xplo] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.buf-btn.secondary:hover:not(:disabled)[b-j5hxq5xplo] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

/* ===== Modal (guests + waste editors) ===== */
/* Prefixed `bohp-` (BuffetOrderHeader Panel) so the styles never collide
   with BuffetKiosk's `bk-modal-*` rules — Blazor scoped CSS isn't
   bulletproof when ::deep selectors leak. */
.bohp-modal-bg[b-j5hxq5xplo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    color-scheme: dark;
}

.bohp-modal[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 24px;
    color: #f1f5f9;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: bohp-modal-in-b-j5hxq5xplo 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.bohp-modal.bohp-wide[b-j5hxq5xplo] {
    max-width: 520px;
}

@keyframes bohp-modal-in-b-j5hxq5xplo {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bohp-modal h3[b-j5hxq5xplo] {
    margin: 0 0 4px;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.bohp-modal .muted[b-j5hxq5xplo] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 16px;
}

.bohp-field[b-j5hxq5xplo] {
    margin-bottom: 14px;
}

.bohp-field label[b-j5hxq5xplo] {
    display: block;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 6px;
}

.bohp-field.stacked[b-j5hxq5xplo] {
    display: flex;
    flex-direction: column;
}

.bohp-field.stacked > span[b-j5hxq5xplo] {
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 6px;
}

.bohp-field input[type="text"][b-j5hxq5xplo],
.bohp-field input[type="number"][b-j5hxq5xplo],
.bohp-field textarea[b-j5hxq5xplo] {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f1f5f9;
    padding: 9px 11px;
    font-size: 0.95rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.bohp-field input:focus[b-j5hxq5xplo],
.bohp-field textarea:focus[b-j5hxq5xplo] {
    outline: none;
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.bohp-grid[b-j5hxq5xplo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.bohp-pick[b-j5hxq5xplo] {
    padding: 12px 0;
    background: rgba(15, 23, 42, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.bohp-pick:hover:not(:disabled)[b-j5hxq5xplo] {
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}

.bohp-pick:disabled[b-j5hxq5xplo] {
    opacity: 0.3;
    cursor: not-allowed;
}

.bohp-pick.selected[b-j5hxq5xplo] {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.bohp-error[b-j5hxq5xplo] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin: 12px 0;
}

.bohp-hint[b-j5hxq5xplo] {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 4px;
}

.bohp-footer[b-j5hxq5xplo] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
}

.bohp-footer .buf-btn[b-j5hxq5xplo] {
    padding: 9px 18px;
    font-size: 0.9rem;
}
/* /Pages/Shared/Components/CommandPalette.razor.rz.scp.css */
/* Command palette — keyboard-first overlay over a flat admin route list.
   Sits at the very top of the z stack (above the impersonation banner
   at 10005) so Cmd-K never gets swallowed by other UI. */

.cmdk-backdrop[b-hy59xd8ayr] {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 16px;
    animation: cmdk-fade-b-hy59xd8ayr 0.12s ease-out;
}

@keyframes cmdk-fade-b-hy59xd8ayr { from { opacity: 0; } to { opacity: 1; } }

.cmdk-panel[b-hy59xd8ayr] {
    width: min(560px, 100%);
    background: #1f2a3d;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    animation: cmdk-slide-b-hy59xd8ayr 0.15s cubic-bezier(.2,.8,.3,1);
}

@keyframes cmdk-slide-b-hy59xd8ayr {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cmdk-input-row[b-hy59xd8ayr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.cmdk-search-icon[b-hy59xd8ayr] {
    color: #64748b;
    flex-shrink: 0;
}

.cmdk-input[b-hy59xd8ayr] {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 1rem;
    font-family: inherit;
    padding: 0;
}

.cmdk-input[b-hy59xd8ayr]::placeholder {
    color: #64748b;
}

.cmdk-esc[b-hy59xd8ayr] {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.6875rem;
    font-family: inherit;
    font-weight: 600;
}

.cmdk-list[b-hy59xd8ayr] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.cmdk-item[b-hy59xd8ayr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 0.9375rem;
    transition: background-color 0.1s;
}

.cmdk-item.active[b-hy59xd8ayr] {
    background: rgba(99, 102, 241, 0.16);
    color: #f1f5f9;
}

.cmdk-item-section[b-hy59xd8ayr] {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 95px;
}

.cmdk-item.active .cmdk-item-section[b-hy59xd8ayr] {
    color: #a5b4fc;
}

.cmdk-item-label[b-hy59xd8ayr] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-item-key[b-hy59xd8ayr] {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.cmdk-empty[b-hy59xd8ayr] {
    padding: 32px 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

.cmdk-empty strong[b-hy59xd8ayr] {
    color: #cbd5e1;
}

.cmdk-foot[b-hy59xd8ayr] {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.75rem;
    color: #64748b;
    background: rgba(15, 23, 42, 0.4);
}

.cmdk-foot kbd[b-hy59xd8ayr] {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.6875rem;
    margin-right: 4px;
}

@media (max-width: 480px) {
    .cmdk-backdrop[b-hy59xd8ayr] {
        padding: 16px;
        align-items: flex-end;
    }

    .cmdk-item-section[b-hy59xd8ayr] {
        min-width: 70px;
        font-size: 0.6875rem;
    }
}
/* /Pages/Shared/Components/DeliveryDispatchPanel.razor.rz.scp.css */
/* Mesero Drivers dispatch board — premium, theme-aware styling.
   Scoped to the component; dark overrides hang off html[data-theme="dark"]
   (the app's theme switch). All colours come from --dd-* custom properties so
   light/dark is a single token swap. Replaces the old inline styles. */

.dd-root[b-p9ly5fxso3] {
    --dd-card: #ffffff;
    --dd-bg: #f9fafb;
    --dd-border: #e5e7eb;
    --dd-text: #1f2937;
    --dd-muted: #6b7280;
    --dd-input-bg: #ffffff;
    --dd-input-border: #d1d5db;
    --dd-primary: #1f6feb;
    --dd-success: #1f8b3a;
    --dd-danger: #b42318;
    --dd-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);

    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    color: var(--dd-text);
}

html[data-theme="dark"] .dd-root[b-p9ly5fxso3] {
    --dd-card: #1e293b;
    --dd-bg: #0f172a;
    --dd-border: #334155;
    --dd-text: #e2e8f0;
    --dd-muted: #94a3b8;
    --dd-input-bg: #0f172a;
    --dd-input-border: #334155;
    --dd-primary: #3b82f6;
    --dd-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.dd-col-left[b-p9ly5fxso3] { flex: 1 1 320px; min-width: 280px; }
.dd-col-right[b-p9ly5fxso3] { flex: 2 1 440px; min-width: 320px; }

/* error banner */
.dd-error[b-p9ly5fxso3] {
    background: #fdecea; border: 1px solid #f5c2c0; color: #a12a23;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px;
}
html[data-theme="dark"] .dd-error[b-p9ly5fxso3] { background: #3b1413; border-color: #7f1d1d; color: #fca5a5; }

/* publish bar */
.dd-publish[b-p9ly5fxso3] {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    margin-bottom: 16px; padding: 14px; background: var(--dd-bg);
    border: 1px solid var(--dd-border); border-radius: 12px;
}
.dd-field[b-p9ly5fxso3] { display: flex; flex-direction: column; gap: 4px; }
.dd-label[b-p9ly5fxso3] { font-size: 12px; font-weight: 600; color: var(--dd-muted); }
.dd-input[b-p9ly5fxso3] {
    padding: 9px 10px; font-size: 14px; color: var(--dd-text);
    background: var(--dd-input-bg); border: 1px solid var(--dd-input-border);
    border-radius: 8px; min-height: 40px; box-sizing: border-box;
}
.dd-input[b-p9ly5fxso3]::placeholder { color: var(--dd-muted); }
.dd-input:focus[b-p9ly5fxso3] { outline: none; border-color: var(--dd-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.dd-input--order[b-p9ly5fxso3] { width: 130px; }
.dd-input--win[b-p9ly5fxso3] { width: 96px; }

/* buttons */
.dd-btn[b-p9ly5fxso3] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px; min-height: 40px; font-size: 14px; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}
.dd-btn:disabled[b-p9ly5fxso3] { opacity: .55; cursor: not-allowed; }
.dd-btn:not(:disabled):hover[b-p9ly5fxso3] { filter: brightness(.95); }
.dd-btn--primary[b-p9ly5fxso3] { background: var(--dd-primary); color: #fff; }
.dd-btn--success[b-p9ly5fxso3] { background: var(--dd-success); color: #fff; }
.dd-btn--danger[b-p9ly5fxso3] { background: var(--dd-danger); color: #fff; }
.dd-btn--ghost[b-p9ly5fxso3] { background: var(--dd-card); color: var(--dd-text); border-color: var(--dd-input-border); }
.dd-btn--sm[b-p9ly5fxso3] { padding: 6px 12px; min-height: 34px; font-size: 13px; }

/* headings / text */
.dd-h[b-p9ly5fxso3] { font-size: 14px; font-weight: 700; margin: 16px 0 8px; color: var(--dd-text); }
.dd-muted[b-p9ly5fxso3] { color: var(--dd-muted); font-size: 14px; }
.dd-hint[b-p9ly5fxso3] { font-size: 11px; color: var(--dd-muted); margin: 6px 0 0; }

/* job list */
.dd-joblist[b-p9ly5fxso3] { display: flex; flex-direction: column; gap: 8px; }
.dd-jobcard[b-p9ly5fxso3] {
    text-align: left; width: 100%; padding: 12px 14px; cursor: pointer;
    background: var(--dd-card); border: 1px solid var(--dd-border);
    border-radius: 10px; box-shadow: var(--dd-shadow);
    transition: border-color .12s, box-shadow .12s; color: var(--dd-text);
}
.dd-jobcard:hover[b-p9ly5fxso3] { border-color: var(--dd-primary); }
.dd-jobcard.is-sel[b-p9ly5fxso3] { border-color: var(--dd-primary); box-shadow: 0 0 0 2px rgba(59,130,246,.30); }
.dd-jobcard-top[b-p9ly5fxso3] { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dd-jobcard-title[b-p9ly5fxso3] { font-weight: 700; }
.dd-jobcard-sub[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); margin-top: 3px; }

/* detail card */
.dd-detail[b-p9ly5fxso3] {
    background: var(--dd-card); border: 1px solid var(--dd-border);
    border-radius: 14px; padding: 18px; box-shadow: var(--dd-shadow);
}
.dd-detail-head[b-p9ly5fxso3] { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dd-detail-title[b-p9ly5fxso3] { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dd-fee[b-p9ly5fxso3] { font-size: 13px; color: var(--dd-muted); }
.dd-zones[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); margin-bottom: 8px; }
.dd-phone[b-p9ly5fxso3] { font-size: 13px; margin: 6px 0 10px; padding: 8px 10px; background: var(--dd-bg); border-radius: 8px; }

/* state badge */
.dd-badge[b-p9ly5fxso3] {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.dd-badge--draft[b-p9ly5fxso3] { background:#e5e7eb; color:#374151; }
.dd-badge--posted[b-p9ly5fxso3] { background:#dbeafe; color:#1e40af; }
.dd-badge--negotiating[b-p9ly5fxso3] { background:#fef3c7; color:#92400e; }
.dd-badge--hired[b-p9ly5fxso3] { background:#dcfce7; color:#166534; }
.dd-badge--enroutepickup[b-p9ly5fxso3] { background:#cffafe; color:#155e75; }
.dd-badge--pickedup[b-p9ly5fxso3] { background:#e0e7ff; color:#3730a3; }
.dd-badge--delivered[b-p9ly5fxso3] { background:#cffafe; color:#155e75; }
.dd-badge--settled[b-p9ly5fxso3] { background:#16a34a; color:#fff; }
.dd-badge--expired[b-p9ly5fxso3] { background:#f3f4f6; color:#6b7280; }
.dd-badge--canceled[b-p9ly5fxso3] { background:#fee2e2; color:#991b1b; }
.dd-badge--selfdelivery[b-p9ly5fxso3] { background:#ede9fe; color:#5b21b6; }
html[data-theme="dark"] .dd-badge--draft[b-p9ly5fxso3] { background:#334155; color:#cbd5e1; }
html[data-theme="dark"] .dd-badge--expired[b-p9ly5fxso3] { background:#1f2937; color:#94a3b8; }

/* bids table */
.dd-table[b-p9ly5fxso3] { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd-table th[b-p9ly5fxso3] { text-align: left; color: var(--dd-muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--dd-border); }
.dd-table td[b-p9ly5fxso3] { padding: 9px 6px; border-bottom: 1px solid var(--dd-border); vertical-align: middle; color: var(--dd-text); }
.dd-table tr:last-child td[b-p9ly5fxso3] { border-bottom: none; }
.dd-price[b-p9ly5fxso3] { font-weight: 700; }
.dd-bid-note[b-p9ly5fxso3] { color: var(--dd-muted); }
.dd-bidstate[b-p9ly5fxso3] { font-size: 12px; color: var(--dd-muted); }

/* message thread */
.dd-msgrow[b-p9ly5fxso3] { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.dd-select[b-p9ly5fxso3] {
    padding: 9px 10px; min-height: 40px; font-size: 14px; color: var(--dd-text);
    background: var(--dd-input-bg); border: 1px solid var(--dd-input-border);
    border-radius: 8px; min-width: 160px;
}
.dd-input--msg[b-p9ly5fxso3] { flex: 1 1 160px; min-width: 140px; }
.dd-input--amt[b-p9ly5fxso3] { width: 120px; }
.dd-thread[b-p9ly5fxso3] { margin-top: 10px; max-height: 150px; overflow: auto; border: 1px solid var(--dd-border); border-radius: 8px; padding: 10px; background: var(--dd-bg); }
.dd-msg[b-p9ly5fxso3] { font-size: 12px; margin-bottom: 5px; color: var(--dd-text); }

/* action row */
.dd-actions[b-p9ly5fxso3] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; border-top: 1px solid var(--dd-border); padding-top: 14px; }

/* invoice grid */
.dd-invoice[b-p9ly5fxso3] { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* terminal-state note */
.dd-closed[b-p9ly5fxso3] { margin-top: 14px; padding: 10px 12px; background: var(--dd-bg); border: 1px dashed var(--dd-border); border-radius: 8px; font-size: 13px; color: var(--dd-muted); }

@media (max-width: 560px) {
    .dd-input--order[b-p9ly5fxso3], .dd-input--win[b-p9ly5fxso3], .dd-input--amt[b-p9ly5fxso3] { width: 100%; }
    .dd-field[b-p9ly5fxso3] { flex: 1 1 100%; }
    .dd-select[b-p9ly5fxso3] { min-width: 0; flex: 1 1 100%; }
}
/* /Pages/Shared/Components/DispatchAlertBanner.razor.rz.scp.css */
/* Mesero Drivers dispatch alert — a premium, always-visible top bar in MainLayout's banner
   stack (in-flow, like GlobalAnnouncementBanner, so it pushes content rather than overlapping).
   Deep amber = "attention" (Eats scooter theme); the whole bar is one tap target. White text on
   a deep-amber gradient clears WCAG AA (≥4.5:1, matching the app's #b45309 warning tone). Inset
   top highlight + layered shadow for depth, a count badge that pulses a few times on appear then
   settles, a "Gestionar →" CTA chip that lifts on hover, and a smooth slide-in entrance. All
   motion respects prefers-reduced-motion. */

.dispatch-alert[b-hrfi4klbxp] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    /* Clear the fixed hamburger toggle (44px at left:12, z-index 60) so it never covers the
       badge; the amber bg still spans full width beneath it. */
    padding: 9px clamp(12px, 3vw, 20px);
    padding-left: 64px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    background: linear-gradient(180deg, #b45309 0%, #92400e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 10px rgba(120, 53, 15, .35);
    -webkit-tap-highlight-color: transparent;
    animation: da-enter-b-hrfi4klbxp .32s cubic-bezier(.22, 1, .36, 1);
}

.dispatch-alert:hover[b-hrfi4klbxp] { background: linear-gradient(180deg, #c2620a 0%, #a14a0c 100%); }
.dispatch-alert:active[b-hrfi4klbxp] { transform: translateY(.5px); }
.dispatch-alert:focus-visible[b-hrfi4klbxp] { outline: 2px solid #fff; outline-offset: -3px; }

/* deepen a touch more on the dark theme so it sits coherently on a dark page */
html[data-theme="dark"] .dispatch-alert[b-hrfi4klbxp] { background: linear-gradient(180deg, #a14a08 0%, #7c3a0a 100%); }

/* count badge — scooter + tally in a soft disc that pulses a few times on appear, then settles */
.da-badge[b-hrfi4klbxp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    animation: da-breathe-b-hrfi4klbxp 2.6s ease-in-out 4;
}

.da-emoji[b-hrfi4klbxp] { font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.da-count[b-hrfi4klbxp] { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }

.da-text[b-hrfi4klbxp] {
    /* Don't grow — left-pack badge+text+CTA so the "Gestionar" chip never reaches the right edge,
       where the docked Mesas (TableSlidePanel) panel overlays the bar. */
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    letter-spacing: .1px;
    text-shadow: 0 1px 1px rgba(60, 26, 5, .35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CTA chip — clearly tappable, lifts on hover, arrow nudges right */
.da-cta[b-hrfi4klbxp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff;
    color: #b45309;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(120, 53, 15, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}

.dispatch-alert:hover .da-cta[b-hrfi4klbxp] { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(120, 53, 15, .3); }
.da-arrow[b-hrfi4klbxp] { transition: transform .18s ease; }
.dispatch-alert:hover .da-arrow[b-hrfi4klbxp] { transform: translateX(3px); }

@keyframes da-enter-b-hrfi4klbxp {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes da-breathe-b-hrfi4klbxp {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 0 rgba(255, 255, 255, 0); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 0 0 4px rgba(255, 255, 255, .16); }
}

@media (max-width: 600px) {
    .dispatch-alert[b-hrfi4klbxp] { gap: 9px; padding: 8px 12px; font-size: 13px; }
    .da-cta[b-hrfi4klbxp] { padding: 4px 10px; font-size: 12px; }
}

/* ultra-narrow phones: drop the CTA chip so the badge + message always have room */
@media (max-width: 380px) {
    .da-cta[b-hrfi4klbxp] { display: none; }
}

/* Respect reduced-motion — keep the bar, drop the entrance / pulse / hover nudges. */
@media (prefers-reduced-motion: reduce) {
    .dispatch-alert[b-hrfi4klbxp], .da-badge[b-hrfi4klbxp] { animation: none; }
    .da-cta[b-hrfi4klbxp], .da-arrow[b-hrfi4klbxp] { transition: none; }
}
/* /Pages/Shared/Components/FirstSaleGuide.razor.rz.scp.css */
/* Scoped to FirstSaleGuide via Blazor CSS isolation — class names can't
   leak to other components, so no global-collision risk. Pure CSS file
   (single @ for media queries).

   Compact dismissible bottom TOAST (replaces the old full-width in-flow card
   that ate the product column). position:fixed resolves to the viewport since
   the component is mounted in the POS left-section, not the transformed
   .tablesbar. */

.fsg-toast[b-4faaapbdnt] {
    position: fixed;
    z-index: 1200;            /* above POS content, below blocking modals */
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(580px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(135deg, #7c5cff 0%, #6366f1 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55);
    animation: fsg-rise-b-4faaapbdnt .28s ease;
}

@keyframes fsg-rise-b-4faaapbdnt {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.fsg-emoji[b-4faaapbdnt] { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }

.fsg-text[b-4faaapbdnt] { flex: 1; min-width: 0; }
.fsg-title[b-4faaapbdnt] { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }

.fsg-steps[b-4faaapbdnt] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
}
.fsg-steps li[b-4faaapbdnt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}
.fsg-num[b-4faaapbdnt] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fsg-cta[b-4faaapbdnt] {
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #4f46e5;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
}
.fsg-cta:hover[b-4faaapbdnt] { filter: brightness(.96); }

.fsg-close[b-4faaapbdnt] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.fsg-close:hover[b-4faaapbdnt] { background: rgba(255, 255, 255, .16); color: #fff; }

/* Phones: full-width bottom sheet, content stacks, 44px tap targets. */
@media (max-width: 640px) {
    .fsg-toast[b-4faaapbdnt] {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        transform: none;
        flex-wrap: wrap;
        padding: 12px 12px 14px;
        animation: fsg-rise-m-b-4faaapbdnt .28s ease;
    }
    @keyframes fsg-rise-m-b-4faaapbdnt {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .fsg-emoji[b-4faaapbdnt] { align-self: flex-start; }
    .fsg-text[b-4faaapbdnt] { flex: 1 1 calc(100% - 46px); }
    .fsg-cta[b-4faaapbdnt] { flex: 1 1 auto; min-height: 44px; order: 3; }
    .fsg-close[b-4faaapbdnt] { position: absolute; top: 6px; right: 6px; }
}
/* /Pages/Shared/Components/FirstWeekRecap.razor.rz.scp.css */
.fwr-card[b-ilssm1tsna] {
    position: relative;
    margin: 0 0 1rem;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(42, 209, 138, 0.12) 0%, rgba(99, 102, 241, 0.10) 100%);
    border: 1px solid rgba(42, 209, 138, 0.32);
    border-radius: 16px;
    color: #f1f5f9;
}

.fwr-close[b-ilssm1tsna] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}
.fwr-close:hover[b-ilssm1tsna] { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.fwr-title[b-ilssm1tsna] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    padding-right: 28px;
}

.fwr-stats[b-ilssm1tsna] {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.fwr-stat[b-ilssm1tsna] { display: flex; flex-direction: column; gap: 2px; }
.fwr-value[b-ilssm1tsna] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1;
}
.fwr-label[b-ilssm1tsna] {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.fwr-foot[b-ilssm1tsna] {
    margin-top: 14px;
    font-size: 0.84rem;
    color: #94a3b8;
    line-height: 1.45;
}
/* /Pages/Shared/Components/GlobalAnnouncementBanner.razor.rz.scp.css */
.global-ann[b-ccklgcy2kk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}

.global-ann-msg[b-ccklgcy2kk] { flex: 1 1 auto; }

.global-ann-x[b-ccklgcy2kk] {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.global-ann-x:hover[b-ccklgcy2kk] { background: rgba(255, 255, 255, 0.32); }

.global-ann-info[b-ccklgcy2kk] { background: #2563eb; }
.global-ann-warning[b-ccklgcy2kk] { background: #b45309; }
.global-ann-critical[b-ccklgcy2kk] { background: #b91c1c; }
/* /Pages/Shared/Components/ImpersonationBanner.razor.rz.scp.css */
/* High-contrast amber/orange so the banner reads as a warning state,
   distinct from the offline (red bottom-banner) and printer (red fixed-top
   banner at z-index 10001). Uses position:fixed + top:0 so it stays at the
   viewport top across scroll containers (POS scrolls inside an inner
   container, so position:sticky inside MainLayout's <div class="page">
   would not stick correctly). z-index sits above PrinterOfflineBanner
   (10001) and PrinterConfigBanner (10000) — impersonation context is
   the higher-priority warning since it gates everything the operator
   does in this tab. */
.imp-banner[b-lyjxuxlf2p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10005;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(90deg, #b45309, #d97706);
    color: #fffbeb;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid #92400e;
}

/* In-flow spacer rendered alongside the banner so page content isn't
   hidden under the fixed banner. Height matches .imp-banner padding +
   font-size + border (8+8 padding + ~20 line-height + 2 border = ~38).
   Rounded to 40 for breathing room. */
.imp-banner-spacer[b-lyjxuxlf2p] {
    height: 40px;
    flex-shrink: 0;
}

.imp-icon[b-lyjxuxlf2p] {
    font-size: 1.25rem;
    line-height: 1;
}

.imp-text[b-lyjxuxlf2p] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}

.imp-meta[b-lyjxuxlf2p] {
    font-weight: 400;
    opacity: 0.9;
    font-size: 0.8125rem;
}

.imp-exit[b-lyjxuxlf2p] {
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.25);
    color: #fffbeb;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.imp-exit:hover[b-lyjxuxlf2p] {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.5);
}
/* /Pages/Shared/Components/InventoryAlertToast.razor.rz.scp.css */
.toast-container[b-s70jrrqixw] {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast-container.visible[b-s70jrrqixw] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.toast[b-s70jrrqixw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #64748b;
    animation: slideIn-b-s70jrrqixw 0.3s ease;
}

@keyframes slideIn-b-s70jrrqixw {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Urgency Colors */
.toast.critical[b-s70jrrqixw] {
    border-left-color: #dc2626;
    background: linear-gradient(to right, #fef2f2 0%, white 30%);
}

.toast.warning[b-s70jrrqixw] {
    border-left-color: #f59e0b;
    background: linear-gradient(to right, #fffbeb 0%, white 30%);
}

.toast.info[b-s70jrrqixw] {
    border-left-color: #3b82f6;
    background: linear-gradient(to right, #eff6ff 0%, white 30%);
}

.toast.success[b-s70jrrqixw] {
    border-left-color: #10b981;
    background: linear-gradient(to right, #ecfdf5 0%, white 30%);
}

.toast-icon[b-s70jrrqixw] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
}

.toast.critical .toast-icon[b-s70jrrqixw] {
    background: #fee2e2;
    color: #dc2626;
}

.toast.warning .toast-icon[b-s70jrrqixw] {
    background: #fef3c7;
    color: #d97706;
}

.toast.info .toast-icon[b-s70jrrqixw] {
    background: #dbeafe;
    color: #2563eb;
}

.toast.success .toast-icon[b-s70jrrqixw] {
    background: #d1fae5;
    color: #059669;
}

.toast-content[b-s70jrrqixw] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-s70jrrqixw] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.toast-message[b-s70jrrqixw] {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-close[b-s70jrrqixw] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    margin: -4px -4px -4px 0;
}

.toast-close:hover[b-s70jrrqixw] {
    background: #f1f5f9;
    color: #64748b;
}

/* Mobile */
@media (max-width: 480px) {
    .toast-container[b-s70jrrqixw] {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}
/* /Pages/Shared/Components/OfflineBanner.razor.rz.scp.css */
.offline-banner[b-mf92dswxmd] {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp-b-mf92dswxmd 0.3s ease-out;
}

@keyframes slideUp-b-mf92dswxmd {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.offline-banner.offline[b-mf92dswxmd] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.offline-banner.pending[b-mf92dswxmd] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.offline-content[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offline-icon[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.pending-icon[b-mf92dswxmd] {
    animation: spin-b-mf92dswxmd 2s linear infinite;
}

@keyframes spin-b-mf92dswxmd {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.offline-text[b-mf92dswxmd] {
    white-space: nowrap;
}

.sync-status[b-mf92dswxmd] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
}

.sync-status.syncing[b-mf92dswxmd] {
    animation: pulse-b-mf92dswxmd 1.5s ease-in-out infinite;
}

@keyframes pulse-b-mf92dswxmd {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.sync-status.error[b-mf92dswxmd] {
    background: rgba(239, 68, 68, 0.3);
}

.sync-btn[b-mf92dswxmd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sync-btn:hover[b-mf92dswxmd] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.sync-btn:active[b-mf92dswxmd] {
    transform: scale(0.95);
}

/* Hide on small screens to avoid overlap with other UI */
@media (max-width: 480px) {
    .offline-banner[b-mf92dswxmd] {
        bottom: 80px; /* Above mobile nav */
        left: 16px;
        right: 16px;
        transform: none;
    }
}
/* /Pages/Shared/Components/PendingPrintsPopup.razor.rz.scp.css */
/* ========================================
   PENDING PRINTS POPUP
   Shows failed prints queue for retry
   ======================================== */

/* ========================================
   BACKDROP
   ======================================== */
.popup-backdrop[b-akbq2flk4g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* ========================================
   POPUP CONTAINER
   ======================================== */
.pending-prints-popup[b-akbq2flk4g] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: popup-in-b-akbq2flk4g 0.15s ease-out;
}

@keyframes popup-in-b-akbq2flk4g {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ========================================
   HEADER
   ======================================== */
.popup-header[b-akbq2flk4g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    flex-shrink: 0;
}

.header-title[b-akbq2flk4g] {
    font-size: 15px;
    font-weight: 700;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title[b-akbq2flk4g]::before {
    content: "📋";
}

.close-btn[b-akbq2flk4g] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
}

.close-btn:hover[b-akbq2flk4g] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   BODY
   ======================================== */
.popup-body[b-akbq2flk4g] {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 100px;
}

/* Empty state */
.empty-state[b-akbq2flk4g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: #64748b;
    font-size: 14px;
}

.empty-icon[b-akbq2flk4g] {
    font-size: 32px;
}

/* ========================================
   PENDING LIST
   ======================================== */
.pending-list[b-akbq2flk4g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pending-item[b-akbq2flk4g] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #334155;
    border-radius: 10px;
    transition: all 0.15s;
}

.pending-item.retrying[b-akbq2flk4g] {
    opacity: 0.7;
    border-color: #3b82f6;
}

.pending-item.exhausted[b-akbq2flk4g] {
    opacity: 0.6;
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.retry-count.max-reached[b-akbq2flk4g] {
    color: #ef4444;
    font-weight: 600;
}

.exhausted-warning[b-akbq2flk4g] {
    margin-top: 6px;
    font-size: 12px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.item-info[b-akbq2flk4g] {
    flex: 1;
    min-width: 0;
}

.item-main[b-akbq2flk4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.item-table[b-akbq2flk4g] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 14px;
}

.item-type[b-akbq2flk4g] {
    font-size: 12px;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.item-meta[b-akbq2flk4g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}

.retry-count[b-akbq2flk4g] {
    color: #f59e0b;
}

.item-error[b-akbq2flk4g] {
    margin-top: 6px;
    font-size: 12px;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   ITEM ACTIONS
   ======================================== */
.item-actions[b-akbq2flk4g] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-retry[b-akbq2flk4g],
.btn-dismiss[b-akbq2flk4g] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
}

.btn-retry[b-akbq2flk4g] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.btn-retry:hover:not(:disabled)[b-akbq2flk4g] {
    background: rgba(59, 130, 246, 0.3);
}

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

.btn-dismiss[b-akbq2flk4g] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.btn-dismiss:hover:not(:disabled)[b-akbq2flk4g] {
    background: rgba(239, 68, 68, 0.25);
}

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

/* ========================================
   POPUP ACTIONS
   ======================================== */
.popup-actions[b-akbq2flk4g] {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #334155;
    flex-shrink: 0;
}

.popup-actions button[b-akbq2flk4g] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.btn-retry-all[b-akbq2flk4g] {
    background: #3b82f6;
    color: white;
}

.btn-retry-all:hover:not(:disabled)[b-akbq2flk4g] {
    background: #2563eb;
}

.btn-retry-all:disabled[b-akbq2flk4g] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-clear[b-akbq2flk4g] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569 !important;
}

.btn-clear:hover[b-akbq2flk4g] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

/* Spinner */
.spinner[b-akbq2flk4g] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-akbq2flk4g 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-akbq2flk4g {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHT THEME
   ======================================== */
:root[data-theme="light"] .pending-prints-popup[b-akbq2flk4g],
html[data-theme="light"] .pending-prints-popup[b-akbq2flk4g] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .popup-header[b-akbq2flk4g],
html[data-theme="light"] .popup-header[b-akbq2flk4g] {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

:root[data-theme="light"] .header-title[b-akbq2flk4g],
html[data-theme="light"] .header-title[b-akbq2flk4g] {
    color: #dc2626;
}

:root[data-theme="light"] .close-btn[b-akbq2flk4g],
html[data-theme="light"] .close-btn[b-akbq2flk4g] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-akbq2flk4g],
html[data-theme="light"] .close-btn:hover[b-akbq2flk4g] {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .empty-state[b-akbq2flk4g],
html[data-theme="light"] .empty-state[b-akbq2flk4g] {
    color: #9ca3af;
}

:root[data-theme="light"] .pending-item[b-akbq2flk4g],
html[data-theme="light"] .pending-item[b-akbq2flk4g] {
    background: #f8fafc;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .pending-item.retrying[b-akbq2flk4g],
html[data-theme="light"] .pending-item.retrying[b-akbq2flk4g] {
    border-color: #3b82f6;
}

:root[data-theme="light"] .pending-item.exhausted[b-akbq2flk4g],
html[data-theme="light"] .pending-item.exhausted[b-akbq2flk4g] {
    opacity: 0.7;
    border-color: #9ca3af;
    background: #f3f4f6;
}

:root[data-theme="light"] .exhausted-warning[b-akbq2flk4g],
html[data-theme="light"] .exhausted-warning[b-akbq2flk4g] {
    color: #b45309;
    background: #fef3c7;
}

:root[data-theme="light"] .item-table[b-akbq2flk4g],
html[data-theme="light"] .item-table[b-akbq2flk4g] {
    color: #1f2937;
}

:root[data-theme="light"] .item-type[b-akbq2flk4g],
html[data-theme="light"] .item-type[b-akbq2flk4g] {
    color: #6b7280;
    background: #f3f4f6;
}

:root[data-theme="light"] .item-meta[b-akbq2flk4g],
html[data-theme="light"] .item-meta[b-akbq2flk4g] {
    color: #9ca3af;
}

:root[data-theme="light"] .item-error[b-akbq2flk4g],
html[data-theme="light"] .item-error[b-akbq2flk4g] {
    color: #dc2626;
    background: #fef2f2;
}

:root[data-theme="light"] .btn-retry[b-akbq2flk4g],
html[data-theme="light"] .btn-retry[b-akbq2flk4g] {
    background: #eff6ff;
    color: #2563eb;
}

:root[data-theme="light"] .btn-retry:hover:not(:disabled)[b-akbq2flk4g],
html[data-theme="light"] .btn-retry:hover:not(:disabled)[b-akbq2flk4g] {
    background: #dbeafe;
}

:root[data-theme="light"] .btn-dismiss[b-akbq2flk4g],
html[data-theme="light"] .btn-dismiss[b-akbq2flk4g] {
    background: #fef2f2;
    color: #dc2626;
}

:root[data-theme="light"] .btn-dismiss:hover:not(:disabled)[b-akbq2flk4g],
html[data-theme="light"] .btn-dismiss:hover:not(:disabled)[b-akbq2flk4g] {
    background: #fee2e2;
}

:root[data-theme="light"] .popup-actions[b-akbq2flk4g],
html[data-theme="light"] .popup-actions[b-akbq2flk4g] {
    background: #f8fafc;
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .btn-clear[b-akbq2flk4g],
html[data-theme="light"] .btn-clear[b-akbq2flk4g] {
    color: #6b7280;
    border-color: #d1d5db !important;
}

:root[data-theme="light"] .btn-clear:hover[b-akbq2flk4g],
html[data-theme="light"] .btn-clear:hover[b-akbq2flk4g] {
    background: #f3f4f6;
    color: #1f2937;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .pending-prints-popup[b-akbq2flk4g] {
        width: 95%;
        max-height: 85vh;
    }

    .pending-item[b-akbq2flk4g] {
        padding: 10px;
    }

    .item-main[b-akbq2flk4g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .popup-actions[b-akbq2flk4g] {
        flex-direction: column;
    }
}
/* /Pages/Shared/Components/PrinterConfigBanner.razor.rz.scp.css */
/* ========================================
   PRINTER CONFIGURATION BANNER
   Shows when printer not configured or has errors
   ======================================== */

.printer-banner[b-6nj7e2jkoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    gap: 16px;
    font-size: 14px;
    animation: banner-slide-in-b-6nj7e2jkoo 0.3s ease-out;
}

@keyframes banner-slide-in-b-6nj7e2jkoo {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Warning state - not configured */
.banner-warning[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    color: #92400e;
}

/* Error state - connection failures */
.banner-error[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
    border-bottom: 1px solid #ef4444;
    color: #991b1b;
}

/* Content area */
.banner-content[b-6nj7e2jkoo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.banner-icon[b-6nj7e2jkoo] {
    font-size: 16px;
    flex-shrink: 0;
}

.banner-text[b-6nj7e2jkoo] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions area */
.banner-actions[b-6nj7e2jkoo] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-configure[b-6nj7e2jkoo] {
    padding: 6px 14px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.banner-error .btn-configure[b-6nj7e2jkoo] {
    background: #ef4444;
}

.btn-configure:hover[b-6nj7e2jkoo] {
    background: #d97706;
    transform: translateY(-1px);
}

.banner-error .btn-configure:hover[b-6nj7e2jkoo] {
    background: #dc2626;
}

.btn-dismiss[b-6nj7e2jkoo] {
    padding: 6px 14px;
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-dismiss:hover[b-6nj7e2jkoo] {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* ========================================
   DARK THEME
   ======================================== */

:root[data-theme="dark"] .banner-warning[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-warning[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #451a03 0%, #78350f 100%);
    border-bottom-color: #b45309;
    color: #fcd34d;
}

:root[data-theme="dark"] .banner-error[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error[b-6nj7e2jkoo] {
    background: linear-gradient(90deg, #450a0a 0%, #7f1d1d 100%);
    border-bottom-color: #b91c1c;
    color: #fca5a5;
}

:root[data-theme="dark"] .btn-configure[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-configure[b-6nj7e2jkoo] {
    background: #d97706;
}

:root[data-theme="dark"] .btn-configure:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-configure:hover[b-6nj7e2jkoo] {
    background: #b45309;
}

:root[data-theme="dark"] .banner-error .btn-configure[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error .btn-configure[b-6nj7e2jkoo] {
    background: #dc2626;
}

:root[data-theme="dark"] .banner-error .btn-configure:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .banner-error .btn-configure:hover[b-6nj7e2jkoo] {
    background: #b91c1c;
}

:root[data-theme="dark"] .btn-dismiss[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-dismiss[b-6nj7e2jkoo] {
    border-color: rgba(255,255,255,0.3);
}

:root[data-theme="dark"] .btn-dismiss:hover[b-6nj7e2jkoo],
html[data-theme="dark"] .btn-dismiss:hover[b-6nj7e2jkoo] {
    background: rgba(255,255,255,0.1);
}

/* ========================================
   RESPONSIVE - Stack on small screens
   ======================================== */

@media (max-width: 500px) {
    .printer-banner[b-6nj7e2jkoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .banner-content[b-6nj7e2jkoo] {
        justify-content: center;
        text-align: center;
    }

    .banner-text[b-6nj7e2jkoo] {
        white-space: normal;
    }

    .banner-actions[b-6nj7e2jkoo] {
        justify-content: center;
    }
}
/* /Pages/Shared/Components/PrintErrorModal.razor.rz.scp.css */
/* ========================================
   PRINT ERROR MODAL
   Smart error handling when prints fail
   ======================================== */

/* ========================================
   BACKDROP
   ======================================== */
.modal-backdrop[b-vnct245uv8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    animation: fade-in-b-vnct245uv8 0.15s ease-out;
}

@keyframes fade-in-b-vnct245uv8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   MODAL CONTAINER
   ======================================== */
.print-error-modal[b-vnct245uv8] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-in-b-vnct245uv8 0.2s ease-out;
}

@keyframes modal-in-b-vnct245uv8 {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ========================================
   HEADER
   ======================================== */
.modal-header[b-vnct245uv8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    flex-shrink: 0;
}

.header-title[b-vnct245uv8] {
    font-size: 16px;
    font-weight: 700;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title[b-vnct245uv8]::before {
    content: "⚠️";
}

.close-btn[b-vnct245uv8] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
    line-height: 1;
}

.close-btn:hover[b-vnct245uv8] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   BODY
   ======================================== */
.modal-body[b-vnct245uv8] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Reassurance box - always shown first */
.reassurance[b-vnct245uv8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    color: #86efac;
    font-weight: 500;
    font-size: 14px;
}

.check-icon[b-vnct245uv8] {
    font-size: 18px;
    flex-shrink: 0;
}

.divider[b-vnct245uv8] {
    border: none;
    border-top: 1px solid #334155;
    margin: 16px 0;
}

/* Printer info line */
.printer-info[b-vnct245uv8] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 12px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ========================================
   ERROR DETAILS BOX
   ======================================== */
.error-details[b-vnct245uv8] {
    padding: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 10px;
}

.error-details.error-config[b-vnct245uv8] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
}

.error-details.error-config .error-title[b-vnct245uv8] {
    color: #fcd34d;
}

.error-details.error-agent[b-vnct245uv8] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
}

.error-details.error-agent .error-title[b-vnct245uv8] {
    color: #fcd34d;
}

/* Agent install hint box */
.agent-install-hint[b-vnct245uv8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 8px;
}

.agent-hint-icon[b-vnct245uv8] {
    font-size: 20px;
    flex-shrink: 0;
}

.agent-hint-text[b-vnct245uv8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #fde68a;
}

.agent-hint-text strong[b-vnct245uv8] {
    color: #fef3c7;
}

.agent-hint-note[b-vnct245uv8] {
    font-size: 12px;
    opacity: 0.75;
}

.error-title[b-vnct245uv8] {
    font-weight: 600;
    color: #fca5a5;
    margin: 0 0 8px 0;
    font-size: 14px;
}

.error-hint[b-vnct245uv8] {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Checklist */
.checklist[b-vnct245uv8] {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
    color: #e2e8f0;
    font-size: 14px;
}

.checklist li[b-vnct245uv8] {
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
    line-height: 1.4;
}

.checklist li[b-vnct245uv8]::before {
    content: "☐";
    position: absolute;
    left: 0;
    color: #64748b;
    font-size: 16px;
}

/* ========================================
   SUPPORT CODE
   ======================================== */
.support-code[b-vnct245uv8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: #93c5fd;
    flex-wrap: wrap;
}

.support-code .code[b-vnct245uv8] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.copy-btn[b-vnct245uv8] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.15s;
    border-radius: 4px;
}

.copy-btn:hover[b-vnct245uv8] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   ACTIONS
   ======================================== */
.modal-actions[b-vnct245uv8] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid #334155;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.modal-actions button[b-vnct245uv8] {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-primary[b-vnct245uv8] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-primary:hover:not(:disabled)[b-vnct245uv8] {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-primary:disabled[b-vnct245uv8] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-vnct245uv8] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
}

.btn-secondary:hover[b-vnct245uv8] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border-color: #64748b;
}

.btn-tertiary[b-vnct245uv8] {
    background: transparent;
    color: #64748b;
    border: 1px solid #334155;
}

.btn-tertiary:hover[b-vnct245uv8] {
    color: #94a3b8;
    border-color: #475569;
    background: rgba(255, 255, 255, 0.02);
}

/* Spinner */
.spinner[b-vnct245uv8] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-vnct245uv8 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-vnct245uv8 {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHT THEME
   ======================================== */
:root[data-theme="light"] .print-error-modal[b-vnct245uv8],
html[data-theme="light"] .print-error-modal[b-vnct245uv8] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .modal-header[b-vnct245uv8],
html[data-theme="light"] .modal-header[b-vnct245uv8] {
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

:root[data-theme="light"] .header-title[b-vnct245uv8],
html[data-theme="light"] .header-title[b-vnct245uv8] {
    color: #dc2626;
}

:root[data-theme="light"] .close-btn[b-vnct245uv8],
html[data-theme="light"] .close-btn[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-vnct245uv8],
html[data-theme="light"] .close-btn:hover[b-vnct245uv8] {
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .reassurance[b-vnct245uv8],
html[data-theme="light"] .reassurance[b-vnct245uv8] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}

:root[data-theme="light"] .divider[b-vnct245uv8],
html[data-theme="light"] .divider[b-vnct245uv8] {
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .printer-info[b-vnct245uv8],
html[data-theme="light"] .printer-info[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .error-details[b-vnct245uv8],
html[data-theme="light"] .error-details[b-vnct245uv8] {
    background: #fef2f2;
    border-color: #fecaca;
}

:root[data-theme="light"] .error-details.error-config[b-vnct245uv8],
html[data-theme="light"] .error-details.error-config[b-vnct245uv8] {
    background: #fefce8;
    border-color: #fde047;
}

:root[data-theme="light"] .error-details.error-config .error-title[b-vnct245uv8],
html[data-theme="light"] .error-details.error-config .error-title[b-vnct245uv8] {
    color: #a16207;
}

:root[data-theme="light"] .error-details.error-agent[b-vnct245uv8],
html[data-theme="light"] .error-details.error-agent[b-vnct245uv8] {
    background: #fefce8;
    border-color: #fde047;
}

:root[data-theme="light"] .error-details.error-agent .error-title[b-vnct245uv8],
html[data-theme="light"] .error-details.error-agent .error-title[b-vnct245uv8] {
    color: #a16207;
}

:root[data-theme="light"] .agent-install-hint[b-vnct245uv8],
html[data-theme="light"] .agent-install-hint[b-vnct245uv8] {
    background: #fef9c3;
}

:root[data-theme="light"] .agent-hint-text[b-vnct245uv8],
html[data-theme="light"] .agent-hint-text[b-vnct245uv8] {
    color: #78350f;
}

:root[data-theme="light"] .agent-hint-text strong[b-vnct245uv8],
html[data-theme="light"] .agent-hint-text strong[b-vnct245uv8] {
    color: #92400e;
}

:root[data-theme="light"] .error-title[b-vnct245uv8],
html[data-theme="light"] .error-title[b-vnct245uv8] {
    color: #dc2626;
}

:root[data-theme="light"] .error-hint[b-vnct245uv8],
html[data-theme="light"] .error-hint[b-vnct245uv8] {
    color: #6b7280;
}

:root[data-theme="light"] .checklist[b-vnct245uv8],
html[data-theme="light"] .checklist[b-vnct245uv8] {
    color: #374151;
}

:root[data-theme="light"] .checklist li[b-vnct245uv8]::before,
html[data-theme="light"] .checklist li[b-vnct245uv8]::before {
    color: #9ca3af;
}

:root[data-theme="light"] .support-code[b-vnct245uv8],
html[data-theme="light"] .support-code[b-vnct245uv8] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

:root[data-theme="light"] .support-code .code[b-vnct245uv8],
html[data-theme="light"] .support-code .code[b-vnct245uv8] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e40af;
}

:root[data-theme="light"] .modal-actions[b-vnct245uv8],
html[data-theme="light"] .modal-actions[b-vnct245uv8] {
    background: #f8fafc;
    border-top-color: #e5e7eb;
}

:root[data-theme="light"] .btn-secondary[b-vnct245uv8],
html[data-theme="light"] .btn-secondary[b-vnct245uv8] {
    color: #6b7280;
    border-color: #d1d5db;
}

:root[data-theme="light"] .btn-secondary:hover[b-vnct245uv8],
html[data-theme="light"] .btn-secondary:hover[b-vnct245uv8] {
    background: #f3f4f6;
    color: #1f2937;
}

:root[data-theme="light"] .btn-tertiary[b-vnct245uv8],
html[data-theme="light"] .btn-tertiary[b-vnct245uv8] {
    color: #9ca3af;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .btn-tertiary:hover[b-vnct245uv8],
html[data-theme="light"] .btn-tertiary:hover[b-vnct245uv8] {
    color: #6b7280;
    border-color: #d1d5db;
    background: #f9fafb;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 500px) {
    .print-error-modal[b-vnct245uv8] {
        width: 95%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .modal-header[b-vnct245uv8] {
        padding: 14px 16px;
    }

    .modal-body[b-vnct245uv8] {
        padding: 16px;
    }

    .modal-actions[b-vnct245uv8] {
        padding: 14px 16px;
        flex-direction: column;
    }

    .modal-actions button[b-vnct245uv8] {
        min-width: 100%;
    }

    .support-code[b-vnct245uv8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .support-code .code[b-vnct245uv8] {
        width: 100%;
        text-align: center;
    }
}
/* /Pages/Shared/Components/PrinterSetupModal.razor.rz.scp.css */
.printer-modal-backdrop[b-mebnxyw7tg] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-mebnxyw7tg 0.2s ease;
}

@keyframes fadeIn-b-mebnxyw7tg {
    from { opacity: 0; }
    to { opacity: 1; }
}

.printer-modal[b-mebnxyw7tg] {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp-b-mebnxyw7tg 0.3s ease;
}

@keyframes slideUp-b-mebnxyw7tg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.modal-header[b-mebnxyw7tg] {
    padding: 24px;
    text-align: center;
    position: relative;
}

.modal-header h2[b-mebnxyw7tg] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.modal-header .close-btn[b-mebnxyw7tg] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-header .close-btn:hover[b-mebnxyw7tg] {
    background: rgba(255, 255, 255, 0.3);
}

.header-icon[b-mebnxyw7tg] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.icon-success[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    color: #22c55e;
    font-size: 2rem;
    font-weight: bold;
}

.icon-spinner[b-mebnxyw7tg] {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mebnxyw7tg 1s linear infinite;
}

@keyframes spin-b-mebnxyw7tg {
    to { transform: rotate(360deg); }
}

/* Header colors */
.header-success[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.header-warning[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.header-error[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.header-disabled[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.header-waiting[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* Body */
.modal-body[b-mebnxyw7tg] {
    padding: 24px;
    max-height: 50vh;
    overflow-y: auto;
}

.success-message[b-mebnxyw7tg],
.info-message[b-mebnxyw7tg],
.warning-message[b-mebnxyw7tg],
.error-message[b-mebnxyw7tg],
.checking-message[b-mebnxyw7tg] {
    text-align: center;
    margin-bottom: 16px;
}

.success-message p[b-mebnxyw7tg],
.info-message p[b-mebnxyw7tg],
.checking-message p[b-mebnxyw7tg] {
    color: #374151;
    font-size: 1.1rem;
    margin: 8px 0;
}

.warning-message p[b-mebnxyw7tg],
.error-message p[b-mebnxyw7tg] {
    color: #374151;
    font-size: 1rem;
    margin: 8px 0;
}

.printer-name[b-mebnxyw7tg] {
    background: #f3f4f6;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem !important;
    color: #1f2937 !important;
}

.hint[b-mebnxyw7tg] {
    color: #6b7280 !important;
    font-size: 0.95rem !important;
}

.error-detail[b-mebnxyw7tg] {
    background: #fef2f2;
    color: #dc2626 !important;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem !important;
}

/* Steps */
.steps[b-mebnxyw7tg] {
    margin-top: 20px;
}

.step[b-mebnxyw7tg] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 12px;
}

.step-number[b-mebnxyw7tg] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-content[b-mebnxyw7tg] {
    flex: 1;
}

.step-content strong[b-mebnxyw7tg] {
    display: block;
    color: #1f2937;
    margin-bottom: 4px;
}

.step-content p[b-mebnxyw7tg] {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
}

.download-btn[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.download-btn:hover[b-mebnxyw7tg] {
    background: #2563eb;
    color: white;
}

.start-agent-btn[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

.start-agent-btn:hover[b-mebnxyw7tg] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.4);
}

.step-success[b-mebnxyw7tg] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* Waiting State */
.waiting-state[b-mebnxyw7tg] {
    text-align: center;
    padding: 20px 0;
}

.waiting-animation[b-mebnxyw7tg] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.pulse-ring[b-mebnxyw7tg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #3b82f6;
    border-radius: 50%;
    animation: pulse-ring-b-mebnxyw7tg 1.5s ease-out infinite;
}

.pulse-dot[b-mebnxyw7tg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

@keyframes pulse-ring-b-mebnxyw7tg {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.waiting-title[b-mebnxyw7tg] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.waiting-hint[b-mebnxyw7tg] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0 0 4px 0;
}

.waiting-filename[b-mebnxyw7tg] {
    font-family: monospace;
    background: #f3f4f6;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    color: #1f2937;
    font-weight: 600;
    margin: 8px 0;
}

.waiting-subhint[b-mebnxyw7tg] {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 8px 0 16px 0;
}

.waiting-progress[b-mebnxyw7tg] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.progress-dot[b-mebnxyw7tg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: background 0.3s;
}

.progress-dot.active[b-mebnxyw7tg] {
    background: #3b82f6;
}

.waiting-tip[b-mebnxyw7tg] {
    margin-top: 20px;
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.9rem;
}

/* Troubleshoot */
.troubleshoot[b-mebnxyw7tg] {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.troubleshoot p[b-mebnxyw7tg] {
    margin: 0 0 12px 0;
    color: #854d0e;
}

.troubleshoot ul[b-mebnxyw7tg] {
    margin: 0;
    padding-left: 20px;
}

.troubleshoot li[b-mebnxyw7tg] {
    color: #713f12;
    font-size: 0.9rem;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Footer */
.modal-footer[b-mebnxyw7tg] {
    padding: 16px 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
}

.btn-primary[b-mebnxyw7tg],
.btn-secondary[b-mebnxyw7tg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary[b-mebnxyw7tg] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-mebnxyw7tg] {
    background: #2563eb;
}

.btn-primary:disabled[b-mebnxyw7tg] {
    background: #93c5fd;
    cursor: not-allowed;
}

.btn-secondary[b-mebnxyw7tg] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-mebnxyw7tg] {
    background: #e5e7eb;
}

.btn-spinner[b-mebnxyw7tg] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-mebnxyw7tg 1s linear infinite;
}

/* Responsive */
@media (max-width: 480px) {
    .printer-modal[b-mebnxyw7tg] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-mebnxyw7tg] {
        padding: 20px;
    }

    .modal-header h2[b-mebnxyw7tg] {
        font-size: 1.25rem;
    }

    .modal-body[b-mebnxyw7tg] {
        padding: 16px;
    }

    .step[b-mebnxyw7tg] {
        padding: 12px;
    }

    .modal-footer[b-mebnxyw7tg] {
        flex-direction: column;
    }

    .btn-primary[b-mebnxyw7tg],
    .btn-secondary[b-mebnxyw7tg] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Shared/Components/PrinterStatusChip.razor.rz.scp.css */
/* ========================================
   PRINTER STATUS CHIP
   A compact, always-visible printer status indicator
   ======================================== */

/* Container */
.printer-chip-container[b-kxa60dusiq] {
    position: relative;
    display: inline-block;
}

/* ========================================
   CHIP BUTTON (Collapsed State)
   ======================================== */
.printer-chip[b-kxa60dusiq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #e2e8f0;
}

.printer-chip:hover[b-kxa60dusiq] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}

/* Status-based chip backgrounds */
.printer-chip.chip-ok[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.printer-chip.chip-ok:hover[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.15);
}

.printer-chip.chip-error[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.printer-chip.chip-error:hover[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.2);
}

.printer-chip.chip-warning[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
}

.printer-chip.chip-warning:hover[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.2);
}

/* Printer icon */
.printer-icon[b-kxa60dusiq] {
    width: 16px;
    height: 16px;
    color: #e2e8f0;
    flex-shrink: 0;
}

/* Light-topbar contrast. The chip above is styled for a dark surface
   (near-white icon on translucent white). The POS topbar is
   `background: var(--card)` — light in the default/light theme — so the
   neutral chip washes out to near-zero contrast, and the topbar is the
   only place to spot printer trouble on a phone. Apply dark-on-light
   whenever the dark theme is NOT active (covers both an explicit
   data-theme="light" and the no-attribute default). The status-tinted
   variants keep their own (green/red/amber) backgrounds — these
   selectors are lower specificity than .printer-chip.chip-* — while the
   icon/text goes slate so it reads on the tinted fills too. */
html:not([data-theme="dark"]) .printer-chip[b-kxa60dusiq] {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.15);
    color: #334155;
}
html:not([data-theme="dark"]) .printer-chip:hover[b-kxa60dusiq] {
    background: rgba(15, 23, 42, 0.09);
    border-color: rgba(15, 23, 42, 0.22);
}
html:not([data-theme="dark"]) .printer-icon[b-kxa60dusiq] {
    color: #334155;
}

/* ========================================
   STATUS DOTS
   ======================================== */
.status-dot[b-kxa60dusiq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.large[b-kxa60dusiq] {
    width: 10px;
    height: 10px;
}

.dot-grey[b-kxa60dusiq] {
    background: #6b7280;
}

.dot-green[b-kxa60dusiq] {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.dot-yellow[b-kxa60dusiq] {
    background: #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
}

.dot-red[b-kxa60dusiq] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Pulse animation for errors */
.dot-red:not(.pulse)[b-kxa60dusiq] {
    animation: pulse-dot-b-kxa60dusiq 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-kxa60dusiq {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* Pulse animation for checking state */
.pulse[b-kxa60dusiq] {
    animation: pulse-checking-b-kxa60dusiq 1s ease-in-out infinite;
}

@keyframes pulse-checking-b-kxa60dusiq {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ========================================
   SPINNERS
   ======================================== */
.checking-spinner[b-kxa60dusiq],
.spinner[b-kxa60dusiq] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-kxa60dusiq 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-kxa60dusiq {
    to { transform: rotate(360deg); }
}

/* ========================================
   POPUP
   ======================================== */
.popup-backdrop[b-kxa60dusiq] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.printer-popup[b-kxa60dusiq] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    z-index: 999;
    overflow: hidden;
    animation: popup-in-b-kxa60dusiq 0.15s ease-out;
}

@keyframes popup-in-b-kxa60dusiq {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.popup-header[b-kxa60dusiq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid #334155;
    font-weight: 600;
    font-size: 14px;
    color: #f1f5f9;
}

.close-btn[b-kxa60dusiq] {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.15s;
}

.close-btn:hover[b-kxa60dusiq] {
    color: #f1f5f9;
    background: rgba(255,255,255,0.1);
}

/* Body */
.popup-body[b-kxa60dusiq] {
    padding: 16px;
}

.status-row[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.status-text[b-kxa60dusiq] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 15px;
}

/* Printer details */
.printer-details[b-kxa60dusiq] {
    margin-bottom: 12px;
}

.detail-row[b-kxa60dusiq] {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 4px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.detail-row.terminal[b-kxa60dusiq] {
    color: #64748b;
    font-family: inherit;
}

/* Info box (for not configured / disabled states) */
.info-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #94a3b8;
}

/* Error box */
.error-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fca5a5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.error-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 14px;
}

/* Agent install box */
.agent-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fde047;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.agent-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 16px;
}

.agent-text[b-kxa60dusiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agent-text strong[b-kxa60dusiq] {
    font-weight: 600;
}

.agent-text span[b-kxa60dusiq] {
    font-size: 12px;
    opacity: 0.85;
}

:root[data-theme="light"] .agent-box[b-kxa60dusiq],
html[data-theme="light"] .agent-box[b-kxa60dusiq] {
    background: #fefce8;
    border-color: #fde047;
    color: #a16207;
}

/* Link agent button - appears when agent detected but wrong slug */
.btn-link-agent[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    color: #60a5fa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-link-agent:hover:not(:disabled)[b-kxa60dusiq] {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

.btn-link-agent:disabled[b-kxa60dusiq] {
    opacity: 0.6;
    cursor: not-allowed;
}

:root[data-theme="light"] .btn-link-agent[b-kxa60dusiq],
html[data-theme="light"] .btn-link-agent[b-kxa60dusiq] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

:root[data-theme="light"] .btn-link-agent:hover:not(:disabled)[b-kxa60dusiq],
html[data-theme="light"] .btn-link-agent:hover:not(:disabled)[b-kxa60dusiq] {
    background: #dbeafe;
}

/* Agent version display */
.agent-version[b-kxa60dusiq] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.outdated-badge[b-kxa60dusiq] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

:root[data-theme="light"] .outdated-badge[b-kxa60dusiq],
html[data-theme="light"] .outdated-badge[b-kxa60dusiq] {
    background: #fef2f2;
    color: #dc2626;
}

/* Warning box (for outdated agent, not running) */
.warning-box[b-kxa60dusiq] {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #fde047;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-icon[b-kxa60dusiq] {
    flex-shrink: 0;
    font-size: 16px;
}

.warning-text[b-kxa60dusiq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warning-text strong[b-kxa60dusiq] {
    font-weight: 600;
}

.warning-text span[b-kxa60dusiq] {
    font-size: 12px;
    opacity: 0.85;
}

:root[data-theme="light"] .warning-box[b-kxa60dusiq],
html[data-theme="light"] .warning-box[b-kxa60dusiq] {
    background: #fefce8;
    border-color: #fde047;
    color: #a16207;
}

/* Last print time */
.last-print[b-kxa60dusiq] {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
}

/* ========================================
   ACTIONS
   ======================================== */
.popup-actions[b-kxa60dusiq] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid #334155;
}

.popup-actions button[b-kxa60dusiq] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-test[b-kxa60dusiq] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-test:hover:not(:disabled)[b-kxa60dusiq] {
    background: #2563eb;
}

.btn-test:disabled[b-kxa60dusiq] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-config[b-kxa60dusiq] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
}

.btn-config:hover[b-kxa60dusiq] {
    background: rgba(255,255,255,0.05);
    color: #f1f5f9;
    border-color: #64748b;
}

.btn-config.primary[b-kxa60dusiq] {
    background: #3b82f6;
    color: white;
    border: none;
}

.btn-config.primary:hover[b-kxa60dusiq] {
    background: #2563eb;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
:root[data-theme="light"] .printer-chip[b-kxa60dusiq],
html[data-theme="light"] .printer-chip[b-kxa60dusiq] {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #374151;
}

:root[data-theme="light"] .printer-chip:hover[b-kxa60dusiq],
html[data-theme="light"] .printer-chip:hover[b-kxa60dusiq] {
    background: rgba(0,0,0,0.08);
}

:root[data-theme="light"] .printer-chip.chip-ok[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-ok[b-kxa60dusiq] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
}

:root[data-theme="light"] .printer-chip.chip-error[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-error[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
}

:root[data-theme="light"] .printer-chip.chip-warning[b-kxa60dusiq],
html[data-theme="light"] .printer-chip.chip-warning[b-kxa60dusiq] {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.25);
}

:root[data-theme="light"] .printer-icon[b-kxa60dusiq],
html[data-theme="light"] .printer-icon[b-kxa60dusiq] {
    color: #374151;
}

:root[data-theme="light"] .checking-spinner[b-kxa60dusiq],
html[data-theme="light"] .checking-spinner[b-kxa60dusiq] {
    border-color: rgba(0,0,0,0.15);
    border-top-color: #374151;
}

:root[data-theme="light"] .printer-popup[b-kxa60dusiq],
html[data-theme="light"] .printer-popup[b-kxa60dusiq] {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

:root[data-theme="light"] .popup-header[b-kxa60dusiq],
html[data-theme="light"] .popup-header[b-kxa60dusiq] {
    background: #f8fafc;
    border-color: #e5e7eb;
    color: #1f2937;
}

:root[data-theme="light"] .close-btn[b-kxa60dusiq],
html[data-theme="light"] .close-btn[b-kxa60dusiq] {
    color: #6b7280;
}

:root[data-theme="light"] .close-btn:hover[b-kxa60dusiq],
html[data-theme="light"] .close-btn:hover[b-kxa60dusiq] {
    color: #1f2937;
    background: rgba(0,0,0,0.05);
}

:root[data-theme="light"] .status-text[b-kxa60dusiq],
html[data-theme="light"] .status-text[b-kxa60dusiq] {
    color: #1f2937;
}

:root[data-theme="light"] .detail-row[b-kxa60dusiq],
html[data-theme="light"] .detail-row[b-kxa60dusiq] {
    color: #6b7280;
}

:root[data-theme="light"] .detail-row.terminal[b-kxa60dusiq],
html[data-theme="light"] .detail-row.terminal[b-kxa60dusiq] {
    color: #9ca3af;
}

:root[data-theme="light"] .info-box[b-kxa60dusiq],
html[data-theme="light"] .info-box[b-kxa60dusiq] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

:root[data-theme="light"] .error-box[b-kxa60dusiq],
html[data-theme="light"] .error-box[b-kxa60dusiq] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

:root[data-theme="light"] .last-print[b-kxa60dusiq],
html[data-theme="light"] .last-print[b-kxa60dusiq] {
    color: #9ca3af;
}

:root[data-theme="light"] .popup-actions[b-kxa60dusiq],
html[data-theme="light"] .popup-actions[b-kxa60dusiq] {
    background: #f8fafc;
    border-color: #e5e7eb;
}

:root[data-theme="light"] .btn-config[b-kxa60dusiq],
html[data-theme="light"] .btn-config[b-kxa60dusiq] {
    color: #6b7280;
    border-color: #d1d5db;
}

:root[data-theme="light"] .btn-config:hover[b-kxa60dusiq],
html[data-theme="light"] .btn-config:hover[b-kxa60dusiq] {
    background: #f3f4f6;
    color: #1f2937;
}

:root[data-theme="light"] .spinner[b-kxa60dusiq],
html[data-theme="light"] .spinner[b-kxa60dusiq] {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

/* ========================================
   PENDING BADGE
   ======================================== */
.pending-badge[b-kxa60dusiq] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: badge-pulse-b-kxa60dusiq 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-kxa60dusiq {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========================================
   PENDING BUTTON (in popup)
   ======================================== */
.btn-pending[b-kxa60dusiq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    margin-top: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-pending:hover[b-kxa60dusiq] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-pending .arrow[b-kxa60dusiq] {
    margin-left: auto;
    opacity: 0.6;
}

/* Light theme pending */
:root[data-theme="light"] .pending-badge[b-kxa60dusiq],
html[data-theme="light"] .pending-badge[b-kxa60dusiq] {
    background: #dc2626;
}

:root[data-theme="light"] .btn-pending[b-kxa60dusiq],
html[data-theme="light"] .btn-pending[b-kxa60dusiq] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

:root[data-theme="light"] .btn-pending:hover[b-kxa60dusiq],
html[data-theme="light"] .btn-pending:hover[b-kxa60dusiq] {
    background: #fee2e2;
}

/* Phone: the absolute popup (top: 100%+8px) was clipped by the POS topbar's
   .left-section{overflow:hidden} and read as "tucked under the basket". Make it
   a fixed bottom sheet (same pattern as the ⚙️ Sistema sheet) so it escapes the
   clip and sits above everything; the existing .popup-backdrop (fixed) dims the
   rest and closes on tap. */
@media (max-width: 600px) {
    .printer-popup[b-kxa60dusiq] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        z-index: 1000;
    }
}
/* /Pages/Shared/Components/PrintQueueToast.razor.rz.scp.css */
.print-queue-toast[b-dea1yf8j3m] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    animation: slideUp-b-dea1yf8j3m 0.3s ease;
}

@keyframes slideUp-b-dea1yf8j3m {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-icon[b-dea1yf8j3m] {
    font-size: 1.2rem;
}

.toast-message[b-dea1yf8j3m] {
    white-space: nowrap;
}

.toast-spinner[b-dea1yf8j3m] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-dea1yf8j3m 1s linear infinite;
}

@keyframes spin-b-dea1yf8j3m {
    to { transform: rotate(360deg); }
}

/* Toast types */
.toast-info[b-dea1yf8j3m] {
    background: #3b82f6;
    color: white;
}

.toast-success[b-dea1yf8j3m] {
    background: #22c55e;
    color: white;
}

.toast-warning[b-dea1yf8j3m] {
    background: #f59e0b;
    color: white;
}

.toast-error[b-dea1yf8j3m] {
    background: #ef4444;
    color: white;
}

/* Responsive */
@media (max-width: 480px) {
    .print-queue-toast[b-dea1yf8j3m] {
        left: 10px;
        right: 10px;
        transform: none;
        bottom: 10px;
    }
}
/* /Pages/Shared/Components/PublicFooter.razor.rz.scp.css */
.pf-footer[b-yn6kp0wq5l] {
    background: #0a0c12;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    margin-top: auto;
}

.pf-inner[b-yn6kp0wq5l] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 32px;
}

.pf-grid[b-yn6kp0wq5l] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.pf-brand[b-yn6kp0wq5l] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f1f5f9;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.pf-logo[b-yn6kp0wq5l] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 1rem;
}

.pf-brand-accent[b-yn6kp0wq5l] {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.pf-tag[b-yn6kp0wq5l] {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 18px;
    max-width: 280px;
}

.pf-social[b-yn6kp0wq5l] {
    display: flex;
    gap: 10px;
}

.pf-social a[b-yn6kp0wq5l] {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.pf-social a:hover[b-yn6kp0wq5l] {
    color: #ef4444;
    border-color: #ef4444;
    transform: translateY(-1px);
}

.pf-col h4[b-yn6kp0wq5l] {
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}

.pf-col a[b-yn6kp0wq5l] {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 5px 0;
    transition: color 0.15s;
}

.pf-col a:hover[b-yn6kp0wq5l] {
    color: #f1f5f9;
}

.pf-bottom[b-yn6kp0wq5l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #64748b;
    font-size: 0.82rem;
}

@media (max-width: 880px) {
    .pf-grid[b-yn6kp0wq5l] {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .pf-brand-col[b-yn6kp0wq5l] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pf-grid[b-yn6kp0wq5l] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Shared/Components/PublicHeader.razor.rz.scp.css */
.ph-header[b-uahptqgq2p] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 17, 23, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background 0.25s, border-color 0.25s;
}

.ph-header.ph-scrolled[b-uahptqgq2p] {
    background: rgba(15, 17, 23, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ph-inner[b-uahptqgq2p] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.ph-brand[b-uahptqgq2p] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f1f5f9;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.ph-logo[b-uahptqgq2p] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 900;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.4);
}

.ph-brand-accent[b-uahptqgq2p] {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-left: 2px;
}

.ph-nav[b-uahptqgq2p] {
    display: flex;
    gap: 28px;
    align-items: center;
}

.ph-nav a[b-uahptqgq2p] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.15s;
    position: relative;
    padding: 4px 0;
}

.ph-nav a:hover[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-nav a.active[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-nav a.active[b-uahptqgq2p]::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c62828, #ef4444);
    border-radius: 2px;
}

.ph-actions[b-uahptqgq2p] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.ph-link-secondary[b-uahptqgq2p] {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 12px;
    transition: color 0.15s;
}

.ph-link-secondary:hover[b-uahptqgq2p] {
    color: #f1f5f9;
}

.ph-cta[b-uahptqgq2p] {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.ph-cta:hover[b-uahptqgq2p] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.45);
}

.ph-menu-btn[b-uahptqgq2p] {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: auto;
}

.ph-menu-icon[b-uahptqgq2p] {
    font-size: 1.2rem;
    line-height: 1;
}

.ph-mobile[b-uahptqgq2p] {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px 24px;
    background: rgba(15, 17, 23, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
}

.ph-mobile a[b-uahptqgq2p] {
    color: #f1f5f9;
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
}

.ph-mobile a:hover[b-uahptqgq2p] {
    background: rgba(255, 255, 255, 0.04);
}

.ph-mobile hr[b-uahptqgq2p] {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 0;
}

.ph-mobile-secondary[b-uahptqgq2p] {
    color: #cbd5e1 !important;
}

.ph-mobile-cta[b-uahptqgq2p] {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff !important;
    text-align: center;
    font-weight: 700 !important;
    margin-top: 4px;
}

@media (max-width: 880px) {
    .ph-nav[b-uahptqgq2p], .ph-actions[b-uahptqgq2p] {
        display: none;
    }
    .ph-menu-btn[b-uahptqgq2p] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ph-mobile[b-uahptqgq2p] {
        display: flex;
    }
}
/* /Pages/Shared/Components/QuickStockPanel.razor.rz.scp.css */
/* QuickStockPanel - Slide-out side panel for rapid stock management */

.stock-panel-backdrop[b-o44ngblltz] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
    animation: fadeIn-b-o44ngblltz .2s ease-out;
}

.stock-panel[b-o44ngblltz] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 94vw;
    background: var(--bg, #f9fafb);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    z-index: 901;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-o44ngblltz .25s ease-out;
}

@keyframes fadeIn-b-o44ngblltz {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-o44ngblltz {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Header */
.sp-header[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sp-title[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1f2937);
}

.sp-icon[b-o44ngblltz] {
    font-size: 24px;
}

.sp-close[b-o44ngblltz] {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg, #f3f4f6);
    border-radius: 8px;
    font-size: 24px;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
}

.sp-close:hover[b-o44ngblltz] {
    background: var(--border, #e5e7eb);
    color: var(--ink, #1f2937);
}

/* Search */
.sp-search[b-o44ngblltz] {
    position: relative;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.sp-search input[b-o44ngblltz] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-size: 15px;
    background: var(--bg, #f9fafb);
    color: var(--ink, #1f2937);
    transition: all .15s;
}

.sp-search input:focus[b-o44ngblltz] {
    outline: none;
    border-color: var(--brand, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sp-search-clear[b-o44ngblltz] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: var(--border, #e5e7eb);
    border-radius: 50%;
    font-size: 16px;
    color: var(--muted, #6b7280);
    cursor: pointer;
}

/* Category Tabs */
.sp-categories[b-o44ngblltz] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sp-categories[b-o44ngblltz]::-webkit-scrollbar {
    display: none;
}

.sp-cat[b-o44ngblltz] {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sp-cat:hover[b-o44ngblltz] {
    border-color: var(--brand, #3b82f6);
    color: var(--brand, #3b82f6);
}

.sp-cat.active[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

/* Items Grid */
.sp-items[b-o44ngblltz] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-loading[b-o44ngblltz],
.sp-empty[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--muted, #6b7280);
    gap: 12px;
}

.sp-spinner[b-o44ngblltz] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border, #e5e7eb);
    border-top-color: var(--brand, #3b82f6);
    border-radius: 50%;
    animation: spin-b-o44ngblltz 1s linear infinite;
}

@keyframes spin-b-o44ngblltz {
    to { transform: rotate(360deg); }
}

.sp-empty-icon[b-o44ngblltz] {
    font-size: 48px;
    opacity: 0.5;
}

.sp-empty.sp-error[b-o44ngblltz] {
    color: #991b1b;
}

.sp-empty.sp-error .sp-empty-icon[b-o44ngblltz] {
    opacity: 1;
}

.sp-retry-btn[b-o44ngblltz] {
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--card, #fff);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
}

.sp-retry-btn:hover[b-o44ngblltz] {
    background: var(--bg, #f9fafb);
    border-color: var(--brand, #3b82f6);
    color: var(--brand, #3b82f6);
}

:root[data-theme="dark"] .sp-empty.sp-error[b-o44ngblltz] {
    color: #fca5a5;
}

:root[data-theme="dark"] .sp-retry-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-retry-btn:hover[b-o44ngblltz] {
    background: #30363d;
    border-color: #58a6ff;
    color: #58a6ff;
}

/* Item Card - Stacked Layout */
.sp-item[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    transition: all .15s;
}

.sp-item:hover[b-o44ngblltz] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sp-item.low-stock[b-o44ngblltz] {
    border-color: #fbbf24;
    background: #fffbeb;
}

.sp-item.sold-out[b-o44ngblltz] {
    border-color: #ef4444;
    background: #fef2f2;
    opacity: 0.85;
}

.sp-item-info[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sp-item-img[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-item-placeholder[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-item-details[b-o44ngblltz] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.sp-item-name[b-o44ngblltz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1f2937);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-item-meta[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sp-item-category[b-o44ngblltz] {
    font-size: 11px;
    color: var(--muted, #6b7280);
}

/* "Puedes hacer N" badge — derived from ingredient recipe stock */
.sp-can-make[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    white-space: nowrap;
}

.sp-can-make.low[b-o44ngblltz] {
    background: rgba(245, 158, 11, .15);
    color: #d97706;
}

.sp-can-make.none[b-o44ngblltz] {
    background: rgba(239, 68, 68, .15);
    color: #dc2626;
}

:root[data-theme="dark"] .sp-can-make[b-o44ngblltz] {
    background: rgba(34, 197, 94, .18);
    color: #4ade80;
}
:root[data-theme="dark"] .sp-can-make.low[b-o44ngblltz] {
    background: rgba(245, 158, 11, .2);
    color: #fbbf24;
}
:root[data-theme="dark"] .sp-can-make.none[b-o44ngblltz] {
    background: rgba(239, 68, 68, .2);
    color: #f87171;
}

/* 86 reason badge */
.sp-reason[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(107, 114, 128, .15);
    color: #6b7280;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-reason.auto[b-o44ngblltz] {
    background: rgba(139, 92, 246, .14);
    color: #7c3aed;
}

:root[data-theme="dark"] .sp-reason[b-o44ngblltz] {
    background: rgba(148, 163, 184, .2);
    color: #cbd5e1;
}
:root[data-theme="dark"] .sp-reason.auto[b-o44ngblltz] {
    background: rgba(167, 139, 250, .2);
    color: #c4b5fd;
}

/* 86 reason quick-chip row */
.sp-reason-chips[b-o44ngblltz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sp-reason-chip[b-o44ngblltz] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line, #e5e7eb);
    background: transparent;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.sp-reason-chip:hover[b-o44ngblltz] { border-color: #8b5cf6; color: #7c3aed; }
.sp-reason-chip.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

:root[data-theme="dark"] .sp-reason-chip[b-o44ngblltz] { border-color: #374151; color: #9ca3af; }
:root[data-theme="dark"] .sp-reason-chip.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

/* "edit reason" pencil button (only shown for sold-out items) */
.sp-reason-btn[b-o44ngblltz] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--line, #e5e7eb);
    background: transparent;
    color: var(--muted, #6b7280);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 auto;
}
.sp-reason-btn:hover[b-o44ngblltz] { border-color: #8b5cf6; color: #7c3aed; }
.sp-reason-btn.active[b-o44ngblltz] { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }

:root[data-theme="dark"] .sp-reason-btn[b-o44ngblltz] { border-color: #374151; color: #9ca3af; }

/* Item Controls */
.sp-item-controls[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.sp-stock-display[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-adjust-btn[b-o44ngblltz] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-adjust-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

.sp-adjust-btn:disabled[b-o44ngblltz] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sp-adjust-btn.minus:hover:not(:disabled)[b-o44ngblltz] {
    background: #ef4444;
    border-color: #ef4444;
}

.sp-adjust-btn.plus:hover:not(:disabled)[b-o44ngblltz] {
    background: #22c55e;
    border-color: #22c55e;
}

/* Active states for touch feedback */
.sp-adjust-btn:active:not(:disabled)[b-o44ngblltz] {
    transform: scale(0.92);
}

.sp-adjust-btn.minus:active:not(:disabled)[b-o44ngblltz] {
    background: #dc2626;
    border-color: #dc2626;
}

.sp-adjust-btn.plus:active:not(:disabled)[b-o44ngblltz] {
    background: #16a34a;
    border-color: #16a34a;
}

.sp-stock-input[b-o44ngblltz] {
    width: 56px;
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--ink, #1f2937);
    background: var(--card, #fff);
}

.sp-stock-input:focus[b-o44ngblltz] {
    outline: none;
    border-color: var(--brand, #3b82f6);
}

/* Remove spinner buttons from number input */
.sp-stock-input[b-o44ngblltz]::-webkit-outer-spin-button,
.sp-stock-input[b-o44ngblltz]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sp-stock-input[type=number][b-o44ngblltz] {
    -moz-appearance: textfield;
}

.sp-86-btn[b-o44ngblltz] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sp-86-btn:hover[b-o44ngblltz] {
    border-color: #ef4444;
    color: #ef4444;
}

.sp-86-btn.active[b-o44ngblltz] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.sp-86-btn:active[b-o44ngblltz] {
    transform: scale(0.95);
}

/* Voice Help (compact) */
.sp-voice-help[b-o44ngblltz] {
    padding: 8px 16px;
    background: var(--card, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
}

.sp-help-hint[b-o44ngblltz] {
    font-size: 11px;
    color: var(--muted, #6b7280);
    line-height: 1.4;
}

.sp-help-hint code[b-o44ngblltz] {
    background: var(--bg, #f3f4f6);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 10px;
    color: var(--ink, #374151);
}

.sp-voice-result[b-o44ngblltz] {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.sp-voice-result.success[b-o44ngblltz] {
    background: #dcfce7;
    color: #166534;
}

.sp-voice-result.error[b-o44ngblltz] {
    background: #fef2f2;
    color: #991b1b;
}

/* Footer */
.sp-footer[b-o44ngblltz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-top: 1px solid var(--border, #e5e7eb);
}

.sp-lang-btn[b-o44ngblltz] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 10px;
    font-size: 22px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.sp-lang-btn:hover[b-o44ngblltz] {
    background: var(--border, #e5e7eb);
}

.sp-voice-btn[b-o44ngblltz],
.sp-refresh-btn[b-o44ngblltz] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg, #f9fafb);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1f2937);
    cursor: pointer;
    transition: all .15s;
}

.sp-voice-btn:hover[b-o44ngblltz],
.sp-refresh-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: var(--brand, #3b82f6);
    border-color: var(--brand, #3b82f6);
    color: #fff;
}

.sp-refresh-btn:disabled[b-o44ngblltz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sp-voice-btn.listening[b-o44ngblltz] {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    animation: pulse-b-o44ngblltz 1s infinite;
}

@keyframes pulse-b-o44ngblltz {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.sp-mic-icon[b-o44ngblltz] {
    font-size: 20px;
}

.sp-voice-btn.disabled[b-o44ngblltz] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* No stock tracking indicator */
.sp-no-track[b-o44ngblltz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 12px;
    height: 36px;
    font-size: 18px;
    color: var(--muted, #9ca3af);
    cursor: help;
}

/* Dark Theme */
:root[data-theme="dark"] .stock-panel-backdrop[b-o44ngblltz] {
    background: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .stock-panel[b-o44ngblltz] {
    background: #0d1117;
}

:root[data-theme="dark"] .sp-header[b-o44ngblltz],
:root[data-theme="dark"] .sp-search[b-o44ngblltz],
:root[data-theme="dark"] .sp-categories[b-o44ngblltz],
:root[data-theme="dark"] .sp-footer[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-title[b-o44ngblltz] {
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-close[b-o44ngblltz] {
    background: #21262d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-close:hover[b-o44ngblltz] {
    background: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-search input[b-o44ngblltz] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-search input:focus[b-o44ngblltz] {
    border-color: #58a6ff;
}

:root[data-theme="dark"] .sp-search-clear[b-o44ngblltz] {
    background: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-cat[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-cat:hover[b-o44ngblltz] {
    border-color: #58a6ff;
    color: #58a6ff;
}

:root[data-theme="dark"] .sp-cat.active[b-o44ngblltz] {
    background: #238636;
    border-color: #238636;
}

:root[data-theme="dark"] .sp-item[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-item.low-stock[b-o44ngblltz] {
    background: #3d2f0b;
    border-color: #d29922;
}

:root[data-theme="dark"] .sp-item.sold-out[b-o44ngblltz] {
    background: #3d1f1f;
    border-color: #f85149;
}

:root[data-theme="dark"] .sp-item-name[b-o44ngblltz] {
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-item-category[b-o44ngblltz] {
    color: #8b949e;
}

:root[data-theme="dark"] .sp-adjust-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-stock-input[b-o44ngblltz] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-86-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

:root[data-theme="dark"] .sp-voice-help[b-o44ngblltz] {
    background: #161b22;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-help-hint[b-o44ngblltz] {
    color: #8b949e;
}

:root[data-theme="dark"] .sp-help-hint code[b-o44ngblltz] {
    background: #21262d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-voice-result.success[b-o44ngblltz] {
    background: #052e16;
    color: #86efac;
}

:root[data-theme="dark"] .sp-voice-result.error[b-o44ngblltz] {
    background: #450a0a;
    color: #fca5a5;
}

:root[data-theme="dark"] .sp-lang-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
}

:root[data-theme="dark"] .sp-lang-btn:hover[b-o44ngblltz] {
    background: #30363d;
}

:root[data-theme="dark"] .sp-voice-btn[b-o44ngblltz],
:root[data-theme="dark"] .sp-refresh-btn[b-o44ngblltz] {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}

:root[data-theme="dark"] .sp-voice-btn:hover[b-o44ngblltz],
:root[data-theme="dark"] .sp-refresh-btn:hover:not(:disabled)[b-o44ngblltz] {
    background: #238636;
    border-color: #238636;
}

/* Dark mode for no-track */
:root[data-theme="dark"] .sp-no-track[b-o44ngblltz] {
    color: #6b7280;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .stock-panel[b-o44ngblltz] {
        width: 100%;
        max-width: 100%;
    }
}
/* /Pages/Shared/Components/SeatCoursePanel.razor.rz.scp.css */
.seat-course-panel[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #1e293b;
    border-radius: 8px;
    border: 1px solid #334155;
}

.panel-section[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-header[b-fo3actkxw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-fo3actkxw4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clear-btn[b-fo3actkxw4] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 44px;
    border-radius: 6px;
}

.clear-btn:hover[b-fo3actkxw4], .clear-btn:active[b-fo3actkxw4] { text-decoration: underline; }

/* Seat Grid */
.seat-grid[b-fo3actkxw4] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.seat-btn[b-fo3actkxw4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #475569;
    background: #0f172a;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.seat-btn:hover[b-fo3actkxw4], .seat-btn:active[b-fo3actkxw4] {
    border-color: #3b82f6;
    color: #e2e8f0;
}

.seat-btn.active[b-fo3actkxw4] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Course List */
.course-list[b-fo3actkxw4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.course-row[b-fo3actkxw4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #0f172a;
    border-radius: 6px;
}

.course-info[b-fo3actkxw4] {
    flex: 1;
    min-width: 0;
}

.course-name[b-fo3actkxw4] {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
}

.course-count[b-fo3actkxw4] {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 6px;
}

.course-badge[b-fo3actkxw4] {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
}

.course-badge.waiting[b-fo3actkxw4] { background: #1e293b; color: #94a3b8; }
.course-badge.fired[b-fo3actkxw4] { background: #451a03; color: #fcd34d; }
.course-badge.delivered[b-fo3actkxw4] { background: #14532d; color: #86efac; }

.course-status[b-fo3actkxw4] {
    flex-shrink: 0;
}

.course-actions[b-fo3actkxw4] {
    display: flex;
    gap: 4px;
}

.action-btn[b-fo3actkxw4] {
    padding: 10px 14px;
    min-height: 44px;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.action-btn.fire[b-fo3actkxw4] {
    background: #22c55e;
    color: #052e16;
}

.action-btn.fire:hover[b-fo3actkxw4], .action-btn.fire:active[b-fo3actkxw4] { background: #16a34a; }

.action-btn.hold[b-fo3actkxw4] {
    background: #475569;
    color: #e2e8f0;
}

.action-btn.hold:hover[b-fo3actkxw4], .action-btn.hold:active[b-fo3actkxw4] { background: #64748b; }

.action-btn.rush[b-fo3actkxw4] {
    background: #ef4444;
    color: white;
}

.action-btn.rush:hover[b-fo3actkxw4], .action-btn.rush:active[b-fo3actkxw4] { background: #dc2626; }

@media (max-width: 480px) {
    .course-row[b-fo3actkxw4] {
        flex-wrap: wrap;
    }

    .course-actions[b-fo3actkxw4] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* /Pages/Shared/Components/TableSlidePanel.razor.rz.scp.css */
.tables-panel[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

    .tables-panel.open[b-chtns19t9j] {
        pointer-events: auto;
    }

.tp-backdrop[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .18s;
}

.tables-panel.open .tp-backdrop[b-chtns19t9j] {
    opacity: 1;
}

.tp-card[b-chtns19t9j] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    max-width: 94vw;
    background: #fff;
    box-shadow: -16px 0 40px rgba(0,0,0,.28);
    transform: translateX(100%);
    transition: transform .2s ease;
    display: flex;
    flex-direction: column;
}

.tables-panel.open .tp-card[b-chtns19t9j] {
    transform: translateX(0);
}

.tp-top[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.tp-title[b-chtns19t9j] {
    font-weight: 900;
    font-size: 1.05rem;
}

.tp-search[b-chtns19t9j] {
    margin-left: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 180px;
}

.tp-close[b-chtns19t9j] {
    border: 0;
    background: #111827;
    color: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 900;
}

.tp-tabs[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f1f1;
    overflow: auto;
}

.tp-tab[b-chtns19t9j] {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
}

    .tp-tab.active[b-chtns19t9j] {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

.tp-body[b-chtns19t9j] {
    flex: 1;
    overflow: auto;
    padding: 12px;
}

.tp-empty[b-chtns19t9j] {
    color: #6b7280;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.tp-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width:560px) {
    .tp-grid[b-chtns19t9j] {
        grid-template-columns: 1fr 1fr;
    }
}

.tp-tile[b-chtns19t9j] {
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
}

    .tp-tile.free:hover[b-chtns19t9j] {
        border-color: #86efac;
        box-shadow: 0 6px 14px rgba(22,163,74,.15);
    }

    .tp-tile.busy:hover[b-chtns19t9j] {
        border-color: #fecaca;
        box-shadow: 0 6px 14px rgba(239,68,68,.15);
    }

    .tp-tile:focus-visible[b-chtns19t9j] {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .tp-tile:active[b-chtns19t9j] {
        transform: scale(0.97);
        transition: transform 0.1s;
    }

.tp-line[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot[b-chtns19t9j] {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.dot-free[b-chtns19t9j] {
    background: #22c55e;
}

.dot-open[b-chtns19t9j] {
    background: #ef4444;
}

.dot-res[b-chtns19t9j] {
    background: #f59e0b;
}

.dot-paid[b-chtns19t9j] {
    background: #94a3b8;
}

.tp-total[b-chtns19t9j] {
    margin-left: auto;
    font-weight: 900;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
}

.tp-sub[b-chtns19t9j] {
    color: #6b7280;
    font-weight: 700;
    margin-top: 2px;
}


/* Docked column area (only when docked) */
.tables-docked[b-chtns19t9j] {
    position: fixed; /* <-- key */
    right: 0;
    top: 0;
    bottom: 0;
    width: 480px;
    max-width: 94vw;
    background: #fff;
    border-left: 1px solid #eee;
    box-shadow: -10px 0 18px rgba(0,0,0,.06);
    z-index: 60;
}

/* Ensure overlay sits above everything and never pushes layout */
.tables-panel[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

    .tables-panel.open[b-chtns19t9j] {
        pointer-events: auto;
    }
/* you already have .tp-backdrop and .tp-card */


/* ===== RIGHT PANEL: divider always visible ===== */
.page.with-tables .tablesbar[b-chtns19t9j] {
    border-left: 1px solid #e5e7eb !important; /* force divider */
}

/* ===== Handle polish & alignment ===== */
:root[b-chtns19t9j] {
    --hot-edge: 48px; /* Increased from 40px for better touch targets */
}
/* visible slice while hidden */

/* Keep the overlay behavior you already have; just fix the handle pieces */
.page.with-tables.tables-auto .tablesbar[b-chtns19t9j] {
    /* your width/transform rules can stay; we only re-place the decorations */
    z-index: 120 !important;
}

    /* Vertical pill: align text to the LEFT edge of the pill */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before {
        content: "Mesas";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg); /* bottom→top reading */
        writing-mode: vertical-rl;
        width: var(--hot-edge);
        padding: 8px 22px 8px 8px; /* left padding gives the “left aligned” look */
        text-align: left; /* <-- fixes the right-justified look */
        font-weight: 900;
        color: #fff;
        background: var(--brand, #c62828);
        border-radius: 10px 0 0 10px;
        box-shadow: -12px 0 30px rgba(0,0,0,.18), inset 1px 0 0 rgba(255,255,255,.35);
        pointer-events: none;
    }

    /* Chevron: sit inside the pill near its right edge and vertically centered */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::after {
        content: "‹";
        position: absolute;
        right: 8px; /* inside the pill */
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 900;
        color: #FACC15;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
        animation: edge-wiggle-b-chtns19t9j 1.4s ease-in-out 2;
        pointer-events: none;
    }

    /* Auto-hide both pseudo-decorations once the panel slides into
       view (hover state in tables-auto mode). The pill + chevron are
       wayfinding affordances for the COLLAPSED state — they tell you
       "there's a panel hiding here". When the panel is fully open
       they overlap the panel content (you can see them poking through
       the rounded corner) and add visual noise. Fade them out on
       hover/focus-within and let them slide back in when the panel
       retracts. */
    .page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::after,
    .page.with-tables.tables-auto .tablesbar:focus-within[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar:focus-within[b-chtns19t9j]::after {
        opacity: 0;
        transition: opacity .18s ease;
        pointer-events: none;
    }
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before,
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::after {
        transition: opacity .18s ease;
    }

/* ✖ dismiss button: attach to the pill, centered vertically */
.page.with-tables.tables-auto .edge-dismiss[b-chtns19t9j] {
    position: absolute;
    left: calc(-1 * var(--hot-edge) + 8px); /* inside the pill */
    top: 50%;
    transform: translateY(-50%); /* <-- no longer stuck at top */
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.85);
    background: rgba(0,0,0,.35);
    color: #fff;
    font-weight: 900;
    line-height: 20px;
    display: grid;
    place-items: center;
    backdrop-filter: blur(2px);
    z-index: 200;
}

/* When the panel is open, fade the handle away so the divider is clean */
.page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::before,
.page.with-tables.tables-auto .tablesbar:hover[b-chtns19t9j]::after {
    opacity: 0;
}

/* When hint is off: remove pill, chevron, and dismiss, and keep a thin edge */
.page.with-tables.tables-auto.edge-hint-off[b-chtns19t9j] {
    --hot-edge: 8px;
}

    .page.with-tables.tables-auto.edge-hint-off .tablesbar[b-chtns19t9j]::before,
    .page.with-tables.tables-auto.edge-hint-off .tablesbar[b-chtns19t9j]::after,
    .page.with-tables.tables-auto.edge-hint-off .edge-dismiss[b-chtns19t9j] {
        display: none !important;
    }

@keyframes edge-wiggle-b-chtns19t9j {
    0%,100% {
        transform: translateY(-50%) translateX(0);
    }

    40% {
        transform: translateY(-50%) translateX(-4px);
    }

    70% {
        transform: translateY(-50%) translateX(0);
    }
}

/* ===== TOUCH-SPECIFIC IMPROVEMENTS ===== */

/* Touch feedback when panel opens */
.page.with-tables.tables-auto .tablesbar.touch-opened[b-chtns19t9j] {
    animation: touch-open-pulse-b-chtns19t9j 0.2s ease-out;
}

@keyframes touch-open-pulse-b-chtns19t9j {
    0% {
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
    }
    50% {
        box-shadow: -12px 0 50px rgba(198, 40, 40, 0.3);
    }
    100% {
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
    }
}

/* Active state for touch - visual feedback on tap */
.page.with-tables.tables-auto .tablesbar:active[b-chtns19t9j]::before {
    background: var(--brand-dark, #a91e1e);
    transform: translateY(-50%) rotate(180deg) scale(0.98);
}

/* Touch devices: prevent zoom, improve scrolling */
.page.with-tables.tables-auto .tablesbar[b-chtns19t9j] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Larger tap target on touch devices */
@media (hover: none) and (pointer: coarse) {
    :root[b-chtns19t9j] {
        --hot-edge: 56px; /* Even larger for pure touch devices */
    }

    /* Make the Mesas label more prominent on touch */
    .page.with-tables.tables-auto .tablesbar[b-chtns19t9j]::before {
        font-size: 1.1rem;
        padding: 12px 0;
    }

    /* Add a subtle "tap here" hint animation on touch devices */
    .page.with-tables.tables-auto .tablesbar:not(.is-open)[b-chtns19t9j]::before {
        animation: touch-hint-b-chtns19t9j 2s ease-in-out infinite;
    }

    @keyframes touch-hint-b-chtns19t9j {
        0%, 100% {
            box-shadow: -12px 0 30px rgba(0,0,0,.18);
        }
        50% {
            box-shadow: -12px 0 40px rgba(198, 40, 40, 0.25);
        }
    }
}

/* Swipe hint indicator */
.page.with-tables.tables-auto .tablesbar.is-open[b-chtns19t9j]::after {
    content: "→"; /* Swipe right to close hint */
    left: auto;
    right: calc(var(--tablesbar-w, 360px) - 30px);
    opacity: 0.3;
    font-size: 14px;
    animation: swipe-hint-b-chtns19t9j 2s ease-in-out 1;
}

@keyframes swipe-hint-b-chtns19t9j {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-50%) translateX(10px);
    }
}

/* Waiter call indicator - pulsing bell icon */
.waiter-call-badge[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-left: 4px;
    animation: waiter-call-pulse-b-chtns19t9j 1s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 165, 0, 0.8));
}

/* Buffet (AYCE) badge — sits next to the table label so staff can
   see at a glance which tables are running buffet without opening
   any modal. Different colour for awaiting-delivery (action needed). */
.buffet-badge[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.5);
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

.buffet-badge--awaiting[b-chtns19t9j] {
    /* Awaiting delivery — most actionable state, pulse for attention */
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.35), rgba(245, 158, 11, 0.3));
    border-color: rgba(251, 191, 36, 0.7);
    animation: buffet-badge-pulse-b-chtns19t9j 1.6s ease-in-out infinite;
}

@keyframes buffet-badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)); }
}

/* Tiny 🍣 indicator on the collapsed-handle when the panel is
   auto-hidden so staff don't lose buffet awareness while focused
   on the order. Positioned as its own circular badge below the
   busy-count badge — putting the emoji INSIDE .collapsed-badge
   would spill outside its 24px round geometry. */
.collapsed-buffet-indicator[b-chtns19t9j] {
    display: none;
}

@keyframes waiter-call-pulse-b-chtns19t9j {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.15) rotate(-10deg);
    }
    50% {
        transform: scale(1.05) rotate(0deg);
        opacity: 0.85;
    }
    75% {
        transform: scale(1.15) rotate(10deg);
    }
}

/* ========== PREMIUM HEADER STYLING ========== */

/* Functions row - Eats, Espera, Reservas */
[b-chtns19t9j] .edge-tabs--functions {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Wrap to a second row when many tabs are enabled (Eats + Delivery +
       Waitlist + Reservations + Para Llevar …). Previously this was
       nowrap + overflow-x:auto with a HIDDEN scrollbar, which pushed the
       last pill ("Para Llevar" + its count badge) off the right edge of
       the panel with no visible affordance to scroll to it. Wrapping
       keeps every tab — and its badge — fully on screen. */
    flex-wrap: wrap;
    row-gap: 6px;
    justify-content: flex-start;
}

/* Premium tab base styling */
[b-chtns19t9j] .edge-tabs--functions .edge-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Was 8px 14px / 0.85rem — too cramped for a host stand to scan from
       arm's length. Bumped to give ~46px tap height + 15px label so
       "Eats / Espera / Reservas / Para Llevar" stops truncating. */
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}

[b-chtns19t9j] .edge-tabs--functions .edge-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

[b-chtns19t9j] .edge-tabs--functions .edge-tab .tab-label {
    font-weight: 700;
}

/* Eats tab - Orange theme (dark mode) */
[b-chtns19t9j] .edge-tab--eats {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.1);
}

[b-chtns19t9j] .edge-tab--eats .tab-label {
    color: #fb923c;
}

[b-chtns19t9j] .edge-tab--eats.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: #ea580c;
    color: white;
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.4);
}

[b-chtns19t9j] .edge-tab--eats.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--eats.has-pending:not(.active) {
    animation: eats-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes eats-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.3); }
    50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.5); }
}

[b-chtns19t9j] .eats-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Delivery tab - Green theme (Glovo/Just Eat) */
[b-chtns19t9j] .edge-tab--delivery {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
}

[b-chtns19t9j] .edge-tab--delivery .tab-label {
    color: #4ade80;
}

[b-chtns19t9j] .edge-tab--delivery.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
    color: white;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
}

[b-chtns19t9j] .edge-tab--delivery.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--delivery.has-pending:not(.active) {
    animation: delivery-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes delivery-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.5); }
}

[b-chtns19t9j] .delivery-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

/* Delivery Orders Panel */
[b-chtns19t9j] .delivery-orders-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .delivery-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .delivery-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

[b-chtns19t9j] .delivery-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .delivery-section-icon {
    font-size: 1rem;
}

[b-chtns19t9j] .delivery-section-count {
    margin-left: auto;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

[b-chtns19t9j] .delivery-order-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s;
}

[b-chtns19t9j] .delivery-order-card:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

[b-chtns19t9j] .delivery-order-card.clickable {
    cursor: pointer;
}

[b-chtns19t9j] .delivery-order-card.clickable:hover {
    background: rgba(34, 197, 94, 0.1);
}

[b-chtns19t9j] .delivery-order--pending {
    border-left: 3px solid #f59e0b;
}

[b-chtns19t9j] .delivery-order--active {
    border-left: 3px solid #22c55e;
}

[b-chtns19t9j] .delivery-order-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

[b-chtns19t9j] .delivery-order-number {
    font-weight: 700;
    font-size: 1rem;
    color: white;
}

[b-chtns19t9j] .delivery-platform-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

[b-chtns19t9j] .delivery-platform-badge.glovo {
    background: rgba(0, 172, 126, 0.2);
    color: #00ac7e;
}

[b-chtns19t9j] .delivery-platform-badge.justeat {
    background: rgba(255, 128, 0, 0.2);
    color: #ff8000;
}

[b-chtns19t9j] .delivery-order-type {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-order-type.type-delivery {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[b-chtns19t9j] .delivery-order-type.type-takeaway {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

[b-chtns19t9j] .delivery-order-customer {
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

[b-chtns19t9j] .delivery-order-phone {
    font-size: 0.8rem;
    color: #3b82f6;
    margin-bottom: 4px;
}

[b-chtns19t9j] .delivery-order-items {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

[b-chtns19t9j] .delivery-order-item {
    padding: 2px 0;
}

[b-chtns19t9j] .delivery-order-item--more {
    color: #64748b;
    font-style: italic;
}

[b-chtns19t9j] .delivery-order-instructions {
    font-size: 0.8rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

[b-chtns19t9j] .delivery-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .delivery-order-total {
    font-weight: 700;
    font-size: 1.1rem;
    color: #22c55e;
}

[b-chtns19t9j] .delivery-order-actions {
    display: flex;
    gap: 8px;
}

[b-chtns19t9j] .delivery-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .delivery-btn--accept {
    background: #22c55e;
    color: white;
}

[b-chtns19t9j] .delivery-btn--accept:hover {
    background: #16a34a;
}

[b-chtns19t9j] .delivery-btn--reject {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

[b-chtns19t9j] .delivery-btn--reject:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-btn--ready {
    background: #3b82f6;
    color: white;
}

[b-chtns19t9j] .delivery-btn--ready:hover {
    background: #2563eb;
}

[b-chtns19t9j] .delivery-btn--refresh {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[b-chtns19t9j] .delivery-btn--refresh:hover {
    background: rgba(255, 255, 255, 0.2);
}

[b-chtns19t9j] .delivery-ready-badge {
    background: #22c55e;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

[b-chtns19t9j] .delivery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    text-align: center;
}

[b-chtns19t9j] .delivery-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

[b-chtns19t9j] .delivery-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-empty-subtitle {
    font-size: 0.85rem;
    color: #64748b;
}

/* Order age indicator */
[b-chtns19t9j] .delivery-order-age {
    margin-left: auto;
    font-size: 0.75rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Delivery Modal Styles */
[b-chtns19t9j] .delivery-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

[b-chtns19t9j] .delivery-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 1001;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[b-chtns19t9j] .delivery-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 1rem;
    color: white;
}

[b-chtns19t9j] .delivery-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

[b-chtns19t9j] .delivery-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[b-chtns19t9j] .delivery-modal-body {
    padding: 20px;
}

[b-chtns19t9j] .delivery-modal-body p {
    margin: 0 0 16px 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

[b-chtns19t9j] .prep-time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-chtns19t9j] .prep-time-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

[b-chtns19t9j] .prep-time-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
}

[b-chtns19t9j] .prep-time-btn.selected {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

[b-chtns19t9j] .reject-reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-chtns19t9j] .reject-reason-btn {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

[b-chtns19t9j] .reject-reason-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

[b-chtns19t9j] .reject-reason-btn.selected {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: flex-end;
}

[b-chtns19t9j] .delivery-btn--cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[b-chtns19t9j] .delivery-btn--cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

[b-chtns19t9j] .delivery-btn--reject-confirm {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .delivery-btn--reject-confirm:hover {
    background: #dc2626;
}

[b-chtns19t9j] .delivery-btn--reject-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Small spinner for buttons */
[b-chtns19t9j] .spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

@keyframes spin-b-chtns19t9j {
    to { transform: rotate(360deg); }
}

/* Disabled button state */
[b-chtns19t9j] .delivery-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Waitlist/Espera tab - Purple theme (dark mode) */
[b-chtns19t9j] .edge-tab--waitlist {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.1);
}

[b-chtns19t9j] .edge-tab--waitlist .tab-label {
    color: #a78bfa;
}

[b-chtns19t9j] .edge-tab--waitlist.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #7c3aed;
    color: white;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}

[b-chtns19t9j] .edge-tab--waitlist.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--waitlist.has-pending:not(.active) {
    animation: waitlist-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes waitlist-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 16px rgba(139, 92, 246, 0.5); }
}

/* Reservations tab - Blue theme (dark mode) */
[b-chtns19t9j] .edge-tab--reservations {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

[b-chtns19t9j] .edge-tab--reservations .tab-label {
    color: #60a5fa;
}

[b-chtns19t9j] .edge-tab--reservations.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: white;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}

[b-chtns19t9j] .edge-tab--reservations.active .tab-label {
    color: white;
}

[b-chtns19t9j] .edge-tab--reservations.has-pending:not(.active) {
    animation: reservations-glow-dark-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes reservations-glow-dark-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.5); }
}

/* Zone tabs row - Premium styling (dark mode) */
[b-chtns19t9j] .edge-tabs--zones {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

[b-chtns19t9j] .edge-tabs--zones::-webkit-scrollbar {
    display: none;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-height: 40px;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: #0284c7;
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab .tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 3px;
}

[b-chtns19t9j] .edge-tabs--zones .edge-tab.active .tab-count {
    color: rgba(255, 255, 255, 0.85);
}

/* Zone tab with waiter calls - attention-grabbing style */
[b-chtns19t9j] .edge-tab.has-waiter-call {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-color: #e65100;
    color: white;
    animation: zone-waiter-alert-b-chtns19t9j 1.5s ease-in-out infinite;
}

[b-chtns19t9j] .edge-tab.has-waiter-call.active {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border-color: #e65100;
}

/* Prevent zone tab text from wrapping */
[b-chtns19t9j] .edge-tab .tab-label {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

@keyframes zone-waiter-alert-b-chtns19t9j {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 152, 0, 0);
    }
}

/* Zone waiter call badge - shown on zone tabs */
[b-chtns19t9j] .zone-waiter-badge {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    animation: waiter-call-pulse-b-chtns19t9j 1s ease-in-out infinite;
}

/* ==================== Waitlist Styles ==================== */
[b-chtns19t9j] .edge-tab--waitlist {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-color: #7c3aed;
}

[b-chtns19t9j] .edge-tab--waitlist:not(.active) {
    background: transparent;
    color: #8b5cf6;
    border-color: #8b5cf6;
}

[b-chtns19t9j] .waitlist-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    animation: badge-pulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes badge-pulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

[b-chtns19t9j] .waitlist-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .waitlist-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .waitlist-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-chtns19t9j] .waitlist-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[b-chtns19t9j] .waitlist-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

[b-chtns19t9j] .waitlist-card--called {
    border-color: #10b981;
    background: linear-gradient(to right, #ecfdf5, white);
    animation: called-glow-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes called-glow-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

[b-chtns19t9j] .waitlist-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

[b-chtns19t9j] .waitlist-position {
    font-size: 1.25rem;
    font-weight: 800;
    color: #8b5cf6;
}

[b-chtns19t9j] .waitlist-card--called .waitlist-position {
    color: #10b981;
}

[b-chtns19t9j] .waitlist-party {
    font-size: 0.9rem;
    color: #64748b;
}

[b-chtns19t9j] .waitlist-wait {
    margin-left: auto;
    font-size: 0.8rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
}

[b-chtns19t9j] .waitlist-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* VIP Badges */
[b-chtns19t9j] .vip-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

[b-chtns19t9j] .vip-badge--platinum {
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    color: white;
    font-weight: 600;
}

[b-chtns19t9j] .vip-badge--gold {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    font-weight: 600;
}

[b-chtns19t9j] .vip-badge--silver {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    font-weight: 500;
}

[b-chtns19t9j] .blacklist-badge {
    font-size: 0.8rem;
    color: #dc2626;
}

[b-chtns19t9j] .noshow-badge {
    font-size: 0.7rem;
    color: #f97316;
    background: #fff7ed;
    padding: 2px 5px;
    border-radius: 8px;
}

[b-chtns19t9j] .waitlist-card--blacklisted {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}

[b-chtns19t9j] .waitlist-phone {
    font-size: 0.8rem;
    color: #3b82f6;
    margin-top: 4px;
}

[b-chtns19t9j] .waitlist-zone {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

[b-chtns19t9j] .waitlist-notes {
    font-size: 0.8rem;
    color: #f59e0b;
    background: #fef3c7;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 6px;
    font-style: italic;
}

[b-chtns19t9j] .waitlist-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

[b-chtns19t9j] .waitlist-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .waitlist-btn--call {
    background: #8b5cf6;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--call:hover {
    background: #7c3aed;
}

[b-chtns19t9j] .waitlist-btn--seat {
    background: #10b981;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--seat:hover {
    background: #059669;
}

[b-chtns19t9j] .waitlist-btn--noshow {
    background: #f1f5f9;
    color: #64748b;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .waitlist-btn--noshow:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .waitlist-btn--add {
    background: #8b5cf6;
    color: white;
    width: 100%;
}

[b-chtns19t9j] .waitlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

[b-chtns19t9j] .waitlist-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

[b-chtns19t9j] .waitlist-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

[b-chtns19t9j] .waitlist-empty-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* ========== Reservation Tab & Panel ========== */

[b-chtns19t9j] .edge-tab--reservations.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: #3b82f6;
}

[b-chtns19t9j] .edge-tab--reservations:not(.active) {
    background: transparent;
    color: #3b82f6;
    border-color: #3b82f6;
}

[b-chtns19t9j] .reservation-badge {
    background: #3b82f6;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

[b-chtns19t9j] .reservation-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

[b-chtns19t9j] .reservation-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #64748b;
}

[b-chtns19t9j] .reservation-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-chtns19t9j] .reservation-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

[b-chtns19t9j] .reservation-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

[b-chtns19t9j] .reservation-card--confirmed {
    border-left: 4px solid #10b981;
}

[b-chtns19t9j] .reservation-card--reminded {
    border-left: 4px solid #3b82f6;
}

[b-chtns19t9j] .reservation-card--pending {
    border-left: 4px solid #f59e0b;
}

[b-chtns19t9j] .reservation-card--arrived {
    border-left: 4px solid #8b5cf6;
    background: linear-gradient(to right, #f5f3ff, white);
}

[b-chtns19t9j] .reservation-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

[b-chtns19t9j] .reservation-time {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3b82f6;
}

[b-chtns19t9j] .reservation-party {
    font-size: 0.9rem;
    color: #64748b;
}

[b-chtns19t9j] .reservation-status-pill {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

[b-chtns19t9j] .reservation-status-pill.confirmed {
    background: #dcfce7;
    color: #16a34a;
}

[b-chtns19t9j] .reservation-status-pill.reminded {
    background: #dbeafe;
    color: #2563eb;
}

[b-chtns19t9j] .reservation-status-pill.pending {
    background: #fef3c7;
    color: #d97706;
}

[b-chtns19t9j] .reservation-status-pill.arrived {
    background: #ede9fe;
    color: #7c3aed;
}

[b-chtns19t9j] .reservation-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

[b-chtns19t9j] .reservation-card--blacklisted {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}

[b-chtns19t9j] .reservation-phone {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

[b-chtns19t9j] .reservation-notes {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
    font-style: italic;
}

/* Wave 2c — POS-side allergen + tag chips on reservation cards.
   Same palette as the admin detail modal (amber for allergens, indigo
   for free-form tags) so a waiter glancing at either surface gets the
   same visual code. Sized smaller than admin since the POS card is
   denser. */
[b-chtns19t9j] .reservation-allergens,
[b-chtns19t9j] .reservation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

[b-chtns19t9j] .reservation-allergen-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

[b-chtns19t9j] .reservation-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.22);
    color: #c7d2fe;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

[b-chtns19t9j] .reservation-table {
    font-size: 0.8rem;
    color: #06b6d4;
    margin-top: 4px;
    font-weight: 500;
}

[b-chtns19t9j] .reservation-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

[b-chtns19t9j] .reservation-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-btn--arrive {
    background: #10b981;
    color: white;
}

[b-chtns19t9j] .reservation-btn--arrive:hover {
    background: #059669;
}

[b-chtns19t9j] .reservation-btn--noshow {
    background: #f1f5f9;
    color: #64748b;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--noshow:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .reservation-btn--edit {
    background: #f1f5f9;
    color: #3b82f6;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--edit:hover {
    background: #3b82f6;
    color: white;
}

[b-chtns19t9j] .reservation-btn--cancel {
    background: #f1f5f9;
    color: #ef4444;
    flex: 0;
    padding: 8px 12px;
}

[b-chtns19t9j] .reservation-btn--cancel:hover {
    background: #ef4444;
    color: white;
}

[b-chtns19t9j] .reservation-status--arrived {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-chtns19t9j] .reservation-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

[b-chtns19t9j] .reservation-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

[b-chtns19t9j] .reservation-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

[b-chtns19t9j] .reservation-empty-subtitle {
    font-size: 0.9rem;
    color: #64748b;
}

/* Reservation Actions Header */
[b-chtns19t9j] .reservation-actions-header {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[b-chtns19t9j] .reservation-header-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-header-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
}

[b-chtns19t9j] .reservation-header-btn--add {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

[b-chtns19t9j] .reservation-header-btn--add:hover {
    background: rgba(16, 185, 129, 0.25);
    color: #a7f3d0;
}

/* Reservation Filter Chips */
[b-chtns19t9j] .reservation-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
}

[b-chtns19t9j] .res-filter-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

[b-chtns19t9j] .res-filter-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

[b-chtns19t9j] .res-filter-chip.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
}

[b-chtns19t9j] .res-filter-chip--arrived.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

[b-chtns19t9j] .res-filter-chip--late.active {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

/* Filtered Empty State */
[b-chtns19t9j] .reservation-empty--filtered {
    padding: 2rem;
}

[b-chtns19t9j] .reservation-empty--filtered .res-filter-chip {
    margin-top: 1rem;
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

/* Reservation Add Button in Empty State */
[b-chtns19t9j] .reservation-btn--add {
    margin-top: 1rem;
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

[b-chtns19t9j] .reservation-btn--add:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ==================== Add Reservation Modal ==================== */
.add-res-backdrop[b-chtns19t9j] {
    z-index: 1010;
}

.add-reservation-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* ── Phone reservation polish ──────────────────────────────────────────
   Drop the custom on-screen QWERTY keyboard for the name field — the native
   keyboard already works (the input focuses normally and even hides the custom
   one on focus), so the custom keyboard is just clutter on a phone. Use the
   full viewport width. And drop the one-time table-search "NUEVO" badge +
   tooltip, which clip at the panel edge on phones and read as a mystery label
   (the 🔍 search is self-evident; the hint still shows on desktop). */
@media (max-width: 600px) {
    .add-reservation-modal .keyboard-toggle-btn[b-chtns19t9j],
    .add-reservation-modal .touch-keyboard[b-chtns19t9j] { display: none; }
    .add-reservation-modal .name-text-input[b-chtns19t9j] { flex: 1; }
    .add-reservation-modal[b-chtns19t9j] { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }

    .new-feature-badge[b-chtns19t9j],
    .feature-tooltip[b-chtns19t9j] { display: none !important; }
}

/* Phase Sprint A — two-column reservation layout for desktop POS.
   Below 900px viewport falls back to the single-column 420px shape
   (mobile + narrow tablet portrait); above 900px the modal widens to
   880px with cliente/reserva side-by-side, eliminating the scroll. */
@media (min-width: 900px) {
    .add-reservation-modal.premium-layout[b-chtns19t9j] {
        max-width: 880px;
    }
}
.add-reservation-modal.premium-layout .resv-columns[b-chtns19t9j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .add-reservation-modal.premium-layout .resv-columns[b-chtns19t9j] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}
.add-reservation-modal.premium-layout .resv-col[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0; /* let inner inputs shrink in narrow columns */
}
.add-reservation-modal.premium-layout .resv-section-title[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 4px;
}
.add-reservation-modal.premium-layout .resv-notes-row[b-chtns19t9j] {
    margin-top: 4px;
    grid-column: 1 / -1;
}

/* Phone keypad popover — was inline-permanent under the phone field
   (~220px tall, dominated the modal). Now anchored absolute under the
   phone-display-field, only rendered when _showPhoneKeypad is true. */
.add-reservation-modal .phone-input-touch[b-chtns19t9j] {
    position: relative;
}
.add-reservation-modal .phone-keypad-popover[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.add-reservation-modal .phone-keypad-done[b-chtns19t9j] {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.add-reservation-modal .phone-keypad-done:hover[b-chtns19t9j] {
    background: #15803d;
}

/* Sprint B — quick chips for date + time. Pill row above/below the
   relevant input. Active state matches the indigo accent of the
   modal's other selected states; disabled chips are visibly muted
   so a past time today reads as "not bookable" without a tooltip. */
.add-reservation-modal .resv-quick-chips[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
}
.add-reservation-modal .resv-time-chips[b-chtns19t9j] {
    margin-top: 8px;
}
.add-reservation-modal .quick-chip[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.add-reservation-modal .quick-chip:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.45);
}
.add-reservation-modal .quick-chip:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(.96);
}
.add-reservation-modal .quick-chip.active[b-chtns19t9j] {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}
.add-reservation-modal .quick-chip.disabled[b-chtns19t9j],
.add-reservation-modal .quick-chip:disabled[b-chtns19t9j] {
    opacity: .35;
    cursor: not-allowed;
    text-decoration: line-through;
}
/* Accent chip for "+30m" — slight emerald tint so the operator's eye
   lands on it as a different kind of action (relative-to-now, not
   absolute time slot). */
.add-reservation-modal .quick-chip--accent[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}
.add-reservation-modal .quick-chip--accent:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Sprint B — walk-in shortcut button styling. Sits between Cancelar
   and Crear reserva in the footer; differentiated from the primary
   "Crear reserva" CTA via a violet tint matching the .resv-projected
   purple from Phase 7 Sprint 2 (consistent "calendar/reservation"
   color language across the floor + this modal). */
.add-reservation-modal .btn-submit--alt[b-chtns19t9j] {
    background: #6d28d9;
    border-color: #6d28d9;
}
.add-reservation-modal .btn-submit--alt:hover:not(:disabled)[b-chtns19t9j] {
    background: #5b21b6;
    border-color: #5b21b6;
}
.add-reservation-modal .btn-submit--alt:disabled[b-chtns19t9j] {
    opacity: .5;
    cursor: not-allowed;
}

/* Sprint C — conflict warning banner. Yellow-amber tint (matches the
   Phase 7 Sprint 2 .resv-amber on the floor) — clearly attention-
   getting without reading as a hard error. The operator can override
   and submit anyway because two parties on a long table back-to-back
   is sometimes deliberate. */
.add-reservation-modal .conflict-warning[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    color: #fde68a;
}
.add-reservation-modal .conflict-icon[b-chtns19t9j] {
    font-size: 1.2rem;
    line-height: 1.2;
    flex-shrink: 0;
    color: #fbbf24;
}
.add-reservation-modal .conflict-title[b-chtns19t9j] {
    font-weight: 800;
    font-size: 0.9rem;
    color: #fef3c7;
}
.add-reservation-modal .conflict-detail[b-chtns19t9j] {
    font-size: 0.82rem;
    color: #fde68a;
    margin-top: 2px;
}

/* Sprint C — missing-fields hint above the footer. Slate-400, small,
   no border. Renders only when the form is invalid so it's silent
   when the operator has filled everything. */
.add-reservation-modal .missing-fields-hint[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: right;
    padding: 4px 18px 0;
}

/* ============== Sprint Y — premium polish (height + disabled state) ============== */
/* Compresses vertical rhythm so the full Cliente + Reserva + footer
   fit in 90vh on a 1366×768 POS screen with no scroll. Scoped to
   .premium-layout so the legacy edit modal keeps its existing
   spacing untouched. */
.add-reservation-modal.premium-layout .modal-header[b-chtns19t9j] {
    padding: 12px 18px;
}
.add-reservation-modal.premium-layout .modal-body[b-chtns19t9j] {
    padding: 14px 18px 8px;
}
.add-reservation-modal.premium-layout .modal-footer[b-chtns19t9j] {
    padding: 12px 18px;
}
.add-reservation-modal.premium-layout .form-group[b-chtns19t9j] {
    margin-bottom: 10px;
}
.add-reservation-modal.premium-layout .form-group label[b-chtns19t9j] {
    margin-bottom: 4px;
}
.add-reservation-modal.premium-layout .form-group textarea[b-chtns19t9j] {
    padding: 8px 10px;
    min-height: 56px; /* roughly rows=2 but tighter; expands as user types */
}
.add-reservation-modal.premium-layout .resv-section-title[b-chtns19t9j] {
    padding-bottom: 4px;
    margin-bottom: 2px;
}
.add-reservation-modal.premium-layout .resv-quick-chips[b-chtns19t9j] {
    margin-bottom: 2px;
}
.add-reservation-modal.premium-layout .resv-time-chips[b-chtns19t9j] {
    margin-top: 4px;
}

/* Disabled action buttons: pre-fix they kept their full green/violet
   gradient at 50% opacity, which still reads as "primary, clickable".
   New treatment swaps to a neutral surface so the operator sees
   "this is not a primary action right now" at a glance — matches
   how design-tool defaults handle disabled CTAs. */
.add-reservation-modal.premium-layout .btn-submit:disabled[b-chtns19t9j],
.add-reservation-modal.premium-layout .btn-submit--alt:disabled[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
    transform: none !important;
}
.add-reservation-modal.premium-layout .btn-submit:disabled:hover[b-chtns19t9j],
.add-reservation-modal.premium-layout .btn-submit--alt:disabled:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: none !important;
}

/* Make the missing-fields hint visually tied to the disabled buttons
   below it — borderless slate text immediately above the footer reads
   as "this is why those buttons are off". Bumped contrast so the
   hint actually catches the operator's eye. */
.add-reservation-modal.premium-layout .missing-fields-hint[b-chtns19t9j] {
    color: #fbbf24;
    font-weight: 700;
    padding: 0 18px 6px;
    text-align: right;
}

/* ============== Sprint Z — final polish ============== */

/* (Z1) Submit button: when the form becomes valid, restore the green
   affordance the disabled state suppressed. Without this the operator
   has no positive cue that the form is now ready to submit.
   :not(:disabled) keys cleanly off the disabled attr already wired up
   on the button — no extra Razor flag needed. */
.add-reservation-modal.premium-layout .btn-submit:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 6px 18px rgba(16, 185, 129, 0.25);
}
.add-reservation-modal.premium-layout .btn-submit:not(:disabled):hover[b-chtns19t9j] {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45), 0 8px 22px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}
.add-reservation-modal.premium-layout .btn-submit--alt:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 6px 18px rgba(139, 92, 246, 0.25);
}

/* (Z2) Slim country-code chip. The +34 button used to share width with
   the phone input ~50/50; trim padding + tighter radius so the focus
   stays on the digits the operator is actually typing. */
.add-reservation-modal.premium-layout .country-code-btn[b-chtns19t9j] {
    padding: 8px 8px 8px 10px;
    gap: 3px;
    font-size: 0.85rem;
    border-radius: 6px;
}
.add-reservation-modal.premium-layout .country-code-btn .selected-country[b-chtns19t9j] {
    font-size: 0.85rem;
}

/* (Z3) Chip-only Personas. Without the +/- pair the chip strip is the
   whole control — give it more breathing room and slightly larger taps
   for staff. Keeps the existing .selected style untouched. */
.add-reservation-modal.premium-layout .party-size-compact--chips-only[b-chtns19t9j] {
    gap: 8px;
    flex-wrap: wrap;
}
.add-reservation-modal.premium-layout .party-size-compact--chips-only .size-quick-btn[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    margin: 0;
}

/* (Z4) Collapsible Notes. The toggle is a low-emphasis affordance —
   most reservations skip it. The expanded textarea reuses the
   .name-input-touch wrapper for layout consistency with Nombre, but
   with a textarea instead of a single-line input. */
.add-reservation-modal.premium-layout .notes-toggle[b-chtns19t9j] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.add-reservation-modal.premium-layout .notes-toggle:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}
.add-reservation-modal.premium-layout .notes-text-input[b-chtns19t9j] {
    min-height: 56px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

/* ============== Phase X — Time-aware grouped table picker ============== */
.add-reservation-modal .phase-x-picker[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.add-reservation-modal .picker-group[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: rgba(15, 23, 42, 0.4);
}
.add-reservation-modal .picker-group-title[b-chtns19t9j] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #cbd5e1;
}
.add-reservation-modal .picker-group--available[b-chtns19t9j] {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.06);
}
.add-reservation-modal .picker-group--available .picker-group-title[b-chtns19t9j] { color: #86efac; }
.add-reservation-modal .picker-group--conflict[b-chtns19t9j] {
    border-color: rgba(217, 119, 6, 0.3);
    background: rgba(217, 119, 6, 0.08);
}
.add-reservation-modal .picker-group--conflict .picker-group-title[b-chtns19t9j] { color: #fde68a; }
.add-reservation-modal .picker-group--small[b-chtns19t9j] {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.2);
}
.add-reservation-modal .picker-group--small > summary[b-chtns19t9j] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.add-reservation-modal .picker-group--small > summary[b-chtns19t9j]::after {
    content: "▾";
    margin-left: 6px;
    font-size: 0.72rem;
    transition: transform .15s ease;
    display: inline-block;
}
.add-reservation-modal .picker-group--small[open] > summary[b-chtns19t9j]::after {
    transform: rotate(180deg);
}
.add-reservation-modal .picker-group-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

/* Table chip variants. Reuse base .table-pick-btn from the legacy CSS;
   add .ok/.warn/.dim/.recommended modifiers for the Phase X groupings. */
.add-reservation-modal .table-pick-btn.ok[b-chtns19t9j] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}
.add-reservation-modal .table-pick-btn.ok:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.6);
}
.add-reservation-modal .table-pick-btn.warn[b-chtns19t9j] {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.1);
    color: #fef3c7;
}
.add-reservation-modal .table-pick-btn.warn:hover[b-chtns19t9j] {
    background: rgba(217, 119, 6, 0.22);
}
.add-reservation-modal .table-pick-btn.warn .table-conflict-time[b-chtns19t9j] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #fde68a;
    margin-top: 2px;
}
.add-reservation-modal .table-pick-btn.dim[b-chtns19t9j] {
    opacity: 0.55;
    border-style: dashed;
}
.add-reservation-modal .table-pick-btn.recommended[b-chtns19t9j] {
    position: relative;
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
.add-reservation-modal .table-pick-btn.recommended .recommended-tag[b-chtns19t9j] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #16a34a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.4);
}
.add-reservation-modal .table-pick-btn.selected[b-chtns19t9j] {
    box-shadow: 0 0 0 2px #6366f1;
    border-color: #6366f1;
}

/* Empty-zone fallback. */
.add-reservation-modal .picker-empty[b-chtns19t9j] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 18px 12px;
    font-style: italic;
}

/* Phone input group */
.add-reservation-modal .phone-input-group[b-chtns19t9j] {
    display: flex;
    gap: 8px;
}

.add-reservation-modal .country-code-wrapper[b-chtns19t9j] {
    position: relative;
    flex-shrink: 0;
}

.add-reservation-modal .country-dropdown-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.add-reservation-modal .selected-country[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 95px;
}

.add-reservation-modal .selected-country:hover[b-chtns19t9j] {
    border-color: #6366f1;
}

.add-reservation-modal .dropdown-arrow[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-left: auto;
}

.add-reservation-modal .country-dropdown[b-chtns19t9j] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 100;
    margin-top: 4px;
    overflow: hidden;
}

.add-reservation-modal .country-search-input[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: #1e293b;
    border: none;
    border-bottom: 1px solid #334155;
    color: #f1f5f9;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.add-reservation-modal .country-search-input:focus[b-chtns19t9j] {
    outline: none;
    background: #263548;
}

.add-reservation-modal .country-search-input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.add-reservation-modal .country-list[b-chtns19t9j] {
    max-height: 180px;
    overflow-y: auto;
}

.add-reservation-modal .country-option[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.add-reservation-modal .country-option:hover[b-chtns19t9j],
.add-reservation-modal .country-option.selected[b-chtns19t9j] {
    background: #1e293b;
}

.add-reservation-modal .country-flag[b-chtns19t9j] {
    font-size: 1.1rem;
}

.add-reservation-modal .country-name[b-chtns19t9j] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-reservation-modal .country-dial[b-chtns19t9j] {
    color: #64748b;
    font-size: 0.8rem;
}

.add-reservation-modal .phone-number[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.add-reservation-modal .phone-number:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

/* Customer lookup result */
.add-reservation-modal .customer-lookup-result[b-chtns19t9j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
}

.add-reservation-modal .lookup-icon[b-chtns19t9j] {
    font-size: 1rem;
}

.add-reservation-modal .lookup-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
}

.add-reservation-modal .lookup-vip[b-chtns19t9j] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.add-reservation-modal .lookup-vip.vip-platinum[b-chtns19t9j] {
    background: linear-gradient(135deg, #e5e4e2, #a9a9a9);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-vip.vip-gold[b-chtns19t9j] {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-vip.vip-silver[b-chtns19t9j] {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: #1a1a2e;
}

.add-reservation-modal .lookup-visits[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.add-reservation-modal .lookup-warning[b-chtns19t9j] {
    color: #ef4444;
    font-weight: 600;
}

.add-reservation-modal .lookup-noshow[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #f59e0b;
}

/* Time slot grid */
.add-reservation-modal .time-slot-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .time-slot-grid.compact[b-chtns19t9j] {
    max-height: 120px;
}

.add-reservation-modal .time-slot[b-chtns19t9j] {
    padding: 8px 4px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.add-reservation-modal .time-slot:hover[b-chtns19t9j] {
    border-color: #6366f1;
    color: #f1f5f9;
}

.add-reservation-modal .time-slot.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Custom party size input */
.add-reservation-modal .custom-party-size[b-chtns19t9j] {
    width: 50px;
    padding: 8px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    text-align: center;
}

.add-reservation-modal .custom-party-size:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .custom-party-size[b-chtns19t9j]::placeholder {
    color: #64748b;
    font-size: 0.8rem;
}

.add-reservation-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.125rem;
    color: white;
}

.add-reservation-modal .modal-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.add-reservation-modal .modal-close:hover[b-chtns19t9j] {
    color: white;
}

.add-reservation-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.add-reservation-modal .form-group[b-chtns19t9j] {
    margin-bottom: 16px;
}

.add-reservation-modal .form-row[b-chtns19t9j] {
    display: flex;
    gap: 12px;
}

.add-reservation-modal .form-group--half[b-chtns19t9j] {
    flex: 1;
}

.add-reservation-modal .form-group label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

.add-reservation-modal .form-group input[b-chtns19t9j],
.add-reservation-modal .form-group textarea[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
}

.add-reservation-modal .form-group input:focus[b-chtns19t9j],
.add-reservation-modal .form-group textarea:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .form-hint[b-chtns19t9j],
.add-waitlist-modal .form-hint[b-chtns19t9j] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

.add-reservation-modal .party-size-selector[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-reservation-modal .size-btn[b-chtns19t9j] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .size-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.add-reservation-modal .size-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Compact party size selector */
.add-reservation-modal .party-size-compact[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.add-reservation-modal .size-adjust-btn[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    color: #a5b4fc;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .size-adjust-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    color: white;
    transform: scale(1.1);
}

.add-reservation-modal .size-adjust-btn:disabled[b-chtns19t9j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.add-reservation-modal .size-display[b-chtns19t9j] {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    min-width: 50px;
    text-align: center;
}

.add-reservation-modal .size-quick-btns[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.add-reservation-modal .size-quick-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .size-quick-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.add-reservation-modal .size-quick-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Customer found badge */
.add-reservation-modal .customer-found-badge[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    color: #86efac;
    font-size: 0.85rem;
    margin-top: 6px;
}

.add-reservation-modal .vip-mini[b-chtns19t9j] {
    font-size: 0.9rem;
}

.add-reservation-modal .noshow-mini[b-chtns19t9j] {
    color: #fca5a5;
    font-size: 0.85rem;
}

/* Touch-friendly phone input with keypad */
.add-reservation-modal .phone-input-touch[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-reservation-modal .phone-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    min-height: 48px;
}

.add-reservation-modal .phone-value[b-chtns19t9j] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.add-reservation-modal .phone-value-input[b-chtns19t9j] {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-family: 'SF Mono', 'Menlo', monospace;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
}

.add-reservation-modal .phone-value-input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.add-reservation-modal .phone-value-input:focus[b-chtns19t9j] {
    outline: none;
}

/* Country code picker */
.add-reservation-modal .country-code-picker[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .country-code-btn[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.add-reservation-modal .country-code-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.add-reservation-modal .country-code-btn .dropdown-arrow[b-chtns19t9j] {
    font-size: 0.65rem;
    opacity: 0.7;
}

.add-reservation-modal .country-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.add-reservation-modal .country-dropdown[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 280px;
    max-height: 300px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
}

.add-reservation-modal .country-search[b-chtns19t9j] {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .country-search input[b-chtns19t9j] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
}

.add-reservation-modal .country-search input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-reservation-modal .country-search input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.add-reservation-modal .country-list[b-chtns19t9j] {
    max-height: 230px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .country-option[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e5e5e5;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.add-reservation-modal .country-option:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.add-reservation-modal .country-option.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.add-reservation-modal .country-flag[b-chtns19t9j] {
    font-size: 1.2rem;
}

.add-reservation-modal .country-name[b-chtns19t9j] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-reservation-modal .country-code[b-chtns19t9j] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.add-reservation-modal .keypad-spacer[b-chtns19t9j] {
    /* Empty spacer for keypad grid */
}

.add-reservation-modal .phone-keypad[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px;
}

.add-reservation-modal .keypad-btn[b-chtns19t9j] {
    padding: 16px 8px;
    font-size: 1.4rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.add-reservation-modal .keypad-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
}

.add-reservation-modal .keypad-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.96);
}

.add-reservation-modal .keypad-btn--delete[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.add-reservation-modal .keypad-btn--delete:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

/* Touch-friendly name input with on-screen keyboard */
.add-reservation-modal .name-input-touch[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add-reservation-modal .name-input-wrapper[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-reservation-modal .name-text-input[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
}

.add-reservation-modal .name-text-input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .name-text-input[b-chtns19t9j]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.add-reservation-modal .keyboard-toggle-btn[b-chtns19t9j] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
}

.add-reservation-modal .keyboard-toggle-btn:hover[b-chtns19t9j],
.add-reservation-modal .keyboard-toggle-btn.active[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.add-reservation-modal .name-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .name-display-field.focused[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .name-value[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    flex: 1;
    min-height: 24px;
}

.add-reservation-modal .name-value.placeholder[b-chtns19t9j] {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.add-reservation-modal .keyboard-toggle[b-chtns19t9j] {
    font-size: 1.25rem;
    opacity: 0.6;
}

.add-reservation-modal .touch-keyboard[b-chtns19t9j] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.add-reservation-modal .keyboard-row[b-chtns19t9j] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.add-reservation-modal .keyboard-row--bottom[b-chtns19t9j] {
    gap: 8px;
    margin-top: 4px;
}

.add-reservation-modal .key-btn[b-chtns19t9j] {
    min-width: 32px;
    height: 44px;
    padding: 8px 10px;
    font-size: 1.1rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.add-reservation-modal .key-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
}

.add-reservation-modal .key-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

.add-reservation-modal .key-btn--shift[b-chtns19t9j] {
    font-size: 1.3rem;
    min-width: 44px;
}

.add-reservation-modal .key-btn--shift.active[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    border-color: #6366f1;
}

.add-reservation-modal .key-btn--delete[b-chtns19t9j] {
    min-width: 44px;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.add-reservation-modal .key-btn--space[b-chtns19t9j] {
    flex: 1;
    max-width: 200px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.add-reservation-modal .key-btn--done[b-chtns19t9j] {
    min-width: 60px;
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
    font-weight: 600;
}

/* Touch-friendly time input with picker */
.add-reservation-modal .time-input-touch[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .time-display-field[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-display-field.focused[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.add-reservation-modal .time-value[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.add-reservation-modal .time-toggle[b-chtns19t9j] {
    font-size: 1.25rem;
    opacity: 0.6;
}

.add-reservation-modal .time-picker-dropdown[b-chtns19t9j] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 40px);
    max-width: 320px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.add-reservation-modal .time-picker-section[b-chtns19t9j] {
    margin-bottom: 12px;
}

.add-reservation-modal .time-picker-section:last-of-type[b-chtns19t9j] {
    margin-bottom: 8px;
}

.add-reservation-modal .time-picker-label[b-chtns19t9j] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.add-reservation-modal .time-picker-grid[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.add-reservation-modal .time-picker-hours[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.add-reservation-modal .time-picker-minutes[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.add-reservation-modal .time-btn[b-chtns19t9j] {
    padding: 10px 8px;
    font-size: 1rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.add-reservation-modal .time-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
}

.add-reservation-modal .time-btn.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.4);
    border-color: #6366f1;
    color: #fff;
}

.add-reservation-modal .time-picker-done[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #86efac;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-done:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.4);
}

/* Time picker action buttons row */
.add-reservation-modal .time-picker-actions[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.add-reservation-modal .time-picker-actions .time-picker-done[b-chtns19t9j] {
    flex: 1;
}

.add-reservation-modal .time-picker-custom[b-chtns19t9j] {
    padding: 12px 16px;
    font-size: 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    color: #a5b4fc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-custom:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    transform: scale(1.05);
}

/* Manual time input mode */
.add-reservation-modal .time-manual-input[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.add-reservation-modal .manual-time-fields[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-reservation-modal .manual-hour-input[b-chtns19t9j],
.add-reservation-modal .manual-minute-input[b-chtns19t9j] {
    width: 80px;
    padding: 16px 12px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    outline: none;
    transition: all 0.2s ease;
}

.add-reservation-modal .manual-hour-input:focus[b-chtns19t9j],
.add-reservation-modal .manual-minute-input:focus[b-chtns19t9j] {
    border-color: #c4b5fd;
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.add-reservation-modal .time-separator[b-chtns19t9j] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.add-reservation-modal .time-picker-apply[b-chtns19t9j] {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(99, 102, 241, 0.4));
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 10px;
    color: #e0d4fc;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .time-picker-apply:hover[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(99, 102, 241, 0.5));
    transform: translateY(-1px);
}

.add-reservation-modal .time-picker-back[b-chtns19t9j] {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .time-picker-back:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Hide number input spinners for cleaner look */
.add-reservation-modal .manual-hour-input[b-chtns19t9j]::-webkit-outer-spin-button,
.add-reservation-modal .manual-hour-input[b-chtns19t9j]::-webkit-inner-spin-button,
.add-reservation-modal .manual-minute-input[b-chtns19t9j]::-webkit-outer-spin-button,
.add-reservation-modal .manual-minute-input[b-chtns19t9j]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.add-reservation-modal .manual-hour-input[type=number][b-chtns19t9j],
.add-reservation-modal .manual-minute-input[type=number][b-chtns19t9j] {
    -moz-appearance: textfield;
}

/* Table pre-selection styles */
.add-reservation-modal .table-preselect-group[b-chtns19t9j] {
    position: relative;
}

.add-reservation-modal .table-preselect[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-reservation-modal .select-table-btn[b-chtns19t9j] {
    flex: 1;
    padding: 12px 16px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .select-table-btn:hover[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.add-reservation-modal .selected-table-display[b-chtns19t9j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-reservation-modal .selected-table-display:hover[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.2);
}

.add-reservation-modal .selected-table-display .table-badge[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 600;
    color: #e0d4fc;
}

.add-reservation-modal .selected-table-display .zone-badge[b-chtns19t9j] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
}

.add-reservation-modal .clear-table-btn[b-chtns19t9j] {
    padding: 4px 8px;
    font-size: 0.8rem;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    border-radius: 6px;
    color: #fca5a5;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .clear-table-btn:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

.add-reservation-modal .table-picker-dropdown[b-chtns19t9j] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    padding: 12px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.add-reservation-modal .table-picker-zones[b-chtns19t9j] {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.add-reservation-modal .table-picker-zones .zone-pill[b-chtns19t9j] {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-picker-zones .zone-pill:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
}

.add-reservation-modal .table-picker-zones .zone-pill.active[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.5);
    color: #e0d4fc;
}

.add-reservation-modal .table-picker-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}

.add-reservation-modal .table-pick-btn[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-pick-btn:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.25);
    transform: scale(1.02);
}

.add-reservation-modal .table-pick-btn.selected[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.add-reservation-modal .table-pick-btn.occupied[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    opacity: 0.5;
    cursor: not-allowed;
}

.add-reservation-modal .table-pick-btn.small[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
}

.add-reservation-modal .table-pick-btn .table-num[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.add-reservation-modal .table-pick-btn .table-seats[b-chtns19t9j] {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.add-reservation-modal .table-pick-btn.selected .table-num[b-chtns19t9j],
.add-reservation-modal .table-pick-btn.selected .table-seats[b-chtns19t9j] {
    color: #e0d4fc;
}

.add-reservation-modal .table-picker-actions[b-chtns19t9j] {
    margin-top: 12px;
}

.add-reservation-modal .table-picker-actions .table-picker-done[b-chtns19t9j] {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    color: #86efac;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-reservation-modal .table-picker-actions .table-picker-done:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.4);
}

.add-reservation-modal .error-message[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
}

.add-reservation-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-reservation-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
}

.add-reservation-modal .btn-submit[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-reservation-modal .btn-submit:hover:not(:disabled)[b-chtns19t9j] {
    transform: translateY(-1px);
}

.add-reservation-modal .btn-submit:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Edit Reservation Modal ==================== */
.edit-reservation-modal .edit-customer-info[b-chtns19t9j] {
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    margin-bottom: 16px;
}

.edit-reservation-modal .customer-display[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-reservation-modal .customer-name[b-chtns19t9j] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.edit-reservation-modal .customer-phone[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ==================== Cancel Reservation Confirmation ==================== */
.confirm-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    padding: 24px;
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.confirm-modal .confirm-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.confirm-modal h3[b-chtns19t9j] {
    margin: 0 0 12px;
    font-size: 1.25rem;
    color: #f1f5f9;
}

.confirm-modal .confirm-details[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 16px;
    line-height: 1.6;
}

.confirm-modal .deposit-warning[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fcd34d;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    text-align: left;
}

.confirm-modal .confirm-actions[b-chtns19t9j] {
    display: flex;
    gap: 12px;
}

.confirm-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

.confirm-modal .btn-danger[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-modal .btn-danger:hover:not(:disabled)[b-chtns19t9j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.confirm-modal .btn-danger:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== Add Waitlist Modal ==================== */
.modal-backdrop[b-chtns19t9j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
}

.add-waitlist-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    /* Above .modal-backdrop (z-index:10000) — was 1001, so the backdrop
       painted over the card and swallowed clicks (same bug class as the
       POS modifier modal). 10001 matches the working reservation modals. */
    z-index: 10001;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.add-waitlist-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.add-waitlist-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.add-waitlist-modal .modal-close[b-chtns19t9j] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.add-waitlist-modal .modal-close:hover[b-chtns19t9j] {
    color: #f1f5f9;
}

.add-waitlist-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.add-waitlist-modal .form-group[b-chtns19t9j] {
    margin-bottom: 16px;
}

.add-waitlist-modal .form-group label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
}

.add-waitlist-modal .form-group input[b-chtns19t9j],
.add-waitlist-modal .form-group textarea[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.add-waitlist-modal .form-group input:focus[b-chtns19t9j],
.add-waitlist-modal .form-group textarea:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.add-waitlist-modal .party-size-selector[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-waitlist-modal .size-btn[b-chtns19t9j] {
    width: 40px;
    height: 40px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-waitlist-modal .size-btn:hover[b-chtns19t9j] {
    border-color: #6366f1;
    color: #f1f5f9;
}

.add-waitlist-modal .size-btn.selected[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.add-waitlist-modal .notification-toggle[b-chtns19t9j] {
    padding: 12px;
    background: #0f172a;
    border-radius: 8px;
    border: 1px solid #334155;
}

.add-waitlist-modal .toggle-label[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #f1f5f9;
    font-size: 0.9rem;
}

.add-waitlist-modal .toggle-label input[type="checkbox"][b-chtns19t9j] {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
    cursor: pointer;
}

.add-waitlist-modal .toggle-text[b-chtns19t9j] {
    flex: 1;
}

.add-waitlist-modal .error-message[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.9rem;
    margin-top: 8px;
}

.add-waitlist-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.add-waitlist-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.add-waitlist-modal .btn-cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.add-waitlist-modal .btn-submit[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #8b5cf6;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.add-waitlist-modal .btn-submit:hover:not(:disabled)[b-chtns19t9j] {
    background: #7c3aed;
}

.add-waitlist-modal .btn-submit:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Selection Modal */
.table-selection-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.table-selection-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
}

.table-selection-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.table-selection-modal .modal-close[b-chtns19t9j] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.table-selection-modal .modal-close:hover[b-chtns19t9j] {
    color: #f1f5f9;
}

.table-selection-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
}

.table-selection-modal .party-info[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.table-selection-modal .party-size-badge[b-chtns19t9j] {
    background: #3b82f6;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.table-selection-modal .zone-preference[b-chtns19t9j] {
    background: #475569;
    color: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
}

.table-selection-modal .loading-tables[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #94a3b8;
}

.table-selection-modal .spinner-small[b-chtns19t9j] {
    width: 20px;
    height: 20px;
    border: 2px solid #334155;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

.table-selection-modal .no-tables[b-chtns19t9j] {
    text-align: center;
    padding: 30px 20px;
    color: #94a3b8;
}

.table-selection-modal .no-tables .warning-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.table-selection-modal .no-tables p[b-chtns19t9j] {
    margin: 0 0 8px 0;
}

.table-selection-modal .no-tables .hint[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #64748b;
}

.table-selection-modal .table-options[b-chtns19t9j] {
    margin-bottom: 16px;
}

.table-selection-modal .section-label[b-chtns19t9j] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 12px;
}

.table-selection-modal .table-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.table-selection-modal .table-option[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.table-selection-modal .table-option:hover[b-chtns19t9j] {
    border-color: #6366f1;
    background: #1a1f36;
}

.table-selection-modal .table-option.selected[b-chtns19t9j] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

.table-selection-modal .table-option.recommended[b-chtns19t9j] {
    position: relative;
}

.table-selection-modal .table-option .table-label[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.table-selection-modal .table-option .table-details[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.table-selection-modal .table-option .fit-badge[b-chtns19t9j] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #22c55e;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.table-selection-modal .no-table-option[b-chtns19t9j] {
    padding: 12px;
    background: #0f172a;
    border-radius: 8px;
    margin-top: 12px;
}

.table-selection-modal .no-table-option label[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
}

.table-selection-modal .no-table-option input[type="checkbox"][b-chtns19t9j] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
}

.table-selection-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.table-selection-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.table-selection-modal .btn-cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.table-selection-modal .btn-call[b-chtns19t9j] {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #22c55e;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.table-selection-modal .btn-call:hover[b-chtns19t9j] {
    background: #16a34a;
}

.table-selection-modal .btn-call .selected-table[b-chtns19t9j] {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Blacklist Toggle Modal */
.blacklist-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modal-appear-b-chtns19t9j 0.2s ease-out;
}

.blacklist-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
}

.blacklist-modal .modal-header.unblock-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.blacklist-modal .modal-header.block-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.blacklist-modal .modal-header h3[b-chtns19t9j] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.blacklist-modal .modal-close[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.blacklist-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
}

.blacklist-modal .modal-body[b-chtns19t9j] {
    padding: 20px;
    color: #e2e8f0;
}

.blacklist-modal .blacklist-customer-info[b-chtns19t9j] {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.blacklist-modal .customer-name-large[b-chtns19t9j] {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.blacklist-modal .customer-phone[b-chtns19t9j] {
    font-size: 0.95rem;
    color: #94a3b8;
}

.blacklist-modal .noshow-info[b-chtns19t9j] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blacklist-modal .noshow-count[b-chtns19t9j] {
    color: #f87171;
    font-weight: 600;
    font-size: 0.9rem;
}

.blacklist-modal .unblock-message[b-chtns19t9j],
.blacklist-modal .block-message[b-chtns19t9j] {
    text-align: center;
}

.blacklist-modal .unblock-message p[b-chtns19t9j],
.blacklist-modal .block-message p[b-chtns19t9j] {
    margin: 0 0 8px 0;
    color: #e2e8f0;
}

.blacklist-modal .block-warning[b-chtns19t9j] {
    color: #fca5a5 !important;
    font-size: 0.9rem;
}

.blacklist-modal .reason-input[b-chtns19t9j] {
    margin-top: 16px;
    text-align: left;
}

.blacklist-modal .reason-input label[b-chtns19t9j] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #94a3b8;
}

.blacklist-modal .reason-input input[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #334155;
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
}

.blacklist-modal .reason-input input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.blacklist-modal .reason-input input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #3b82f6;
}

.blacklist-modal .blacklist-error[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.blacklist-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.blacklist-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.blacklist-modal .btn-cancel:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.blacklist-modal .btn-unblock[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-unblock:hover[b-chtns19t9j] {
    filter: brightness(1.1);
}

.blacklist-modal .btn-unblock:disabled[b-chtns19t9j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.blacklist-modal .btn-block[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.blacklist-modal .btn-block:hover[b-chtns19t9j] {
    filter: brightness(1.1);
}

.blacklist-modal .btn-block:disabled[b-chtns19t9j] {
    opacity: 0.6;
    cursor: not-allowed;
}

.blacklist-modal .btn-spinner[b-chtns19t9j] {
    display: inline-block;
    animation: spin-b-chtns19t9j 1s linear infinite;
}

/* Clickable badges for blacklist/block actions */
.blacklist-badge--clickable[b-chtns19t9j],
.noshow-badge--clickable[b-chtns19t9j] {
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.blacklist-badge--clickable:hover[b-chtns19t9j],
.noshow-badge--clickable:hover[b-chtns19t9j] {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.blacklist-badge--clickable:active[b-chtns19t9j],
.noshow-badge--clickable:active[b-chtns19t9j] {
    transform: scale(0.95);
}

/* Waitlist Success Modal */
.waitlist-success-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modal-appear-b-chtns19t9j 0.2s ease-out;
}

@keyframes modal-appear-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.waitlist-success-modal .success-header[b-chtns19t9j] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 16px 16px 0 0;
}

.waitlist-success-modal .success-header h3[b-chtns19t9j] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.waitlist-success-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.waitlist-success-modal .modal-close[b-chtns19t9j] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.waitlist-success-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(255,255,255,0.3);
}

.waitlist-success-modal .modal-body[b-chtns19t9j] {
    padding: 24px 20px;
}

.waitlist-success-modal .success-info[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #334155;
}

.waitlist-success-modal .customer-name[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
}

.waitlist-success-modal .position-badge[b-chtns19t9j] {
    background: #6366f1;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.waitlist-success-modal .tracking-section[b-chtns19t9j] {
    text-align: center;
}

.waitlist-success-modal .tracking-label[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.waitlist-success-modal .tracking-url-box[b-chtns19t9j] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.waitlist-success-modal .tracking-url[b-chtns19t9j] {
    color: #60a5fa;
    font-size: 0.85rem;
    word-break: break-all;
}

.waitlist-success-modal .tracking-actions[b-chtns19t9j] {
    margin-bottom: 16px;
}

.waitlist-success-modal .btn-copy[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #334155;
    border: none;
    border-radius: 8px;
    color: #f1f5f9;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.waitlist-success-modal .btn-copy:hover[b-chtns19t9j] {
    background: #475569;
}

.waitlist-success-modal .btn-copy.copied[b-chtns19t9j] {
    background: #22c55e;
    color: white;
}

.waitlist-success-modal .tracking-hint[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.waitlist-success-modal .modal-footer[b-chtns19t9j] {
    padding: 16px 20px;
    border-top: 1px solid #334155;
}

.waitlist-success-modal .btn-done[b-chtns19t9j] {
    width: 100%;
    padding: 12px;
    background: #6366f1;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.waitlist-success-modal .btn-done:hover[b-chtns19t9j] {
    background: #4f46e5;
}

/* ==================== Reservation Calendar Modal ==================== */
.reservation-calendar-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    border-radius: 16px;
    width: 95%;
    max-width: 520px;
    max-height: 90vh;
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reservation-calendar-modal .modal-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.reservation-calendar-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1.125rem;
    color: white;
}

.reservation-calendar-modal .modal-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.reservation-calendar-modal .modal-close:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Calendar View Tabs */
.reservation-calendar-modal .calendar-view-tabs[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.reservation-calendar-modal .view-tab[b-chtns19t9j] {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .view-tab:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.reservation-calendar-modal .view-tab.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

/* Upcoming View */
.reservation-calendar-modal .upcoming-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.reservation-calendar-modal .upcoming-title[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
}

.reservation-calendar-modal .upcoming-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-calendar-modal .upcoming-date-section[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
}

.reservation-calendar-modal .upcoming-date-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.15);
    cursor: pointer;
    transition: background 0.2s;
}

.reservation-calendar-modal .upcoming-date-header:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.25);
}

.reservation-calendar-modal .upcoming-date[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    flex: 1;
}

.reservation-calendar-modal .upcoming-count[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.reservation-calendar-modal .upcoming-arrow[b-chtns19t9j] {
    color: #6366f1;
}

.reservation-calendar-modal .upcoming-reservations[b-chtns19t9j] {
    padding: 8px 16px;
}

.reservation-calendar-modal .upcoming-res-item[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reservation-calendar-modal .upcoming-res-item:last-child[b-chtns19t9j] {
    border-bottom: none;
}

.reservation-calendar-modal .upcoming-res-time[b-chtns19t9j] {
    font-weight: 600;
    color: #a5b4fc;
    min-width: 50px;
}

.reservation-calendar-modal .upcoming-res-name[b-chtns19t9j] {
    flex: 1;
    color: #f1f5f9;
}

.reservation-calendar-modal .upcoming-res-party[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Calendar Navigation */
.reservation-calendar-modal .calendar-nav[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reservation-calendar-modal .calendar-nav-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-nav-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.reservation-calendar-modal .calendar-nav-btn:disabled[b-chtns19t9j] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.reservation-calendar-modal .calendar-nav-today[b-chtns19t9j] {
    width: auto;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.reservation-calendar-modal .calendar-nav-today.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .calendar-nav-refresh[b-chtns19t9j] {
    font-size: 0.85rem;
}

.reservation-calendar-modal .calendar-nav-refresh.spinning[b-chtns19t9j] {
    animation: spin-b-chtns19t9j 1s linear infinite;
}

.reservation-calendar-modal .calendar-nav-refresh:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Upcoming dates dropdown */
.reservation-calendar-modal .upcoming-dates-wrapper[b-chtns19t9j] {
    position: relative;
}

.reservation-calendar-modal .calendar-nav-upcoming[b-chtns19t9j] {
    font-size: 1rem;
}

.reservation-calendar-modal .calendar-nav-upcoming.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .upcoming-dates-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.reservation-calendar-modal .upcoming-dates-dropdown[b-chtns19t9j] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    max-height: 400px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow: hidden;
    animation: slideDown-b-chtns19t9j 0.15s ease-out;
}

@keyframes slideDown-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reservation-calendar-modal .upcoming-dates-header[b-chtns19t9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.reservation-calendar-modal .upcoming-dates-close[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
}

.reservation-calendar-modal .upcoming-dates-close:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .upcoming-dates-loading[b-chtns19t9j],
.reservation-calendar-modal .upcoming-dates-empty[b-chtns19t9j] {
    padding: 24px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.reservation-calendar-modal .upcoming-dates-loading .loading-spinner[b-chtns19t9j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
    margin-right: 8px;
}

.reservation-calendar-modal .upcoming-dates-list[b-chtns19t9j] {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
}

.reservation-calendar-modal .upcoming-date-item[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.reservation-calendar-modal .upcoming-date-item:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
}

.reservation-calendar-modal .upcoming-date-item.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.reservation-calendar-modal .upcoming-date-item.today[b-chtns19t9j] {
    border-left: 3px solid #10b981;
}

.reservation-calendar-modal .upcoming-date-day[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.reservation-calendar-modal .upcoming-date-weekday[b-chtns19t9j] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

.reservation-calendar-modal .upcoming-date-num[b-chtns19t9j] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.reservation-calendar-modal .upcoming-date-month[b-chtns19t9j] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.reservation-calendar-modal .upcoming-date-info[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reservation-calendar-modal .upcoming-date-count[b-chtns19t9j] {
    font-size: 0.9rem;
    font-weight: 500;
}

.reservation-calendar-modal .upcoming-date-guests[b-chtns19t9j] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.reservation-calendar-modal .calendar-date-picker[b-chtns19t9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"][b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    color-scheme: dark;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"]:focus[b-chtns19t9j] {
    outline: none;
    border-color: #6366f1;
}

.reservation-calendar-modal .calendar-date-picker input[type="date"]:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reservation-calendar-modal .calendar-date-label[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: capitalize;
    margin-top: 4px;
}

/* Calendar Loading */
.reservation-calendar-modal .calendar-loading[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 12px;
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-loading .spinner[b-chtns19t9j] {
    width: 32px;
    height: 32px;
    border: 3px solid #334155;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

/* Calendar Empty State */
.reservation-calendar-modal .calendar-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
}

.reservation-calendar-modal .calendar-empty-icon[b-chtns19t9j] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.reservation-calendar-modal .calendar-empty-text[b-chtns19t9j] {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

/* Calendar Summary */
.reservation-calendar-modal .calendar-summary[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.reservation-calendar-modal .summary-count[b-chtns19t9j],
.reservation-calendar-modal .summary-people[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Calendar List */
.reservation-calendar-modal .calendar-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Calendar Reservation Card */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-res-card:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.06);
}

/* Right column: status + actions + contact */
.reservation-calendar-modal .calendar-res-right[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.reservation-calendar-modal .calendar-res-contact[b-chtns19t9j] {
    display: flex;
    gap: 6px;
}

.reservation-calendar-modal .contact-icon[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.reservation-calendar-modal .contact-icon:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.1);
}

.reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
    display: flex;
    gap: 4px;
}

/* Status variants */
.reservation-calendar-modal .calendar-res--confirmed[b-chtns19t9j] {
    border-left: 3px solid #10b981;
}

.reservation-calendar-modal .calendar-res--reminded[b-chtns19t9j] {
    border-left: 3px solid #3b82f6;
}

.reservation-calendar-modal .calendar-res--pending[b-chtns19t9j] {
    border-left: 3px solid #f59e0b;
}

.reservation-calendar-modal .calendar-res--arrived[b-chtns19t9j] {
    border-left: 3px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.reservation-calendar-modal .calendar-res--completed[b-chtns19t9j] {
    border-left: 3px solid #22c55e;
    opacity: 0.7;
}

.reservation-calendar-modal .calendar-res--noshow[b-chtns19t9j] {
    border-left: 3px solid #ef4444;
    opacity: 0.6;
}

.reservation-calendar-modal .calendar-res--cancelled[b-chtns19t9j] {
    border-left: 3px solid #64748b;
    opacity: 0.5;
}

/* Time column */
.reservation-calendar-modal .calendar-res-time[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #a5b4fc;
    min-width: 50px;
}

/* Info column */
.reservation-calendar-modal .calendar-res-info[b-chtns19t9j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reservation-calendar-modal .calendar-res-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reservation-calendar-modal .calendar-res-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.reservation-calendar-modal .calendar-res-details[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reservation-calendar-modal .party-size-compact[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-res-contact[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

.reservation-calendar-modal .calendar-res-notes[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #fbbf24;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-calendar-modal .calendar-customer-notes[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #a78bfa;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-calendar-modal .calendar-phone-link[b-chtns19t9j] {
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.2s;
}

.reservation-calendar-modal .calendar-phone-link:hover[b-chtns19t9j] {
    color: #93c5fd;
    text-decoration: underline;
}

.reservation-calendar-modal .calendar-res--blacklisted[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.reservation-calendar-modal .calendar-res-name[b-chtns19t9j] {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Phone number in calendar */
.reservation-calendar-modal .calendar-phone[b-chtns19t9j] {
    color: #86efac;
    font-size: 0.85rem;
}

/* Preferred zone in calendar */
.reservation-calendar-modal .calendar-zone[b-chtns19t9j] {
    color: #a5b4fc;
}

/* Dark theme badges for calendar modal */
.reservation-calendar-modal .vip-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .vip-badge--platinum[b-chtns19t9j] {
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    color: white;
    font-weight: 600;
}

.reservation-calendar-modal .vip-badge--gold[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: white;
    font-weight: 600;
}

.reservation-calendar-modal .vip-badge--silver[b-chtns19t9j] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: white;
    font-weight: 500;
}

.reservation-calendar-modal .blacklist-badge[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #fca5a5;
}

.reservation-calendar-modal .noshow-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #fb923c;
    background: rgba(249, 115, 22, 0.15);
    padding: 2px 5px;
    border-radius: 8px;
}

/* Deposit badge */
.reservation-calendar-modal .deposit-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.reservation-calendar-modal .deposit-badge.deposit-paid[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .deposit-badge.deposit-pending[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    animation: pendingPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes pendingPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Source badge */
.reservation-calendar-modal .source-badge[b-chtns19t9j] {
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

/* Status column */
.reservation-calendar-modal .calendar-res-status[b-chtns19t9j] {
    min-width: fit-content;
}

.reservation-calendar-modal .status-pill[b-chtns19t9j] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.reservation-calendar-modal .status-pill.confirmed[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .status-pill.reminded[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.reservation-calendar-modal .status-pill.pending[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.reservation-calendar-modal .status-pill.arrived[b-chtns19t9j] {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

.reservation-calendar-modal .status-pill.completed[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.reservation-calendar-modal .status-pill.no_show[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.reservation-calendar-modal .status-pill.cancelled[b-chtns19t9j] {
    background: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
}

.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-action--arrive[b-chtns19t9j] {
    color: #6ee7b7;
}

.reservation-calendar-modal .calendar-action--arrive:hover[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.3);
}

.reservation-calendar-modal .calendar-action--edit[b-chtns19t9j] {
    color: #93c5fd;
}

.reservation-calendar-modal .calendar-action--edit:hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.3);
}

.reservation-calendar-modal .calendar-action--noshow[b-chtns19t9j] {
    color: #fca5a5;
}

.reservation-calendar-modal .calendar-action--noshow:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.3);
}

.reservation-calendar-modal .calendar-action--cancel[b-chtns19t9j] {
    color: #94a3b8;
}

.reservation-calendar-modal .calendar-action--cancel:hover[b-chtns19t9j] {
    background: rgba(100, 116, 139, 0.3);
}

.reservation-calendar-modal .calendar-action--reminder[b-chtns19t9j] {
    color: #fbbf24;
}

.reservation-calendar-modal .calendar-action--reminder:hover[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.3);
}

.reservation-calendar-modal .calendar-action--reminder.already-sent[b-chtns19t9j] {
    color: #86efac;
    opacity: 0.7;
}

/* Occasion badge for celebrations */
.reservation-calendar-modal .occasion-badge[b-chtns19t9j] {
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(236, 72, 153, 0.2);
    animation: occasionPulse-b-chtns19t9j 2s ease-in-out infinite;
}

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

/* Arrival badge - customer is on their way */
.reservation-calendar-modal .arrival-badge[b-chtns19t9j] {
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.2);
    animation: arrivalPulse-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes arrivalPulse-b-chtns19t9j {
    0%, 100% {
        transform: scale(1);
        background: rgba(59, 130, 246, 0.2);
    }
    50% {
        transform: scale(1.15);
        background: rgba(59, 130, 246, 0.4);
    }
}

/* Calendar Error Message */
.reservation-calendar-modal .calendar-error[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.reservation-calendar-modal .calendar-error-dismiss[b-chtns19t9j] {
    background: transparent;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.9rem;
}

.reservation-calendar-modal .calendar-error-dismiss:hover[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .calendar-error--clickable[b-chtns19t9j] {
    cursor: pointer;
}

.reservation-calendar-modal .calendar-error--clickable:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.25);
}

/* Calendar Action Spinner */
.reservation-calendar-modal .calendar-action-spinner[b-chtns19t9j] {
    font-size: 1rem;
    animation: spin-b-chtns19t9j 1s linear infinite;
}

/* Disabled action buttons */
.reservation-calendar-modal .calendar-action-btn:disabled[b-chtns19t9j] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Calendar modal footer styling */
.reservation-calendar-modal .modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.reservation-calendar-modal .btn-cancel[b-chtns19t9j] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .btn-cancel:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.reservation-calendar-modal .btn-submit[b-chtns19t9j] {
    flex: 1.5;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .btn-submit:hover[b-chtns19t9j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@keyframes spin-b-chtns19t9j {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Toast Notification ===== */
.reservation-calendar-modal .calendar-toast[b-chtns19t9j] {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 100;
    animation: toastSlideIn-b-chtns19t9j 0.3s ease-out, toastFadeOut-b-chtns19t9j 0.3s ease-in 2.7s;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.reservation-calendar-modal .calendar-toast--success[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.reservation-calendar-modal .calendar-toast--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.reservation-calendar-modal .calendar-toast--error[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

@keyframes toastSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastFadeOut-b-chtns19t9j {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== Global Toast (outside modals) ===== */
.global-toast[b-chtns19t9j] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 10000;
    animation: globalToastIn-b-chtns19t9j 0.3s ease-out, globalToastOut-b-chtns19t9j 0.3s ease-in 3.7s;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 90vw;
}

.global-toast--success[b-chtns19t9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.global-toast--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.global-toast--error[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

@keyframes globalToastIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes globalToastOut-b-chtns19t9j {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== Confirmation Dialog ===== */
.reservation-calendar-modal .calendar-confirm-overlay[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: fadeIn-b-chtns19t9j 0.2s ease-out;
    backdrop-filter: blur(4px);
}

.reservation-calendar-modal .calendar-confirm-dialog[b-chtns19t9j] {
    background: #1e293b;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    text-align: center;
    animation: dialogBounce-b-chtns19t9j 0.3s ease-out;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.reservation-calendar-modal .confirm-icon[b-chtns19t9j] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.reservation-calendar-modal .confirm-title[b-chtns19t9j] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 12px;
}

.reservation-calendar-modal .confirm-message[b-chtns19t9j] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 20px;
    line-height: 1.5;
}

.reservation-calendar-modal .confirm-message strong[b-chtns19t9j] {
    color: #e2e8f0;
}

.reservation-calendar-modal .confirm-buttons[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.reservation-calendar-modal .confirm-btn[b-chtns19t9j] {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.reservation-calendar-modal .confirm-btn--cancel[b-chtns19t9j] {
    background: #334155;
    color: #e2e8f0;
}

.reservation-calendar-modal .confirm-btn--cancel:hover[b-chtns19t9j] {
    background: #475569;
}

.reservation-calendar-modal .confirm-btn--confirm[b-chtns19t9j] {
    color: white;
}

.reservation-calendar-modal .confirm-btn--warning[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.reservation-calendar-modal .confirm-btn--warning:hover[b-chtns19t9j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.reservation-calendar-modal .confirm-btn--danger[b-chtns19t9j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.reservation-calendar-modal .confirm-btn--danger:hover[b-chtns19t9j] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

@keyframes fadeIn-b-chtns19t9j {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dialogBounce-b-chtns19t9j {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Time Block & Countdown ===== */
.reservation-calendar-modal .calendar-res-time-block[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    gap: 4px;
}

.reservation-calendar-modal .calendar-time-until[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(100, 116, 139, 0.2);
    white-space: nowrap;
}

.reservation-calendar-modal .time-until--soon[b-chtns19t9j] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.2);
    animation: pulse-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .time-until--late[b-chtns19t9j] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.2);
    font-weight: 600;
}

.reservation-calendar-modal .late-indicator[b-chtns19t9j] {
    font-size: 0.6rem;
    animation: blink-b-chtns19t9j 1s ease-in-out infinite;
}

@keyframes pulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes blink-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== Late & Upcoming Card Styles ===== */
.reservation-calendar-modal .calendar-res--late[b-chtns19t9j] {
    border-left: 4px solid #ef4444 !important;
    animation: latePulse-b-chtns19t9j 2s ease-in-out infinite;
    position: relative;
}

.reservation-calendar-modal .calendar-res--late[b-chtns19t9j]::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-radius: 12px;
    border: 2px solid transparent;
    animation: lateGlow-b-chtns19t9j 2s ease-in-out infinite;
    pointer-events: none;
}

.reservation-calendar-modal .calendar-res--upcoming[b-chtns19t9j] {
    border-left: 4px solid #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes latePulse-b-chtns19t9j {
    0%, 100% {
        background: #1e293b;
    }
    50% {
        background: rgba(239, 68, 68, 0.15);
    }
}

@keyframes lateGlow-b-chtns19t9j {
    0%, 100% {
        border-color: transparent;
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.3);
        box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.2);
    }
}

/* ===== Footer Hint ===== */
.reservation-calendar-modal .footer-hint[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #64748b;
    margin-right: auto;
}

/* ===== Modal Entry Animation ===== */
.reservation-calendar-modal[b-chtns19t9j] {
    animation: modalSlideIn-b-chtns19t9j 0.3s ease-out forwards;
}

@keyframes modalSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }
}

/* ===== Card Hover Enhancement ===== */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    transition: all 0.2s ease, transform 0.15s ease;
}

.reservation-calendar-modal .calendar-res-card:hover[b-chtns19t9j] {
    transform: translateX(4px);
}

/* ===== Action Button Hover Effects ===== */
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    transition: all 0.15s ease;
}

.reservation-calendar-modal .calendar-action--arrive:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}

.reservation-calendar-modal .calendar-action--edit:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.reservation-calendar-modal .calendar-action--noshow:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.reservation-calendar-modal .calendar-action--cancel:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.reservation-calendar-modal .calendar-action--reminder:hover:not(:disabled)[b-chtns19t9j] {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

/* ===== Progress Bar ===== */
.reservation-calendar-modal .calendar-progress-section[b-chtns19t9j] {
    margin-bottom: 16px;
}

.reservation-calendar-modal .progress-bar-container[b-chtns19t9j] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.reservation-calendar-modal .progress-bar-fill[b-chtns19t9j] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #6ee7b7 100%);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.reservation-calendar-modal .progress-label[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.reservation-calendar-modal .progress-complete[b-chtns19t9j] {
    color: #6ee7b7;
    font-weight: 600;
    animation: celebratePulse-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes celebratePulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== Next Reservation Alert ===== */
.reservation-calendar-modal .next-reservation-alert[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #a5b4fc;
}

.reservation-calendar-modal .next-reservation-alert.alert--imminent[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fcd34d;
    animation: imminentPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes imminentPulse-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

.reservation-calendar-modal .next-icon[b-chtns19t9j] {
    font-size: 1.1rem;
}

.reservation-calendar-modal .next-text strong[b-chtns19t9j] {
    color: #e2e8f0;
}

/* ===== Status Summary Pills ===== */
.reservation-calendar-modal .summary-pill[b-chtns19t9j] {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.reservation-calendar-modal .summary-pill--pending[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.reservation-calendar-modal .summary-pill--arrived[b-chtns19t9j] {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.reservation-calendar-modal .summary-pill--noshow[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ===== Next Reservation Card Highlight ===== */
.reservation-calendar-modal .calendar-res--next[b-chtns19t9j] {
    position: relative;
    border: 2px solid #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.reservation-calendar-modal .calendar-res--next[b-chtns19t9j]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), transparent, rgba(99, 102, 241, 0.3));
    animation: nextGlow-b-chtns19t9j 2s linear infinite;
    z-index: -1;
}

@keyframes nextGlow-b-chtns19t9j {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.reservation-calendar-modal .next-badge[b-chtns19t9j] {
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    animation: badgePop-b-chtns19t9j 0.3s ease-out;
}

@keyframes badgePop-b-chtns19t9j {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== Swipe Hint for Mobile ===== */
@media (max-width: 640px) {
    .reservation-calendar-modal .footer-hint[b-chtns19t9j] {
        display: none; /* Hide on very small screens to save space */
    }

    .reservation-calendar-modal .calendar-nav[b-chtns19t9j] {
        justify-content: center;
    }

    /* Reservation cards: stack time / info / actions vertically so the status
       pill + the 5 action icons don't overflow the ~360px content width. */
    .reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
        user-select: none;
        -webkit-user-select: none;
        flex-direction: column;
    }
    .reservation-calendar-modal .calendar-res-right[b-chtns19t9j] {
        align-items: flex-start;
        width: 100%;
        flex-shrink: 1;
    }
    .reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Summary pills + the quick-action pills (Llamar / WhatsApp / Ir…) wrap
       instead of overflowing or horizontally scrolling. */
    .reservation-calendar-modal .calendar-summary[b-chtns19t9j],
    .reservation-calendar-modal .quick-actions-bar[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .reservation-calendar-modal .quick-action-btn[b-chtns19t9j] {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
}

/* ===== Filter Chips ===== */
.reservation-calendar-modal .calendar-filters[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .filter-chip:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.reservation-calendar-modal .filter-chip.active[b-chtns19t9j] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.reservation-calendar-modal .filter-chip--pending.active[b-chtns19t9j] {
    background: #f59e0b;
    border-color: #f59e0b;
}

.reservation-calendar-modal .filter-chip--late.active[b-chtns19t9j] {
    background: #ef4444;
    border-color: #ef4444;
}

/* ===== Improved Call Button ===== */
.reservation-calendar-modal .calendar-call-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-call-btn:hover[b-chtns19t9j] {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
    transform: scale(1.05);
}

/* ===== Confetti Animation ===== */
.reservation-calendar-modal .confetti-container[b-chtns19t9j] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 300;
}

.reservation-calendar-modal .confetti[b-chtns19t9j] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: confettiFall-b-chtns19t9j 3s ease-out forwards;
}

.reservation-calendar-modal .confetti-0[b-chtns19t9j] { background: #ef4444; border-radius: 50%; }
.reservation-calendar-modal .confetti-1[b-chtns19t9j] { background: #f59e0b; border-radius: 2px; }
.reservation-calendar-modal .confetti-2[b-chtns19t9j] { background: #10b981; border-radius: 50%; }
.reservation-calendar-modal .confetti-3[b-chtns19t9j] { background: #3b82f6; border-radius: 2px; }
.reservation-calendar-modal .confetti-4[b-chtns19t9j] { background: #8b5cf6; border-radius: 50%; }
.reservation-calendar-modal .confetti-5[b-chtns19t9j] { background: #ec4899; border-radius: 2px; }

@keyframes confettiFall-b-chtns19t9j {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(500px) rotate(720deg);
        opacity: 0;
    }
}

/* ===== Filter Empty State ===== */
.reservation-calendar-modal .calendar-filter-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    animation: filterEmptyFadeIn-b-chtns19t9j 0.3s ease-out;
}

.reservation-calendar-modal .filter-empty-icon[b-chtns19t9j] {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: iconBounce-b-chtns19t9j 0.5s ease-out;
}

.reservation-calendar-modal .filter-empty-text[b-chtns19t9j] {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.reservation-calendar-modal .filter-clear-btn[b-chtns19t9j] {
    padding: 10px 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    color: #a5b4fc;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .filter-clear-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.25);
    color: white;
    transform: translateY(-2px);
}

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

@keyframes iconBounce-b-chtns19t9j {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ===== WhatsApp Button ===== */
.reservation-calendar-modal .calendar-whatsapp-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 12px;
    color: #25d366;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-whatsapp-btn:hover[b-chtns19t9j] {
    background: rgba(37, 211, 102, 0.25);
    color: #4aeb8b;
    transform: scale(1.05);
}

/* ===== Auto-refresh indicator ===== */
.reservation-calendar-modal .auto-refresh-indicator[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reservation-calendar-modal .auto-refresh-indicator.refreshing[b-chtns19t9j] {
    color: #6366f1;
}

.reservation-calendar-modal .auto-refresh-dot[b-chtns19t9j] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: dotPulse-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes dotPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ===== Copy & Email Buttons ===== */
.reservation-calendar-modal .calendar-copy-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-copy-btn:hover[b-chtns19t9j] {
    background: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
    transform: scale(1.05);
}

.reservation-calendar-modal .calendar-copy-btn:active[b-chtns19t9j] {
    transform: scale(0.95);
}

.reservation-calendar-modal .calendar-email-btn[b-chtns19t9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    color: #60a5fa;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-email-btn:hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    transform: scale(1.05);
}

/* ===== Enhanced NEXT Badge Animation ===== */
.reservation-calendar-modal .next-badge[b-chtns19t9j] {
    animation: nextBadgePulse-b-chtns19t9j 2s ease-in-out infinite, badgePop-b-chtns19t9j 0.3s ease-out;
}

@keyframes nextBadgePulse-b-chtns19t9j {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }
}

/* ===== Total Visits Badge ===== */
.reservation-calendar-modal .visits-badge[b-chtns19t9j] {
    font-size: 0.65rem;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 5px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ===== Contact Buttons Row ===== */
.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ===== Smooth Modal Scroll ===== */
.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    scroll-behavior: smooth;
}

/* ===== Accessibility: Focus States ===== */
.reservation-calendar-modal .calendar-action-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-call-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn:focus-visible[b-chtns19t9j],
.reservation-calendar-modal .filter-chip:focus-visible[b-chtns19t9j] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* ===== Time Range Display ===== */
.reservation-calendar-modal .calendar-res-time-range[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 400;
    margin-top: 2px;
}

/* ===== Undo Toast ===== */
.reservation-calendar-modal .calendar-toast--undo[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
}

.reservation-calendar-modal .calendar-toast--undo .undo-btn[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-toast--undo .undo-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ===== Keyboard Shortcuts Tooltip ===== */
.reservation-calendar-modal .footer-hint[b-chtns19t9j] {
    position: relative;
    cursor: help;
}

.reservation-calendar-modal .shortcuts-tooltip[b-chtns19t9j] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 14px;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 100;
    animation: tooltipFadeIn-b-chtns19t9j 0.15s ease-out;
}

.reservation-calendar-modal .footer-hint:hover .shortcuts-tooltip[b-chtns19t9j] {
    display: flex;
}

.reservation-calendar-modal .shortcut-row[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.reservation-calendar-modal .shortcut-key[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
    color: #a5b4fc;
    min-width: 24px;
    text-align: center;
}

.reservation-calendar-modal .shortcut-desc[b-chtns19t9j] {
    color: #94a3b8;
}

@keyframes tooltipFadeIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Quick Stats ===== */
.reservation-calendar-modal .calendar-quick-stats[b-chtns19t9j] {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
}

.reservation-calendar-modal .stat-item[b-chtns19t9j] {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reservation-calendar-modal .stat-item strong[b-chtns19t9j] {
    color: #e2e8f0;
    font-weight: 600;
}

/* ===== Mini Timeline ===== */
.reservation-calendar-modal .calendar-timeline[b-chtns19t9j] {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    margin-bottom: 8px;
    align-items: flex-end;
    height: 50px;
    overflow-x: auto;
}

.reservation-calendar-modal .timeline-slot[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.reservation-calendar-modal .slot-bar[b-chtns19t9j] {
    width: 100%;
    min-height: 4px;
    background: linear-gradient(to top, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8));
    border-radius: 3px 3px 0 0;
    transition: all 0.3s ease;
}

.reservation-calendar-modal .timeline-slot:hover .slot-bar[b-chtns19t9j] {
    background: linear-gradient(to top, rgba(99, 102, 241, 1), rgba(139, 92, 246, 1));
    transform: scaleY(1.1);
}

.reservation-calendar-modal .timeline-slot.current-hour .slot-bar[b-chtns19t9j] {
    background: linear-gradient(to top, rgba(34, 197, 94, 0.9), rgba(74, 222, 128, 0.9));
    animation: currentHourPulse-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .slot-label[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #64748b;
    margin-top: 3px;
}

.reservation-calendar-modal .timeline-slot.current-hour .slot-label[b-chtns19t9j] {
    color: #4ade80;
    font-weight: 600;
}

@keyframes currentHourPulse-b-chtns19t9j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Animated Card Entry ===== */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    animation: cardSlideIn-b-chtns19t9j 0.3s ease-out backwards;
}

.reservation-calendar-modal .calendar-res-card:nth-child(1)[b-chtns19t9j] { animation-delay: 0ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(2)[b-chtns19t9j] { animation-delay: 30ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(3)[b-chtns19t9j] { animation-delay: 60ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(4)[b-chtns19t9j] { animation-delay: 90ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(5)[b-chtns19t9j] { animation-delay: 120ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(6)[b-chtns19t9j] { animation-delay: 150ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(7)[b-chtns19t9j] { animation-delay: 180ms; }
.reservation-calendar-modal .calendar-res-card:nth-child(8)[b-chtns19t9j] { animation-delay: 210ms; }

@keyframes cardSlideIn-b-chtns19t9j {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== VIP Badge Animation ===== */
.reservation-calendar-modal .vip-badge--platinum[b-chtns19t9j] {
    animation: vipShimmer-b-chtns19t9j 2s ease-in-out infinite;
}

.reservation-calendar-modal .vip-badge--gold[b-chtns19t9j] {
    animation: vipGlow-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes vipShimmer-b-chtns19t9j {
    0%, 100% {
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3));
        background-size: 200% 100%;
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes vipGlow-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 3px rgba(250, 204, 21, 0.5); }
    50% { box-shadow: 0 0 8px rgba(250, 204, 21, 0.8); }
}

/* ===== Party Size Visual ===== */
.reservation-calendar-modal .party-icons[b-chtns19t9j] {
    display: inline-flex;
    gap: 1px;
    font-size: 0.65rem;
    opacity: 0.8;
}

.reservation-calendar-modal .party-icons .overflow[b-chtns19t9j] {
    font-size: 0.6rem;
    color: #94a3b8;
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for action buttons (minimum 44x44px) */
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    font-size: 1.1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tap feedback animation */
.reservation-calendar-modal .calendar-action-btn:active[b-chtns19t9j],
.reservation-calendar-modal .filter-chip:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-nav-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-call-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn:active[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Larger contact buttons for touch */
.reservation-calendar-modal .calendar-call-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-whatsapp-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-email-btn[b-chtns19t9j],
.reservation-calendar-modal .calendar-copy-btn[b-chtns19t9j] {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 1rem;
}

/* Better spacing between contact buttons */
.reservation-calendar-modal .calendar-res-meta[b-chtns19t9j] {
    gap: 8px;
}

/* Larger navigation buttons */
.reservation-calendar-modal .calendar-nav-btn[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
}

/* Larger filter chips for touch */
.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* More touch-friendly reservation cards */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j] {
    padding: 14px 16px;
    margin-bottom: 10px;
    touch-action: pan-y;
}

/* Swipe indicator hint */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 30px;
    background: transparent;
    border-radius: 0 4px 4px 0;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-res-card:active[b-chtns19t9j]::before {
    background: rgba(99, 102, 241, 0.5);
}

/* Better tap state for cards */
.reservation-calendar-modal .calendar-res-card:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.99);
}

/* Larger close button */
.reservation-calendar-modal .modal-close[b-chtns19t9j] {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.3rem;
}

/* Success ripple animation */
@keyframes successRipple-b-chtns19t9j {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.reservation-calendar-modal .calendar-action--arrive:active[b-chtns19t9j] {
    animation: successRipple-b-chtns19t9j 0.4s ease-out;
}

/* Swipe action overlays (hidden by default, shown on swipe) */
.reservation-calendar-modal .swipe-action-left[b-chtns19t9j],
.reservation-calendar-modal .swipe-action-right[b-chtns19t9j] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.reservation-calendar-modal .swipe-action-left[b-chtns19t9j] {
    left: 0;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.9) 0%, transparent 100%);
    border-radius: 12px 0 0 12px;
}

.reservation-calendar-modal .swipe-action-right[b-chtns19t9j] {
    right: 0;
    background: linear-gradient(-90deg, rgba(34, 197, 94, 0.9) 0%, transparent 100%);
    border-radius: 0 12px 12px 0;
}

/* Pull to refresh indicator */
.reservation-calendar-modal .pull-refresh-indicator[b-chtns19t9j] {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(99, 102, 241, 0.9);
    border-radius: 20px;
    font-size: 0.8rem;
    color: white;
    opacity: 0;
    transition: all 0.2s;
}

.reservation-calendar-modal .pull-refresh-indicator.visible[b-chtns19t9j] {
    top: 10px;
    opacity: 1;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    .reservation-calendar-modal .calendar-res-actions[b-chtns19t9j] {
        flex-direction: row;
        gap: 8px;
    }

    .reservation-calendar-modal .calendar-action-btn[b-chtns19t9j] {
        flex: 1;
        min-height: 48px;
    }

    .reservation-calendar-modal .modal-footer[b-chtns19t9j] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .reservation-calendar-modal .footer-hint[b-chtns19t9j] {
        width: 100%;
        order: 3;
        text-align: center;
    }

    .reservation-calendar-modal .btn-cancel[b-chtns19t9j],
    .reservation-calendar-modal .btn-submit[b-chtns19t9j] {
        flex: 1;
        min-height: 48px;
        font-size: 0.95rem;
    }

    .reservation-calendar-modal .calendar-timeline[b-chtns19t9j] {
        height: 60px;
    }

    .reservation-calendar-modal .timeline-slot[b-chtns19t9j] {
        min-width: 36px;
    }
}

/* Prevent text selection on touch */
.reservation-calendar-modal .calendar-res-card[b-chtns19t9j],
.reservation-calendar-modal .calendar-action-btn[b-chtns19t9j],
.reservation-calendar-modal .filter-chip[b-chtns19t9j] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for touch */
.reservation-calendar-modal .modal-body[b-chtns19t9j] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Better visual feedback for processing state */
.reservation-calendar-modal .calendar-action-spinner[b-chtns19t9j] {
    font-size: 1.3rem;
    animation: spinnerPulse-b-chtns19t9j 1s ease-in-out infinite;
}

@keyframes spinnerPulse-b-chtns19t9j {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========================================
   SKELETON LOADER FOR CALENDAR
   ======================================== */

.reservation-calendar-modal .calendar-skeleton[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.reservation-calendar-modal .calendar-skeleton-card[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    animation: skeletonShimmer-b-chtns19t9j 1.5s ease-in-out infinite;
}

.reservation-calendar-modal .calendar-skeleton-time[b-chtns19t9j] {
    width: 50px;
    height: 24px;
    background: rgba(71, 85, 105, 0.5);
    border-radius: 6px;
}

.reservation-calendar-modal .calendar-skeleton-content[b-chtns19t9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reservation-calendar-modal .calendar-skeleton-name[b-chtns19t9j] {
    width: 60%;
    height: 18px;
    background: rgba(71, 85, 105, 0.5);
    border-radius: 4px;
}

.reservation-calendar-modal .calendar-skeleton-meta[b-chtns19t9j] {
    width: 40%;
    height: 14px;
    background: rgba(71, 85, 105, 0.4);
    border-radius: 4px;
}

.reservation-calendar-modal .calendar-skeleton-actions[b-chtns19t9j] {
    display: flex;
    gap: 8px;
}

.reservation-calendar-modal .calendar-skeleton-btn[b-chtns19t9j] {
    width: 36px;
    height: 36px;
    background: rgba(71, 85, 105, 0.4);
    border-radius: 8px;
}

@keyframes skeletonShimmer-b-chtns19t9j {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Staggered skeleton animation */
.reservation-calendar-modal .calendar-skeleton-card:nth-child(1)[b-chtns19t9j] { animation-delay: 0ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(2)[b-chtns19t9j] { animation-delay: 100ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(3)[b-chtns19t9j] { animation-delay: 200ms; }
.reservation-calendar-modal .calendar-skeleton-card:nth-child(4)[b-chtns19t9j] { animation-delay: 300ms; }

/* ========================================
   ANIMATED EMPTY STATE
   ======================================== */

.reservation-calendar-modal .calendar-empty-icon[b-chtns19t9j] {
    animation: emptyBounce-b-chtns19t9j 2s ease-in-out infinite;
}

@keyframes emptyBounce-b-chtns19t9j {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.reservation-calendar-modal .calendar-empty-text[b-chtns19t9j] {
    animation: fadeInUp-b-chtns19t9j 0.5s ease-out;
}

/* Filter no-results state */
.reservation-calendar-modal .calendar-filter-empty[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
    animation: fadeIn-b-chtns19t9j 0.3s ease-out;
}

.reservation-calendar-modal .calendar-filter-empty-icon[b-chtns19t9j] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.7;
}

.reservation-calendar-modal .calendar-filter-empty-text[b-chtns19t9j] {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.reservation-calendar-modal .calendar-filter-reset[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .calendar-filter-reset:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.reservation-calendar-modal .calendar-filter-reset:active[b-chtns19t9j] {
    transform: scale(0.95);
}

/* ========================================
   PULL TO REFRESH INDICATOR
   ======================================== */

.reservation-calendar-modal .pull-refresh-indicator[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #94a3b8;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.reservation-calendar-modal .pull-refresh-indicator.pulling[b-chtns19t9j] {
    color: #a5b4fc;
}

.reservation-calendar-modal .pull-refresh-indicator.ready[b-chtns19t9j] {
    color: #4ade80;
}

.reservation-calendar-modal .pull-refresh-icon[b-chtns19t9j] {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.reservation-calendar-modal .pull-refresh-indicator.ready .pull-refresh-icon[b-chtns19t9j] {
    transform: rotate(180deg);
}

.reservation-calendar-modal .pull-refresh-indicator.refreshing .pull-refresh-icon[b-chtns19t9j] {
    animation: spin-b-chtns19t9j 0.8s linear infinite;
}

/* ========================================
   QUICK ACTION SHORTCUTS BAR
   ======================================== */

.reservation-calendar-modal .quick-actions-bar[b-chtns19t9j] {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reservation-calendar-modal .quick-actions-bar[b-chtns19t9j]::-webkit-scrollbar {
    display: none;
}

.reservation-calendar-modal .quick-action-btn[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 20px;
    color: #e2e8f0;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.reservation-calendar-modal .quick-action-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.reservation-calendar-modal .quick-action-btn:active[b-chtns19t9j] {
    transform: scale(0.95);
}

.reservation-calendar-modal .quick-action-btn.highlighted[b-chtns19t9j] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

/* ========================================
   SWIPE NAVIGATION HINT
   ======================================== */

.reservation-calendar-modal .swipe-hint[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 8px;
    animation: swipeHintFade-b-chtns19t9j 3s ease-in-out 2s forwards;
}

.reservation-calendar-modal .swipe-hint-arrows[b-chtns19t9j] {
    display: flex;
    gap: 4px;
    animation: swipeArrows-b-chtns19t9j 1.5s ease-in-out infinite;
}

@keyframes swipeArrows-b-chtns19t9j {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes swipeHintFade-b-chtns19t9j {
    to { opacity: 0; pointer-events: none; }
}

@keyframes fadeIn-b-chtns19t9j {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ========================================
   HIGHLIGHT FLASH ANIMATION
   ======================================== */

.reservation-calendar-modal .calendar-res-card.highlight-flash[b-chtns19t9j] {
    animation: highlightFlash-b-chtns19t9j 1.5s ease-out;
}

@keyframes highlightFlash-b-chtns19t9j {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
        transform: scale(1.02);
    }
    30% {
        box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.4);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

/* ========================================
   ARRIVAL OPTIONS MODAL (Direct Seat vs Waitlist)
   ======================================== */

.arrival-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    background: linear-gradient(145deg, #1e1e2e 0%, #252536 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    z-index: 10001; /* above .modal-backdrop:10000 (was 1001 — backdrop covered it) */
    overflow: hidden;
}

.arrival-modal .modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arrival-modal .modal-header h3[b-chtns19t9j] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.arrival-modal .modal-close[b-chtns19t9j] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.arrival-modal .modal-close:hover[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.arrival-modal .modal-body[b-chtns19t9j] {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 70px);
}

.arrival-modal .arrival-customer-info[b-chtns19t9j] {
    text-align: center;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arrival-modal .customer-name-large[b-chtns19t9j] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.arrival-modal .reservation-details[b-chtns19t9j] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.arrival-modal .reservation-details span[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arrival-modal .arrival-options[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.arrival-modal .arrival-option[b-chtns19t9j] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s;
}

.arrival-modal .arrival-option:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.arrival-modal .option-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.arrival-modal .option-icon[b-chtns19t9j] {
    font-size: 1.5rem;
}

.arrival-modal .option-info strong[b-chtns19t9j] {
    display: block;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2px;
}

.arrival-modal .option-info small[b-chtns19t9j] {
    font-size: 0.8rem;
    color: #64748b;
}

.arrival-modal .arrival-table-grid[b-chtns19t9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.arrival-modal .arrival-table-btn[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.arrival-modal .arrival-table-btn:hover[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.arrival-modal .arrival-table-btn.selected[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.arrival-modal .arrival-table-btn.recommended[b-chtns19t9j]::after {
    content: "★";
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.7rem;
    color: #fbbf24;
}

.arrival-modal .arrival-table-btn .table-label[b-chtns19t9j] {
    font-size: 0.95rem;
    font-weight: 600;
}

.arrival-modal .arrival-table-btn .table-seats[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
}

.arrival-modal .arrival-table-btn .fit-indicator[b-chtns19t9j] {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.65rem;
    color: #4ade80;
}

/* Table combination styles */
.arrival-modal .combination-notice[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #fcd34d;
}

.arrival-modal .combination-notice .notice-icon[b-chtns19t9j] {
    font-size: 1.1rem;
}

.arrival-modal .arrival-table-grid--combinations[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrival-modal .arrival-table-btn--combo[b-chtns19t9j] {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    min-height: auto;
}

.arrival-modal .arrival-table-btn--combo .table-label[b-chtns19t9j] {
    font-size: 0.9rem;
}

.arrival-modal .arrival-table-btn--combo .table-seats[b-chtns19t9j] {
    color: #94a3b8;
}

.arrival-modal .arrival-table-btn--combo .table-zone[b-chtns19t9j] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

.arrival-modal .btn-arrival[b-chtns19t9j] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.arrival-modal .btn-arrival--seat[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(74, 222, 128, 0.3));
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.arrival-modal .btn-arrival--seat:hover:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(74, 222, 128, 0.4));
}

.arrival-modal .btn-arrival--seat:disabled[b-chtns19t9j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.arrival-modal .btn-arrival--waitlist[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.arrival-modal .btn-arrival--waitlist:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(99, 102, 241, 0.3);
}

.arrival-modal .arrival-divider[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 0.85rem;
}

.arrival-modal .arrival-divider[b-chtns19t9j]::before,
.arrival-modal .arrival-divider[b-chtns19t9j]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.arrival-modal .loading-tables-inline[b-chtns19t9j],
.arrival-modal .no-tables-inline[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    color: #64748b;
    font-size: 0.85rem;
}

.arrival-modal .no-tables-inline[b-chtns19t9j] {
    color: #fbbf24;
}

/* =============================================
   PAX MODAL - Guest count selection
   ============================================= */

.pax-modal-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-chtns19t9j 0.15s ease;
    touch-action: none; /* Prevent scroll-through on touch */
}

.pax-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 340px;
    max-width: 90vw;
    max-height: 90vh; /* Fit in viewport on small/landscape screens */
    overflow-y: auto; /* Scroll if content overflows */
    z-index: 1001;
    animation: scaleIn-b-chtns19t9j 0.2s ease;
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

@keyframes scaleIn-b-chtns19t9j {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pax-modal-backdrop[b-chtns19t9j],
    .pax-modal[b-chtns19t9j] {
        animation: none;
    }
    .pax-spinner[b-chtns19t9j] {
        animation: none;
        border-top-color: transparent;
    }
}

.pax-modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pax-table-icon[b-chtns19t9j] {
    font-size: 24px;
}

.pax-table-label[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
}

.pax-modal-close[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.pax-modal-close:active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
}

.pax-modal-body[b-chtns19t9j] {
    padding: 24px 20px;
}

.pax-question[b-chtns19t9j] {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 20px;
}

.pax-selector[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.pax-btn[b-chtns19t9j] {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-btn:not(:disabled):hover[b-chtns19t9j] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.pax-btn:not(:disabled):active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(59, 130, 246, 0.3);
}

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

.pax-value[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.pax-number[b-chtns19t9j] {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.pax-label[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8; /* Improved contrast for accessibility */
    margin-top: 4px;
}

.pax-quick-select[b-chtns19t9j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pax-quick-btn[b-chtns19t9j] {
    min-width: 48px;
    height: 48px;
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-quick-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.pax-quick-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
}

.pax-quick-btn.selected[b-chtns19t9j] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Focus state for keyboard navigation */
.pax-modal:focus[b-chtns19t9j] {
    outline: none;
}

.pax-quick-btn:focus-visible[b-chtns19t9j],
.pax-btn:focus-visible[b-chtns19t9j],
.pax-confirm-btn:focus-visible[b-chtns19t9j],
.pax-cancel-btn:focus-visible[b-chtns19t9j] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.pax-modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pax-cancel-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 20px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-cancel-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.pax-confirm-btn[b-chtns19t9j] {
    flex: 1.5;
    padding: 14px 20px;
    min-height: 48px;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.pax-confirm-btn:hover[b-chtns19t9j] {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.pax-confirm-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* Disabled state for confirm button (loading) */
.pax-confirm-btn:disabled[b-chtns19t9j] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Active/pressed states for touch feedback */
.pax-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(0.95);
    background: rgba(59, 130, 246, 0.3);
}

.pax-quick-btn:active[b-chtns19t9j] {
    transform: scale(0.92);
}

.pax-cancel-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
}

/* Loading spinner */
.pax-spinner[b-chtns19t9j] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pax-spin-b-chtns19t9j 0.8s linear infinite;
}

@keyframes pax-spin-b-chtns19t9j {
    to {
        transform: rotate(360deg);
    }
}

/* =============================================
   NOTE MODAL - Table note editing
   ============================================= */

.note-modal-backdrop[b-chtns19t9j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-chtns19t9j 0.15s ease;
    touch-action: none;
}

.note-modal[b-chtns19t9j] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 380px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1001;
    animation: scaleIn-b-chtns19t9j 0.2s ease;
    overscroll-behavior: contain;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .note-modal-backdrop[b-chtns19t9j],
    .note-modal[b-chtns19t9j] {
        animation: none;
    }
}

.note-modal-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.note-modal-icon[b-chtns19t9j] {
    font-size: 24px;
}

.note-modal-title[b-chtns19t9j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-modal-close[b-chtns19t9j] {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-modal-close:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.note-modal-close:active[b-chtns19t9j] {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
}

.note-modal-body[b-chtns19t9j] {
    padding: 20px;
}

.note-modal-input[b-chtns19t9j] {
    width: 100%;
    min-height: 80px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #f8fafc;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.note-modal-input[b-chtns19t9j]::placeholder {
    color: #64748b;
}

.note-modal-input:focus[b-chtns19t9j] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.note-modal-counter[b-chtns19t9j] {
    text-align: right;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 6px;
}

.note-modal-error[b-chtns19t9j] {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.note-modal-footer[b-chtns19t9j] {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.note-cancel-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-cancel-btn:hover[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.note-cancel-btn:active[b-chtns19t9j] {
    background: rgba(255, 255, 255, 0.1);
}

.note-clear-btn[b-chtns19t9j] {
    flex: 1;
    padding: 14px 16px;
    min-height: 48px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    color: #f87171;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-clear-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.note-clear-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: scale(0.97);
}

.note-clear-btn:disabled[b-chtns19t9j] {
    opacity: 0.3;
    cursor: not-allowed;
}

.note-save-btn[b-chtns19t9j] {
    flex: 1.5;
    padding: 14px 16px;
    min-height: 48px;
    border: none;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.note-save-btn:hover:not(:disabled)[b-chtns19t9j] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.note-save-btn:active:not(:disabled)[b-chtns19t9j] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.note-save-btn:disabled[b-chtns19t9j] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Focus states for keyboard nav */
.note-modal:focus[b-chtns19t9j] {
    outline: none;
}

.note-cancel-btn:focus-visible[b-chtns19t9j],
.note-clear-btn:focus-visible[b-chtns19t9j],
.note-save-btn:focus-visible[b-chtns19t9j],
.note-modal-close:focus-visible[b-chtns19t9j] {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ===== Compact layout for small/4:3 screens (1024x768 touch monitors) ===== */
@media (max-width: 1100px) {
    .tp-card[b-chtns19t9j],
    .tables-docked[b-chtns19t9j] {
        width: 240px;
    }

    .tp-top[b-chtns19t9j] {
        padding: 8px 10px;
        gap: 6px;
    }

    .tp-title[b-chtns19t9j] {
        font-size: 1rem;
    }

    /* Single column table grid at narrow widths */
    .tp-grid[b-chtns19t9j] {
        grid-template-columns: 1fr !important;
        gap: 6px;
        padding: 6px;
    }

    .tp-row[b-chtns19t9j] {
        padding: 8px 10px;
        min-height: 44px;
    }

    .tp-row .tp-name[b-chtns19t9j] {
        font-size: 0.9rem;
    }

    .tp-row .tp-total[b-chtns19t9j] {
        font-size: 0.85rem;
    }

    /* Compact zone tabs */
    .tp-zones[b-chtns19t9j] {
        gap: 4px;
        padding: 4px 8px;
    }

    .tp-zone-btn[b-chtns19t9j] {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

/* Very narrow screens — squeeze docked panel further */
@media (max-width: 850px) {
    .tp-card[b-chtns19t9j],
    .tables-docked[b-chtns19t9j] {
        width: 200px;
    }

    .tp-top[b-chtns19t9j] {
        padding: 6px 8px;
    }

    .tp-title[b-chtns19t9j] {
        font-size: 0.9rem;
    }

    .tp-search[b-chtns19t9j] {
        min-width: 0;
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .tp-body[b-chtns19t9j] {
        padding: 8px;
    }
}

/* ========== Para Llevar (takeaway) tab ========== */
/* Tab pill styling — match the existing edge-tabs--functions visual
   language (Eats / Delivery / Waitlist / Reservas) so the row reads
   as a coherent set. The :deep ancestor lets us style the tab from
   inside the scoped CSS without losing the parent .edge-tabs--functions
   layout rules that live in the same file above. */
[b-chtns19t9j] .edge-tab--takeaway {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
[b-chtns19t9j] .edge-tab--takeaway.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.30);
}
[b-chtns19t9j] .edge-tab--takeaway.has-pending:not(.active) {
    animation: pulse-amber-b-chtns19t9j 2s ease-in-out infinite;
}
[b-chtns19t9j] .takeaway-badge {
    margin-left: 4px;
    padding: 1px 6px;
    background: #f59e0b;
    color: #1a1400;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}
[b-chtns19t9j] .edge-tab--takeaway.active .takeaway-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
@keyframes pulse-amber-b-chtns19t9j {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.30); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* Body — wrapper around the takeaway list + new-order CTA. Flex
   column so the header stays sticky-feeling at the top while the
   list scrolls beneath. */
.takeaway-mode[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
}

.takeaway-mode .mode-header[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.takeaway-mode .mode-header-title[b-chtns19t9j] {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.takeaway-new-btn[b-chtns19t9j] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    transition: filter .12s ease, transform .08s ease;
}
.takeaway-new-btn:hover[b-chtns19t9j] { filter: brightness(1.08); }
.takeaway-new-btn:active[b-chtns19t9j] { transform: translateY(1px); }

.takeaway-loading[b-chtns19t9j] {
    color: #94a3b8;
    text-align: center;
    padding: 24px 8px;
    font-size: 0.9rem;
}

.takeaway-empty[b-chtns19t9j] {
    text-align: center;
    padding: 28px 12px;
    color: #94a3b8;
}
.takeaway-empty-icon[b-chtns19t9j] {
    font-size: 2.4rem;
    margin-bottom: 8px;
    opacity: 0.85;
}
.takeaway-empty-title[b-chtns19t9j] {
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 4px;
}
.takeaway-empty-desc[b-chtns19t9j] {
    font-size: 0.85rem;
    color: #94a3b8;
}
.takeaway-empty-desc strong[b-chtns19t9j] {
    color: #f59e0b;
    font-weight: 700;
}

.takeaway-list[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.takeaway-row[b-chtns19t9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background .12s ease, border-color .12s ease;
}
.takeaway-row:hover[b-chtns19t9j] {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}
.takeaway-row.is-paid[b-chtns19t9j] {
    opacity: 0.55;
}

.takeaway-row-main[b-chtns19t9j] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.takeaway-row-label[b-chtns19t9j] {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.takeaway-row-meta[b-chtns19t9j] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}
.takeaway-row-total[b-chtns19t9j] {
    font-weight: 800;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Per-pill "Cancelar pedido" affordance on the Para Llevar list (overlays the
   row's right edge; the row keeps padding-right so the total clears it). */
.tw-cancel-wrap[b-chtns19t9j] {
    position: relative;
}
.tw-cancel-wrap .takeaway-row[b-chtns19t9j] {
    padding-right: 42px;
}
.tw-cancel-btn[b-chtns19t9j] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.tw-cancel-btn:hover[b-chtns19t9j],
.tw-cancel-btn:focus-visible[b-chtns19t9j] {
    opacity: 1;
    background: rgba(239, 68, 68, 0.32);
    color: #fff;
}
/* /Pages/Solutions.razor.rz.scp.css */
[b-rbhkcub3ro] .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

[b-rbhkcub3ro] .bullets {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-rbhkcub3ro] .bullets li {
    color: #cbd5e1;
    font-size: 0.98rem;
    line-height: 1.55;
    padding-left: 24px;
    position: relative;
}

[b-rbhkcub3ro] .bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 800;
}

[b-rbhkcub3ro] .bullets strong {
    color: #f1f5f9;
}

/* ===== HERO ===== */

[b-rbhkcub3ro] .sol-hero {
    padding: 96px 0 56px;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.10) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.08) 0%, transparent 50%);
}

[b-rbhkcub3ro] .hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

[b-rbhkcub3ro] .sol-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 900;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[b-rbhkcub3ro] .hero-sub {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.55;
}

[b-rbhkcub3ro] .quick-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

[b-rbhkcub3ro] .quick-jump a {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s;
}

[b-rbhkcub3ro] .quick-jump a:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[b-rbhkcub3ro] .quick-jump-new {
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fde047 !important;
}

[b-rbhkcub3ro] .new-pill {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* ===== SOLUTION SECTIONS ===== */

[b-rbhkcub3ro] .sol-section {
    padding: 80px 0;
}

[b-rbhkcub3ro] .sol-section.sol-alt {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .sol-buffet {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.2);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

[b-rbhkcub3ro] .sol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

[b-rbhkcub3ro] .sol-flip .sol-text {
    order: 2;
}

[b-rbhkcub3ro] .sol-flip .sol-visual {
    order: 1;
}

[b-rbhkcub3ro] .sol-eyebrow {
    display: inline-block;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 4px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 999px;
}

[b-rbhkcub3ro] .sol-eyebrow.buffet-eyebrow {
    color: #fde047;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}

[b-rbhkcub3ro] .sol-text h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #f1f5f9;
}

[b-rbhkcub3ro] .sol-text > p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

[b-rbhkcub3ro] .sol-cta-row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

[b-rbhkcub3ro] .btn-primary,
[b-rbhkcub3ro] .btn-secondary {
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
}

[b-rbhkcub3ro] .btn-primary {
    background: linear-gradient(135deg, #c62828 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

[b-rbhkcub3ro] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);
}

[b-rbhkcub3ro] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[b-rbhkcub3ro] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== VISUAL: BAR / TICKET ===== */

[b-rbhkcub3ro] .sol-visual {
    display: flex;
    justify-content: center;
}

[b-rbhkcub3ro] .visual-stack {
    transform: perspective(1000px) rotateX(4deg) rotateY(-4deg);
}

[b-rbhkcub3ro] .ticket {
    width: 280px;
    background: #fffaf0;
    color: #1f2937;
    padding: 24px 20px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 5px);
}

[b-rbhkcub3ro] .ticket-h {
    text-align: center;
    font-weight: 700;
    border-bottom: 1px dashed #475569;
    padding-bottom: 10px;
    margin-bottom: 12px;
    letter-spacing: 0.06em;
}

[b-rbhkcub3ro] .ticket-l {
    padding: 4px 0;
}

[b-rbhkcub3ro] .ticket-t {
    border-top: 1px dashed #475569;
    padding-top: 10px;
    margin-top: 12px;
    font-weight: 700;
    text-align: right;
    font-size: 1rem;
}

/* ===== VISUAL: KITCHEN BOARD ===== */

[b-rbhkcub3ro] .kitchen-board {
    width: 100%;
    max-width: 360px;
    background: #0a0c12;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-rbhkcub3ro] .kb-header {
    color: #34d399;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    margin-bottom: 12px;
    letter-spacing: 0.06em;
}

[b-rbhkcub3ro] .kb-ticket {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #34d399;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
}

[b-rbhkcub3ro] .kb-ticket.urgent {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

[b-rbhkcub3ro] .kb-table {
    color: #f1f5f9;
    font-weight: 700;
    margin-bottom: 8px;
}

[b-rbhkcub3ro] .kb-line {
    color: #cbd5e1;
    font-size: 0.9rem;
    padding: 2px 0;
}

[b-rbhkcub3ro] .kb-time {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-family: 'Courier New', monospace;
}

/* ===== VISUAL: BUFFET QR MOCK ===== */

[b-rbhkcub3ro] .visual-buffet {
    perspective: 1000px;
}

[b-rbhkcub3ro] .qr-mock {
    width: 100%;
    max-width: 340px;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 28px;
    border: 8px solid #1f2937;
    padding: 16px 14px;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.6);
    transform: rotate(-2deg);
}

[b-rbhkcub3ro] .qr-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

[b-rbhkcub3ro] .round-pill {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-rbhkcub3ro] .time-left {
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 700;
}

[b-rbhkcub3ro] .qr-mock-title {
    color: #f1f5f9;
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 12px;
}

[b-rbhkcub3ro] .qr-mock-cats {
    display: flex;
    gap: 6px;
    overflow-x: hidden;
    margin-bottom: 14px;
}

[b-rbhkcub3ro] .qr-mock-cats .cat {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    flex-shrink: 0;
}

[b-rbhkcub3ro] .qr-mock-cats .cat.active {
    background: #f59e0b;
    color: #0f172a;
    font-weight: 700;
}

[b-rbhkcub3ro] .qr-mock-cats .cat.drinks {
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

[b-rbhkcub3ro] .qr-mock-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
}

[b-rbhkcub3ro] .qr-mock-item .i-name {
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
}

[b-rbhkcub3ro] .qr-mock-item .i-meta {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 2px;
}

[b-rbhkcub3ro] .premium-pill {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-left: 6px;
    vertical-align: middle;
}

[b-rbhkcub3ro] .qr-mock-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-size: 0.85rem;
}

[b-rbhkcub3ro] .qr-mock-bar strong {
    color: #f59e0b;
    font-size: 1.1rem;
}

[b-rbhkcub3ro] .qr-mock-cta {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ===== VISUAL: CHAIN ===== */

[b-rbhkcub3ro] .chain-grid {
    width: 100%;
    max-width: 380px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

[b-rbhkcub3ro] .chain-loc {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .chain-loc:last-child {
    border-bottom: 0;
}

[b-rbhkcub3ro] .chain-name {
    color: #f1f5f9;
    font-size: 0.95rem;
    font-weight: 600;
}

[b-rbhkcub3ro] .chain-amount {
    color: #34d399;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 4px 0 8px;
    letter-spacing: -0.01em;
}

[b-rbhkcub3ro] .chain-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

[b-rbhkcub3ro] .chain-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
}

/* ===== CTA STRIP ===== */

[b-rbhkcub3ro] .cta-strip {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

[b-rbhkcub3ro] .cta-strip h2 {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    color: #f1f5f9;
}

[b-rbhkcub3ro] .cta-strip p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 32px;
}

[b-rbhkcub3ro] .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 880px) {
    [b-rbhkcub3ro] .sol-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    [b-rbhkcub3ro] .sol-flip .sol-text { order: unset; }
    [b-rbhkcub3ro] .sol-flip .sol-visual { order: unset; }
    [b-rbhkcub3ro] .sol-section {
        padding: 56px 0;
    }
    [b-rbhkcub3ro] .sol-hero {
        padding: 64px 0 40px;
    }
}
/* /Pages/SupplierPortal.razor.rz.scp.css */
.portal-container[b-bzwpkvlv0g] {
    min-height: 100vh;
    background: var(--bg-secondary, #f8fafc);
}

.portal-header[b-bzwpkvlv0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.header-brand h1[b-bzwpkvlv0g] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0;
}

.supplier-name[b-bzwpkvlv0g] {
    font-size: 0.875rem;
    color: var(--primary, #4f46e5);
    font-weight: 500;
}

.header-info[b-bzwpkvlv0g] {
    text-align: right;
}

.restaurant-name[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}

.restaurant-phone[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

/* Summary Cards */
.summary-cards[b-bzwpkvlv0g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2rem;
}

.summary-card[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-icon[b-bzwpkvlv0g] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.card-icon.pending[b-bzwpkvlv0g] {
    background: #fef3c7;
    color: #d97706;
}

.card-icon.value[b-bzwpkvlv0g] {
    background: #dbeafe;
    color: #2563eb;
}

.card-value[b-bzwpkvlv0g] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
}

.card-label[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

/* Orders Section */
.orders-section[b-bzwpkvlv0g] {
    padding: 0 2rem 2rem;
}

.orders-section h2[b-bzwpkvlv0g] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 1rem 0;
}

.orders-list[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.order-card[b-bzwpkvlv0g] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.order-card:hover[b-bzwpkvlv0g] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.order-header[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 1rem;
}

.order-info[b-bzwpkvlv0g] {
    flex: 1;
}

.order-number[b-bzwpkvlv0g] {
    display: block;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.order-date[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
}

.order-status[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-badge[b-bzwpkvlv0g] {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge.sent[b-bzwpkvlv0g] {
    background: #dbeafe;
    color: #2563eb;
}

.status-badge.partialreceived[b-bzwpkvlv0g] {
    background: #ede9fe;
    color: #7c3aed;
}

.order-total[b-bzwpkvlv0g] {
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
}

.chevron[b-bzwpkvlv0g] {
    transition: transform 0.2s;
    color: var(--text-secondary, #94a3b8);
}

.order-card.expanded .chevron[b-bzwpkvlv0g] {
    transform: rotate(180deg);
}

/* Order Details */
.order-details[b-bzwpkvlv0g] {
    padding: 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    cursor: default;
}

.detail-row[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-label[b-bzwpkvlv0g] {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
}

.detail-value.editable[b-bzwpkvlv0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-value input[type="date"][b-bzwpkvlv0g] {
    padding: 0.5rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    font-size: 0.875rem;
}

.btn-save[b-bzwpkvlv0g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

/* Order Lines Table */
.order-lines[b-bzwpkvlv0g] {
    overflow-x: auto;
    margin: 1rem 0;
}

.order-lines table[b-bzwpkvlv0g] {
    width: 100%;
    border-collapse: collapse;
}

.order-lines th[b-bzwpkvlv0g] {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    background: var(--bg-secondary, #f8fafc);
}

.order-lines td[b-bzwpkvlv0g] {
    padding: 0.75rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}

/* Order Actions */
.order-actions[b-bzwpkvlv0g] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.btn[b-bzwpkvlv0g] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn.primary[b-bzwpkvlv0g] {
    background: var(--primary, #4f46e5);
    border: none;
    color: white;
}

.btn.primary:hover[b-bzwpkvlv0g] {
    background: var(--primary-dark, #4338ca);
}

.btn.outline[b-bzwpkvlv0g] {
    background: white;
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-primary, #1a1a2e);
}

/* Order Notes */
.order-notes[b-bzwpkvlv0g] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
}

.order-notes h4[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0 0 0.5rem 0;
}

.order-notes pre[b-bzwpkvlv0g] {
    font-size: 0.8125rem;
    color: var(--text-primary, #1a1a2e);
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
}

/* No Orders */
.no-orders[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    text-align: center;
}

.no-orders svg[b-bzwpkvlv0g] {
    color: #10b981;
    margin-bottom: 1rem;
}

.no-orders p[b-bzwpkvlv0g] {
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* Loading & Error States */
.loading-state[b-bzwpkvlv0g], .error-state[b-bzwpkvlv0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.error-state svg[b-bzwpkvlv0g] {
    color: #f59e0b;
    margin-bottom: 1rem;
}

.error-state h2[b-bzwpkvlv0g] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 0.5rem 0;
}

.error-state p[b-bzwpkvlv0g] {
    color: var(--text-secondary, #64748b);
    max-width: 400px;
}

.spinner[b-bzwpkvlv0g] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary, #4f46e5);
    border-radius: 50%;
    animation: spin-b-bzwpkvlv0g 1s linear infinite;
}

@keyframes spin-b-bzwpkvlv0g {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal-overlay[b-bzwpkvlv0g] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal[b-bzwpkvlv0g] {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
}

.modal-header[b-bzwpkvlv0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.modal-header h3[b-bzwpkvlv0g] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.close-btn[b-bzwpkvlv0g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
}

.modal-body[b-bzwpkvlv0g] {
    padding: 1.25rem;
}

.modal-body textarea[b-bzwpkvlv0g] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9375rem;
    resize: vertical;
}

.form-group[b-bzwpkvlv0g] {
    margin-bottom: 1rem;
}

.form-group label[b-bzwpkvlv0g] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-input[b-bzwpkvlv0g] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 0.9375rem;
}

.modal-footer[b-bzwpkvlv0g] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Responsive */
@media (max-width: 768px) {
    .portal-header[b-bzwpkvlv0g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-info[b-bzwpkvlv0g] {
        text-align: left;
    }

    .summary-cards[b-bzwpkvlv0g] {
        padding: 1rem;
    }

    .orders-section[b-bzwpkvlv0g] {
        padding: 0 1rem 1rem;
    }

    .order-header[b-bzwpkvlv0g] {
        flex-wrap: wrap;
    }

    .order-status[b-bzwpkvlv0g] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
    .portal-container[b-bzwpkvlv0g] {
        background: #0f172a;
    }

    .portal-header[b-bzwpkvlv0g] {
        background: #1e293b;
        border-color: #334155;
    }

    .header-brand h1[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .supplier-name[b-bzwpkvlv0g] {
        color: #818cf8;
    }

    .restaurant-name[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .restaurant-phone[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .summary-card[b-bzwpkvlv0g] {
        background: #1e293b;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    .card-icon.pending[b-bzwpkvlv0g] {
        background: #451a03;
        color: #fbbf24;
    }

    .card-icon.value[b-bzwpkvlv0g] {
        background: #1e3a5f;
        color: #60a5fa;
    }

    .card-value[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .card-label[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .orders-section h2[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .order-card[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .order-card:hover[b-bzwpkvlv0g] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .order-number[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .order-date[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .order-total[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .chevron[b-bzwpkvlv0g] {
        color: #64748b;
    }

    .order-details[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .detail-label[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .detail-value input[type="date"][b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .order-lines th[b-bzwpkvlv0g] {
        background: #0f172a;
        color: #94a3b8;
    }

    .order-lines td[b-bzwpkvlv0g] {
        color: #e2e8f0;
        border-color: #334155;
    }

    .order-actions[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .btn.outline[b-bzwpkvlv0g] {
        background: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }

    .order-notes[b-bzwpkvlv0g] {
        background: #0f172a;
    }

    .order-notes h4[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .order-notes pre[b-bzwpkvlv0g] {
        color: #e2e8f0;
    }

    .no-orders[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .no-orders p[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .loading-state[b-bzwpkvlv0g], .error-state[b-bzwpkvlv0g] {
        color: #94a3b8;
    }

    .error-state h2[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .spinner[b-bzwpkvlv0g] {
        border-color: #334155;
        border-top-color: #3b82f6;
    }

    .modal[b-bzwpkvlv0g] {
        background: #1e293b;
    }

    .modal-header[b-bzwpkvlv0g] {
        border-color: #334155;
    }

    .modal-header h3[b-bzwpkvlv0g] {
        color: #f1f5f9;
    }

    .close-btn[b-bzwpkvlv0g] {
        background: #334155;
        color: #94a3b8;
    }

    .modal-body textarea[b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .form-group label[b-bzwpkvlv0g] {
        color: #e2e8f0;
    }

    .form-input[b-bzwpkvlv0g] {
        background: #0f172a;
        border-color: #334155;
        color: #f1f5f9;
    }

    .modal-footer[b-bzwpkvlv0g] {
        border-color: #334155;
    }
}
/* /Pages/WaitlistJoin.razor.rz.scp.css */
/* ==================== Variables ==================== */
.waitlist-join-page[b-5kmfibb4u3] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0 0 2rem;
    transition: background 0.3s, color 0.3s;
}

.waitlist-join-page.dark[b-5kmfibb4u3] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-5kmfibb4u3],
.error-screen[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-5kmfibb4u3] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-5kmfibb4u3 1s linear infinite;
}

.spinner-small[b-5kmfibb4u3] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5kmfibb4u3 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-5kmfibb4u3 {
    to { transform: rotate(360deg); }
}

.error-icon[b-5kmfibb4u3] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.btn-retry[b-5kmfibb4u3] {
    margin-top: 1rem;
    padding: 12px 24px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* ==================== Header ==================== */
.waitlist-header[b-5kmfibb4u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.restaurant-branding[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.restaurant-branding .logo[b-5kmfibb4u3] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.restaurant-branding h1[b-5kmfibb4u3] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.header-actions[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle[b-5kmfibb4u3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
}

.language-selector select[b-5kmfibb4u3] {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
}

/* ==================== Welcome Message ==================== */
.welcome-message[b-5kmfibb4u3] {
    padding: 12px 1.25rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Queue Status Card ==================== */
.queue-status-card[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.queue-stat[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.queue-stat .stat-number[b-5kmfibb4u3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}

.queue-stat .stat-label[b-5kmfibb4u3] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.queue-divider[b-5kmfibb4u3] {
    width: 1px;
    height: 48px;
    background: var(--border);
}

/* ==================== Join Form ==================== */
.join-form[b-5kmfibb4u3] {
    margin: 0 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.join-form h2[b-5kmfibb4u3] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    text-align: center;
}

.form-group[b-5kmfibb4u3] {
    margin-bottom: 1.25rem;
}

.form-group label[b-5kmfibb4u3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.form-group label .required[b-5kmfibb4u3] {
    color: var(--error);
}

.form-group label .badge-notify[b-5kmfibb4u3] {
    display: inline-block;
    font-size: 0.7rem;
    background: var(--brand-primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}

.form-group input[b-5kmfibb4u3],
.form-group textarea[b-5kmfibb4u3] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-5kmfibb4u3],
.form-group textarea:focus[b-5kmfibb4u3] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.input-hint[b-5kmfibb4u3] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Validation styles */
.input-invalid[b-5kmfibb4u3] {
    border-color: var(--error) !important;
}

.validation-hint[b-5kmfibb4u3] {
    display: block;
    font-size: 0.75rem;
    color: var(--error);
    margin-top: 4px;
}

/* Phone Input */
.phone-input-wrapper[b-5kmfibb4u3] {
    display: flex;
    align-items: stretch;
}

.phone-prefix[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.phone-input-wrapper input[b-5kmfibb4u3] {
    border-radius: 0 10px 10px 0;
    flex: 1;
}

/* ==================== Party Size Selector ==================== */
.party-size-selector[b-5kmfibb4u3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.party-btn[b-5kmfibb4u3] {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.party-btn:hover[b-5kmfibb4u3] {
    border-color: var(--brand-primary);
}

.party-btn.selected[b-5kmfibb4u3] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

.large-party-input[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.large-party-input input[b-5kmfibb4u3] {
    width: 80px;
    text-align: center;
}

/* ==================== Zone Selector ==================== */
.zone-selector[b-5kmfibb4u3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zone-btn[b-5kmfibb4u3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-btn:hover[b-5kmfibb4u3] {
    border-color: var(--brand-primary);
}

.zone-btn.selected[b-5kmfibb4u3] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: white;
}

/* ==================== Special Requests ==================== */
.expand-btn[b-5kmfibb4u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.expand-btn .chevron[b-5kmfibb4u3] {
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.expand-btn .chevron.expanded[b-5kmfibb4u3] {
    transform: rotate(90deg);
}

.form-group textarea[b-5kmfibb4u3] {
    resize: none;
    margin-top: 8px;
}

/* ==================== Submit Button ==================== */
.btn-join[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    margin-top: 1.5rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-join:hover:not(:disabled)[b-5kmfibb4u3] {
    background: var(--brand-primary-hover);
}

.btn-join:active:not(:disabled)[b-5kmfibb4u3] {
    transform: scale(0.98);
}

.btn-join:disabled[b-5kmfibb4u3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-error[b-5kmfibb4u3] {
    margin-top: 12px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: 8px;
    color: var(--error);
    font-size: 0.9rem;
    text-align: center;
}

/* ==================== Success Screen ==================== */
.success-screen[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-icon[b-5kmfibb4u3] {
    width: 80px;
    height: 80px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.success-screen h2[b-5kmfibb4u3] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.position-display[b-5kmfibb4u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.position-number[b-5kmfibb4u3] {
    font-size: 4rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
}

.position-label[b-5kmfibb4u3] {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.wait-estimate[b-5kmfibb4u3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-card);
    border-radius: 24px;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.wait-estimate .wait-icon[b-5kmfibb4u3] {
    font-size: 1.25rem;
}

.track-message[b-5kmfibb4u3] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 280px;
}

.btn-track[b-5kmfibb4u3] {
    padding: 16px 48px;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.btn-track:hover[b-5kmfibb4u3] {
    background: var(--brand-primary-hover);
}

.btn-track:active[b-5kmfibb4u3] {
    transform: scale(0.98);
}

.btn-track .btn-icon[b-5kmfibb4u3] {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* Pulsing attention animation for the track button.
   Glow only — no transform: scale — so the button's size/position (and thus
   its tap target) stays put while it animates; the scaling version made it a
   moving target that never settled. Runs a finite number of times so it draws
   the eye on arrival, then stops. */
.btn-track.pulse-attention[b-5kmfibb4u3] {
    animation: pulse-glow-b-5kmfibb4u3 2s ease-in-out 6;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
}

@keyframes pulse-glow-b-5kmfibb4u3 {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(99, 102, 241, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-track.pulse-attention[b-5kmfibb4u3] {
        animation: none;
    }
}

/* ==================== Confetti ==================== */
.confetti-container[b-5kmfibb4u3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-5kmfibb4u3] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    top: -10px;
    left: 50%;
    transform: translateX(var(--x));
    animation: confetti-fall-b-5kmfibb4u3 3s ease-out var(--delay) forwards;
    border-radius: 2px;
}

.confetti:nth-child(2n)[b-5kmfibb4u3] {
    background: var(--success);
    width: 8px;
    height: 12px;
}

.confetti:nth-child(3n)[b-5kmfibb4u3] {
    background: #f59e0b;
    width: 12px;
    height: 8px;
}

.confetti:nth-child(5n)[b-5kmfibb4u3] {
    background: #ec4899;
}

@keyframes confetti-fall-b-5kmfibb4u3 {
    0% {
        opacity: 1;
        transform: translateX(var(--x)) translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(var(--x) + 30px)) translateY(100vh) rotate(720deg);
    }
}

/* ==================== Animations ==================== */
.bounce-in[b-5kmfibb4u3] {
    animation: bounce-in-b-5kmfibb4u3 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in-b-5kmfibb4u3 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in[b-5kmfibb4u3] {
    animation: fade-in-b-5kmfibb4u3 0.5s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fade-in-b-5kmfibb4u3 {
    to {
        opacity: 1;
    }
}

/* ==================== RTL Support (Arabic) ==================== */
[dir="rtl"] .waitlist-header[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

[dir="rtl"] .header-actions[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

[dir="rtl"] .form-group label[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .form-group input[b-5kmfibb4u3],
[dir="rtl"] .form-group textarea[b-5kmfibb4u3],
[dir="rtl"] .form-group select[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .required[b-5kmfibb4u3] {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .badge-notify[b-5kmfibb4u3] {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .phone-prefix[b-5kmfibb4u3] {
    border-right: 1px solid var(--border);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

[dir="rtl"] .phone-input-wrapper input[b-5kmfibb4u3] {
    border-radius: 10px 0 0 10px;
}

[dir="rtl"] .validation-hint[b-5kmfibb4u3] {
    text-align: right;
}

[dir="rtl"] .btn-join[b-5kmfibb4u3],
[dir="rtl"] .btn-track[b-5kmfibb4u3] {
    flex-direction: row-reverse;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .queue-status-card[b-5kmfibb4u3] {
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .queue-stat .stat-number[b-5kmfibb4u3] {
        font-size: 2rem;
    }

    .party-btn[b-5kmfibb4u3] {
        /* Mobile breakpoint used to shrink the party-size buttons to 40×40,
           dropping them below the 44px touch-target floor. Keep them at the
           base 44×44 — they still fit on a 390px viewport because the row
           wraps. */
        width: 44px;
        height: 44px;
    }

    .position-number[b-5kmfibb4u3] {
        font-size: 3rem;
    }
}
/* /Pages/WaitlistTrack.razor.rz.scp.css */
/* ==================== Variables ==================== */
.waitlist-track-page[b-rni0gy395d] {
    --brand-primary: #6366f1;
    --brand-primary-hover: #4f46e5;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.3s, color 0.3s;
    /* Guard against any horizontal overflow (the header used to push past the
       viewport on mobile, leaving a dark strip on the right). */
    overflow-x: hidden;
}

.waitlist-track-page.dark[b-rni0gy395d] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
}

/* ==================== Loading & Error ==================== */
.loading-screen[b-rni0gy395d],
.error-screen[b-rni0gy395d],
.status-screen[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.spinner[b-rni0gy395d] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin-b-rni0gy395d 1s linear infinite;
}

.spinner-small[b-rni0gy395d] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-rni0gy395d 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
}

@keyframes spin-b-rni0gy395d {
    to { transform: rotate(360deg); }
}

.error-icon[b-rni0gy395d] {
    width: 64px;
    height: 64px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.status-icon[b-rni0gy395d] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.status-screen h2[b-rni0gy395d] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.status-screen p[b-rni0gy395d] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ==================== Waiting Screen ==================== */
.waiting-screen[b-rni0gy395d] {
    min-height: 100vh;
    padding-bottom: 2rem;
}

.track-header[b-rni0gy395d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 12px;
    /* Wrap on mobile so the row of controls drops below the name instead of
       overflowing the viewport. No effect on wide screens (everything fits). */
    flex-wrap: wrap;
}

.restaurant-logo[b-rni0gy395d] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.restaurant-info[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Take the slack and allow shrinking so a long name doesn't shove the
       header controls off-screen (min-width:0 lets the ellipsis kick in). */
    flex: 1 1 auto;
    min-width: 0;
}

.restaurant-name[b-rni0gy395d] {
    font-weight: 600;
    font-size: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visit-badge[b-rni0gy395d] {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}

.header-actions[b-rni0gy395d] {
    display: flex;
    gap: 8px;
    /* Let the controls wrap (and stay right-aligned) rather than overflow. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.favorite-toggle[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 6px;
    transition: transform 0.2s;
    line-height: 1;
}

.favorite-toggle:hover[b-rni0gy395d] {
    transform: scale(1.2);
}

.favorite-toggle.active[b-rni0gy395d] {
    animation: heart-beat-b-rni0gy395d 0.6s ease-out;
}

@keyframes heart-beat-b-rni0gy395d {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.theme-toggle[b-rni0gy395d],
.sound-toggle[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s;
}

.theme-toggle:hover[b-rni0gy395d],
.sound-toggle:hover[b-rni0gy395d] {
    background: var(--border);
}

/* Language Selector */
.lang-select[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
}

.lang-select:focus[b-rni0gy395d] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* Position Delta Indicator */
.position-delta[b-rni0gy395d] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: delta-pop-b-rni0gy395d 0.5s ease-out;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

@keyframes delta-pop-b-rni0gy395d {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.position-hero[b-rni0gy395d] {
    position: relative;
}

/* Seating Time */
.seating-time[b-rni0gy395d] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Time Elapsed Highlight */
.info-row.highlight[b-rni0gy395d] {
    background: rgba(99, 102, 241, 0.1);
    margin: 0 -1.25rem;
    padding: 10px 1.25rem;
    border-bottom: none;
}

.time-elapsed[b-rni0gy395d] {
    color: var(--brand-primary);
    font-weight: 600;
}

/* Refresh Button */
.refresh-status[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-refresh[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-refresh:hover:not(:disabled)[b-rni0gy395d] {
    background: var(--border);
}

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

.btn-refresh.refreshing span[b-rni0gy395d] {
    display: inline-block;
    animation: spin-b-rni0gy395d 1s linear infinite;
}

/* Live Badge */
.live-badge[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 500;
}

.live-dot[b-rni0gy395d] {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse-dot-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-rni0gy395d {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Connection Status Indicator */
.connection-dot[b-rni0gy395d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s;
}

.connection-dot.connected[b-rni0gy395d] {
    background: var(--success);
    animation: pulse-dot-b-rni0gy395d 2s ease-in-out infinite;
}

.connection-dot.reconnecting[b-rni0gy395d] {
    background: var(--warning);
    animation: pulse-dot-b-rni0gy395d 1s ease-in-out infinite;
}

.connection-dot.disconnected[b-rni0gy395d] {
    background: var(--error);
    animation: none;
}

.connection-dot.offline[b-rni0gy395d] {
    background: #6b7280;
    animation: none;
}

/* Position Hero */
.position-hero[b-rni0gy395d] {
    display: flex;
    justify-content: center;
    padding: 3rem 1.25rem 2rem;
}

.position-circle[b-rni0gy395d] {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 40px -10px var(--brand-primary);
    animation: float-b-rni0gy395d 3s ease-in-out infinite;
}

.position-number[b-rni0gy395d] {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
}

.position-suffix[b-rni0gy395d] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 4px;
}

@keyframes float-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Wait Estimate Card */
.wait-estimate-card[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 1.25rem 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.estimate-icon[b-rni0gy395d] {
    font-size: 1.5rem;
}

.estimate-text[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
}

.estimate-label[b-rni0gy395d] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.estimate-time[b-rni0gy395d] {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Info Card */
.info-card[b-rni0gy395d] {
    margin: 0 1.25rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.info-row[b-rni0gy395d] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child[b-rni0gy395d] {
    border-bottom: none;
}

.info-label[b-rni0gy395d] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.info-value[b-rni0gy395d] {
    font-weight: 500;
}

/* Share & Status Row */
.share-status-row[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1.25rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    gap: 12px;
}

.btn-share[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-share:hover[b-rni0gy395d] {
    background: var(--border);
}

.btn-share.copied[b-rni0gy395d] {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--success);
    color: var(--success);
}

.last-updated[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Cancel Button */
.btn-cancel[b-rni0gy395d] {
    display: block;
    margin: 0 auto;
    padding: 12px 24px;
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-rni0gy395d] {
    background: rgba(239, 68, 68, 0.1);
}

/* Connection Warning */
.connection-warning[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.offline-banner[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px dashed var(--border);
}

.connection-lost[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    font-size: 0.9rem;
    margin-top: 1rem;
    border-radius: 8px;
}

.retry-btn[b-rni0gy395d] {
    background: var(--error);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.retry-btn:hover[b-rni0gy395d] {
    opacity: 0.9;
}

.retry-btn:disabled[b-rni0gy395d] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== Action Error Toast ==================== */
.action-error-toast[b-rni0gy395d] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--error);
    color: white;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    animation: slideUp-b-rni0gy395d 0.3s ease-out;
    z-index: 1000;
    max-width: calc(100% - 40px);
}

@keyframes slideUp-b-rni0gy395d {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.error-dismiss[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.error-dismiss:hover[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== Celebration Screen ==================== */
.celebration-screen[b-rni0gy395d] {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    overflow: hidden;
}

.celebration-content[b-rni0gy395d] {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.party-icon[b-rni0gy395d] {
    font-size: 5rem;
    margin-bottom: 1rem;
}

/* QR Order prompt on seated screen */
.qr-order-prompt[b-rni0gy395d] {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.qr-hint[b-rni0gy395d] {
    margin-bottom: 1rem;
    opacity: 0.9;
}

.btn-qr-order[b-rni0gy395d] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: gentle-pulse-b-rni0gy395d 2s ease-in-out infinite;
}

.btn-qr-order:hover[b-rni0gy395d] {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

@keyframes gentle-pulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(99, 102, 241, 0.5); }
}

.bounce-shake[b-rni0gy395d] {
    animation: bounce-shake-b-rni0gy395d 0.8s ease-in-out infinite;
}

@keyframes bounce-shake-b-rni0gy395d {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

.celebration-title[b-rni0gy395d] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.table-assignment[b-rni0gy395d] {
    margin-bottom: 1.5rem;
}

.table-card[b-rni0gy395d] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 3rem;
    background: white;
    color: #1e293b;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.table-label[b-rni0gy395d] {
    font-size: 0.9rem;
    color: #64748b;
}

.table-name[b-rni0gy395d] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #10b981;
}

.table-zone[b-rni0gy395d] {
    font-size: 1rem;
    color: #64748b;
    margin-top: 4px;
}

.arrival-prompt[b-rni0gy395d] {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.btn-arrived[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 48px;
    background: white;
    color: #10b981;
    border: none;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-arrived:hover:not(:disabled)[b-rni0gy395d] {
    transform: scale(1.05);
}

.btn-arrived:disabled[b-rni0gy395d] {
    opacity: 0.7;
}

.pulse-btn[b-rni0gy395d] {
    animation: pulse-btn-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes pulse-btn-b-rni0gy395d {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
}

/* Confetti Explosion */
.confetti-explosion[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
}

.confetti-piece[b-rni0gy395d] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    animation: explode-b-rni0gy395d 2s ease-out infinite;
    animation-delay: calc(var(--i) * 0.05s);
}

.confetti-piece:nth-child(2n)[b-rni0gy395d] { background: #ff6b6b; width: 8px; height: 12px; }
.confetti-piece:nth-child(3n)[b-rni0gy395d] { background: #4ecdc4; width: 12px; height: 8px; }
.confetti-piece:nth-child(5n)[b-rni0gy395d] { background: #ffe66d; border-radius: 50%; }
.confetti-piece:nth-child(7n)[b-rni0gy395d] { background: #ff9ff3; }
.confetti-piece:nth-child(11n)[b-rni0gy395d] { background: #54a0ff; }

@keyframes explode-b-rni0gy395d {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(cos(var(--i) * 6deg) * 200px),
            calc(sin(var(--i) * 6deg) * 200px - 100px)
        ) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* Pulse Rings */
.pulse-rings[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ring[b-rni0gy395d] {
    position: absolute;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: ring-pulse-b-rni0gy395d 3s ease-out infinite;
}

.ring-1[b-rni0gy395d] { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.ring-2[b-rni0gy395d] { width: 200px; height: 200px; margin: -100px 0 0 -100px; animation-delay: 0.5s; }
.ring-3[b-rni0gy395d] { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-delay: 1s; }

@keyframes ring-pulse-b-rni0gy395d {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ==================== Modal ==================== */
.modal-overlay[b-rni0gy395d] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    touch-action: none; /* Prevent background scroll on mobile */
    overscroll-behavior: contain;
}

.modal-content[b-rni0gy395d] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.modal-content h3[b-rni0gy395d] {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.modal-content p[b-rni0gy395d] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.modal-actions[b-rni0gy395d] {
    display: flex;
    gap: 12px;
}

.modal-actions button[b-rni0gy395d] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary[b-rni0gy395d] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-primary[b-rni0gy395d] {
    background: var(--brand-primary);
    border: none;
    color: white;
}

.btn-danger[b-rni0gy395d] {
    background: var(--error);
    border: none;
    color: white;
}

/* ==================== Responsive ==================== */
@media (max-width: 400px) {
    .position-circle[b-rni0gy395d] {
        width: 150px;
        height: 150px;
    }

    .position-number[b-rni0gy395d] {
        font-size: 3.5rem;
    }

    .celebration-title[b-rni0gy395d] {
        font-size: 1.5rem;
    }

    .table-name[b-rni0gy395d] {
        font-size: 2rem;
    }
}

/* ==================== Haptic Celebrating State ==================== */
.waitlist-track-page.celebrating[b-rni0gy395d] {
    animation: screen-pulse-b-rni0gy395d 0.5s ease-out;
}

@keyframes screen-pulse-b-rni0gy395d {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* ==================== Notification Button ==================== */
.notify-btn[b-rni0gy395d] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1rem;
    cursor: pointer;
    animation: notify-pulse-b-rni0gy395d 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

@keyframes notify-pulse-b-rni0gy395d {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6); }
}

.notify-enabled[b-rni0gy395d] {
    font-size: 1rem;
    opacity: 0.6;
    padding: 8px;
}

/* ==================== Queue Visualization ==================== */
.queue-visualization[b-rni0gy395d] {
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
}

.queue-track[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.queue-person[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.queue-person.past[b-rni0gy395d] {
    opacity: 0.3;
}

.queue-person.you[b-rni0gy395d] {
    transform: scale(1.2);
}

.queue-dot[b-rni0gy395d] {
    width: 12px;
    height: 12px;
    background: var(--border);
    border-radius: 50%;
}

.queue-person.past .queue-dot[b-rni0gy395d] {
    background: var(--success);
}

.queue-you-marker[b-rni0gy395d] {
    font-size: 1.5rem;
    animation: you-bounce-b-rni0gy395d 1s ease-in-out infinite;
}

.queue-you-label[b-rni0gy395d] {
    font-size: 0.65rem;
    color: var(--brand-primary);
    font-weight: 600;
    text-transform: uppercase;
}

@keyframes you-bounce-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.queue-finish[b-rni0gy395d] {
    font-size: 1.5rem;
    margin-left: 8px;
    padding: 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
}

.queue-progress-bar[b-rni0gy395d] {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.queue-progress-fill[b-rni0gy395d] {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--brand-primary));
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Ghost Trail - Shows previous positions */
.queue-ghost[b-rni0gy395d] {
    position: absolute;
    opacity: var(--ghost-opacity, 0.3);
    transform: translateX(calc(var(--ghost-index, 0) * -20px));
    animation: ghost-fade-b-rni0gy395d 2s ease-out forwards;
    animation-delay: calc(var(--ghost-index, 0) * 0.1s);
}

.ghost-marker[b-rni0gy395d] {
    font-size: 1rem;
    filter: grayscale(1);
}

@keyframes ghost-fade-b-rni0gy395d {
    0% { opacity: var(--ghost-opacity, 0.3); }
    100% { opacity: 0.1; }
}

.queue-track[b-rni0gy395d] {
    position: relative;
}

/* Progress Trail Dots */
.progress-trail[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    padding-left: 4px;
}

.trail-dot[b-rni0gy395d] {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    opacity: calc(0.8 - (var(--trail-index, 0) * 0.15));
    animation: trail-pulse-b-rni0gy395d 1.5s ease-in-out infinite;
    animation-delay: calc(var(--trail-index, 0) * 0.2s);
}

@keyframes trail-pulse-b-rni0gy395d {
    0%, 100% { transform: scale(1); opacity: calc(0.8 - (var(--trail-index, 0) * 0.15)); }
    50% { transform: scale(1.3); opacity: 1; }
}

.queue-progress-bar[b-rni0gy395d] {
    position: relative;
}

/* ==================== Live Countdown Timer ==================== */
.countdown-timer-card[b-rni0gy395d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 1.25rem 1.5rem;
}

.countdown-ring[b-rni0gy395d] {
    position: relative;
    width: 140px;
    height: 140px;
}

.countdown-ring svg[b-rni0gy395d] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.countdown-bg[b-rni0gy395d] {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}

.countdown-progress[b-rni0gy395d] {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    transition: stroke-dashoffset 1s linear;
}

.countdown-text[b-rni0gy395d] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.countdown-minutes[b-rni0gy395d] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
}

.countdown-separator[b-rni0gy395d] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    animation: blink-b-rni0gy395d 1s step-end infinite;
}

.countdown-seconds[b-rni0gy395d] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 2ch;
}

@keyframes blink-b-rni0gy395d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.countdown-label[b-rni0gy395d] {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== Position Changed Animation ==================== */
.position-circle.position-changed[b-rni0gy395d] {
    animation: position-pop-b-rni0gy395d 0.6s ease-out;
}

@keyframes position-pop-b-rni0gy395d {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.position-circle.position-changed .position-number[b-rni0gy395d] {
    animation: number-flash-b-rni0gy395d 0.6s ease-out;
}

@keyframes number-flash-b-rni0gy395d {
    0% { color: white; }
    30% { color: #fef08a; text-shadow: 0 0 20px rgba(254, 240, 138, 0.8); }
    100% { color: white; }
}

/* ==================== Enhanced Celebration ==================== */
.waitlist-track-page.celebrating .celebration-screen[b-rni0gy395d] {
    animation: celebration-entrance-b-rni0gy395d 0.8s ease-out;
}

@keyframes celebration-entrance-b-rni0gy395d {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Firework burst effect */
.celebration-screen[b-rni0gy395d]::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: gold;
    border-radius: 50%;
    box-shadow:
        -80px -60px 0 gold,
        80px -60px 0 gold,
        -120px 20px 0 #ff6b6b,
        120px 20px 0 #ff6b6b,
        -60px 80px 0 #4ecdc4,
        60px 80px 0 #4ecdc4,
        0 -100px 0 #ffe66d;
    animation: firework-burst-b-rni0gy395d 2s ease-out infinite;
}

@keyframes firework-burst-b-rni0gy395d {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(3);
        opacity: 0;
    }
}

/* Sparkle effect on table card */
.table-card[b-rni0gy395d] {
    position: relative;
    overflow: visible;
}

.table-card[b-rni0gy395d]::after {
    content: '✨';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    animation: sparkle-b-rni0gy395d 0.6s ease-in-out infinite alternate;
}

@keyframes sparkle-b-rni0gy395d {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.2) rotate(20deg); opacity: 0.7; }
}

/* ==================== RTL Support for Arabic ==================== */
[dir="rtl"] .track-header[b-rni0gy395d],
[dir="rtl"] .modal-actions[b-rni0gy395d],
[dir="rtl"] .info-row[b-rni0gy395d],
[dir="rtl"] .connection-lost[b-rni0gy395d],
[dir="rtl"] .connection-warning[b-rni0gy395d],
[dir="rtl"] .action-error-toast[b-rni0gy395d],
[dir="rtl"] .offline-banner[b-rni0gy395d],
[dir="rtl"] .share-status-row[b-rni0gy395d],
[dir="rtl"] .btn-share[b-rni0gy395d],
[dir="rtl"] .last-updated[b-rni0gy395d],
[dir="rtl"] .refresh-status[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .position-delta[b-rni0gy395d] {
    right: auto;
    left: -10px;
}

[dir="rtl"] .header-actions[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .spinner-small[b-rni0gy395d] {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .live-badge[b-rni0gy395d],
[dir="rtl"] .btn-arrived[b-rni0gy395d],
[dir="rtl"] .btn-qr-order[b-rni0gy395d],
[dir="rtl"] .retry-btn[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .table-card[b-rni0gy395d]::after {
    right: auto;
    left: -10px;
}

/* ==================== Screen Awake Toggle ==================== */
.screen-awake-toggle[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 8px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.screen-awake-toggle:hover[b-rni0gy395d] {
    opacity: 1;
}

.screen-awake-toggle.active[b-rni0gy395d] {
    opacity: 1;
    animation: awake-glow-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes awake-glow-b-rni0gy395d {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==================== Pull to Refresh ==================== */
.pull-indicator[b-rni0gy395d] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background: var(--bg-card);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow);
    z-index: 100;
    transition: opacity 0.2s;
}

.pull-icon[b-rni0gy395d] {
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.pull-icon.ready[b-rni0gy395d] {
    color: var(--success);
    animation: ready-spin-b-rni0gy395d 0.6s ease-out;
}

@keyframes ready-spin-b-rni0gy395d {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pull-indicator span:last-child[b-rni0gy395d] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==================== PWA Install Prompt ==================== */
.install-prompt[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-install[b-rni0gy395d] {
    background: white;
    color: var(--brand-primary);
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-install:hover[b-rni0gy395d] {
    transform: scale(1.05);
}

.btn-dismiss[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-dismiss:hover[b-rni0gy395d] {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== Battery Saver Notice ==================== */
.battery-saver-notice[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

/* ==================== RTL Support for Enhancements ==================== */
[dir="rtl"] .screen-awake-toggle[b-rni0gy395d] {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .install-prompt[b-rni0gy395d],
[dir="rtl"] .battery-saver-notice[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .pull-indicator[b-rni0gy395d] {
    /* Center alignment stays the same */
}

/* ==================== Reduced Motion Accessibility ==================== */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    .spinner[b-rni0gy395d],
    .spinner-small[b-rni0gy395d],
    .countdown-separator[b-rni0gy395d],
    .live-dot[b-rni0gy395d],
    .confetti-piece[b-rni0gy395d],
    .ring[b-rni0gy395d],
    .party-icon[b-rni0gy395d],
    .pulse-btn[b-rni0gy395d],
    .btn-qr-order[b-rni0gy395d],
    .table-card[b-rni0gy395d]::after,
    .position-circle.position-changed[b-rni0gy395d],
    .position-circle.position-changed .position-number[b-rni0gy395d],
    .queue-you-marker[b-rni0gy395d] {
        animation: none !important;
    }

    /* Remove transitions that could cause motion */
    .waitlist-track-page[b-rni0gy395d],
    .countdown-progress[b-rni0gy395d],
    .queue-progress-fill[b-rni0gy395d] {
        transition: none !important;
    }

    /* Keep essential visual feedback without motion */
    .spinner[b-rni0gy395d],
    .spinner-small[b-rni0gy395d] {
        border-top-color: var(--brand-primary);
    }

    .live-dot[b-rni0gy395d] {
        background: var(--success);
        box-shadow: none;
    }

    /* Hide purely decorative animated elements */
    .confetti-explosion[b-rni0gy395d],
    .pulse-rings[b-rni0gy395d] {
        display: none !important;
    }

    /* Simplify celebration without removing content */
    .celebration-screen[b-rni0gy395d] {
        background: linear-gradient(135deg, var(--brand-primary) 0%, #8b5cf6 100%);
    }
}

/* ==================== Almost There Badge ==================== */
.position-circle.almost-there[b-rni0gy395d] {
    background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
    box-shadow: 0 10px 40px -10px #f59e0b;
    animation: float-b-rni0gy395d 3s ease-in-out infinite, almost-pulse-b-rni0gy395d 1.5s ease-in-out infinite;
}

@keyframes almost-pulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 10px 40px -10px #f59e0b; }
    50% { box-shadow: 0 15px 50px -5px #f59e0b, 0 0 30px rgba(245, 158, 11, 0.4); }
}

.almost-there-badge[b-rni0gy395d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #dc2626);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: badge-bounce-b-rni0gy395d 1s ease-in-out infinite;
}

.almost-icon[b-rni0gy395d] {
    font-size: 1rem;
    animation: fire-flicker-b-rni0gy395d 0.5s ease-in-out infinite alternate;
}

@keyframes badge-bounce-b-rni0gy395d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes fire-flicker-b-rni0gy395d {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ==================== WhatsApp Share Button ==================== */
.btn-whatsapp[b-rni0gy395d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #25D366;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-whatsapp:hover[b-rni0gy395d] {
    background: #128C7E;
    transform: scale(1.05);
}

.btn-whatsapp:active[b-rni0gy395d] {
    transform: scale(0.95);
}

/* ==================== Sound Preview Button ==================== */
.sound-preview[b-rni0gy395d] {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px 8px;
    opacity: 0.7;
    transition: all 0.2s;
    border-radius: 6px;
}

.sound-preview:hover[b-rni0gy395d] {
    opacity: 1;
    background: rgba(99, 102, 241, 0.1);
}

.sound-preview:active[b-rni0gy395d] {
    transform: scale(0.9);
}

/* ==================== RTL Support for New Elements ==================== */
[dir="rtl"] .almost-there-badge[b-rni0gy395d] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-whatsapp[b-rni0gy395d] {
    /* Icon centered, no RTL change needed */
}

/* ========================================
   TOUCHSCREEN-FRIENDLY IMPROVEMENTS
   ======================================== */

/* Larger touch targets for header buttons */
.theme-toggle[b-rni0gy395d],
.sound-toggle[b-rni0gy395d],
.sound-preview[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Larger action buttons */
.btn-share[b-rni0gy395d],
.btn-refresh[b-rni0gy395d],
.btn-whatsapp[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
}

.btn-arrived[b-rni0gy395d],
.btn-cancel[b-rni0gy395d],
.btn-qr-order[b-rni0gy395d] {
    min-height: 48px;
    padding: 14px 24px;
}

/* Tap feedback for all interactive elements */
.theme-toggle:active[b-rni0gy395d],
.sound-toggle:active[b-rni0gy395d],
.sound-preview:active[b-rni0gy395d],
.btn-share:active[b-rni0gy395d],
.btn-refresh:active[b-rni0gy395d],
.btn-whatsapp:active[b-rni0gy395d],
.lang-select:active[b-rni0gy395d] {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Prevent text selection on touch */
.position-circle[b-rni0gy395d],
.countdown-timer-card[b-rni0gy395d],
.queue-info-card[b-rni0gy395d],
.share-status-row[b-rni0gy395d],
.btn-share[b-rni0gy395d],
.btn-arrived[b-rni0gy395d],
.btn-qr-order[b-rni0gy395d] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling for touch */
.waiting-screen[b-rni0gy395d] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Larger language selector for touch */
.lang-select[b-rni0gy395d] {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 1.1rem;
}

/* Better touch target for notify button */
.notify-btn[b-rni0gy395d] {
    min-width: 44px;
    min-height: 44px;
}

/* Screen awake toggle touch target */
.screen-awake-toggle[b-rni0gy395d] {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
}

/* ========================================
   MICRO-INTERACTIONS & POLISH
   ======================================== */

/* Celebration glow for position circle when almost there */
.position-circle.almost-there[b-rni0gy395d]::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f59e0b, #dc2626, #f59e0b);
    background-size: 200% 200%;
    animation: gradient-rotate-b-rni0gy395d 3s linear infinite;
    z-index: -1;
    opacity: 0.5;
}

@keyframes gradient-rotate-b-rni0gy395d {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle hover effect for info cards */
.queue-info-card:hover[b-rni0gy395d] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* Countdown timer pulse when time is low */
.countdown-timer-card.urgent[b-rni0gy395d] {
    animation: urgentPulse-b-rni0gy395d 1s ease-in-out infinite;
}

@keyframes urgentPulse-b-rni0gy395d {
    0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.4); }
}

/* Success checkmark animation */
@keyframes checkPop-b-rni0gy395d {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.btn-share.copied span:first-child[b-rni0gy395d] {
    animation: checkPop-b-rni0gy395d 0.3s ease-out;
}

/* Live dot enhanced pulsing */
.connection-dot.connected[b-rni0gy395d] {
    animation: livePulse-b-rni0gy395d 2s ease-in-out infinite;
}

@keyframes livePulse-b-rni0gy395d {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
        transform: scale(1.1);
    }
}

/* Disconnected state */
.connection-dot.disconnected[b-rni0gy395d] {
    background: #f59e0b;
    animation: disconnectedBlink-b-rni0gy395d 1s ease-in-out infinite;
}

@keyframes disconnectedBlink-b-rni0gy395d {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.connection-dot.offline[b-rni0gy395d] {
    background: #ef4444;
}

/* Button ripple effect */
.btn-arrived[b-rni0gy395d]::after,
.btn-qr-order[b-rni0gy395d]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}

.btn-arrived:active[b-rni0gy395d]::after,
.btn-qr-order:active[b-rni0gy395d]::after {
    opacity: 1;
    transform: scale(2);
    transition: all 0s;
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
    .share-status-row[b-rni0gy395d] {
        flex-direction: column;
        gap: 12px;
    }

    .share-buttons[b-rni0gy395d],
    .refresh-status[b-rni0gy395d] {
        width: 100%;
        justify-content: center;
    }

    .btn-share[b-rni0gy395d] {
        flex: 1;
    }
}