/* _content/SCM.Module.Admin.Client.Oqtane/Components/Analytics/AnalyticsChart.razor.rz.scp.css */
/* Analytics Chart Component Styles */

.analytics-chart[b-wv0qdc8jo8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.analytics-chart.loading[b-wv0qdc8jo8] {
    pointer-events: none;
}

/* The chart itself is handed Height="100%", which only means anything if this wrapper has a
   height to be a percentage OF. As a plain auto-height div inside a flex column it had none.
   min-height: 0 is not optional — a flex item's default min-height:auto refuses to shrink below
   its content, which reintroduces the overflow this is meant to prevent. */
.chart-body[b-wv0qdc8jo8] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Header */
.chart-header[b-wv0qdc8jo8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--simx-spacing-md, 1rem);
    margin-bottom: var(--simx-spacing-md, 1rem);
    flex-wrap: wrap;
}

.chart-title h4[b-wv0qdc8jo8] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--simx-text-primary, #1f2937);
}

.chart-subtitle[b-wv0qdc8jo8] {
    display: block;
    font-size: 0.75rem;
    color: var(--simx-text-secondary, #6b7280);
    margin-top: var(--simx-spacing-xs, 0.25rem);
}

.chart-actions[b-wv0qdc8jo8] {
    display: flex;
    align-items: center;
    gap: var(--simx-spacing-sm, 0.5rem);
}

/* Time picker styling */
[b-wv0qdc8jo8] .chart-time-picker {
    font-size: 0.875rem;
}

/* Skeleton loading */
.chart-skeleton[b-wv0qdc8jo8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #f9fafb 25%, #f3f4f6 50%, #f9fafb 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-wv0qdc8jo8 1.5s infinite;
    border-radius: var(--simx-radius-md, 0.375rem);
}

.skeleton-chart[b-wv0qdc8jo8] {
    width: 100%;
    height: 100%;
}

@keyframes skeleton-shimmer-b-wv0qdc8jo8 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Error state */
.chart-error[b-wv0qdc8jo8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--simx-spacing-sm, 0.5rem);
    padding: var(--simx-spacing-xl, 2rem);
    color: #ef4444;
    text-align: center;
}

.chart-error i[b-wv0qdc8jo8] {
    font-size: 2rem;
}

.chart-error span[b-wv0qdc8jo8] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary, #6b7280);
}

/* Empty state */
.chart-empty[b-wv0qdc8jo8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--simx-spacing-sm, 0.5rem);
    padding: var(--simx-spacing-xl, 2rem);
    color: var(--simx-text-tertiary, #9ca3af);
    text-align: center;
    min-height: 200px;
}

.chart-empty i[b-wv0qdc8jo8] {
    font-size: 3rem;
    opacity: 0.5;
}

.chart-empty span[b-wv0qdc8jo8] {
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-header[b-wv0qdc8jo8] {
        flex-direction: column;
    }

    .chart-actions[b-wv0qdc8jo8] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Dark admin: the error message's red as ink on the dark panel. */
:root[data-simx-theme-resolved="dark"] .chart-error[b-wv0qdc8jo8] {
    color: var(--simx-danger-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Analytics/BreakdownTable.razor.rz.scp.css */
/* Breakdown Table Component Styles */

.breakdown-table[b-dnrr2qa3t3] {
    background: var(--simx-surface, #ffffff);
    border: 1px solid var(--simx-border, #e5e7eb);
    border-radius: var(--simx-radius-lg, 0.5rem);
    padding: var(--simx-spacing-md, 1rem);
}

/* Header */
.table-header[b-dnrr2qa3t3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--simx-spacing-md, 1rem);
    margin-bottom: var(--simx-spacing-md, 1rem);
    flex-wrap: wrap;
}

.table-header h4[b-dnrr2qa3t3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--simx-text-primary, #1f2937);
}

/* Search box */
[b-dnrr2qa3t3] .table-search {
    font-size: 0.875rem;
}

/* Totals row */
.table-totals[b-dnrr2qa3t3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--simx-spacing-lg, 1.5rem);
    padding: var(--simx-spacing-md, 1rem);
    margin-top: var(--simx-spacing-sm, 0.5rem);
    border-top: 2px solid var(--simx-border, #e5e7eb);
    font-weight: 600;
    background: var(--simx-surface-alt, #f9fafb);
    border-radius: 0 0 var(--simx-radius-md, 0.375rem) var(--simx-radius-md, 0.375rem);
}

.table-totals .total-label[b-dnrr2qa3t3] {
    color: var(--simx-text-secondary, #6b7280);
}

.table-totals .total-value[b-dnrr2qa3t3] {
    font-size: 1.125rem;
    color: var(--simx-text-primary, #1f2937);
}

/* Grid overrides */
.breakdown-table[b-dnrr2qa3t3]  .e-grid {
    border: none !important;
}

.breakdown-table[b-dnrr2qa3t3]  .e-gridheader {
    border-top: none !important;
}

.breakdown-table[b-dnrr2qa3t3]  .e-headercell {
    background: var(--simx-surface-alt, #f9fafb) !important;
    font-weight: 600;
    color: var(--simx-text-secondary, #6b7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breakdown-table[b-dnrr2qa3t3]  .e-row:hover .e-rowcell {
    background: var(--simx-surface-hover, #f3f4f6) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .table-header[b-dnrr2qa3t3] {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-dnrr2qa3t3] .table-search {
        width: 100% !important;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Analytics/Elements/DemandPatternElement.razor.rz.scp.css */
/* Demand pattern heatmap — when the venue is busy, and when it is quiet. */

.demand-pattern[b-416fs8yj8m] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
    padding: 0.25rem;
}

/* ── Header: measure switch + shading legend ───────────────────────────── */

.demand-header[b-416fs8yj8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.demand-measures[b-416fs8yj8m] {
    display: inline-flex;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

.demand-measure-btn[b-416fs8yj8m] {
    border: 0;
    background: transparent;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
}

.demand-measure-btn + .demand-measure-btn[b-416fs8yj8m] {
    border-left: 1px solid #dee2e6;
}

.demand-measure-btn:hover[b-416fs8yj8m] {
    background-color: #f1f3f5;
}

.demand-measure-btn.active[b-416fs8yj8m] {
    background-color: #2563eb;
    color: #fff;
}

.demand-scale[b-416fs8yj8m] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.demand-scale-chip[b-416fs8yj8m] {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Headline answers ──────────────────────────────────────────────────── */

.demand-highlights[b-416fs8yj8m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.demand-highlight[b-416fs8yj8m] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    border-left: 3px solid #adb5bd;
}

.demand-highlight.busy[b-416fs8yj8m] {
    border-left-color: #2563eb;
}

.demand-highlight.quiet[b-416fs8yj8m] {
    border-left-color: #f59e0b;
}

.demand-highlight i[b-416fs8yj8m] {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #6c757d;
}

.demand-highlight.busy i[b-416fs8yj8m] {
    color: #2563eb;
}

.demand-highlight.quiet i[b-416fs8yj8m] {
    color: #b45309;
}

.demand-highlight-caption[b-416fs8yj8m] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5b6676;
}

.demand-highlight-value[b-416fs8yj8m] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.25;
}

.demand-highlight-detail[b-416fs8yj8m] {
    font-size: 0.72rem;
    color: #5b6676;
}

/* ── The grid ──────────────────────────────────────────────────────────── */

.demand-grid-scroll[b-416fs8yj8m] {
    overflow-x: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.demand-grid[b-416fs8yj8m] {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    table-layout: fixed;
}

.demand-corner[b-416fs8yj8m] {
    width: 42px;
}

/* The hour, caption and detail greys were #868e96 and #6c757d, 3.32:1 and 4.45:1 (light-mode sweep, 4.0.34). */
.demand-hour-head[b-416fs8yj8m] {
    font-size: 0.62rem;
    font-weight: 500;
    color: #5b6676;
    text-align: center;
    padding: 0;
    white-space: nowrap;
}

.demand-day-head[b-416fs8yj8m] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #495057;
    text-align: right;
    padding-right: 0.4rem;
    white-space: nowrap;
    width: 42px;
}

.demand-day-head.closed[b-416fs8yj8m] {
    color: #adb5bd;
    font-weight: 400;
}

.demand-cell[b-416fs8yj8m] {
    height: 20px;
    min-width: 16px;
    border-radius: 3px;
    /* The zero-activity ground. Open-but-empty must still read as a live slot, or a quiet
       Tuesday is indistinguishable from a day the venue is shut. */
    background-color: #f1f3f5;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.demand-cell.closed[b-416fs8yj8m] {
    /* Closed hours are inert: no shading scale, no interpretation. Hatched rather than blank so
       "we are shut" never reads as "we are dead". */
    background-color: transparent;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.045),
        rgba(0, 0, 0, 0.045) 2px,
        transparent 2px,
        transparent 5px
    );
    border-color: transparent;
}

.demand-day-total[b-416fs8yj8m] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #495057;
    text-align: right;
    padding-left: 0.4rem;
    white-space: nowrap;
    width: 56px;
}

/* ── States and footnote ───────────────────────────────────────────────── */

.demand-state[b-416fs8yj8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 90px;
}

.demand-footnote[b-416fs8yj8m] {
    font-size: 0.68rem;
    line-height: 1.3;
}

/* ── Dark theme ────────────────────────────────────────────────────────────
   The greys above are the light look. In dark they stayed light: the open-but-empty cells were
   pale #f1f3f5 tiles on the dark panel and the day labels and totals #495057 at 2.01:1 (dark-mode
   sweep, 4.0.34). Re-pointed at the tokens only under the resolved dark theme, which the admin
   alone stamps, so light and the public pages are untouched. Shaded cells keep their inline blue
   wash, which composites over either panel. */
:root[data-simx-theme-resolved="dark"] .demand-measures[b-416fs8yj8m],
:root[data-simx-theme-resolved="dark"] .demand-measure-btn + .demand-measure-btn[b-416fs8yj8m] {
    border-color: var(--simx-border-default);
}

:root[data-simx-theme-resolved="dark"] .demand-measure-btn[b-416fs8yj8m] {
    color: var(--simx-text-secondary);
}

:root[data-simx-theme-resolved="dark"] .demand-measure-btn:hover[b-416fs8yj8m] {
    background-color: var(--simx-bg-hover);
    color: var(--simx-text-primary);
}

:root[data-simx-theme-resolved="dark"] .demand-measure-btn.active[b-416fs8yj8m] {
    background-color: var(--simx-accent-strong);
    color: var(--simx-text-on-accent);
}

:root[data-simx-theme-resolved="dark"] .demand-scale-chip[b-416fs8yj8m] {
    border-color: var(--simx-border-default);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight[b-416fs8yj8m] {
    background-color: var(--simx-bg-sunken);
    border-left-color: var(--simx-border-strong);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight.busy[b-416fs8yj8m] {
    border-left-color: var(--simx-accent);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight.quiet[b-416fs8yj8m] {
    border-left-color: var(--simx-warning-solid);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight i[b-416fs8yj8m],
:root[data-simx-theme-resolved="dark"] .demand-highlight-caption[b-416fs8yj8m],
:root[data-simx-theme-resolved="dark"] .demand-highlight-detail[b-416fs8yj8m],
:root[data-simx-theme-resolved="dark"] .demand-hour-head[b-416fs8yj8m] {
    color: var(--simx-text-tertiary);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight.busy i[b-416fs8yj8m] {
    color: var(--simx-accent);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight.quiet i[b-416fs8yj8m] {
    color: var(--simx-warning-text);
}

:root[data-simx-theme-resolved="dark"] .demand-highlight-value[b-416fs8yj8m] {
    color: var(--simx-text-primary);
}

:root[data-simx-theme-resolved="dark"] .demand-day-head[b-416fs8yj8m],
:root[data-simx-theme-resolved="dark"] .demand-day-total[b-416fs8yj8m] {
    color: var(--simx-text-secondary);
}

:root[data-simx-theme-resolved="dark"] .demand-day-head.closed[b-416fs8yj8m] {
    color: var(--simx-text-disabled);
}

:root[data-simx-theme-resolved="dark"] .demand-cell[b-416fs8yj8m] {
    background-color: var(--simx-bg-sunken);
    border-color: var(--simx-border-subtle);
}

:root[data-simx-theme-resolved="dark"] .demand-cell.closed[b-416fs8yj8m] {
    background-color: transparent;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.06) 2px,
        transparent 2px,
        transparent 5px
    );
    border-color: transparent;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Analytics/KPICard.razor.rz.scp.css */
/* KPI Card Component Styles */

.kpi-card[b-lews9hu8t1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    min-height: 100px;
}

.kpi-card.loading[b-lews9hu8t1] {
    pointer-events: none;
}

/* Sizes */
.kpi-card.kpi-sm[b-lews9hu8t1] {
    min-height: 80px;
}

.kpi-card.kpi-sm .kpi-icon[b-lews9hu8t1] {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.kpi-card.kpi-sm .kpi-value[b-lews9hu8t1] {
    font-size: 1.25rem;
}

.kpi-card.kpi-lg[b-lews9hu8t1] {
    min-height: 140px;
}

.kpi-card.kpi-lg .kpi-icon[b-lews9hu8t1] {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.kpi-card.kpi-lg .kpi-value[b-lews9hu8t1] {
    font-size: 2.25rem;
}

/* Icon */
.kpi-icon[b-lews9hu8t1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--simx-radius-md, 0.375rem);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kpi-icon.icon-primary[b-lews9hu8t1] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.kpi-icon.icon-success[b-lews9hu8t1] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.kpi-icon.icon-warning[b-lews9hu8t1] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.kpi-icon.icon-danger[b-lews9hu8t1] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.kpi-icon.icon-info[b-lews9hu8t1] {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

/* Content */
.kpi-content[b-lews9hu8t1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-spacing-xs, 0.25rem);
}

.kpi-value[b-lews9hu8t1] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--simx-text-primary, #1f2937);
}

.kpi-label[b-lews9hu8t1] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary, #6b7280);
    line-height: 1.4;
}

/* Delta */
.kpi-delta[b-lews9hu8t1] {
    display: flex;
    align-items: center;
    gap: var(--simx-spacing-xs, 0.25rem);
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: var(--simx-spacing-xs, 0.25rem);
}

.kpi-delta i[b-lews9hu8t1] {
    font-size: 0.875rem;
}

.kpi-delta.delta-positive[b-lews9hu8t1] {
    color: #047857;
}

.kpi-delta.delta-negative[b-lews9hu8t1] {
    color: #dc2626;
}

.kpi-delta.delta-neutral[b-lews9hu8t1] {
    color: #6b7280;
}

.kpi-delta .delta-period[b-lews9hu8t1] {
    color: var(--simx-text-tertiary, #9ca3af);
    font-weight: 400;
}

/* Sparkline */
.kpi-sparkline[b-lews9hu8t1] {
    margin-top: var(--simx-spacing-sm, 0.5rem);
    height: 40px;
    width: 100%;
}

/* Drill-down link */
.kpi-drilldown[b-lews9hu8t1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--simx-text-secondary, #6b7280);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    position: absolute;
    top: var(--simx-spacing-sm, 0.5rem);
    right: var(--simx-spacing-sm, 0.5rem);
}

.kpi-drilldown:hover[b-lews9hu8t1] {
    background: var(--simx-surface-hover, #f3f4f6);
    color: var(--simx-primary, #3b82f6);
}

/* Skeleton loading */
.kpi-skeleton[b-lews9hu8t1] {
    display: flex;
    align-items: flex-start;
    gap: var(--simx-spacing-md, 1rem);
    width: 100%;
}

.skeleton-icon[b-lews9hu8t1] {
    width: 48px;
    height: 48px;
    border-radius: var(--simx-radius-md, 0.375rem);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-lews9hu8t1 1.5s infinite;
}

.skeleton-value[b-lews9hu8t1] {
    width: 80px;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-lews9hu8t1 1.5s infinite;
    margin-bottom: 8px;
}

.skeleton-label[b-lews9hu8t1] {
    width: 120px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-lews9hu8t1 1.5s infinite;
}

@keyframes skeleton-shimmer-b-lews9hu8t1 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Dark admin: the trend inks are light-theme hues; on the dark card the neutral grey measured 3.6:1 and the negative
   red 4.38:1. Status inks in dark only, keyed on the shell's resolved theme. */
:root[data-simx-theme-resolved="dark"] .kpi-delta.delta-positive[b-lews9hu8t1] { color: var(--simx-success-text); }
:root[data-simx-theme-resolved="dark"] .kpi-delta.delta-negative[b-lews9hu8t1] { color: var(--simx-danger-text); }
:root[data-simx-theme-resolved="dark"] .kpi-delta.delta-neutral[b-lews9hu8t1] { color: var(--simx-text-secondary); }

/* Light admin: the trend inks above were #10b981 and #ef4444, 2.5:1 and 3.76:1 on white (light-mode sweep, 4.0.34).
   The tile icons' brand hues measured 2.0 to 2.3:1 on their own tints; each takes the 700 step of its hue in light
   only (dark keeps the hues, which read on the dark card). */
:root[data-simx-theme-resolved="light"] .kpi-icon.icon-success[b-lews9hu8t1] { color: #047857; }
:root[data-simx-theme-resolved="light"] .kpi-icon.icon-warning[b-lews9hu8t1] { color: #b45309; }
:root[data-simx-theme-resolved="light"] .kpi-icon.icon-danger[b-lews9hu8t1] { color: #b91c1c; }
:root[data-simx-theme-resolved="light"] .kpi-icon.icon-info[b-lews9hu8t1] { color: #0e7490; }
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimContainer.razor.rz.scp.css */
/* ClaimContainer.razor.css - Main container styles */

.claim-container[b-jshj3aneau] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
}

.claim-header[b-jshj3aneau] {
    text-align: center;
    margin-bottom: 40px;
}

.claim-header h1[b-jshj3aneau] {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.claim-header .subtitle[b-jshj3aneau] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.claim-content[b-jshj3aneau] {
    width: 100%;
    max-width: 480px;
}

/* Loading States */
.claim-loading[b-jshj3aneau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.claim-loading .spinner[b-jshj3aneau] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-jshj3aneau 0.8s linear infinite;
    margin-bottom: 20px;
}

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

.claim-loading p[b-jshj3aneau] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Error/Warning States */
.claim-expired[b-jshj3aneau],
.claim-already-claimed[b-jshj3aneau],
.claim-link-sent[b-jshj3aneau],
.claim-no-email[b-jshj3aneau] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.success-icon[b-jshj3aneau],
.warning-icon[b-jshj3aneau] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.success-icon[b-jshj3aneau] {
    background: rgba(34, 197, 94, 0.2);
}

.success-icon i[b-jshj3aneau] {
    font-size: 2.5rem;
    color: #22c55e;
}

.warning-icon[b-jshj3aneau] {
    background: rgba(234, 179, 8, 0.2);
}

.warning-icon i[b-jshj3aneau] {
    font-size: 2.5rem;
    color: #eab308;
}

.claim-already-claimed h2[b-jshj3aneau],
.claim-expired h2[b-jshj3aneau],
.claim-link-sent h2[b-jshj3aneau],
.claim-no-email h2[b-jshj3aneau] {
    font-size: 1.5rem;
    margin: 0 0 12px 0;
}

.claim-already-claimed p[b-jshj3aneau],
.claim-expired p[b-jshj3aneau],
.claim-link-sent p[b-jshj3aneau],
.claim-no-email p[b-jshj3aneau] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}

.claim-link-sent strong[b-jshj3aneau] {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.claim-info[b-jshj3aneau] {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.help-text[b-jshj3aneau] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 480px) {
    .claim-container[b-jshj3aneau] {
        padding: 24px 16px;
    }

    .claim-header h1[b-jshj3aneau] {
        font-size: 1.5rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimErrorDisplay.razor.rz.scp.css */
/* ClaimErrorDisplay.razor.css */

.claim-error-display[b-nf92qt5695] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.error-icon[b-nf92qt5695] {
    width: 80px;
    height: 80px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-icon i[b-nf92qt5695] {
    font-size: 2.5rem;
    color: #ef4444;
}

.claim-error-display h2[b-nf92qt5695] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #ef4444;
}

.error-message[b-nf92qt5695] {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 24px 0;
    max-width: 320px;
    line-height: 1.5;
}

.retry-btn[b-nf92qt5695] {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.retry-btn:hover[b-nf92qt5695] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.retry-btn.secondary[b-nf92qt5695] {
    margin-top: 12px;
    background: transparent;
}

.help-section[b-nf92qt5695] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.help-section p[b-nf92qt5695] {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimInfoDisplay.razor.rz.scp.css */
/* ClaimInfoDisplay.razor.css */

.claim-info-display[b-lgsytkuwra] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.claim-card[b-lgsytkuwra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-icon[b-lgsytkuwra] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i[b-lgsytkuwra] {
    font-size: 2rem;
    color: white;
}

.claim-card h2[b-lgsytkuwra] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.driver-info[b-lgsytkuwra] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.driver-name[b-lgsytkuwra],
.session-date[b-lgsytkuwra],
.driver-email[b-lgsytkuwra] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.driver-name i[b-lgsytkuwra],
.session-date i[b-lgsytkuwra],
.driver-email i[b-lgsytkuwra] {
    color: rgba(255, 255, 255, 0.5);
}

.driver-name span[b-lgsytkuwra] {
    font-weight: 600;
    font-size: 1.1rem;
}

.session-date span[b-lgsytkuwra],
.driver-email span[b-lgsytkuwra] {
    color: rgba(255, 255, 255, 0.7);
}

/* Auth Required / Email Mismatch / Confirm */
.auth-required[b-lgsytkuwra],
.email-mismatch[b-lgsytkuwra],
.claim-confirm[b-lgsytkuwra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-icon[b-lgsytkuwra],
.warning-icon[b-lgsytkuwra],
.confirm-icon[b-lgsytkuwra] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.auth-icon[b-lgsytkuwra] {
    background: rgba(59, 130, 246, 0.2);
}

.auth-icon i[b-lgsytkuwra] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.warning-icon[b-lgsytkuwra] {
    background: rgba(234, 179, 8, 0.2);
}

.warning-icon i[b-lgsytkuwra] {
    font-size: 1.5rem;
    color: #eab308;
}

.confirm-icon[b-lgsytkuwra] {
    background: rgba(34, 197, 94, 0.2);
}

.confirm-icon i[b-lgsytkuwra] {
    font-size: 1.5rem;
    color: #22c55e;
}

.auth-required h3[b-lgsytkuwra],
.email-mismatch h3[b-lgsytkuwra],
.claim-confirm h3[b-lgsytkuwra] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.auth-required p[b-lgsytkuwra],
.email-mismatch p[b-lgsytkuwra],
.claim-confirm p[b-lgsytkuwra] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.help-text[b-lgsytkuwra] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px !important;
}

/* Buttons */
.auth-btn[b-lgsytkuwra],
.claim-btn[b-lgsytkuwra] {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.auth-btn[b-lgsytkuwra] {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
}

.auth-btn.secondary[b-lgsytkuwra] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.claim-confirm .auth-btn.secondary[b-lgsytkuwra] {
    margin-top: 12px;
    padding: 12px 20px;
    font-size: 0.95rem;
}

.signed-in-as[b-lgsytkuwra] {
    margin-top: 8px !important;
    overflow-wrap: anywhere;
}

.signed-in-as strong[b-lgsytkuwra] {
    color: #ffffff;
}

.claim-btn[b-lgsytkuwra] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.auth-btn:hover:not(:disabled)[b-lgsytkuwra],
.claim-btn:hover:not(:disabled)[b-lgsytkuwra] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.auth-btn:disabled[b-lgsytkuwra],
.claim-btn:disabled[b-lgsytkuwra] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

@keyframes spin-b-lgsytkuwra {
    to { transform: rotate(360deg); }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimRewardsPreview.razor.rz.scp.css */
/*
    "You're about to collect" — the prize on the claim page.

    Sits above the sign-in call to action, so it has to read as a reward and not as another form.
    The claim page is a dark surface (ClaimContainer's navy gradient), so everything here is a
    translucent layer over it, with the same amber the trophy at the top uses.

    This file styles the PublicDisplays claim screen only. It compiles into the Client scoped-CSS
    bundle, which website pages never load; the website's claim page styles the panel in
    WebsiteDisplays.Claim/Module.css (.scm-mod-Claim .claim-rewards*) on its own tokens.
*/

.claim-rewards[b-2qtctg1tfl] {
    --claim-reward-accent: #f59e0b;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
    color: #ffffff;
}

.claim-rewards-head[b-2qtctg1tfl] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.claim-rewards-head i[b-2qtctg1tfl] {
    font-size: 1.35rem;
    color: var(--claim-reward-accent);
}

.claim-rewards-head h3[b-2qtctg1tfl] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.claim-rewards-figures[b-2qtctg1tfl] {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.claim-rewards-figure[b-2qtctg1tfl] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.claim-rewards-value[b-2qtctg1tfl] {
    font-size: 1.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--claim-reward-accent);
}

.claim-rewards-label[b-2qtctg1tfl] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.claim-rewards-badges[b-2qtctg1tfl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.claim-rewards-badge[b-2qtctg1tfl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
    font-weight: 600;
}

.claim-rewards-badge i[b-2qtctg1tfl] {
    color: #93c5fd;
}

.claim-rewards-badge.is-uncommon i[b-2qtctg1tfl] { color: #4ade80; }
.claim-rewards-badge.is-rare i[b-2qtctg1tfl] { color: #60a5fa; }
.claim-rewards-badge.is-epic i[b-2qtctg1tfl] { color: #c084fc; }
.claim-rewards-badge.is-legendary i[b-2qtctg1tfl] { color: var(--claim-reward-accent); }

.claim-rewards-badge.is-more[b-2qtctg1tfl] {
    background: transparent;
    border-style: dashed;
    color: rgba(255, 255, 255, 0.65);
}

.claim-rewards-what[b-2qtctg1tfl],
.claim-rewards-today[b-2qtctg1tfl] {
    margin: 0;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.claim-rewards-what[b-2qtctg1tfl] {
    color: rgba(255, 255, 255, 0.65);
}

.claim-rewards-today[b-2qtctg1tfl] {
    font-weight: 700;
    color: var(--claim-reward-accent);
}

@media (max-width: 420px) {
    .claim-rewards[b-2qtctg1tfl] {
        padding: 16px 18px;
    }

    .claim-rewards-figures[b-2qtctg1tfl] {
        gap: 20px;
    }

    .claim-rewards-value[b-2qtctg1tfl] {
        font-size: 1.6rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimShortCodeEntry.razor.rz.scp.css */
/* ClaimShortCodeEntry.razor.css */

.shortcode-entry[b-cchmb17lwa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-icon[b-cchmb17lwa] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.entry-icon i[b-cchmb17lwa] {
    font-size: 2.5rem;
    color: white;
}

.shortcode-entry h2[b-cchmb17lwa] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.entry-description[b-cchmb17lwa] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 32px 0;
}

.shortcode-form[b-cchmb17lwa] {
    width: 100%;
    max-width: 280px;
}

.input-group[b-cchmb17lwa] {
    margin-bottom: 16px;
}

.shortcode-input[b-cchmb17lwa] {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: white;
    transition: all 0.2s ease;
}

.shortcode-input[b-cchmb17lwa]::placeholder {
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.2em;
}

.shortcode-input:focus[b-cchmb17lwa] {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.shortcode-input.has-error[b-cchmb17lwa] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.shortcode-input:disabled[b-cchmb17lwa] {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message[b-cchmb17lwa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ef4444;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.submit-btn[b-cchmb17lwa] {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled)[b-cchmb17lwa] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.submit-btn:disabled[b-cchmb17lwa] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

.entry-help[b-cchmb17lwa] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 32px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-align: left;
}

.entry-help i[b-cchmb17lwa] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    margin-top: 2px;
}

.entry-help p[b-cchmb17lwa] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Claim/ClaimSuccessDisplay.razor.rz.scp.css */
/* ClaimSuccessDisplay.razor.css */

.claim-success[b-jp2ufpi7gs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.success-animation[b-jp2ufpi7gs] {
    margin-bottom: 24px;
}

.success-circle[b-jp2ufpi7gs] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-jp2ufpi7gs 0.3s ease-out;
}

.success-circle i[b-jp2ufpi7gs] {
    font-size: 3rem;
    color: white;
    animation: checkIn-b-jp2ufpi7gs 0.4s ease-out 0.2s both;
}

@keyframes scaleIn-b-jp2ufpi7gs {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkIn-b-jp2ufpi7gs {
    from {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.claim-success h2[b-jp2ufpi7gs] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #22c55e;
}

.success-message[b-jp2ufpi7gs] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px 0;
}

.claim-summary[b-jp2ufpi7gs] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.summary-item[b-jp2ufpi7gs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.summary-item i[b-jp2ufpi7gs] {
    color: rgba(255, 255, 255, 0.5);
}

.summary-item.highlight[b-jp2ufpi7gs] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.summary-item.highlight i[b-jp2ufpi7gs] {
    color: #22c55e;
}

.personal-bests[b-jp2ufpi7gs] {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-top: 8px;
}

.personal-bests h4[b-jp2ufpi7gs] {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
}

.pb-item[b-jp2ufpi7gs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pb-item:last-child[b-jp2ufpi7gs] {
    border-bottom: none;
}

.pb-item i[b-jp2ufpi7gs] {
    color: #f59e0b;
}

.view-results-btn[b-jp2ufpi7gs] {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.view-results-btn:hover[b-jp2ufpi7gs] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Gamification Summary */
.gamification-summary[b-jp2ufpi7gs] {
    width: 100%;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gamification-section[b-jp2ufpi7gs] {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    text-align: left;
}

.gamification-section h4[b-jp2ufpi7gs] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.badges-earned[b-jp2ufpi7gs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge-item[b-jp2ufpi7gs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(111, 66, 193, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(111, 66, 193, 0.3);
    /* Plays once, when the badge is inserted: badges are keyed, so one already on screen is never re-inserted. */
    animation: badgeArrive-b-jp2ufpi7gs 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes badgeArrive-b-jp2ufpi7gs {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge-item[b-jp2ufpi7gs] {
        animation: none;
    }
}

.badges-pending[b-jp2ufpi7gs] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.level-title[b-jp2ufpi7gs] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd700;
}

.xp-gained[b-jp2ufpi7gs] {
    margin: 10px 0 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fbbf24;
}

.badge-icon[b-jp2ufpi7gs] {
    font-size: 1.25rem;
    color: #a78bfa;
}

.badge-info[b-jp2ufpi7gs] {
    display: flex;
    flex-direction: column;
}

.badge-info strong[b-jp2ufpi7gs] {
    font-size: 0.9rem;
}

.badge-xp[b-jp2ufpi7gs] {
    font-size: 0.8rem;
    color: #fbbf24;
}

.xp-summary[b-jp2ufpi7gs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.level-badge[b-jp2ufpi7gs] {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.xp-progress[b-jp2ufpi7gs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xp-bar[b-jp2ufpi7gs] {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.xp-fill[b-jp2ufpi7gs] {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.xp-text[b-jp2ufpi7gs] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.streak-status[b-jp2ufpi7gs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.streak-count[b-jp2ufpi7gs] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fb923c;
}

.streak-warning[b-jp2ufpi7gs] {
    font-size: 0.8rem;
    color: #ef4444;
}

/* Share Section */
.share-section[b-jp2ufpi7gs] {
    width: 100%;
    margin: 16px 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    text-align: center;
}

.share-section h4[b-jp2ufpi7gs] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px 0;
}

.qr-container[b-jp2ufpi7gs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qr-code[b-jp2ufpi7gs] {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    background: white;
    padding: 8px;
}

.share-text[b-jp2ufpi7gs] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Claim Actions */
.claim-actions[b-jp2ufpi7gs] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.book-next-btn[b-jp2ufpi7gs] {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.book-next-btn:hover[b-jp2ufpi7gs] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
    color: white;
    text-decoration: none;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Credentials/CredentialScanCapture.razor.rz.scp.css */
/* CredentialScanCapture — passive scan affordance (W1.1) */

.credential-scan-indicator[b-xyjhc8e0s0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px dashed var(--bs-primary, #3b82f6);
    border-radius: 999px;
    color: var(--bs-primary, #3b82f6);
    font-size: 0.9rem;
    opacity: 0.9;
}

    .credential-scan-indicator i.bi-broadcast[b-xyjhc8e0s0] {
        animation: scm-scan-pulse-b-xyjhc8e0s0 2s ease-in-out infinite;
    }

    .credential-scan-indicator.scan-disabled[b-xyjhc8e0s0] {
        opacity: 0.4;
        border-color: var(--bs-secondary, #6c757d);
        color: var(--bs-secondary, #6c757d);
    }

        .credential-scan-indicator.scan-disabled i.bi-broadcast[b-xyjhc8e0s0] {
            animation: none;
        }

.scan-nfc-badge[b-xyjhc8e0s0] {
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--bs-primary, #3b82f6);
    color: #fff;
}

.credential-scan-manual[b-xyjhc8e0s0] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@keyframes scm-scan-pulse-b-xyjhc8e0s0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Dark admin (Issue Credential): the site's primary as ink measured 2.9:1 on the dark dialog. Only admin pages carry
   the attribute, so the kiosk keeps the site's colour. */
:root[data-simx-theme-resolved="dark"] .credential-scan-indicator[b-xyjhc8e0s0] {
    border-color: var(--simx-accent);
    color: var(--simx-accent-text);
}

:root[data-simx-theme-resolved="dark"] .credential-scan-indicator.scan-disabled[b-xyjhc8e0s0] {
    border-color: var(--simx-border-strong);
    color: var(--simx-text-secondary);
}

:root[data-simx-theme-resolved="dark"] .scan-nfc-badge[b-xyjhc8e0s0] {
    background: var(--simx-accent-strong);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Displays/ContestLeaderboardDisplay.razor.rz.scp.css */
/* 
 * ContestLeaderboardDisplay.razor.css
 * Contest/competition standings styling
 * Scales to fill any screen size for public displays
 */

/* ===== CSS Variables (Defaults) ===== */
.contest-leaderboard[b-c6jdxs3n1t] {
    --clb-bg: #1a1a2e;
    --clb-surface: #16213e;
    --clb-text: #ffffff;
    --clb-text-muted: #a0a0a0;
    --clb-primary: #f59e0b;
    --clb-leader-bg: rgba(255, 215, 0, 0.15);
    --clb-best: #a855f7;
    --clb-pos-gain: #22c55e;
    --clb-pos-lost: #ef4444;
    --clb-border: rgba(255, 255, 255, 0.1);
    --clb-font: 'Roboto Condensed', 'Segoe UI', sans-serif;
    --clb-header-font: 'Roboto Condensed', 'Segoe UI', sans-serif;
    
    /* Scaling factor based on viewport - adjust for different screen sizes.
       Must stay a unitless number: every gap/padding uses calc(Npx * var(--clb-scale)),
       so a typed/invalid value (e.g. mixing a number with vw) collapses all spacing to 0.
       Larger kiosk displays scale up via the min-width media queries below. */
    --clb-scale: 1;
    
    font-family: var(--clb-font);
    background: var(--clb-bg);
    color: var(--clb-text);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Fill available space - both width and height */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ===== Header ===== */
.leaderboard-header[b-c6jdxs3n1t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(16px * var(--clb-scale)) calc(20px * var(--clb-scale));
    background: var(--clb-surface);
    border-bottom: 2px solid var(--clb-primary);
    flex-shrink: 0;
}

.contest-info[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--clb-scale));
}

.contest-name[b-c6jdxs3n1t] {
    font-family: var(--clb-header-font);
    font-size: clamp(1.2rem, calc(1.5rem * var(--clb-scale)), 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contest-type.badge[b-c6jdxs3n1t] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale)), 1.1rem);
    font-weight: 600;
    padding: calc(4px * var(--clb-scale)) calc(10px * var(--clb-scale));
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contest-status[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--clb-scale));
}

.track-info[b-c6jdxs3n1t] {
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale)), 1.3rem);
    color: var(--clb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===== Status Badges ===== */
.status-badge[b-c6jdxs3n1t] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale)), 1.1rem);
    font-weight: 600;
    padding: calc(4px * var(--clb-scale)) calc(10px * var(--clb-scale));
    border-radius: 4px;
    text-transform: uppercase;
}

.status-badge.status-draft[b-c6jdxs3n1t] {
    background: #6b7280;
    color: #fff;
}

.status-badge.status-published[b-c6jdxs3n1t] {
    background: #3b82f6;
    color: #fff;
}

.status-badge.status-active[b-c6jdxs3n1t] {
    background: #22c55e;
    color: #fff;
    animation: activePulse-b-c6jdxs3n1t 2s ease-in-out infinite;
}

.status-badge.status-closed[b-c6jdxs3n1t] {
    background: #f59e0b;
    color: #000;
}

.status-badge.status-completed[b-c6jdxs3n1t] {
    background: #8b5cf6;
    color: #fff;
}

.status-badge.status-cancelled[b-c6jdxs3n1t] {
    background: #ef4444;
    color: #fff;
}

@keyframes activePulse-b-c6jdxs3n1t {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ===== Contest Details ===== */
.contest-details[b-c6jdxs3n1t] {
    display: flex;
    justify-content: center;
    gap: calc(24px * var(--clb-scale));
    padding: calc(12px * var(--clb-scale)) calc(20px * var(--clb-scale));
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--clb-border);
    flex-shrink: 0;
}

.detail-item[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--clb-scale));
    font-size: clamp(0.75rem, calc(0.85rem * var(--clb-scale)), 1.2rem);
    color: var(--clb-text-muted);
}

.detail-item i[b-c6jdxs3n1t] {
    color: var(--clb-primary);
}

/* ===== Column Headers ===== */
.leaderboard-columns[b-c6jdxs3n1t] {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(100px, 120px) minmax(80px, 100px) minmax(60px, 80px);
    padding: calc(10px * var(--clb-scale)) calc(20px * var(--clb-scale));
    background: rgba(0, 0, 0, 0.3);
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale)), 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clb-text-muted);
    border-bottom: 1px solid var(--clb-border);
    flex-shrink: 0;
}

.leaderboard-columns > div[b-c6jdxs3n1t] {
    padding: 0 calc(4px * var(--clb-scale));
}

.col-rank[b-c6jdxs3n1t] { text-align: center; }
.col-time[b-c6jdxs3n1t], .col-gap[b-c6jdxs3n1t], .col-attempts[b-c6jdxs3n1t], .col-points[b-c6jdxs3n1t] { text-align: right; }

/* Adjust grid when points column is shown */
.contest-leaderboard:has(.col-points) .leaderboard-columns[b-c6jdxs3n1t],
.contest-leaderboard:has(.col-points) .leaderboard-row[b-c6jdxs3n1t] {
    grid-template-columns: minmax(60px, 80px) 1fr minmax(100px, 120px) minmax(80px, 100px) minmax(60px, 80px) minmax(60px, 80px);
}

/* ===== Entries Container ===== */
.leaderboard-entries[b-c6jdxs3n1t] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.leaderboard-entries.auto-scroll[b-c6jdxs3n1t] {
    animation: autoScroll 30s linear infinite;
}

.leaderboard-entries[b-c6jdxs3n1t]::-webkit-scrollbar {
    width: 4px;
}

.leaderboard-entries[b-c6jdxs3n1t]::-webkit-scrollbar-track {
    background: transparent;
}

.leaderboard-entries[b-c6jdxs3n1t]::-webkit-scrollbar-thumb {
    background: var(--clb-border);
    border-radius: 2px;
}

/* ===== Leaderboard Row ===== */
.leaderboard-row[b-c6jdxs3n1t] {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(100px, 120px) minmax(80px, 100px) minmax(60px, 80px);
    padding: calc(12px * var(--clb-scale)) calc(20px * var(--clb-scale));
    border-bottom: 1px solid var(--clb-border);
    transition: all 0.3s ease;
    align-items: center;
}

.leaderboard-row:hover[b-c6jdxs3n1t] {
    background: rgba(255, 255, 255, 0.05);
}

.leaderboard-row.leader[b-c6jdxs3n1t] {
    background: var(--clb-leader-bg);
}

.leaderboard-row.podium[b-c6jdxs3n1t] {
    border-left: 3px solid transparent;
}

.leaderboard-row.leader[b-c6jdxs3n1t] {
    border-left-color: #ffd700;
}

.leaderboard-row.podium:nth-child(2)[b-c6jdxs3n1t] {
    border-left-color: #c0c0c0;
}

.leaderboard-row.podium:nth-child(3)[b-c6jdxs3n1t] {
    border-left-color: #cd7f32;
}

.leaderboard-row.prize-position[b-c6jdxs3n1t] {
    background: rgba(245, 158, 11, 0.1);
}

.leaderboard-row.rank-gained[b-c6jdxs3n1t] {
    animation: slideFromTop-b-c6jdxs3n1t 0.5s ease;
}

.leaderboard-row.rank-lost[b-c6jdxs3n1t] {
    animation: slideFromBottom-b-c6jdxs3n1t 0.5s ease;
}

@keyframes slideFromTop-b-c6jdxs3n1t {
    from {
        transform: translateY(-50%);
        opacity: 0;
        background: rgba(34, 197, 94, 0.2);
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromBottom-b-c6jdxs3n1t {
    from {
        transform: translateY(50%);
        opacity: 0;
        background: rgba(239, 68, 68, 0.2);
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Rank Column ===== */
.col-rank[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--clb-scale));
}

.rank-number[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, calc(32px * var(--clb-scale)), 48px);
    height: clamp(28px, calc(32px * var(--clb-scale)), 48px);
    font-size: clamp(0.9rem, calc(1.1rem * var(--clb-scale)), 1.6rem);
    font-weight: 700;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.rank-number.rank-1[b-c6jdxs3n1t] {
    background: linear-gradient(135deg, #ffd700, #ffec8b);
    color: #000;
}

.rank-number.rank-2[b-c6jdxs3n1t] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #000;
}

.rank-number.rank-3[b-c6jdxs3n1t] {
    background: linear-gradient(135deg, #cd7f32, #daa06d);
    color: #000;
}

.rank-change[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(0.6rem, calc(0.7rem * var(--clb-scale)), 1rem);
    font-weight: 600;
}

.rank-change.gained[b-c6jdxs3n1t] {
    color: var(--clb-pos-gain);
}

.rank-change.lost[b-c6jdxs3n1t] {
    color: var(--clb-pos-lost);
}

.prize-indicator[b-c6jdxs3n1t] {
    color: var(--clb-primary);
    font-size: clamp(0.7rem, calc(0.8rem * var(--clb-scale)), 1.1rem);
    animation: prizeGlow-b-c6jdxs3n1t 2s ease-in-out infinite;
}

@keyframes prizeGlow-b-c6jdxs3n1t {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Driver Column ===== */
.col-driver[b-c6jdxs3n1t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 calc(8px * var(--clb-scale));
    overflow: hidden;
}

.driver-name[b-c6jdxs3n1t] {
    font-weight: 600;
    font-size: clamp(0.85rem, calc(1rem * var(--clb-scale)), 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-name[b-c6jdxs3n1t] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale)), 1rem);
    color: var(--clb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Time Column ===== */
.col-time[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(6px * var(--clb-scale));
    text-align: right;
    padding: 0 calc(8px * var(--clb-scale));
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: clamp(0.8rem, calc(0.95rem * var(--clb-scale)), 1.4rem);
}

.col-time.best-time[b-c6jdxs3n1t] {
    color: var(--clb-best);
    font-weight: 700;
}

.time-value[b-c6jdxs3n1t] {
    font-weight: 500;
}

.leader-indicator[b-c6jdxs3n1t] {
    color: #ffd700;
    font-size: clamp(0.6rem, calc(0.7rem * var(--clb-scale)), 1rem);
}

/* ===== Gap Column ===== */
.col-gap[b-c6jdxs3n1t] {
    text-align: right;
    padding: 0 calc(8px * var(--clb-scale));
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale)), 1.3rem);
    color: var(--clb-text-muted);
}

.leader-text[b-c6jdxs3n1t] {
    color: var(--clb-primary);
    font-weight: 600;
    font-size: clamp(0.7rem, calc(0.8rem * var(--clb-scale)), 1.1rem);
}

/* ===== Attempts Column ===== */
.col-attempts[b-c6jdxs3n1t] {
    text-align: center;
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale)), 1.3rem);
    color: var(--clb-text-muted);
}

/* ===== Points Column ===== */
.col-points[b-c6jdxs3n1t] {
    text-align: right;
    padding: 0 calc(8px * var(--clb-scale));
}

.points-value[b-c6jdxs3n1t] {
    font-weight: 600;
    font-size: clamp(0.85rem, calc(1rem * var(--clb-scale)), 1.5rem);
    color: var(--clb-primary);
}

/* ===== No Entries State ===== */
.no-entries[b-c6jdxs3n1t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(60px * var(--clb-scale)) calc(20px * var(--clb-scale));
    color: var(--clb-text-muted);
    gap: calc(12px * var(--clb-scale));
    flex: 1;
}

.no-entries i[b-c6jdxs3n1t] {
    font-size: clamp(2rem, calc(3rem * var(--clb-scale)), 5rem);
    opacity: 0.5;
}

.no-entries small[b-c6jdxs3n1t] {
    font-size: clamp(0.75rem, calc(0.85rem * var(--clb-scale)), 1.2rem);
    opacity: 0.7;
}

/* ===== Footer ===== */
.leaderboard-footer[b-c6jdxs3n1t] {
    padding: calc(8px * var(--clb-scale)) calc(20px * var(--clb-scale));
    background: rgba(0, 0, 0, 0.3);
    text-align: right;
    flex-shrink: 0;
}

.update-time[b-c6jdxs3n1t] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale)), 1rem);
    color: var(--clb-text-muted);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .leaderboard-columns[b-c6jdxs3n1t],
    .leaderboard-row[b-c6jdxs3n1t] {
        grid-template-columns: 60px 1fr 100px 70px;
    }
    
    .col-attempts[b-c6jdxs3n1t],
    .leaderboard-columns > .col-attempts[b-c6jdxs3n1t] {
        display: none;
    }
    
    .vehicle-name[b-c6jdxs3n1t] {
        display: none;
    }
    
    .contest-details[b-c6jdxs3n1t] {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .leaderboard-columns[b-c6jdxs3n1t],
    .leaderboard-row[b-c6jdxs3n1t] {
        grid-template-columns: 50px 1fr 90px;
    }
    
    .col-gap[b-c6jdxs3n1t],
    .leaderboard-columns > .col-gap[b-c6jdxs3n1t] {
        display: none;
    }
    
    .leaderboard-header[b-c6jdxs3n1t] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .contest-info[b-c6jdxs3n1t] {
        flex-direction: column;
        gap: 4px;
    }
    
    .contest-details[b-c6jdxs3n1t] {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== Large Display Scaling ===== */
@media (min-width: 1920px) {
    .contest-leaderboard[b-c6jdxs3n1t] {
        --clb-scale: 1.25;
    }
}

@media (min-width: 2560px) {
    .contest-leaderboard[b-c6jdxs3n1t] {
        --clb-scale: 1.5;
    }
}

@media (min-width: 3840px) {
    .contest-leaderboard[b-c6jdxs3n1t] {
        --clb-scale: 2;
    }
}

/* ===== Fullscreen/Kiosk Mode ===== */
.contest-leaderboard:fullscreen[b-c6jdxs3n1t],
.contest-leaderboard:-webkit-full-screen[b-c6jdxs3n1t] {
    border-radius: 0;
    height: 100vh;
    width: 100vw;
}

/* ===== Group Event Banner ===== */
.group-event-banner[b-c6jdxs3n1t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(184, 134, 11, 0.1) 100%);
    border-bottom: 2px solid rgba(255, 193, 7, 0.3);
}

.group-event-banner__icon[b-c6jdxs3n1t] {
    font-size: 1.5rem;
    color: #ffc107;
    flex-shrink: 0;
}

.group-event-banner__info[b-c6jdxs3n1t] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.group-event-banner__label[b-c6jdxs3n1t] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.group-event-banner__name[b-c6jdxs3n1t] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-event-banner__live-badge[b-c6jdxs3n1t] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    background: rgba(25, 135, 84, 0.2);
    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.group-event-banner__live-dot[b-c6jdxs3n1t] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ade80;
    animation: group-event-live-pulse-b-c6jdxs3n1t 1.5s ease-in-out infinite;
}

@keyframes group-event-live-pulse-b-c6jdxs3n1t {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Group event mode accent override */
.contest-leaderboard--group-event .leaderboard-header[b-c6jdxs3n1t] {
    border-bottom-color: rgba(255, 193, 7, 0.2);
}


/* ===== G.6.8 — kd-* chip vocabulary (PublicDisplays variant) ===== */
.contest-leaderboard .kd-series-chip[b-c6jdxs3n1t],
.contest-leaderboard .kd-round-chip[b-c6jdxs3n1t] {
    display: inline-flex;
    align-items: center;
    padding: calc(4px * var(--clb-scale)) calc(10px * var(--clb-scale));
    font-size: clamp(0.7rem, calc(0.8rem * var(--clb-scale)), 1.1rem);
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.contest-leaderboard .kd-series-chip[b-c6jdxs3n1t] {
    background: rgba(245, 158, 11, 0.18);
    color: var(--clb-primary);
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.contest-leaderboard .kd-round-chip[b-c6jdxs3n1t] {
    background: rgba(168, 85, 247, 0.18);
    color: var(--clb-best);
    border: 1px solid rgba(168, 85, 247, 0.45);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Displays/RaceLeaderboardDisplay.razor.rz.scp.css */
/* 
 * RaceLeaderboardDisplay.razor.css
 * F1-style race leaderboard styling
 * Scales to fill any screen size for public displays
 */

/* ===== CSS Variables (Defaults) ===== */
.race-leaderboard[b-igaa9y9tlt] {
    --lb-bg: #1a1a2e;
    --lb-surface: #16213e;
    --lb-text: #ffffff;
    --lb-text-muted: #a0a0a0;
    --lb-primary: #e10600;
    --lb-leader-bg: rgba(255, 215, 0, 0.15);
    --lb-session-best: #a855f7;
    --lb-personal-best: #22c55e;
    --lb-pos-gain: #22c55e;
    --lb-pos-lost: #ef4444;
    --lb-border: rgba(255, 255, 255, 0.1);
    --lb-font: 'Roboto Condensed', 'Segoe UI', sans-serif;
    --lb-header-font: 'Roboto Condensed', 'Segoe UI', sans-serif;
    
    /* Scaling factor based on viewport - adjust for different screen sizes.
       Must stay a unitless number: every gap/padding uses calc(Npx * var(--lb-scale)),
       so a typed/invalid value (e.g. mixing a number with vw) collapses all spacing to 0.
       Larger kiosk displays scale up via the min-width media queries below. */
    --lb-scale: 1;
    
    font-family: var(--lb-font);
    background: var(--lb-bg);
    color: var(--lb-text);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Fill available space - both width and height */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ===== Header ===== */
.leaderboard-header[b-igaa9y9tlt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: calc(16px * var(--lb-scale)) calc(20px * var(--lb-scale));
    background: var(--lb-surface);
    border-bottom: 2px solid var(--lb-primary);
    flex-shrink: 0;
}

/* G.6.12 — kd-* chip vocabulary */
.series-row[b-igaa9y9tlt] {
    flex: 1 0 100%;
    display: flex;
    gap: calc(8px * var(--lb-scale));
    flex-wrap: wrap;
    margin-bottom: calc(8px * var(--lb-scale));
}

.kd-series-chip[b-igaa9y9tlt],
.kd-round-chip[b-igaa9y9tlt] {
    display: inline-flex;
    align-items: center;
    padding: calc(4px * var(--lb-scale)) calc(10px * var(--lb-scale));
    font-size: clamp(0.7rem, calc(0.85rem * var(--lb-scale)), 1.1rem);
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.kd-series-chip[b-igaa9y9tlt] {
    background: rgba(245, 158, 11, 0.18);
    color: #ffc857;
    border-color: rgba(245, 158, 11, 0.45);
}

.kd-round-chip[b-igaa9y9tlt] {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.45);
}

.session-info[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--lb-scale));
}

.session-name[b-igaa9y9tlt] {
    font-family: var(--lb-header-font);
    font-size: clamp(1.2rem, calc(1.5rem * var(--lb-scale)), 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lap-counter[b-igaa9y9tlt],
.time-remaining[b-igaa9y9tlt] {
    font-size: clamp(1rem, calc(1.25rem * var(--lb-scale)), 2rem);
    font-weight: 600;
    padding: calc(4px * var(--lb-scale)) calc(12px * var(--lb-scale));
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.session-status[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--lb-scale));
}

.track-name[b-igaa9y9tlt] {
    font-size: clamp(0.75rem, calc(0.9rem * var(--lb-scale)), 1.3rem);
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ===== Flag Indicators ===== */
.flag-indicator[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--lb-scale));
    padding: calc(6px * var(--lb-scale)) calc(12px * var(--lb-scale));
    border-radius: 4px;
    font-weight: 600;
    font-size: clamp(0.75rem, calc(0.9rem * var(--lb-scale)), 1.3rem);
    text-transform: uppercase;
    animation: flagPulse-b-igaa9y9tlt 1s ease-in-out infinite;
}

.flag-indicator.flag-yellow[b-igaa9y9tlt] {
    background: #fbbf24;
    color: #000;
}

.flag-indicator.flag-red[b-igaa9y9tlt] {
    background: #dc2626;
    color: #fff;
}

.flag-indicator.flag-safety[b-igaa9y9tlt],
.flag-indicator.flag-vsc[b-igaa9y9tlt] {
    background: #f97316;
    color: #fff;
}

.flag-indicator.flag-checkered[b-igaa9y9tlt] {
    background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 50% / 10px 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.9);
    font-weight: 700;
    padding: calc(8px * var(--lb-scale)) calc(16px * var(--lb-scale));
    animation: none;
}

@keyframes flagPulse-b-igaa9y9tlt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Column Headers ===== */
.leaderboard-columns[b-igaa9y9tlt] {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(80px, 100px) minmax(80px, 100px) minmax(80px, 100px) minmax(50px, 60px);
    padding: calc(10px * var(--lb-scale)) calc(20px * var(--lb-scale));
    background: rgba(0, 0, 0, 0.3);
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale)), 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lb-text-muted);
    border-bottom: 1px solid var(--lb-border);
    flex-shrink: 0;
}

.leaderboard-columns > div[b-igaa9y9tlt] {
    padding: 0 calc(4px * var(--lb-scale));
}

.col-pos[b-igaa9y9tlt] { text-align: left; }
.col-gap[b-igaa9y9tlt], .col-time[b-igaa9y9tlt], .col-pits[b-igaa9y9tlt] { text-align: right; }

/* ===== Entries Container ===== */
.leaderboard-entries[b-igaa9y9tlt] {
    flex: 1;
    min-height: 0;
    /* Manual scroll for non-kiosk usages (admin preview, website embeds). */
    overflow-y: auto;
}

.leaderboard-entries.auto-scroll[b-igaa9y9tlt] {
    /* Kiosk auto-scroll: clip so rows can never paint over the column/session
       headers, and establish a containment context so the inner track's
       auto-scroll distance is measured against THIS container's height
       (100cqh) rather than the viewport. */
    overflow: hidden;
    container-type: size;
}

/* Inner track shrink-wraps the rows so translateY(-100%) means "the height of
   the content", not "the height of the (tall) flex container". */
.leaderboard-entries-track[b-igaa9y9tlt] {
    display: flex;
    flex-direction: column;
}

/* Auto-scroll only runs on the inner track, and only translates by the REAL
   overflow amount: min(0, containerHeight - contentHeight). When the content
   fits (e.g. a 4-driver solo race), that value is 0, so the track stays put and
   can never slide up over the column headers or the session header. */
.leaderboard-entries.auto-scroll .leaderboard-entries-track[b-igaa9y9tlt] {
    animation: autoScroll-b-igaa9y9tlt 30s linear infinite;
}

@keyframes autoScroll-b-igaa9y9tlt {
    0%, 12% { transform: translateY(0); }
    88%, 100% { transform: translateY(min(0px, calc(100cqh - 100%))); }
}

/* Respect reduced-motion preferences on public displays. */
@media (prefers-reduced-motion: reduce) {
    .leaderboard-entries.auto-scroll .leaderboard-entries-track[b-igaa9y9tlt] {
        animation: none;
    }
}

.leaderboard-entries[b-igaa9y9tlt]::-webkit-scrollbar {
    width: 4px;
}

.leaderboard-entries[b-igaa9y9tlt]::-webkit-scrollbar-track {
    background: transparent;
}

.leaderboard-entries[b-igaa9y9tlt]::-webkit-scrollbar-thumb {
    background: var(--lb-border);
    border-radius: 2px;
}

/* ===== Leaderboard Row ===== */
.leaderboard-row[b-igaa9y9tlt] {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(80px, 100px) minmax(80px, 100px) minmax(80px, 100px) minmax(50px, 60px);
    padding: calc(12px * var(--lb-scale)) calc(20px * var(--lb-scale));
    border-bottom: 1px solid var(--lb-border);
    transition: all 0.3s ease;
    align-items: center;
}

.leaderboard-row:hover[b-igaa9y9tlt] {
    background: rgba(255, 255, 255, 0.05);
}

.leaderboard-row.leader[b-igaa9y9tlt] {
    background: var(--lb-leader-bg);
}

.leaderboard-row.podium[b-igaa9y9tlt] {
    border-left: 3px solid transparent;
}

.leaderboard-row.leader[b-igaa9y9tlt] {
    border-left-color: #ffd700;
}

.leaderboard-row.podium:nth-child(2)[b-igaa9y9tlt] {
    border-left-color: #c0c0c0;
}

.leaderboard-row.podium:nth-child(3)[b-igaa9y9tlt] {
    border-left-color: #cd7f32;
}

.leaderboard-row.position-gained[b-igaa9y9tlt] {
    animation: slideFromTop-b-igaa9y9tlt 0.5s ease;
}

.leaderboard-row.position-lost[b-igaa9y9tlt] {
    animation: slideFromBottom-b-igaa9y9tlt 0.5s ease;
}

.leaderboard-row.in-pits[b-igaa9y9tlt] {
    opacity: 0.7;
}

.leaderboard-row.out[b-igaa9y9tlt] {
    opacity: 0.5;
    text-decoration: line-through;
}

@keyframes slideFromTop-b-igaa9y9tlt {
    from {
        transform: translateY(-100%);
        opacity: 0;
        background: rgba(34, 197, 94, 0.2);
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromBottom-b-igaa9y9tlt {
    from {
        transform: translateY(100%);
        opacity: 0;
        background: rgba(239, 68, 68, 0.2);
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Position Column ===== */
.col-pos[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    /* Left-anchored, not centred: the position-change chevron is conditional, and centring
       the pair made the fixed-width square slide left by half the chevron's width whenever a
       driver gained or lost a place. The square now sits at a fixed offset and the chevron
       fills a reserved slot beside it, so the POS column never reflows. */
    justify-content: flex-start;
    gap: calc(4px * var(--lb-scale));
}

.position-number[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, calc(32px * var(--lb-scale)), 48px);
    height: clamp(28px, calc(32px * var(--lb-scale)), 48px);
    font-size: clamp(0.9rem, calc(1.1rem * var(--lb-scale)), 1.6rem);
    font-weight: 700;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.position-number.p1[b-igaa9y9tlt] {
    background: linear-gradient(135deg, #ffd700, #ffec8b);
    color: #000;
}

.position-number.p2[b-igaa9y9tlt] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #000;
}

.position-number.p3[b-igaa9y9tlt] {
    background: linear-gradient(135deg, #cd7f32, #daa06d);
    color: #000;
}

.position-change[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    /* Reserved width so a one- and a two-digit change occupy the same slot. */
    min-width: calc(26px * var(--lb-scale));
    gap: 2px;
    font-size: clamp(0.6rem, calc(0.7rem * var(--lb-scale)), 1rem);
    font-weight: 600;
}

.position-change.gained[b-igaa9y9tlt] {
    color: var(--lb-pos-gain);
}

.position-change.lost[b-igaa9y9tlt] {
    color: var(--lb-pos-lost);
}

/* ===== Driver Column ===== */
.col-driver[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--lb-scale));
    padding: 0 calc(8px * var(--lb-scale));
    overflow: hidden;
}

.car-number[b-igaa9y9tlt] {
    font-size: clamp(0.7rem, calc(0.8rem * var(--lb-scale)), 1.1rem);
    font-weight: 600;
    padding: calc(2px * var(--lb-scale)) calc(6px * var(--lb-scale));
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    min-width: clamp(28px, calc(32px * var(--lb-scale)), 48px);
    text-align: center;
}

.driver-name[b-igaa9y9tlt] {
    font-weight: 600;
    font-size: clamp(0.85rem, calc(1rem * var(--lb-scale)), 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-name[b-igaa9y9tlt] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale)), 1rem);
    color: var(--lb-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.driver-status[b-igaa9y9tlt] {
    font-size: clamp(0.55rem, calc(0.65rem * var(--lb-scale)), 0.9rem);
    font-weight: 700;
    padding: calc(2px * var(--lb-scale)) calc(6px * var(--lb-scale));
    border-radius: 3px;
    text-transform: uppercase;
}

.driver-status.inpits[b-igaa9y9tlt] {
    background: #3b82f6;
    color: #fff;
}

.driver-status.dnf[b-igaa9y9tlt],
.driver-status.dsq[b-igaa9y9tlt] {
    background: #dc2626;
    color: #fff;
}

.driver-status.finished[b-igaa9y9tlt] {
    background: #22c55e;
    color: #fff;
}

/* ===== Timing Columns ===== */
.col-gap[b-igaa9y9tlt],
.col-time[b-igaa9y9tlt] {
    text-align: right;
    padding: 0 calc(8px * var(--lb-scale));
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: clamp(0.8rem, calc(0.95rem * var(--lb-scale)), 1.4rem);
}

.col-time[b-igaa9y9tlt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(4px * var(--lb-scale));
}

.col-time.session-best[b-igaa9y9tlt] {
    color: var(--lb-session-best);
    font-weight: 700;
}

.col-time.personal-best[b-igaa9y9tlt] {
    color: var(--lb-personal-best);
    font-weight: 600;
}

.session-best-indicator[b-igaa9y9tlt] {
    color: var(--lb-session-best);
    font-size: clamp(0.6rem, calc(0.7rem * var(--lb-scale)), 1rem);
}

.personal-best-indicator[b-igaa9y9tlt] {
    color: var(--lb-personal-best);
    font-size: clamp(0.6rem, calc(0.7rem * var(--lb-scale)), 1rem);
}

.interval[b-igaa9y9tlt] {
    font-weight: 500;
}

/* ===== Pits Column ===== */
.col-pits[b-igaa9y9tlt] {
    text-align: center;
    font-size: clamp(0.75rem, calc(0.9rem * var(--lb-scale)), 1.3rem);
}

.pit-indicator[b-igaa9y9tlt] {
    font-size: clamp(0.6rem, calc(0.7rem * var(--lb-scale)), 1rem);
    font-weight: 700;
    padding: calc(2px * var(--lb-scale)) calc(6px * var(--lb-scale));
    background: #3b82f6;
    color: #fff;
    border-radius: 3px;
    animation: pitPulse-b-igaa9y9tlt 1s ease-in-out infinite;
}

@keyframes pitPulse-b-igaa9y9tlt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== No Entries State ===== */
.no-entries[b-igaa9y9tlt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(80px * var(--lb-scale)) calc(20px * var(--lb-scale));
    color: var(--lb-text-muted);
    gap: calc(20px * var(--lb-scale));
    flex: 1;
    min-height: 300px;
}

.awaiting-data-content[b-igaa9y9tlt] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(80px, calc(100px * var(--lb-scale)), 150px);
    height: clamp(80px, calc(100px * var(--lb-scale)), 150px);
}

.awaiting-data-content i[b-igaa9y9tlt] {
    font-size: clamp(2rem, calc(3rem * var(--lb-scale)), 5rem);
    color: var(--lb-primary);
    z-index: 1;
    animation: iconPulse-b-igaa9y9tlt 2s ease-in-out infinite;
}

.pulse-ring[b-igaa9y9tlt] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--lb-primary);
    border-radius: 50%;
    animation: pulseRing-b-igaa9y9tlt 2s ease-out infinite;
}

.pulse-ring[b-igaa9y9tlt]::before,
.pulse-ring[b-igaa9y9tlt]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--lb-primary);
    border-radius: 50%;
}

.pulse-ring[b-igaa9y9tlt]::before {
    width: 130%;
    height: 130%;
    animation: pulseRing-b-igaa9y9tlt 2s ease-out infinite 0.4s;
}

.pulse-ring[b-igaa9y9tlt]::after {
    width: 160%;
    height: 160%;
    animation: pulseRing-b-igaa9y9tlt 2s ease-out infinite 0.8s;
}

@keyframes pulseRing-b-igaa9y9tlt {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes iconPulse-b-igaa9y9tlt {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

.awaiting-text[b-igaa9y9tlt] {
    font-size: clamp(1.2rem, calc(1.5rem * var(--lb-scale)), 2.5rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--lb-text-muted);
    animation: textFade-b-igaa9y9tlt 2s ease-in-out infinite;
}

@keyframes textFade-b-igaa9y9tlt {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Legacy support for old no-entries style */
.no-entries > i:not(.bi-broadcast)[b-igaa9y9tlt] {
    font-size: clamp(2rem, calc(3rem * var(--lb-scale)), 5rem);
    opacity: 0.5;
    animation: pulse-b-igaa9y9tlt 2s ease-in-out infinite;
}

@keyframes pulse-b-igaa9y9tlt {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* ===== Footer ===== */
.leaderboard-footer[b-igaa9y9tlt] {
    padding: calc(8px * var(--lb-scale)) calc(20px * var(--lb-scale));
    background: rgba(0, 0, 0, 0.3);
    text-align: right;
    flex-shrink: 0;
}

.update-time[b-igaa9y9tlt] {
    font-size: clamp(0.65rem, calc(0.75rem * var(--lb-scale)), 1rem);
    color: var(--lb-text-muted);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .leaderboard-columns[b-igaa9y9tlt],
    .leaderboard-row[b-igaa9y9tlt] {
        grid-template-columns: 60px 1fr 80px 80px;
    }
    
    .col-pits[b-igaa9y9tlt],
    .leaderboard-columns > .col-pits[b-igaa9y9tlt] {
        display: none;
    }
    
    .team-name[b-igaa9y9tlt] {
        display: none;
    }
}

@media (max-width: 480px) {
    .leaderboard-columns[b-igaa9y9tlt],
    .leaderboard-row[b-igaa9y9tlt] {
        grid-template-columns: 50px 1fr 70px;
    }
    
    .col-time.best-time[b-igaa9y9tlt],
    .leaderboard-columns > div:nth-child(5)[b-igaa9y9tlt] {
        display: none;
    }
    
    .leaderboard-header[b-igaa9y9tlt] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .session-info[b-igaa9y9tlt] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===== Large Display Scaling ===== */
@media (min-width: 1920px) {
    .race-leaderboard[b-igaa9y9tlt] {
        --lb-scale: 1.25;
    }
}

@media (min-width: 2560px) {
    .race-leaderboard[b-igaa9y9tlt] {
        --lb-scale: 1.5;
    }
}

@media (min-width: 3840px) {
    .race-leaderboard[b-igaa9y9tlt] {
        --lb-scale: 2;
    }
}

/* ===== Fullscreen/Kiosk Mode ===== */
.race-leaderboard:fullscreen[b-igaa9y9tlt],
.race-leaderboard:-webkit-full-screen[b-igaa9y9tlt] {
    border-radius: 0;
    height: 100vh;
    width: 100vw;
}

/* ===== Session / phase chips =====
   Value-specific colours. The only rule that used to reach these chips (the website
   module's stylesheet) tinted every chip with --lb-primary — F1 red — so "Race" and "Green"
   both rendered red. Phase colours follow the flag they name. */
.session-type-chip[b-igaa9y9tlt],
.game-phase-chip[b-igaa9y9tlt] {
    display: inline-flex;
    align-items: center;
    padding: calc(2px * var(--lb-scale)) calc(10px * var(--lb-scale));
    border-radius: 999px;
    font-size: clamp(0.65rem, calc(0.8rem * var(--lb-scale)), 1.1rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.10);
    color: var(--lb-text);
}

.session-type-chip.chip-type-race[b-igaa9y9tlt] { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.18); }
.session-type-chip.chip-type-qualifying[b-igaa9y9tlt] { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.22); }
.session-type-chip.chip-type-practice[b-igaa9y9tlt] { border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.22); }

.game-phase-chip.chip-phase-green[b-igaa9y9tlt] { border-color: #198754; background: #198754; color: #fff; }
.game-phase-chip.chip-phase-yellow[b-igaa9y9tlt] { border-color: #ffc107; background: #ffc107; color: #000; }
.game-phase-chip.chip-phase-red[b-igaa9y9tlt] { border-color: #dc3545; background: #dc3545; color: #fff; }
.game-phase-chip.chip-phase-checkered[b-igaa9y9tlt] {
    border-color: rgba(255, 255, 255, 0.6);
    background: repeating-linear-gradient(45deg, #111 0 6px, #eee 6px 12px);
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.game-phase-chip.chip-phase-pending[b-igaa9y9tlt] { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: var(--lb-text-muted); }

.time-remaining i[b-igaa9y9tlt] { margin-right: calc(4px * var(--lb-scale)); opacity: 0.8; }
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Displays/ScreenCommandOverlay.razor.rz.scp.css */
.scm-screen-command[b-y5p7t2lbgv] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 13, 0.94);
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
    padding: 4vh 4vw;
}

.scm-screen-command__inner[b-y5p7t2lbgv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    max-width: 90vw;
}

.scm-screen-command__media[b-y5p7t2lbgv] {
    max-width: 90vw;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.scm-screen-command__title[b-y5p7t2lbgv] {
    font-size: clamp(2.5rem, 7vw, 7rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    overflow-wrap: anywhere;
}

.scm-screen-command__text[b-y5p7t2lbgv] {
    font-size: clamp(1.25rem, 3.2vw, 3.25rem);
    line-height: 1.3;
    margin: 0;
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.scm-screen-command__label[b-y5p7t2lbgv] {
    font-size: clamp(1.5rem, 4vw, 4rem);
    font-weight: 600;
    opacity: 0.85;
}

.scm-screen-command__clock[b-y5p7t2lbgv] {
    font-size: clamp(5rem, 22vw, 24rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.scm-screen-command__paused[b-y5p7t2lbgv] {
    font-size: clamp(1.25rem, 3vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #ffcf5c;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Displays/ScreenContainer.razor.rz.scp.css */
/* 
 * ScreenContainer.razor.css
 * Container styles for display screens
 */

.screen-container[b-hqwj7ucked] {
    --screen-bg: #0f0f1a;
    --screen-text: #ffffff;
    --screen-text-muted: #a0a0a0;
    
    position: relative;
    width: 100%;
    min-height: 100%;
    background: var(--screen-bg);
    color: var(--screen-text);
}

.screen-container.fullscreen[b-hqwj7ucked] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: auto;
}

.screen-content[b-hqwj7ucked] {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.screen-container.fullscreen .screen-content[b-hqwj7ucked] {
    padding: 40px;
}

/* ===== Connection Status Indicator ===== */
.connection-status[b-hqwj7ucked] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 100;
}

.connection-status.connected[b-hqwj7ucked] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.connection-status.disconnected[b-hqwj7ucked] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    animation: disconnectedPulse-b-hqwj7ucked 2s ease-in-out infinite;
}

@keyframes disconnectedPulse-b-hqwj7ucked {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.connection-status i[b-hqwj7ucked] {
    font-size: 0.85rem;
}

/* ===== Exit Fullscreen Button ===== */
.exit-fullscreen-btn[b-hqwj7ucked] {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--screen-text);
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    z-index: 10000;
}

.exit-fullscreen-btn:hover[b-hqwj7ucked] {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .screen-content[b-hqwj7ucked] {
        padding: 12px;
    }
    
    .screen-container.fullscreen .screen-content[b-hqwj7ucked] {
        padding: 20px;
    }
    
    .connection-status[b-hqwj7ucked] {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
        font-size: 0.65rem;
    }
    
    .exit-fullscreen-btn[b-hqwj7ucked] {
        top: 8px;
        left: 8px;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerCartView.razor.rz.scp.css */
/* Customer Cart Styles */

.co-cart[b-1a38do30kc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--co-bg);
}

.co-cart-count[b-1a38do30kc] {
    font-size: 14px;
    color: var(--co-text-muted);
    font-weight: 400;
}

.co-cart-content[b-1a38do30kc] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing);
    padding-bottom: 100px; /* Space for footer */
}

/* Cart Items */
.co-cart-items[b-1a38do30kc] {
    display: flex;
    flex-direction: column;
    gap: var(--co-spacing);
}

.co-cart-item[b-1a38do30kc] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
}

.co-cart-item-main[b-1a38do30kc] {
    display: flex;
    gap: var(--co-spacing);
    margin-bottom: var(--co-spacing);
}

.co-cart-item-info[b-1a38do30kc] {
    flex: 1;
    min-width: 0;
}

.co-cart-item-name[b-1a38do30kc] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--co-text);
}

.co-cart-item-modifiers[b-1a38do30kc] {
    font-size: 13px;
    color: var(--co-text-muted);
    margin: 0 0 4px 0;
}

.co-cart-item-instructions[b-1a38do30kc] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--co-text-muted);
    margin: 0;
    font-style: italic;
}

.co-cart-item-instructions i[b-1a38do30kc] {
    margin-top: 2px;
}

.co-cart-item-price[b-1a38do30kc] {
    font-size: 16px;
    font-weight: 600;
    color: var(--co-text);
    white-space: nowrap;
}

.co-cart-item-actions[b-1a38do30kc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--co-spacing);
    border-top: 1px solid var(--co-border);
}

.co-remove-btn[b-1a38do30kc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--co-radius-sm);
    background: transparent;
    border: none;
    color: var(--co-error);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.co-remove-btn:hover[b-1a38do30kc] {
    background: rgba(239, 68, 68, 0.1);
}

/* Order Summary */
.co-cart-summary[b-1a38do30kc] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
    margin-top: var(--co-spacing);
}

.co-summary-row[b-1a38do30kc] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
    color: var(--co-text-muted);
}

.co-summary-total[b-1a38do30kc] {
    font-size: 18px;
    font-weight: 600;
    color: var(--co-text);
}

.co-summary-total span:last-child[b-1a38do30kc] {
    color: var(--co-primary);
}

/* Continue Shopping */
.co-continue-shopping[b-1a38do30kc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--co-spacing-sm);
    padding: var(--co-spacing);
    margin-top: var(--co-spacing);
    background: transparent;
    border: 2px dashed var(--co-border);
    border-radius: var(--co-radius);
    color: var(--co-text-muted);
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.co-continue-shopping:hover[b-1a38do30kc] {
    border-color: var(--co-primary);
    color: var(--co-primary);
}

/* Footer */
.co-cart-footer[b-1a38do30kc] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--co-surface);
    padding: var(--co-spacing);
    border-top: 1px solid var(--co-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Responsive */
@media (min-width: 768px) {
    .co-cart-footer[b-1a38do30kc] {
        position: sticky;
        box-shadow: none;
    }
    
    .co-cart-content[b-1a38do30kc] {
        padding-bottom: var(--co-spacing);
    }
}

@media (max-width: 480px) {
    .co-cart-item-actions[b-1a38do30kc] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--co-spacing);
    }
    
    .co-cart-item-actions .co-quantity[b-1a38do30kc] {
        justify-content: center;
    }
    
    .co-remove-btn[b-1a38do30kc] {
        justify-content: center;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerGuestInfoForm.razor.rz.scp.css */
/* Customer Guest Info Styles */

.co-guest-info[b-xygxdd9wjt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--co-bg);
}

.co-guest-content[b-xygxdd9wjt] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing);
    padding-bottom: 100px; /* Space for footer */
}

/* Table Info Banner */
.co-table-info[b-xygxdd9wjt] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing-sm);
    padding: var(--co-spacing);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--co-radius);
    margin-bottom: var(--co-spacing-lg);
    color: var(--co-success);
    font-size: 14px;
}

.co-table-info i[b-xygxdd9wjt] {
    font-size: 18px;
}

.co-table-info strong[b-xygxdd9wjt] {
    color: var(--co-text);
}

/* Form Groups - Using shared styles from container */

/* Party Size Selector */
.co-party-size[b-xygxdd9wjt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--co-spacing-sm);
    margin-top: var(--co-spacing-sm);
}

.co-party-btn[b-xygxdd9wjt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--co-border);
    background: var(--co-surface);
    color: var(--co-text);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.co-party-btn:hover[b-xygxdd9wjt] {
    border-color: var(--co-primary);
    color: var(--co-primary);
}

.co-party-btn.active[b-xygxdd9wjt] {
    background: var(--co-primary);
    border-color: var(--co-primary);
    color: white;
}

.co-party-btn-more[b-xygxdd9wjt] {
    width: auto;
    padding: 0 16px;
    border-radius: 24px;
}

.co-custom-party[b-xygxdd9wjt] {
    margin-top: var(--co-spacing);
}

.co-custom-party .co-input[b-xygxdd9wjt] {
    width: 120px;
}

/* Notice */
.co-guest-notice[b-xygxdd9wjt] {
    display: flex;
    align-items: flex-start;
    gap: var(--co-spacing);
    padding: var(--co-spacing);
    background: rgba(37, 99, 235, 0.05);
    border-radius: var(--co-radius);
    margin-top: var(--co-spacing-lg);
}

.co-guest-notice i[b-xygxdd9wjt] {
    color: var(--co-primary);
    font-size: 18px;
    margin-top: 2px;
}

.co-guest-notice p[b-xygxdd9wjt] {
    margin: 0;
    font-size: 13px;
    color: var(--co-text-muted);
    line-height: 1.5;
}

/* Footer */
.co-guest-footer[b-xygxdd9wjt] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--co-surface);
    padding: var(--co-spacing);
    border-top: 1px solid var(--co-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Responsive */
@media (min-width: 768px) {
    .co-guest-footer[b-xygxdd9wjt] {
        position: sticky;
        box-shadow: none;
    }
    
    .co-guest-content[b-xygxdd9wjt] {
        padding-bottom: var(--co-spacing);
        max-width: 500px;
        margin: 0 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerItemCustomizer.razor.rz.scp.css */
/* Customer Item Customizer Styles */

.co-customizer[b-ca5nf78ydf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--co-bg);
}

.co-customizer-content[b-ca5nf78ydf] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing);
    padding-bottom: 120px; /* Space for footer */
}

/* Item Info */
.co-customizer-item[b-ca5nf78ydf] {
    display: flex;
    gap: var(--co-spacing);
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
    margin-bottom: var(--co-spacing-lg);
}

.co-customizer-image[b-ca5nf78ydf] {
    width: 100px;
    height: 100px;
    border-radius: var(--co-radius-sm);
    object-fit: cover;
}

.co-customizer-info[b-ca5nf78ydf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.co-customizer-name[b-ca5nf78ydf] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--co-text);
}

.co-customizer-description[b-ca5nf78ydf] {
    font-size: 14px;
    color: var(--co-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Modifier Groups */
.co-modifier-group[b-ca5nf78ydf] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
    margin-bottom: var(--co-spacing);
}

.co-modifier-header[b-ca5nf78ydf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--co-spacing);
}

.co-modifier-title[b-ca5nf78ydf] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--co-text);
}

/* Modifier Options */
.co-modifier-options[b-ca5nf78ydf] {
    display: flex;
    flex-direction: column;
    gap: var(--co-spacing-sm);
}

.co-modifier-option[b-ca5nf78ydf] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
    padding: 12px;
    border-radius: var(--co-radius-sm);
    border: 1px solid var(--co-border);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.co-modifier-option:hover[b-ca5nf78ydf] {
    border-color: var(--co-primary);
}

.co-modifier-option.selected[b-ca5nf78ydf] {
    border-color: var(--co-primary);
    background: rgba(37, 99, 235, 0.05);
}

.co-modifier-option input[b-ca5nf78ydf] {
    display: none;
}

.co-modifier-checkbox[b-ca5nf78ydf] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--co-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.co-modifier-checkbox i[b-ca5nf78ydf] {
    font-size: 14px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.co-modifier-option.selected .co-modifier-checkbox[b-ca5nf78ydf] {
    background: var(--co-primary);
    border-color: var(--co-primary);
}

.co-modifier-option.selected .co-modifier-checkbox i[b-ca5nf78ydf] {
    opacity: 1;
    transform: scale(1);
}

.co-modifier-name[b-ca5nf78ydf] {
    flex: 1;
    font-size: 15px;
    color: var(--co-text);
}

.co-modifier-price[b-ca5nf78ydf] {
    font-size: 14px;
    color: var(--co-text-muted);
    font-weight: 500;
}

.co-modifier-option.selected .co-modifier-price[b-ca5nf78ydf] {
    color: var(--co-primary);
}

/* Special Instructions */
.co-special-instructions[b-ca5nf78ydf] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
    margin-bottom: var(--co-spacing);
}

.co-special-instructions textarea[b-ca5nf78ydf] {
    resize: none;
}

/* Quantity Section */
.co-quantity-section[b-ca5nf78ydf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
}

.co-quantity-label[b-ca5nf78ydf] {
    font-size: 16px;
    font-weight: 500;
    color: var(--co-text);
}

/* Footer */
.co-customizer-footer[b-ca5nf78ydf] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--co-surface);
    padding: var(--co-spacing);
    border-top: 1px solid var(--co-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.co-customizer-total[b-ca5nf78ydf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--co-spacing);
}

.co-customizer-total > span:first-child[b-ca5nf78ydf] {
    font-size: 16px;
    color: var(--co-text-muted);
}

/* Responsive */
@media (min-width: 768px) {
    .co-customizer-footer[b-ca5nf78ydf] {
        position: sticky;
        box-shadow: none;
        border-top: 1px solid var(--co-border);
    }
    
    .co-customizer-content[b-ca5nf78ydf] {
        padding-bottom: var(--co-spacing);
    }
}

@media (max-width: 480px) {
    .co-customizer-item[b-ca5nf78ydf] {
        flex-direction: column;
    }
    
    .co-customizer-image[b-ca5nf78ydf] {
        width: 100%;
        height: 200px;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerMenuBrowser.razor.rz.scp.css */
/* Customer Menu Browser Styles */

.co-menu-browser[b-5c7q5xkj1u] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Header */
.co-menu-header[b-5c7q5xkj1u] {
    background: var(--co-surface);
    padding: var(--co-spacing);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--co-border);
}

.co-location-info[b-5c7q5xkj1u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.co-location-name[b-5c7q5xkj1u] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--co-text);
}

.co-menu-name[b-5c7q5xkj1u] {
    font-size: 14px;
    color: var(--co-text-muted);
}

.co-wait-time[b-5c7q5xkj1u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(34, 197, 94, 0.1);
    color: var(--co-success);
    border-radius: var(--co-radius-sm);
    font-size: 14px;
    font-weight: 500;
}

/* Search */
.co-search-container[b-5c7q5xkj1u] {
    padding: var(--co-spacing);
    background: var(--co-surface);
}

.co-search-box[b-5c7q5xkj1u] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing-sm);
    background: var(--co-bg);
    border-radius: var(--co-radius-sm);
    padding: 10px 14px;
    border: 1px solid var(--co-border);
    transition: border-color 0.2s ease;
}

.co-search-box:focus-within[b-5c7q5xkj1u] {
    border-color: var(--co-primary);
}

.co-search-box i[b-5c7q5xkj1u] {
    color: var(--co-text-muted);
    font-size: 18px;
}

[b-5c7q5xkj1u] .co-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--co-text);
    outline: none;
}

[b-5c7q5xkj1u] .co-search-input::placeholder {
    color: var(--co-text-muted);
}

.co-search-clear[b-5c7q5xkj1u] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--co-border);
    border: none;
    cursor: pointer;
    color: var(--co-text-muted);
    transition: all 0.2s ease;
}

.co-search-clear:hover[b-5c7q5xkj1u] {
    background: var(--co-text-muted);
    color: white;
}

/* Categories */
.co-categories[b-5c7q5xkj1u] {
    display: flex;
    gap: var(--co-spacing-sm);
    padding: var(--co-spacing-sm) var(--co-spacing);
    background: var(--co-surface);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--co-border);
}

.co-categories[b-5c7q5xkj1u]::-webkit-scrollbar {
    display: none;
}

.co-category-tab[b-5c7q5xkj1u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--co-border);
    background: var(--co-surface);
    color: var(--co-text-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.co-category-tab:hover[b-5c7q5xkj1u] {
    border-color: var(--co-primary);
    color: var(--co-primary);
}

.co-category-tab.active[b-5c7q5xkj1u] {
    background: var(--co-primary);
    border-color: var(--co-primary);
    color: white;
}

.co-category-tab i[b-5c7q5xkj1u] {
    font-size: 16px;
}

/* Menu Items Grid */
.co-menu-items[b-5c7q5xkj1u] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing);
}

.co-menu-item[b-5c7q5xkj1u] {
    display: flex;
    gap: var(--co-spacing);
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
    box-shadow: var(--co-shadow);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 120px;
    margin-bottom: var(--co-spacing);
}

.co-menu-item:hover[b-5c7q5xkj1u] {
    transform: translateY(-2px);
    box-shadow: var(--co-shadow-lg);
}

.co-menu-item:active[b-5c7q5xkj1u] {
    transform: scale(0.99);
}

.co-menu-item.unavailable[b-5c7q5xkj1u] {
    opacity: 0.6;
    cursor: not-allowed;
}

.co-menu-item.unavailable:hover[b-5c7q5xkj1u] {
    transform: none;
    box-shadow: var(--co-shadow);
}

/* Item Image */
.co-item-image[b-5c7q5xkj1u] {
    width: 100px;
    height: 100px;
    border-radius: var(--co-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.co-item-image img[b-5c7q5xkj1u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.co-item-image-placeholder[b-5c7q5xkj1u] {
    background: var(--co-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-item-image-placeholder i[b-5c7q5xkj1u] {
    font-size: 32px;
    color: var(--co-border);
}

/* Item Details */
.co-item-details[b-5c7q5xkj1u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.co-item-header[b-5c7q5xkj1u] {
    display: flex;
    align-items: flex-start;
    gap: var(--co-spacing-sm);
}

.co-item-name[b-5c7q5xkj1u] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--co-text);
    flex: 1;
}

.co-item-description[b-5c7q5xkj1u] {
    font-size: 13px;
    color: var(--co-text-muted);
    margin: 0;
    line-height: 1.4;
}

.co-item-tags[b-5c7q5xkj1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.co-dietary-tag[b-5c7q5xkj1u] {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--co-bg);
    color: var(--co-text-muted);
    border-radius: 10px;
}

.co-item-footer[b-5c7q5xkj1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.co-item-customize[b-5c7q5xkj1u] {
    font-size: 12px;
    color: var(--co-primary);
    font-weight: 500;
}

/* Add Button */
.co-add-btn[b-5c7q5xkj1u] {
    position: absolute;
    bottom: var(--co-spacing);
    right: var(--co-spacing);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--co-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.co-add-btn:hover[b-5c7q5xkj1u] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.co-add-btn:active[b-5c7q5xkj1u] {
    transform: scale(0.95);
}

/* Cart Badge on Item */
.co-item-cart-badge[b-5c7q5xkj1u] {
    position: absolute;
    top: var(--co-spacing);
    right: var(--co-spacing);
    width: 24px;
    height: 24px;
    background: var(--co-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Responsive */
@media (min-width: 768px) {
    .co-menu-items[b-5c7q5xkj1u] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .co-menu-items[b-5c7q5xkj1u] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .co-item-image[b-5c7q5xkj1u] {
        width: 80px;
        height: 80px;
    }
    
    .co-item-name[b-5c7q5xkj1u] {
        font-size: 15px;
    }
    
    .co-menu-header[b-5c7q5xkj1u] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--co-spacing-sm);
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerOrderConfirmation.razor.rz.scp.css */
/* Customer Order Confirmation Styles */

.co-confirmation[b-qldvaq5rpp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--co-bg);
}

.co-confirmation-content[b-qldvaq5rpp] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Success Icon */
.co-confirmation-icon[b-qldvaq5rpp] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--co-spacing-lg);
    animation: confirmPop-b-qldvaq5rpp 0.5s ease-out;
}

@keyframes confirmPop-b-qldvaq5rpp {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.co-confirmation-icon i[b-qldvaq5rpp] {
    font-size: 48px;
    color: var(--co-success);
}

/* Title */
.co-confirmation-title[b-qldvaq5rpp] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--co-text);
}

.co-confirmation-subtitle[b-qldvaq5rpp] {
    font-size: 16px;
    color: var(--co-text-muted);
    margin: 0 0 var(--co-spacing-lg) 0;
}

/* Order Code Card */
.co-order-code-card[b-qldvaq5rpp] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing-lg);
    margin-bottom: var(--co-spacing-lg);
    width: 100%;
    max-width: 300px;
    box-shadow: var(--co-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.co-order-code-label[b-qldvaq5rpp] {
    font-size: 14px;
    color: var(--co-text-muted);
}

.co-order-code[b-qldvaq5rpp] {
    font-size: 48px;
    font-weight: 800;
    color: var(--co-primary);
    letter-spacing: 4px;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}

.co-order-code-hint[b-qldvaq5rpp] {
    font-size: 12px;
    color: var(--co-text-muted);
}

/* Wait Estimate */
.co-wait-estimate[b-qldvaq5rpp] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
    padding: var(--co-spacing);
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--co-radius);
    margin-bottom: var(--co-spacing-lg);
    width: 100%;
    max-width: 300px;
}

.co-wait-estimate i[b-qldvaq5rpp] {
    font-size: 24px;
    color: var(--co-warning);
}

.co-wait-text[b-qldvaq5rpp] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.co-wait-label[b-qldvaq5rpp] {
    font-size: 12px;
    color: var(--co-text-muted);
}

.co-wait-time[b-qldvaq5rpp] {
    font-size: 18px;
    font-weight: 600;
    color: var(--co-text);
}

/* Total */
.co-confirmation-total[b-qldvaq5rpp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 300px;
    padding: var(--co-spacing);
    background: var(--co-surface);
    border-radius: var(--co-radius);
    margin-bottom: var(--co-spacing-lg);
}

.co-confirmation-total > span:first-child[b-qldvaq5rpp] {
    font-size: 16px;
    color: var(--co-text-muted);
}

/* Next Steps */
.co-next-steps[b-qldvaq5rpp] {
    width: 100%;
    max-width: 350px;
    text-align: left;
}

.co-next-steps h3[b-qldvaq5rpp] {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 var(--co-spacing) 0;
    color: var(--co-text);
}

.co-next-steps ul[b-qldvaq5rpp] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--co-spacing);
}

.co-next-steps li[b-qldvaq5rpp] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
    font-size: 14px;
    color: var(--co-text-muted);
}

.co-next-steps li i[b-qldvaq5rpp] {
    font-size: 20px;
    color: var(--co-primary);
}

/* Actions */
.co-confirmation-actions[b-qldvaq5rpp] {
    padding: var(--co-spacing);
    background: var(--co-surface);
    border-top: 1px solid var(--co-border);
    display: flex;
    flex-direction: column;
    gap: var(--co-spacing);
}

/* Responsive */
@media (min-width: 768px) {
    .co-confirmation-content[b-qldvaq5rpp] {
        padding-top: 60px;
    }
    
    .co-confirmation-actions[b-qldvaq5rpp] {
        max-width: 350px;
        margin: 0 auto;
        background: transparent;
        border-top: none;
    }
}

@media (max-width: 480px) {
    .co-order-code[b-qldvaq5rpp] {
        font-size: 36px;
    }
    
    .co-confirmation-title[b-qldvaq5rpp] {
        font-size: 24px;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerOrderContainer.razor.rz.scp.css */
/* Customer Order Container Styles */
/* Environment-independent styling for customer self-service ordering */

/* CSS Variables (with defaults) */
.customer-order[b-keh1iycda7] {
    --co-primary: #2563eb;
    --co-primary-hover: #1d4ed8;
    --co-bg: #f8fafc;
    --co-surface: #ffffff;
    --co-text: #1e293b;
    --co-text-muted: #64748b;
    --co-border: #e2e8f0;
    --co-success: #22c55e;
    --co-warning: #f59e0b;
    --co-error: #ef4444;
    --co-accent: #8b5cf6;
    --co-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --co-radius: 12px;
    --co-radius-sm: 8px;
    --co-spacing: 16px;
    --co-spacing-sm: 8px;
    --co-spacing-lg: 24px;
    --co-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --co-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.customer-order[b-keh1iycda7] {
    font-family: var(--co-font);
    background: var(--co-bg);
    color: var(--co-text);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Loading State */
.co-loading[b-keh1iycda7],
.co-submitting[b-keh1iycda7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: var(--co-spacing-lg);
    text-align: center;
}

.co-spinner[b-keh1iycda7] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--co-border);
    border-top-color: var(--co-primary);
    border-radius: 50%;
    animation: co-spin-b-keh1iycda7 1s linear infinite;
    margin-bottom: var(--co-spacing);
}

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

/* Error State */
.co-error[b-keh1iycda7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: var(--co-spacing-lg);
    text-align: center;
    gap: var(--co-spacing);
}

.co-error i[b-keh1iycda7] {
    font-size: 48px;
    color: var(--co-warning);
}

.co-error p[b-keh1iycda7] {
    color: var(--co-text-muted);
    max-width: 300px;
}

/* Buttons */
.co-btn[b-keh1iycda7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--co-spacing-sm);
    padding: 12px 24px;
    border-radius: var(--co-radius-sm);
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.co-btn:active[b-keh1iycda7] {
    transform: scale(0.98);
}

.co-btn-primary[b-keh1iycda7] {
    background: var(--co-primary);
    color: white;
}

.co-btn-primary:hover[b-keh1iycda7] {
    background: var(--co-primary-hover);
}

.co-btn-secondary[b-keh1iycda7] {
    background: var(--co-surface);
    color: var(--co-text);
    border: 1px solid var(--co-border);
}

.co-btn-secondary:hover[b-keh1iycda7] {
    background: var(--co-bg);
}

.co-btn-outline[b-keh1iycda7] {
    background: transparent;
    color: var(--co-primary);
    border: 2px solid var(--co-primary);
}

.co-btn-outline:hover[b-keh1iycda7] {
    background: var(--co-primary);
    color: white;
}

.co-btn-large[b-keh1iycda7] {
    padding: 16px 32px;
    font-size: 18px;
}

.co-btn-full[b-keh1iycda7] {
    width: 100%;
}

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

/* Floating Cart Button */
.co-floating-cart[b-keh1iycda7] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--co-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    gap: var(--co-spacing-sm);
    box-shadow: var(--co-shadow-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
}

.co-floating-cart:hover[b-keh1iycda7] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.co-floating-cart:active[b-keh1iycda7] {
    transform: scale(0.95);
}

.co-floating-cart i[b-keh1iycda7] {
    font-size: 20px;
}

.co-cart-badge[b-keh1iycda7] {
    background: white;
    color: var(--co-primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.co-cart-total[b-keh1iycda7] {
    font-weight: 600;
}

/* Card Component */
.co-card[b-keh1iycda7] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    box-shadow: var(--co-shadow);
    overflow: hidden;
}

.co-card-header[b-keh1iycda7] {
    padding: var(--co-spacing);
    border-bottom: 1px solid var(--co-border);
}

.co-card-body[b-keh1iycda7] {
    padding: var(--co-spacing);
}

.co-card-footer[b-keh1iycda7] {
    padding: var(--co-spacing);
    border-top: 1px solid var(--co-border);
    background: var(--co-bg);
}

/* Header Component */
.co-header[b-keh1iycda7] {
    background: var(--co-surface);
    padding: var(--co-spacing);
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
    border-bottom: 1px solid var(--co-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.co-header-back[b-keh1iycda7] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--co-text);
    font-size: 20px;
}

.co-header-back:hover[b-keh1iycda7] {
    background: var(--co-bg);
}

.co-header-title[b-keh1iycda7] {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

/* Empty State */
.co-empty[b-keh1iycda7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--co-spacing-lg) var(--co-spacing);
    text-align: center;
    min-height: 200px;
}

.co-empty i[b-keh1iycda7] {
    font-size: 48px;
    color: var(--co-border);
    margin-bottom: var(--co-spacing);
}

.co-empty p[b-keh1iycda7] {
    color: var(--co-text-muted);
    margin: 0;
}

/* Badge */
.co-badge[b-keh1iycda7] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.co-badge-success[b-keh1iycda7] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--co-success);
}

.co-badge-warning[b-keh1iycda7] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--co-warning);
}

.co-badge-info[b-keh1iycda7] {
    background: rgba(37, 99, 235, 0.1);
    color: var(--co-primary);
}

/* Input Fields */
.co-input[b-keh1iycda7] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius-sm);
    font-size: 16px;
    font-family: var(--co-font);
    background: var(--co-surface);
    color: var(--co-text);
    transition: border-color 0.2s ease;
}

.co-input:focus[b-keh1iycda7] {
    outline: none;
    border-color: var(--co-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.co-input[b-keh1iycda7]::placeholder {
    color: var(--co-text-muted);
}

.co-form-group[b-keh1iycda7] {
    margin-bottom: var(--co-spacing);
}

.co-form-label[b-keh1iycda7] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--co-text);
}

.co-form-label.required[b-keh1iycda7]::after {
    content: " *";
    color: var(--co-error);
}

.co-form-hint[b-keh1iycda7] {
    font-size: 12px;
    color: var(--co-text-muted);
    margin-top: 4px;
}

.co-form-error[b-keh1iycda7] {
    font-size: 12px;
    color: var(--co-error);
    margin-top: 4px;
}

/* Quantity Selector */
.co-quantity[b-keh1iycda7] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing-sm);
}

.co-quantity-btn[b-keh1iycda7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--co-bg);
    border: 1px solid var(--co-border);
    cursor: pointer;
    font-size: 18px;
    color: var(--co-text);
    transition: all 0.2s ease;
}

.co-quantity-btn:hover:not(:disabled)[b-keh1iycda7] {
    background: var(--co-primary);
    color: white;
    border-color: var(--co-primary);
}

.co-quantity-btn:disabled[b-keh1iycda7] {
    opacity: 0.3;
    cursor: not-allowed;
}

.co-quantity-value[b-keh1iycda7] {
    width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* Divider */
.co-divider[b-keh1iycda7] {
    height: 1px;
    background: var(--co-border);
    margin: var(--co-spacing) 0;
}

/* Price Display */
.co-price[b-keh1iycda7] {
    font-weight: 600;
    color: var(--co-text);
}

.co-price-large[b-keh1iycda7] {
    font-size: 24px;
}

.co-price-muted[b-keh1iycda7] {
    color: var(--co-text-muted);
    font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .co-floating-cart[b-keh1iycda7] {
        bottom: 16px;
        right: 16px;
        left: 16px;
        justify-content: center;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/CustomerOrder/CustomerOrderTracking.razor.rz.scp.css */
/* Customer Order Tracking Styles */

.co-tracking[b-k0o34k5nes] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--co-bg);
}

.co-tracking-content[b-k0o34k5nes] {
    flex: 1;
    overflow-y: auto;
    padding: var(--co-spacing);
}

/* Order Code */
.co-tracking-code[b-k0o34k5nes] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--co-spacing);
    padding: var(--co-spacing);
    background: var(--co-surface);
    border-radius: var(--co-radius);
    margin-bottom: var(--co-spacing-lg);
}

.co-tracking-code-label[b-k0o34k5nes] {
    font-size: 14px;
    color: var(--co-text-muted);
}

.co-tracking-code-value[b-k0o34k5nes] {
    font-size: 24px;
    font-weight: 700;
    color: var(--co-primary);
    letter-spacing: 2px;
}

/* Status Timeline */
.co-status-timeline[b-k0o34k5nes] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing-lg);
    margin-bottom: var(--co-spacing-lg);
}

.co-status-step[b-k0o34k5nes] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
}

.co-status-icon[b-k0o34k5nes] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.co-status-step.pending .co-status-icon[b-k0o34k5nes] {
    background: var(--co-bg);
    color: var(--co-text-muted);
    border: 2px solid var(--co-border);
}

.co-status-step.active .co-status-icon[b-k0o34k5nes] {
    background: var(--co-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.co-status-step.complete .co-status-icon[b-k0o34k5nes] {
    background: var(--co-success);
    color: white;
}

.co-status-info[b-k0o34k5nes] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.co-status-title[b-k0o34k5nes] {
    font-size: 15px;
    font-weight: 500;
    color: var(--co-text);
}

.co-status-step.pending .co-status-title[b-k0o34k5nes] {
    color: var(--co-text-muted);
}

.co-status-step.active .co-status-title[b-k0o34k5nes] {
    color: var(--co-primary);
    font-weight: 600;
}

.co-status-time[b-k0o34k5nes] {
    font-size: 12px;
    color: var(--co-text-muted);
}

/* Status Line */
.co-status-line[b-k0o34k5nes] {
    width: 2px;
    height: 24px;
    margin-left: 19px;
    background: var(--co-border);
    transition: all 0.3s ease;
}

.co-status-line.active[b-k0o34k5nes],
.co-status-line.complete[b-k0o34k5nes] {
    background: var(--co-success);
}

/* Pulse Animation */
.co-pulse[b-k0o34k5nes] {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: pulse-b-k0o34k5nes 1.5s ease-in-out infinite;
}

@keyframes pulse-b-k0o34k5nes {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
}

/* Status Message */
.co-status-message[b-k0o34k5nes] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing);
    padding: var(--co-spacing);
    border-radius: var(--co-radius);
    margin-bottom: var(--co-spacing-lg);
}

.co-status-message i[b-k0o34k5nes] {
    font-size: 20px;
}

.co-status-message span[b-k0o34k5nes] {
    font-size: 15px;
    font-weight: 500;
}

.co-status-message.success[b-k0o34k5nes] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--co-success);
}

.co-status-message.warning[b-k0o34k5nes] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--co-warning);
}

.co-status-message.info[b-k0o34k5nes] {
    background: rgba(37, 99, 235, 0.1);
    color: var(--co-primary);
}

.co-status-message.error[b-k0o34k5nes] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--co-error);
}

/* Order Items */
.co-tracking-items[b-k0o34k5nes] {
    background: var(--co-surface);
    border-radius: var(--co-radius);
    padding: var(--co-spacing);
}

.co-tracking-items h4[b-k0o34k5nes] {
    font-size: 14px;
    font-weight: 600;
    color: var(--co-text);
    margin: 0 0 var(--co-spacing) 0;
}

.co-tracking-item[b-k0o34k5nes] {
    display: flex;
    align-items: center;
    gap: var(--co-spacing-sm);
    padding: var(--co-spacing-sm) 0;
    border-bottom: 1px solid var(--co-border);
}

.co-tracking-item:last-child[b-k0o34k5nes] {
    border-bottom: none;
}

.co-tracking-item-qty[b-k0o34k5nes] {
    font-size: 14px;
    color: var(--co-text-muted);
    font-weight: 500;
}

.co-tracking-item-name[b-k0o34k5nes] {
    flex: 1;
    font-size: 14px;
    color: var(--co-text);
}

.co-tracking-item-status[b-k0o34k5nes] {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.co-tracking-item-status.queued[b-k0o34k5nes] {
    background: var(--co-bg);
    color: var(--co-text-muted);
}

.co-tracking-item-status.preparing[b-k0o34k5nes] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--co-warning);
}

.co-tracking-item-status.ready[b-k0o34k5nes] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--co-success);
}

/* Actions */
.co-tracking-actions[b-k0o34k5nes] {
    padding: var(--co-spacing);
    background: var(--co-surface);
    border-top: 1px solid var(--co-border);
}

/* Responsive */
@media (min-width: 768px) {
    .co-tracking-content[b-k0o34k5nes] {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .co-tracking-actions[b-k0o34k5nes] {
        max-width: 500px;
        margin: 0 auto;
        background: transparent;
        border-top: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/KDSStaffLogin.razor.rz.scp.css */
/* KDSStaffLogin.razor.css — KDS inline staff bar + PIN dialog */

/* ================================================================
   STAFF BAR (inline, sits at top of KDS panel)
   ================================================================ */

.kds-staff-bar[b-4f2nl09vst] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--simx-surface-alt, #1e293b);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    min-height: 48px;
}

.kds-staff-loading[b-4f2nl09vst] {
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
}

/* ================================================================
   ACTIVE STATE
   ================================================================ */

.kds-staff-active[b-4f2nl09vst] {
    background: linear-gradient(135deg, #1a472a, #1e3a2f);
}

.kds-staff-avatar[b-4f2nl09vst] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.kds-staff-avatar.active[b-4f2nl09vst] {
    background: var(--bs-success, #198754);
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.3);
}

.kds-staff-info[b-4f2nl09vst] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.kds-staff-name[b-4f2nl09vst] {
    font-weight: 600;
    color: #fff;
}

.kds-staff-label[b-4f2nl09vst] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kds-staff-switch[b-4f2nl09vst] {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s;
}

.kds-staff-switch:hover[b-4f2nl09vst] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ================================================================
   SELECTION STRIP
   ================================================================ */

.kds-staff-select[b-4f2nl09vst] {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kds-staff-prompt[b-4f2nl09vst] {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.kds-staff-chips[b-4f2nl09vst] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.kds-staff-chip[b-4f2nl09vst] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s;
}

.kds-staff-chip:hover[b-4f2nl09vst] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
    transform: translateY(-1px);
}

.kds-chip-avatar[b-4f2nl09vst] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
}

.kds-chip-name[b-4f2nl09vst] {
    font-weight: 500;
}

.kds-staff-skip[b-4f2nl09vst] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-left: auto;
}

.kds-staff-skip:hover[b-4f2nl09vst] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

/* ================================================================
   PIN OVERLAY (for KDS — dark theme)
   ================================================================ */

.kds-pin-overlay[b-4f2nl09vst] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kds-pin-dialog[b-4f2nl09vst] {
    background: #1e293b;
    border-radius: 16px;
    padding: 2rem;
    width: min(360px, 90vw);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.kds-pin-header[b-4f2nl09vst] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.kds-pin-avatar[b-4f2nl09vst] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--simx-primary, #0d6efd), #6610f2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.kds-pin-name[b-4f2nl09vst] {
    font-size: 1.125rem;
    font-weight: 600;
}

/* ================================================================
   KDS PIN DOTS
   ================================================================ */

.kds-pin-dots[b-4f2nl09vst] {
    display: flex;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.kds-dot[b-4f2nl09vst] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.15s;
}

.kds-dot.filled[b-4f2nl09vst] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
}

.kds-dot.error[b-4f2nl09vst] {
    background: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    animation: kds-shake-b-4f2nl09vst 0.3s ease;
}

@keyframes kds-shake-b-4f2nl09vst {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.kds-pin-error[b-4f2nl09vst] {
    text-align: center;
    color: var(--bs-danger, #dc3545);
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

/* ================================================================
   KDS PIN PAD
   ================================================================ */

.kds-pin-pad[b-4f2nl09vst] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 260px;
    margin: 0 auto 1rem;
}

.kds-pin-key[b-4f2nl09vst] {
    aspect-ratio: 1.6;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.375rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    user-select: none;
}

.kds-pin-key:hover:not(:disabled)[b-4f2nl09vst] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
}

.kds-pin-key:active:not(:disabled)[b-4f2nl09vst] {
    transform: scale(0.95);
}

.kds-pin-key:disabled[b-4f2nl09vst] {
    opacity: 0.4;
}

.kds-pin-key.empty[b-4f2nl09vst] {
    border: none;
    background: transparent;
    cursor: default;
}

.kds-pin-key.delete[b-4f2nl09vst] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
}

.kds-pin-cancel[b-4f2nl09vst] {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.kds-pin-cancel:hover[b-4f2nl09vst] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/POSCartSummaryBar.razor.rz.scp.css */
/* POSCartSummaryBar.razor.css - Collapsed cart summary bar styles */

/* =================================================================
   SUMMARY BAR CONTAINER
   ================================================================= */

.pos-cart-summary[b-vzyttiysa2] {
    display: flex;
    flex-direction: column;
    background: var(--simx-surface-alt, #fff);
    border-top: 1px solid var(--simx-border, #dee2e6);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.pos-cart-summary.has-items[b-vzyttiysa2] {
    background: linear-gradient(to right, var(--simx-surface-alt, #fff), #f8f9ff);
}

/* =================================================================
   SUMMARY CONTENT (TAPPABLE AREA)
   ================================================================= */

.pos-cart-summary .summary-content[b-vzyttiysa2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

.pos-cart-summary .summary-content:active[b-vzyttiysa2] {
    background: var(--simx-surface-hover, #f0f0f0);
}

/* Summary Info (Left Side) */
.pos-cart-summary .summary-info[b-vzyttiysa2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pos-cart-summary .item-count[b-vzyttiysa2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--simx-text, #212529);
}

.pos-cart-summary .item-count i[b-vzyttiysa2] {
    font-size: 1.125rem;
    color: var(--simx-primary, #0d6efd);
}

.pos-cart-summary .unsent-badge[b-vzyttiysa2] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--bs-warning, #ffc107);
    color: #000;
    border-radius: 10px;
    font-weight: 600;
}

.pos-cart-summary .tab-name[b-vzyttiysa2] {
    font-size: 0.8125rem;
    color: var(--simx-text-muted, #6c757d);
}

/* Summary Total (Right Side) */
.pos-cart-summary .summary-total[b-vzyttiysa2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pos-cart-summary .total-amount[b-vzyttiysa2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--simx-primary, #0d6efd);
}

.pos-cart-summary .summary-total i[b-vzyttiysa2] {
    font-size: 1rem;
    color: var(--simx-text-muted, #6c757d);
    transition: transform 0.2s ease;
}

.pos-cart-summary .summary-content:active .summary-total i[b-vzyttiysa2] {
    transform: translateY(-2px);
}

/* Empty State */
.pos-cart-summary.empty .summary-content[b-vzyttiysa2] {
    cursor: default;
}

.pos-cart-summary .empty-message[b-vzyttiysa2] {
    color: var(--simx-text-muted, #6c757d);
    font-size: 0.9375rem;
}

/* =================================================================
   QUICK ACTIONS
   ================================================================= */

.pos-cart-summary .quick-actions[b-vzyttiysa2] {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.25rem 1rem;
}

.pos-cart-summary .quick-action-btn[b-vzyttiysa2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pos-cart-summary .quick-action-btn:active:not(:disabled)[b-vzyttiysa2] {
    transform: scale(0.98);
}

.pos-cart-summary .quick-action-btn:disabled[b-vzyttiysa2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pos-cart-summary .quick-action-btn.send[b-vzyttiysa2] {
    background: var(--bs-warning, #ffc107);
    color: #000;
}

.pos-cart-summary .quick-action-btn.send:hover:not(:disabled)[b-vzyttiysa2] {
    background: #e0a800;
}

.pos-cart-summary .quick-action-btn.pay[b-vzyttiysa2] {
    background: var(--bs-success, #198754);
    color: #fff;
}

.pos-cart-summary .quick-action-btn.pay:hover:not(:disabled)[b-vzyttiysa2] {
    background: #157347;
}

.pos-cart-summary .quick-action-btn i[b-vzyttiysa2] {
    font-size: 1.125rem;
}

/* =================================================================
   MOBILE STYLES
   ================================================================= */

@media (max-width: 767px) {
    .pos-cart-summary .summary-content[b-vzyttiysa2] {
        padding: 0.875rem 1rem;
    }
    
    .pos-cart-summary .total-amount[b-vzyttiysa2] {
        font-size: 1.25rem;
    }
    
    .pos-cart-summary .quick-actions[b-vzyttiysa2] {
        padding: 0 1rem 0.875rem;
        gap: 0.5rem;
    }
    
    .pos-cart-summary .quick-action-btn[b-vzyttiysa2] {
        padding: 0.75rem;
        font-size: 0.875rem;
        border-radius: 10px;
    }
    
    .pos-cart-summary .quick-action-btn span[b-vzyttiysa2] {
        display: none; /* Icon only on small screens */
    }
    
    .pos-cart-summary .quick-action-btn i[b-vzyttiysa2] {
        font-size: 1.25rem;
    }
}

/* =================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================================================= */

@media (pointer: coarse) {
    .pos-cart-summary .summary-content[b-vzyttiysa2] {
        min-height: 64px;
    }
    
    .pos-cart-summary .quick-action-btn[b-vzyttiysa2] {
        min-height: 52px;
    }
    
    /* Remove hover effects */
    .pos-cart-summary .quick-action-btn.send:hover:not(:disabled)[b-vzyttiysa2] {
        background: var(--bs-warning, #ffc107);
    }
    
    .pos-cart-summary .quick-action-btn.pay:hover:not(:disabled)[b-vzyttiysa2] {
        background: var(--bs-success, #198754);
    }
}

/* =================================================================
   SAFE AREA INSETS
   ================================================================= */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pos-cart-summary .quick-actions[b-vzyttiysa2] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    
    .pos-cart-summary.empty .summary-content[b-vzyttiysa2],
    .pos-cart-summary:not(.has-items) .summary-content[b-vzyttiysa2] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it. Until 4.0.34 this block
   answered "Match system" alone, with near-black greys that matched nothing else in the shell. Surfaces and ink already
   follow the theme through the --simx-* vocabulary; only what is drawn in fixed light values gets a dark face here. */
html[data-simx-theme-resolved="dark"] .pos-cart-summary.has-items[b-vzyttiysa2] {
    background: linear-gradient(to right, var(--simx-bg-surface), var(--simx-accent-subtle));
}

/* Bootstrap's #0d6efd as ink measured 3.66:1 on the dark bar. */
html[data-simx-theme-resolved="dark"] .pos-cart-summary .item-count i[b-vzyttiysa2],
html[data-simx-theme-resolved="dark"] .pos-cart-summary .total-amount[b-vzyttiysa2] {
    color: var(--simx-accent-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/POSCategoryBar.razor.rz.scp.css */
/* POSCategoryBar.razor.css - Horizontal scrollable category bar styles */

/* =================================================================
   CATEGORY BAR CONTAINER
   ================================================================= */

.pos-category-bar[b-u1d1wt5cyw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--simx-surface, #f8f9fa);
    border-bottom: 1px solid var(--simx-border, #dee2e6);
}

/* =================================================================
   CATEGORY SCROLL AREA
   ================================================================= */

.pos-category-bar .category-scroll[b-u1d1wt5cyw] {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-snap-type: x mandatory;
    padding: 2px; /* Prevent button shadows from being clipped */
}

.pos-category-bar .category-scroll[b-u1d1wt5cyw]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* =================================================================
   CATEGORY BUTTONS
   ================================================================= */

.pos-category-bar .category-btn[b-u1d1wt5cyw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--simx-text, #212529);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    scroll-snap-align: start;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.pos-category-bar .category-btn:hover[b-u1d1wt5cyw] {
    border-color: var(--simx-primary, #0d6efd);
    color: var(--simx-primary, #0d6efd);
}

.pos-category-bar .category-btn:active[b-u1d1wt5cyw] {
    transform: scale(0.97);
}

.pos-category-bar .category-btn.active[b-u1d1wt5cyw] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.pos-category-bar .category-btn i[b-u1d1wt5cyw] {
    font-size: 1rem;
}

.pos-category-bar .category-name[b-u1d1wt5cyw] {
    line-height: 1;
}

.pos-category-bar .category-count[b-u1d1wt5cyw] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-left: 0.25rem;
}

.pos-category-bar .category-btn.active .category-count[b-u1d1wt5cyw] {
    background: rgba(255, 255, 255, 0.25);
}

/* =================================================================
   SEARCH BUTTON
   ================================================================= */

.pos-category-bar .search-btn[b-u1d1wt5cyw] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 50%;
    color: var(--simx-text-muted, #6c757d);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pos-category-bar .search-btn:hover[b-u1d1wt5cyw] {
    border-color: var(--simx-primary, #0d6efd);
    color: var(--simx-primary, #0d6efd);
}

.pos-category-bar .search-btn:active[b-u1d1wt5cyw] {
    transform: scale(0.95);
}

.pos-category-bar .search-btn.active[b-u1d1wt5cyw] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
    color: #fff;
}

/* =================================================================
   SEARCH BAR
   ================================================================= */

.pos-search-bar[b-u1d1wt5cyw] {
    padding: 0.75rem 1rem;
    background: var(--simx-surface, #f8f9fa);
    border-bottom: 1px solid var(--simx-border, #dee2e6);
    animation: slideDown-b-u1d1wt5cyw 0.2s ease;
}

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

.pos-search-bar .search-input-wrapper[b-u1d1wt5cyw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 50px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pos-search-bar .search-input-wrapper:focus-within[b-u1d1wt5cyw] {
    border-color: var(--simx-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.pos-search-bar .search-input-wrapper i[b-u1d1wt5cyw] {
    color: var(--simx-text-muted, #6c757d);
    font-size: 1rem;
    flex-shrink: 0;
}

.pos-search-bar .search-input-wrapper input[b-u1d1wt5cyw] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--simx-text, #212529);
    min-width: 0;
}

.pos-search-bar .search-input-wrapper input[b-u1d1wt5cyw]::placeholder {
    color: var(--simx-text-muted, #adb5bd);
}

.pos-search-bar .clear-btn[b-u1d1wt5cyw] {
    padding: 0;
    background: none;
    border: none;
    color: var(--simx-text-muted, #6c757d);
    cursor: pointer;
    font-size: 1.125rem;
    transition: color 0.2s ease;
}

.pos-search-bar .clear-btn:hover[b-u1d1wt5cyw] {
    color: var(--simx-text, #212529);
}

/* =================================================================
   COMPACT MODE
   ================================================================= */

.pos-category-bar.compact[b-u1d1wt5cyw] {
    padding: 0.5rem 0.75rem;
}

.pos-category-bar.compact .category-btn[b-u1d1wt5cyw] {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}

.pos-category-bar.compact .category-btn i[b-u1d1wt5cyw] {
    font-size: 0.875rem;
}

.pos-category-bar.compact .search-btn[b-u1d1wt5cyw] {
    width: 36px;
    height: 36px;
}

/* =================================================================
   MOBILE STYLES
   ================================================================= */

@media (max-width: 767px) {
    .pos-category-bar[b-u1d1wt5cyw] {
        padding: 0.5rem;
    }
    
    .pos-category-bar .category-btn[b-u1d1wt5cyw] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        border-radius: 8px;
    }
    
    .pos-category-bar .category-btn i[b-u1d1wt5cyw] {
        font-size: 0.875rem;
    }
    
    .pos-category-bar .category-name[b-u1d1wt5cyw] {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .pos-category-bar .search-btn[b-u1d1wt5cyw] {
        width: 36px;
        height: 36px;
    }
    
    .pos-search-bar[b-u1d1wt5cyw] {
        padding: 0.5rem;
    }
    
    .pos-search-bar .search-input-wrapper[b-u1d1wt5cyw] {
        padding: 0.625rem 1rem;
    }
}

/* =================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================================================= */

@media (pointer: coarse) {
    .pos-category-bar .category-btn[b-u1d1wt5cyw] {
        min-height: 44px; /* Apple's minimum touch target */
        padding: 0.625rem 1.25rem;
    }
    
    .pos-category-bar .search-btn[b-u1d1wt5cyw] {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Remove hover effects */
    .pos-category-bar .category-btn:hover:not(.active)[b-u1d1wt5cyw] {
        border-color: var(--simx-border, #dee2e6);
        color: var(--simx-text, #212529);
    }
    
    .pos-category-bar .search-btn:hover:not(.active)[b-u1d1wt5cyw] {
        border-color: var(--simx-border, #dee2e6);
        color: var(--simx-text-muted, #6c757d);
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it. Until 4.0.34 this block
   answered "Match system" alone, with near-black greys that matched nothing else in the shell. Surfaces and ink already
   follow the theme through the --simx-* vocabulary; only what is drawn in fixed light values gets a dark face here. */
html[data-simx-theme-resolved="dark"] .pos-category-bar .category-btn:not(.active):hover[b-u1d1wt5cyw],
html[data-simx-theme-resolved="dark"] .pos-category-bar .search-btn:not(.active):hover[b-u1d1wt5cyw] {
    color: var(--simx-accent-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/POSMenuItemCard.razor.rz.scp.css */
/* POSMenuItemCard.razor.css - Touch-optimized menu item card styles */

/* =================================================================
   BASE CARD STYLES
   ================================================================= */

.pos-item-card[b-wscng0eoqu] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pos-item-card:not(.unavailable):hover[b-wscng0eoqu] {
    border-color: var(--simx-primary, #0d6efd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pos-item-card:not(.unavailable):active[b-wscng0eoqu],
.pos-item-card.pressed:not(.unavailable)[b-wscng0eoqu] {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.pos-item-card.unavailable[b-wscng0eoqu] {
    filter: grayscale(50%);
}

/* =================================================================
   IMAGE SECTION
   ================================================================= */

.pos-item-card .item-image[b-wscng0eoqu] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--simx-surface, #f8f9fa);
}

.pos-item-card .item-image img[b-wscng0eoqu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pos-item-card:not(.unavailable):hover .item-image img[b-wscng0eoqu] {
    transform: scale(1.05);
}

.pos-item-card .image-placeholder[b-wscng0eoqu] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: var(--simx-text-muted, #adb5bd);
    font-size: 2rem;
}

/* =================================================================
   BADGES
   ================================================================= */

.pos-item-card .quantity-badge[b-wscng0eoqu] {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: badgePop-b-wscng0eoqu 0.3s ease;
}

@keyframes badgePop-b-wscng0eoqu {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.pos-item-card .unavailable-badge[b-wscng0eoqu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    padding: 0.25rem 1rem;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pos-item-card .modifier-indicator[b-wscng0eoqu] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--simx-text-muted, #6c757d);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* =================================================================
   INFO SECTION
   ================================================================= */

.pos-item-card .item-info[b-wscng0eoqu] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.pos-item-card .item-name[b-wscng0eoqu] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--simx-text, #212529);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-item-card .item-price[b-wscng0eoqu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--simx-primary, #0d6efd);
}

/* =================================================================
   LONG-PRESS INDICATOR
   ================================================================= */

.pos-item-card .long-press-indicator[b-wscng0eoqu] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-wscng0eoqu 0.2s ease;
}

@keyframes fadeIn-b-wscng0eoqu {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pos-item-card .progress-ring[b-wscng0eoqu] {
    position: relative;
    width: 48px;
    height: 48px;
}

.pos-item-card .progress-ring svg[b-wscng0eoqu] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pos-item-card .progress-ring-bg[b-wscng0eoqu] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
}

.pos-item-card .progress-ring-fg[b-wscng0eoqu] {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.1s ease;
}

.pos-item-card .progress-ring i[b-wscng0eoqu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.25rem;
}

/* =================================================================
   SIZE VARIANTS
   ================================================================= */

/* Small size */
.pos-item-card.item-sm[b-wscng0eoqu] {
    border-radius: 8px;
}

.pos-item-card.item-sm .item-image[b-wscng0eoqu] {
    aspect-ratio: 1;
}

.pos-item-card.item-sm .image-placeholder[b-wscng0eoqu] {
    font-size: 1.5rem;
}

.pos-item-card.item-sm .item-info[b-wscng0eoqu] {
    padding: 0.5rem;
}

.pos-item-card.item-sm .item-name[b-wscng0eoqu] {
    font-size: 0.75rem;
    -webkit-line-clamp: 1;
}

.pos-item-card.item-sm .item-price[b-wscng0eoqu] {
    font-size: 0.875rem;
}

.pos-item-card.item-sm .quantity-badge[b-wscng0eoqu] {
    min-width: 22px;
    height: 22px;
    font-size: 0.75rem;
    top: 4px;
    right: 4px;
}

/* Large size (touch-optimized) */
.pos-item-card.item-lg[b-wscng0eoqu] {
    border-radius: 16px;
}

.pos-item-card.item-lg .item-image[b-wscng0eoqu] {
    aspect-ratio: 16 / 10;
}

.pos-item-card.item-lg .image-placeholder[b-wscng0eoqu] {
    font-size: 3rem;
}

.pos-item-card.item-lg .item-info[b-wscng0eoqu] {
    padding: 1rem;
    gap: 0.5rem;
}

.pos-item-card.item-lg .item-name[b-wscng0eoqu] {
    font-size: 1rem;
}

.pos-item-card.item-lg .item-price[b-wscng0eoqu] {
    font-size: 1.25rem;
}

.pos-item-card.item-lg .quantity-badge[b-wscng0eoqu] {
    min-width: 32px;
    height: 32px;
    font-size: 1rem;
    top: 12px;
    right: 12px;
}

.pos-item-card.item-lg .modifier-indicator[b-wscng0eoqu] {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    bottom: 12px;
    right: 12px;
}

/* =================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ================================================================= */

@media (pointer: coarse) {
    .pos-item-card[b-wscng0eoqu] {
        /* Ensure minimum touch target size */
        min-height: 100px;
    }
    
    .pos-item-card.item-lg[b-wscng0eoqu] {
        min-height: 140px;
    }
    
    /* Remove hover effects on touch devices */
    .pos-item-card:not(.unavailable):hover[b-wscng0eoqu] {
        border-color: var(--simx-border, #dee2e6);
        box-shadow: none;
    }
    
    .pos-item-card:not(.unavailable):hover .item-image img[b-wscng0eoqu] {
        transform: none;
    }
}

/* =================================================================
   MOBILE-SPECIFIC STYLES
   ================================================================= */

@media (max-width: 767px) {
    /* Switch to horizontal card layout on phones */
    .pos-item-card[b-wscng0eoqu] {
        flex-direction: row;
        border-radius: 10px;
    }
    
    .pos-item-card .item-image[b-wscng0eoqu] {
        width: 80px;
        height: 80px;
        aspect-ratio: 1;
        flex-shrink: 0;
    }
    
    .pos-item-card .item-info[b-wscng0eoqu] {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    .pos-item-card .item-name[b-wscng0eoqu] {
        -webkit-line-clamp: 1;
    }
    
    .pos-item-card .quantity-badge[b-wscng0eoqu] {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }
    
    .pos-item-card .modifier-indicator[b-wscng0eoqu] {
        position: static;
        margin-top: 0.25rem;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        font-size: 0.75rem;
        color: var(--simx-text-muted, #6c757d);
    }
    
    .pos-item-card .modifier-indicator[b-wscng0eoqu]::before {
        content: "Customizable";
        margin-left: 0.25rem;
        font-size: 0.7rem;
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it; until 4.0.34 this block
   answered "Match system" alone, so an operator who chose Dark kept the light placeholder, the white modifier dot and
   Bootstrap's #0d6efd price (3.66:1 on the dark card). The card, its border and its ink already follow the theme through
   the --simx-* vocabulary; only what is drawn in fixed light values needs a dark face. */
html[data-simx-theme-resolved="dark"] .pos-item-card .image-placeholder[b-wscng0eoqu] {
    background: linear-gradient(135deg, var(--simx-bg-sunken) 0%, var(--simx-bg-raised) 100%);
}

html[data-simx-theme-resolved="dark"] .pos-item-card .item-price[b-wscng0eoqu] {
    color: var(--simx-accent-text);
}

/* The corner dot only: on phones the indicator is an inline "Customizable" caption with no fill. */
@media (min-width: 768px) {
    html[data-simx-theme-resolved="dark"] .pos-item-card .modifier-indicator[b-wscng0eoqu] {
        background: var(--simx-bg-overlay);
        color: var(--simx-text-secondary);
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/POSOrderSlideUp.razor.rz.scp.css */
/* POSOrderSlideUp.razor.css - Mobile slide-up order panel styles */

/* =================================================================
   WRAPPER
   ================================================================= */

.pos-order-slideup-wrapper[b-3i8ql0mieo] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.pos-order-slideup-wrapper.visible[b-3i8ql0mieo] {
    pointer-events: auto;
}

/* =================================================================
   BACKDROP
   ================================================================= */

.slideup-backdrop[b-3i8ql0mieo] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slideup-backdrop.show[b-3i8ql0mieo] {
    opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.slideup-panel[b-3i8ql0mieo] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    background: var(--simx-surface-alt, #fff);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

.slideup-panel.show[b-3i8ql0mieo] {
    transform: translateY(0);
}

/* =================================================================
   HANDLE
   ================================================================= */

.slideup-handle[b-3i8ql0mieo] {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
}

.slideup-handle .handle-bar[b-3i8ql0mieo] {
    width: 40px;
    height: 4px;
    background: var(--simx-border, #dee2e6);
    border-radius: 2px;
}

/* =================================================================
   HEADER
   ================================================================= */

.slideup-header[b-3i8ql0mieo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--simx-border, #dee2e6);
}

.slideup-header .header-left[b-3i8ql0mieo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.slideup-header h5[b-3i8ql0mieo] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
}

.slideup-header .tab-badge[b-3i8ql0mieo] {
    padding: 0.25rem 0.625rem;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.slideup-header .table-info[b-3i8ql0mieo] {
    font-size: 0.8125rem;
    color: var(--simx-text-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.slideup-header .close-btn[b-3i8ql0mieo] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--simx-text-muted, #6c757d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.slideup-header .close-btn:active[b-3i8ql0mieo] {
    background: var(--simx-surface-hover, #f0f0f0);
}

/* =================================================================
   CONTENT (CART ITEMS)
   ================================================================= */

.slideup-content[b-3i8ql0mieo] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 200px;
    max-height: 40vh;
}

/* Empty State */
.empty-cart[b-3i8ql0mieo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--simx-text-muted, #6c757d);
}

.empty-cart i[b-3i8ql0mieo] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-cart p[b-3i8ql0mieo] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--simx-text, #212529);
}

.empty-cart span[b-3i8ql0mieo] {
    font-size: 0.875rem;
}

/* Cart Items */
.cart-items[b-3i8ql0mieo] {
    padding: 0.5rem 0;
}

.cart-item[b-3i8ql0mieo] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--simx-border, #dee2e6);
}

.cart-item:last-child[b-3i8ql0mieo] {
    border-bottom: none;
}

.cart-item.sent[b-3i8ql0mieo] {
    background: var(--simx-surface, #f8f9fa);
}

.cart-item .item-main[b-3i8ql0mieo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cart-item .item-quantity[b-3i8ql0mieo] {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.cart-item.sent .item-quantity[b-3i8ql0mieo] {
    background: var(--bs-success, #198754);
}

.cart-item .item-details[b-3i8ql0mieo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cart-item .item-name[b-3i8ql0mieo] {
    font-weight: 500;
    color: var(--simx-text, #212529);
}

.cart-item .item-mods[b-3i8ql0mieo] {
    font-size: 0.8125rem;
    color: var(--simx-text-muted, #6c757d);
}

.cart-item .item-notes[b-3i8ql0mieo] {
    font-size: 0.8125rem;
    color: var(--bs-info, #0dcaf0);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cart-item .sent-badge[b-3i8ql0mieo] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: var(--bs-success, #198754);
    color: #fff;
    border-radius: 10px;
    width: fit-content;
}

.cart-item .item-price[b-3i8ql0mieo] {
    font-weight: 600;
    color: var(--simx-text, #212529);
    white-space: nowrap;
}

/* Item Actions */
.cart-item .item-actions[b-3i8ql0mieo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-left: calc(32px + 0.75rem); /* Align with item name */
}

.cart-item .qty-btn[b-3i8ql0mieo] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-surface, #f8f9fa);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 8px;
    font-size: 1.125rem;
    color: var(--simx-text, #212529);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cart-item .qty-btn:active[b-3i8ql0mieo] {
    background: var(--simx-border, #dee2e6);
}

.cart-item .qty-value[b-3i8ql0mieo] {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.cart-item .remove-btn[b-3i8ql0mieo] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--bs-danger, #dc3545);
    cursor: pointer;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
}

.cart-item .remove-btn:active[b-3i8ql0mieo] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

/* =================================================================
   FOOTER
   ================================================================= */

.slideup-footer[b-3i8ql0mieo] {
    padding: 1rem 1.25rem;
    background: var(--simx-surface, #f8f9fa);
    border-top: 1px solid var(--simx-border, #dee2e6);
}

/* Totals Section */
.totals-section[b-3i8ql0mieo] {
    margin-bottom: 1rem;
}

.total-row[b-3i8ql0mieo] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
    color: var(--simx-text, #212529);
}

.total-row.discount[b-3i8ql0mieo] {
    color: var(--bs-success, #198754);
}

.total-row.grand-total[b-3i8ql0mieo] {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--simx-border, #dee2e6);
    font-size: 1.25rem;
    font-weight: 700;
}

.total-row.grand-total span:last-child[b-3i8ql0mieo] {
    color: var(--simx-primary, #0d6efd);
}

/* Actions Section */
.actions-section[b-3i8ql0mieo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.action-btn[b-3i8ql0mieo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}

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

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

.action-btn i[b-3i8ql0mieo] {
    font-size: 1.25rem;
}

.action-btn .count-badge[b-3i8ql0mieo] {
    padding: 0.125rem 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-size: 0.8125rem;
}

.send-btn[b-3i8ql0mieo] {
    background: var(--bs-warning, #ffc107);
    color: #000;
}

.pay-btn[b-3i8ql0mieo] {
    background: var(--bs-success, #198754);
    color: #fff;
}

/* Secondary Actions */
.secondary-actions[b-3i8ql0mieo] {
    display: flex;
    gap: 0.5rem;
}

.secondary-btn[b-3i8ql0mieo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--simx-text-muted, #6c757d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.secondary-btn i[b-3i8ql0mieo] {
    font-size: 1.125rem;
    color: var(--simx-text, #212529);
}

.secondary-btn:active[b-3i8ql0mieo] {
    background: var(--simx-surface, #f8f9fa);
}

/* =================================================================
   SAFE AREA INSETS
   ================================================================= */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .slideup-footer[b-3i8ql0mieo] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it. Until 4.0.34 this block
   answered "Match system" alone, with near-black greys that matched nothing else in the shell. Surfaces and ink already
   follow the theme through the --simx-* vocabulary; only what is drawn in fixed light values gets a dark face here. */
html[data-simx-theme-resolved="dark"] .total-row.grand-total span:last-child[b-3i8ql0mieo] {
    color: var(--simx-accent-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/POSStaffLogin.razor.rz.scp.css */
/* POSStaffLogin.razor.css — POS Staff PIN-pad login */

/* ================================================================
   OVERLAY
   ================================================================ */

.staff-login-overlay[b-829yqlh3zn] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.staff-login-overlay.visible[b-829yqlh3zn] {
    opacity: 1;
    visibility: visible;
}

/* ================================================================
   PANEL
   ================================================================ */

.staff-login-panel[b-829yqlh3zn] {
    background: var(--simx-surface-alt, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    width: min(480px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    animation: staff-panel-in-b-829yqlh3zn 0.3s ease;
}

@keyframes staff-panel-in-b-829yqlh3zn {
    from { transform: scale(0.95) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ================================================================
   HEADER
   ================================================================ */

.staff-login-header[b-829yqlh3zn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--simx-border, #e9ecef);
}

.staff-login-title[b-829yqlh3zn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
}

.staff-login-title i[b-829yqlh3zn] {
    font-size: 1.25rem;
    color: var(--simx-primary, #0d6efd);
}

.staff-login-close[b-829yqlh3zn] {
    background: none;
    border: none;
    color: var(--simx-text-muted, #6c757d);
    font-size: 1.125rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.staff-login-close:hover[b-829yqlh3zn] {
    background: var(--simx-surface, #f8f9fa);
    color: var(--simx-text, #212529);
}

/* ================================================================
   LOADING & EMPTY
   ================================================================ */

.staff-login-loading[b-829yqlh3zn] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.staff-login-empty[b-829yqlh3zn] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--simx-text-muted, #6c757d);
}

.staff-login-empty i[b-829yqlh3zn] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.staff-login-empty h5[b-829yqlh3zn] {
    color: var(--simx-text, #212529);
    margin-bottom: 0.5rem;
}

/* ================================================================
   STAFF GRID
   ================================================================ */

.staff-login-subtitle[b-829yqlh3zn] {
    text-align: center;
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.875rem;
    color: var(--simx-text-muted, #6c757d);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.staff-grid[b-829yqlh3zn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 1.5rem 1.5rem;
}

.staff-card[b-829yqlh3zn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 0.5rem;
    background: var(--simx-surface, #f8f9fa);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.staff-card:hover[b-829yqlh3zn] {
    border-color: var(--simx-primary, #0d6efd);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.staff-card.active[b-829yqlh3zn] {
    border-color: var(--bs-success, #198754);
    background: rgba(25, 135, 84, 0.05);
}

.staff-avatar[b-829yqlh3zn] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--simx-primary, #0d6efd), #6610f2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.staff-name[b-829yqlh3zn] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-role[b-829yqlh3zn] {
    font-size: 0.6875rem;
    color: var(--simx-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.staff-active-badge[b-829yqlh3zn] {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    color: var(--bs-success, #198754);
    font-size: 0.875rem;
}

/* ================================================================
   PIN SECTION
   ================================================================ */

.pin-section[b-829yqlh3zn] {
    padding: 1.5rem;
}

.pin-back-btn[b-829yqlh3zn] {
    background: none;
    border: none;
    color: var(--simx-primary, #0d6efd);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pin-back-btn:hover[b-829yqlh3zn] {
    text-decoration: underline;
}

.pin-staff-info[b-829yqlh3zn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pin-avatar[b-829yqlh3zn] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--simx-primary, #0d6efd), #6610f2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    font-weight: 700;
}

.pin-name[b-829yqlh3zn] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
}

/* ================================================================
   PIN DOTS
   ================================================================ */

.pin-display[b-829yqlh3zn] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pin-dot[b-829yqlh3zn] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--simx-border, #dee2e6);
    background: transparent;
    transition: all 0.15s ease;
}

.pin-dot.filled[b-829yqlh3zn] {
    background: var(--simx-primary, #0d6efd);
    border-color: var(--simx-primary, #0d6efd);
    transform: scale(1.1);
}

.pin-dot.error[b-829yqlh3zn] {
    border-color: var(--bs-danger, #dc3545);
    background: var(--bs-danger, #dc3545);
    animation: pin-shake-b-829yqlh3zn 0.3s ease;
}

@keyframes pin-shake-b-829yqlh3zn {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

.pin-error-msg[b-829yqlh3zn] {
    text-align: center;
    color: var(--bs-danger, #dc3545);
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.pin-validating[b-829yqlh3zn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--simx-primary, #0d6efd);
    font-size: 0.875rem;
}

/* ================================================================
   PIN PAD
   ================================================================ */

.pin-pad[b-829yqlh3zn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    max-width: 280px;
    margin: 0 auto 1rem;
}

.pin-key[b-829yqlh3zn] {
    aspect-ratio: 1.6;
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 12px;
    background: var(--simx-surface, #f8f9fa);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pin-key:hover:not(:disabled)[b-829yqlh3zn] {
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-color: var(--simx-primary, #0d6efd);
}

.pin-key:active:not(:disabled)[b-829yqlh3zn] {
    transform: scale(0.95);
}

.pin-key:disabled[b-829yqlh3zn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pin-key.empty[b-829yqlh3zn] {
    border: none;
    background: transparent;
    cursor: default;
}

.pin-key.delete[b-829yqlh3zn] {
    font-size: 1.25rem;
    color: var(--simx-text-muted, #6c757d);
}

.pin-key.delete:hover:not(:disabled)[b-829yqlh3zn] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
    border-color: var(--bs-danger, #dc3545);
}

/* ================================================================
   PIN HINT
   ================================================================ */

.pin-hint[b-829yqlh3zn] {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--simx-text-muted, #6c757d);
}

.pin-hint-no-pin[b-829yqlh3zn] {
    color: var(--bs-warning, #ffc107);
}

/* ================================================================
   ACTIVE STAFF BAR
   ================================================================ */

.staff-login-active-bar[b-829yqlh3zn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(25, 135, 84, 0.08);
    border-top: 1px solid var(--simx-border, #e9ecef);
    font-size: 0.875rem;
    color: var(--simx-text, #212529);
}

.staff-login-active-bar i[b-829yqlh3zn] {
    color: var(--bs-success, #198754);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 480px) {
    .staff-login-panel[b-829yqlh3zn] {
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
        width: 100vw;
        align-self: flex-end;
    }

    .staff-grid[b-829yqlh3zn] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem 1rem 1rem;
    }

    .staff-card[b-829yqlh3zn] {
        padding: 0.75rem 0.25rem;
    }

    .pin-pad[b-829yqlh3zn] {
        max-width: 260px;
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme ("Dark", or "Match system" on a dark OS); only admin pages carry it. The
   hovered card turned pure white on the dark sheet, and Bootstrap's #0d6efd and #198754 fail as ink there. */
html[data-simx-theme-resolved="dark"] .staff-card:hover[b-829yqlh3zn] {
    background: var(--simx-bg-raised);
}

html[data-simx-theme-resolved="dark"] .staff-login-title i[b-829yqlh3zn],
html[data-simx-theme-resolved="dark"] .pin-back-btn[b-829yqlh3zn],
html[data-simx-theme-resolved="dark"] .pin-validating[b-829yqlh3zn] {
    color: var(--simx-accent-text);
}

html[data-simx-theme-resolved="dark"] .staff-active-badge[b-829yqlh3zn] {
    color: var(--simx-success-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/FoodAndBev/ResponsivePOSLayout.razor.rz.scp.css */
/* ResponsivePOSLayout.razor.css - Responsive POS layout styles */

/* =================================================================
   BASE LAYOUT
   ================================================================= */

.pos-layout[b-xia5n0729x] {
    display: flex;
    height: 100%;
    min-height: 500px;
    background-color: var(--simx-surface, #f8f9fa);
}

.pos-menu-section[b-xia5n0729x] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* =================================================================
   DESKTOP LAYOUT (>=1200px)
   ================================================================= */

.pos-layout-desktop[b-xia5n0729x] {
    flex-direction: row;
    gap: 0;
}

.pos-layout-desktop .pos-menu-section[b-xia5n0729x] {
    border-right: 1px solid var(--simx-border, #dee2e6);
}

.pos-layout-desktop .pos-order-section[b-xia5n0729x] {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--simx-surface-alt, #fff);
}

/* =================================================================
   TABLET LAYOUT (768-1199px)
   ================================================================= */

.pos-layout-tablet[b-xia5n0729x] {
    flex-direction: column;
}

.pos-layout-tablet .pos-menu-tablet[b-xia5n0729x] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 70px; /* Space for order bar */
}

.pos-layout-tablet .pos-order-bar[b-xia5n0729x] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--simx-surface-alt, #fff);
    border-top: 1px solid var(--simx-border, #dee2e6);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transition: max-height 0.3s ease;
}

.pos-layout-tablet .pos-order-bar.collapsed[b-xia5n0729x] {
    max-height: 70px;
}

.pos-layout-tablet .pos-order-bar.expanded[b-xia5n0729x] {
    max-height: 60vh;
}

.pos-layout-tablet .order-summary[b-xia5n0729x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pos-layout-tablet .order-summary:active[b-xia5n0729x] {
    background: var(--simx-surface-hover, #f8f9fa);
}

.pos-layout-tablet .summary-left[b-xia5n0729x],
.pos-layout-tablet .summary-right[b-xia5n0729x] {
    display: flex;
    align-items: center;
}

.pos-layout-tablet .item-count[b-xia5n0729x] {
    font-weight: 500;
    color: var(--simx-text-muted, #6c757d);
}

.pos-layout-tablet .order-total[b-xia5n0729x] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--simx-primary, #0d6efd);
}

.pos-layout-tablet .order-panel-content[b-xia5n0729x] {
    max-height: calc(60vh - 70px);
    overflow-y: auto;
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--simx-border, #dee2e6);
}

.pos-layout-tablet .order-quick-actions[b-xia5n0729x] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

/* =================================================================
   PHONE LAYOUT (<768px)
   ================================================================= */

.pos-layout-phone[b-xia5n0729x] {
    flex-direction: column;
    position: relative;
}

.pos-layout-phone .pos-menu-mobile[b-xia5n0729x] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px; /* Space for FAB */
}

/* Floating Action Button */
.pos-order-fab[b-xia5n0729x] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 99;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pos-order-fab:active[b-xia5n0729x] {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pos-order-fab .fab-content[b-xia5n0729x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

.pos-order-fab .badge[b-xia5n0729x] {
    background: #fff;
    color: var(--simx-primary, #0d6efd);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.pos-order-fab .fab-total[b-xia5n0729x] {
    font-weight: 600;
    font-size: 1rem;
}

/* Slide-up Order Panel */
.pos-order-slideup[b-xia5n0729x] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--simx-surface-alt, #fff);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pos-order-slideup.show[b-xia5n0729x] {
    transform: translateY(0);
}

.slideup-handle[b-xia5n0729x] {
    padding: 12px 0 8px;
    cursor: grab;
    display: flex;
    justify-content: center;
}

.slideup-handle .handle-bar[b-xia5n0729x] {
    width: 40px;
    height: 4px;
    background: var(--simx-border, #dee2e6);
    border-radius: 2px;
}

.slideup-header[b-xia5n0729x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--simx-border, #dee2e6);
}

.slideup-header h5[b-xia5n0729x] {
    color: var(--simx-text, #212529);
}

.slideup-content[b-xia5n0729x] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.slideup-actions[b-xia5n0729x] {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--simx-border, #dee2e6);
    background: var(--simx-surface, #f8f9fa);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Backdrop */
.slideup-backdrop[b-xia5n0729x] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slideup-backdrop.show[b-xia5n0729x] {
    opacity: 1;
    visibility: visible;
}

/* =================================================================
   TOUCH OPTIMIZATIONS
   ================================================================= */

@media (pointer: coarse) {
    .pos-order-fab[b-xia5n0729x] {
        min-height: 56px;
        padding: 1rem 1.5rem;
    }
    
    .slideup-handle[b-xia5n0729x] {
        padding: 16px 0 12px;
    }
    
    .slideup-handle .handle-bar[b-xia5n0729x] {
        width: 48px;
        height: 5px;
    }
}

/* =================================================================
   SAFE AREA INSETS (for notched phones)
   ================================================================= */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pos-layout-phone .pos-menu-mobile[b-xia5n0729x] {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    
    .pos-order-fab[b-xia5n0729x] {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
    
    .slideup-actions[b-xia5n0729x] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* =================================================================
   DARK MODE SUPPORT
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it. Until 4.0.34 this block
   answered "Match system" alone, with near-black greys that matched nothing else in the shell. Surfaces and ink already
   follow the theme through the --simx-* vocabulary; only what is drawn in fixed light values gets a dark face here. */
html[data-simx-theme-resolved="dark"] .pos-layout-tablet .order-total[b-xia5n0729x] {
    color: var(--simx-accent-text);
}

html[data-simx-theme-resolved="dark"] .pos-order-fab .badge[b-xia5n0729x] {
    background: var(--simx-bg-overlay);
    color: var(--simx-text-primary);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskBestLaps.razor.rz.scp.css */
/*
 * KioskBestLaps.razor.css
 * World-class personal records & leaderboard — dark kiosk theme
 */

/* ===== Layout ===== */
.kiosk-best-laps[b-6ug002z4es] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.best-laps-body[b-6ug002z4es] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Stats Row ===== */
.stats-row[b-6ug002z4es] {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

.stat-card[b-6ug002z4es] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 12px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    transition: transform 0.2s;
}

.stat-icon[b-6ug002z4es] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.accent-primary .stat-icon[b-6ug002z4es]  { background: rgba(59,130,246,0.15); color: #60a5fa; }
.accent-gold .stat-icon[b-6ug002z4es]     { background: rgba(255,215,0,0.15);  color: #ffd700; }
.accent-success .stat-icon[b-6ug002z4es]  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.accent-secondary .stat-icon[b-6ug002z4es]{ background: rgba(139,92,246,0.15); color: #a78bfa; }
.accent-muted .stat-icon[b-6ug002z4es]    { background: rgba(148,163,184,0.08);color: var(--kiosk-text-dim); }

.stat-value[b-6ug002z4es] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--kiosk-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-value.stat-time[b-6ug002z4es] {
    font-size: 1.15rem;
}

.stat-label[b-6ug002z4es] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kiosk-text-muted);
}

/* ===== Skeleton stats ===== */
.skeleton-stats .stat-card[b-6ug002z4es] {
    pointer-events: none;
}

.skeleton-block[b-6ug002z4es] {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--kiosk-surface-hover) 25%, var(--kiosk-surface-elevated) 50%, var(--kiosk-surface-hover) 75%);
    background-size: 400% 100%;
    animation: shimmer-b-6ug002z4es 1.5s infinite;
}

.stat-skel-icon[b-6ug002z4es]  { width: 40px; height: 40px; border-radius: 50%; }
.stat-skel-value[b-6ug002z4es] { width: 48px; height: 20px; }
.stat-skel-label[b-6ug002z4es] { width: 60px; height: 10px; }

@keyframes shimmer-b-6ug002z4es {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ===== Leaderboard skeleton ===== */
.leaderboard-skeleton[b-6ug002z4es] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    overflow: hidden;
}

.skeleton-row[b-6ug002z4es] {
    display: grid;
    grid-template-columns: 60px 1fr 110px;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--kiosk-border);
}

.skeleton-row:first-child[b-6ug002z4es] { border-top: none; }

.skel-rank[b-6ug002z4es] { width: 28px; height: 14px; border-radius: 7px; }
.skel-name[b-6ug002z4es] { width: 55%; height: 14px; border-radius: 7px; }
.skel-time[b-6ug002z4es] { width: 80px; height: 14px; border-radius: 7px; justify-self: end; }

/* ===== Leaderboard Table ===== */
.section-heading[b-6ug002z4es] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.section-heading i[b-6ug002z4es] {
    color: var(--kiosk-primary);
}

.lb-table[b-6ug002z4es] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    overflow: hidden;
}

.lb-header-row[b-6ug002z4es] {
    display: grid;
    grid-template-columns: 60px 1fr 120px 100px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kiosk-text-dim);
    text-transform: uppercase;
}

.lb-row[b-6ug002z4es] {
    display: grid;
    grid-template-columns: 60px 1fr 120px 100px;
    align-items: center;
    padding: 13px 16px;
    border-top: 1px solid var(--kiosk-border);
    font-size: 0.9rem;
    transition: background 0.15s;
}

.lb-row:hover[b-6ug002z4es] {
    background: rgba(255,255,255,0.02);
}

/* Rank accents */
.lb-row.rank-gold[b-6ug002z4es]   { border-left: 3px solid #ffd700; }
.lb-row.rank-silver[b-6ug002z4es] { border-left: 3px solid #c0c0c0; }
.lb-row.rank-bronze[b-6ug002z4es] { border-left: 3px solid #cd7f32; }

/* Current user highlight */
.lb-row.is-you[b-6ug002z4es] {
    background: rgba(59,130,246,0.10);
    border-left: 3px solid var(--kiosk-primary);
    box-shadow: inset 0 0 20px rgba(59,130,246,0.06);
}

.lb-col-rank[b-6ug002z4es] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.rank-medal[b-6ug002z4es] { font-size: 1.2rem; }
.rank-num[b-6ug002z4es]   { color: var(--kiosk-text-muted); }

.lb-col-driver[b-6ug002z4es] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--kiosk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-name[b-6ug002z4es] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.you-tag[b-6ug002z4es] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--kiosk-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.lb-col-time[b-6ug002z4es] {
    font-weight: 700;
    color: var(--kiosk-text);
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
}

.lb-col-gap[b-6ug002z4es] {
    color: var(--kiosk-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.leader-label[b-6ug002z4es] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffd700;
    text-transform: uppercase;
}

/* ===== Encouragement Card ===== */
.encouragement-card[b-6ug002z4es] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.05) 100%);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: var(--kiosk-radius);
}

.encouragement-icon[b-6ug002z4es] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59,130,246,0.15);
    font-size: 1.3rem;
    color: #60a5fa;
    flex-shrink: 0;
}

.encouragement-text h4[b-6ug002z4es] {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.encouragement-text p[b-6ug002z4es] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--kiosk-text-muted);
}

/* ===== Empty State ===== */
.best-laps-empty[b-6ug002z4es] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}

.empty-visual[b-6ug002z4es] {
    position: relative;
    margin-bottom: 8px;
}

.empty-icon-ring[b-6ug002z4es] {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kiosk-surface);
    border: 2px solid var(--kiosk-border);
    position: relative;
    z-index: 1;
}

.empty-icon-ring i[b-6ug002z4es] {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-glow[b-6ug002z4es] {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    animation: glowPulse-b-6ug002z4es 3s ease-in-out infinite;
}

@keyframes glowPulse-b-6ug002z4es {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

.best-laps-empty h3[b-6ug002z4es] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.best-laps-empty p[b-6ug002z4es] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--kiosk-text-muted);
    max-width: 320px;
}

.empty-cta[b-6ug002z4es] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 20px;
    border-radius: var(--kiosk-radius);
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskCatchUpSequence.razor.rz.scp.css */
/* KioskCatchUpSequence.razor.css
   The sign-in "since your last visit" celebration. Built for arm's length on a shared touch screen:
   big type, 72px actions, one idea per card. It sits over the kiosk and UNDER the idle warning
   (KioskTimeoutOverlay, z-index 10000), which must always win. Motion is decoration only and
   switches off under prefers-reduced-motion. */

.kcu-backdrop[b-yrhmu92vrp] {
    position: fixed;
    inset: 0;
    z-index: 9995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vmin, 48px);
    background: radial-gradient(ellipse at 50% 28%, rgba(46, 56, 128, 0.55) 0%, rgba(5, 6, 16, 0.94) 68%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #f8fafc;
    font-family: var(--kiosk-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: kcu-fade-in-b-yrhmu92vrp 0.25s ease-out both;
}

.kcu-sr-only[b-yrhmu92vrp] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Panel ===== */

.kcu-panel[b-yrhmu92vrp] {
    /* Accent: the card kind's own color, or a badge's rarity (see the kcu-accent-* rules below). */
    --kcu-accent: #3b82f6;
    --kcu-accent-2: #8b5cf6;
    --kcu-glow: rgba(99, 102, 241, 0.45);

    position: relative;
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow: hidden auto;
    padding: clamp(24px, 3.6vh, 44px) clamp(22px, 4vw, 56px) clamp(20px, 3vh, 36px);
    border-radius: 28px;
    /* Fallback first: a browser without color-mix() drops the whole declaration below. */
    background: linear-gradient(165deg, #181c40 0%, #0e1027 58%, #0a0b1c 100%);
    background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--kcu-accent) 28%, transparent) 0%, transparent 55%),
        linear-gradient(165deg, #181c40 0%, #0e1027 58%, #0a0b1c 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 90px -24px var(--kcu-glow);
    text-align: center;
    animation: kcu-pop-b-yrhmu92vrp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.kcu-accent-summary[b-yrhmu92vrp] { --kcu-accent: #3b82f6; --kcu-accent-2: #8b5cf6; --kcu-glow: rgba(99, 102, 241, 0.5); }
.kcu-accent-level[b-yrhmu92vrp] { --kcu-accent: #0891b2; --kcu-accent-2: #22d3ee; --kcu-glow: rgba(34, 211, 238, 0.45); }
.kcu-accent-reward[b-yrhmu92vrp] { --kcu-accent: #e11d48; --kcu-accent-2: #f59e0b; --kcu-glow: rgba(244, 63, 94, 0.45); }
.kcu-accent-streak[b-yrhmu92vrp] { --kcu-accent: #ea580c; --kcu-accent-2: #facc15; --kcu-glow: rgba(249, 115, 22, 0.5); }
.kcu-accent-common[b-yrhmu92vrp] { --kcu-accent: #475569; --kcu-accent-2: #94a3b8; --kcu-glow: rgba(148, 163, 184, 0.4); }
.kcu-accent-uncommon[b-yrhmu92vrp] { --kcu-accent: #15803d; --kcu-accent-2: #4ade80; --kcu-glow: rgba(74, 222, 128, 0.42); }
.kcu-accent-rare[b-yrhmu92vrp] { --kcu-accent: #1d4ed8; --kcu-accent-2: #60a5fa; --kcu-glow: rgba(96, 165, 250, 0.5); }
.kcu-accent-epic[b-yrhmu92vrp] { --kcu-accent: #7e22ce; --kcu-accent-2: #d946ef; --kcu-glow: rgba(192, 132, 252, 0.5); }
.kcu-accent-legendary[b-yrhmu92vrp] { --kcu-accent: #d97706; --kcu-accent-2: #fde047; --kcu-glow: rgba(250, 204, 21, 0.55); }

/* ===== Progress: one segment per card, the live one filling over its time ===== */

.kcu-progress[b-yrhmu92vrp] {
    display: flex;
    gap: 6px;
    margin: 0 0 clamp(18px, 3vh, 30px);
}

.kcu-segment[b-yrhmu92vrp] {
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.kcu-segment-fill[b-yrhmu92vrp] {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--kcu-accent), var(--kcu-accent-2));
}

.kcu-segment.done .kcu-segment-fill[b-yrhmu92vrp] {
    width: 100%;
}

.kcu-segment.active .kcu-segment-fill[b-yrhmu92vrp] {
    animation: kcu-fill-b-yrhmu92vrp var(--kcu-duration, 4000ms) linear forwards;
}

/* ===== Hero ===== */

.kcu-hero[b-yrhmu92vrp] {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(104px, 15vh, 148px);
    height: clamp(104px, 15vh, 148px);
    margin: 0 auto clamp(14px, 2.4vh, 24px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.38), transparent 46%),
        linear-gradient(145deg, var(--kcu-accent), var(--kcu-accent-2));
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.05),
        0 18px 50px -10px var(--kcu-glow);
    animation: kcu-hero-in-b-yrhmu92vrp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both, kcu-glow-b-yrhmu92vrp 2.8s ease-in-out 0.7s infinite;
}

.kcu-hero > i[b-yrhmu92vrp] {
    position: relative;
    font-size: clamp(50px, 7vh, 66px);
    line-height: 1;
    color: #ffffff;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.kcu-hero-number[b-yrhmu92vrp] {
    font-size: clamp(3rem, 7vh, 4.2rem);
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-variant-numeric: tabular-nums;
}

/* The streak's count rides on the flame. */
.kcu-hero-badge-count[b-yrhmu92vrp] {
    position: absolute;
    right: -6px;
    bottom: -6px;
    min-width: 52px;
    height: 52px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #0e1027;
    border: 3px solid #fb923c;
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Slow light rays behind a badge. */
.kcu-rays[b-yrhmu92vrp] {
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        color-mix(in srgb, var(--kcu-accent-2) 30%, transparent) 0deg 10deg,
        transparent 10deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 70%);
    mask-image: radial-gradient(circle, #000 32%, transparent 70%);
    animation: kcu-spin-b-yrhmu92vrp 18s linear infinite;
    pointer-events: none;
}

/* ===== Words ===== */

.kcu-eyebrow[b-yrhmu92vrp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin: 0 0 10px;
    font-size: clamp(1rem, 1.7vh, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c7d2fe;
}

.kcu-title[b-yrhmu92vrp] {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4.6vh, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.kcu-body[b-yrhmu92vrp] {
    max-width: 32ch;
    margin: 0 auto;
    font-size: clamp(1.15rem, 2.2vh, 1.4rem);
    line-height: 1.45;
    color: #dbe3f0;
    text-wrap: pretty;
}

.kcu-xp[b-yrhmu92vrp] {
    margin: 14px 0 0;
    font-size: clamp(1.5rem, 3vh, 1.95rem);
    font-weight: 800;
    color: #fcd34d;
    text-shadow: 0 0 18px rgba(252, 211, 77, 0.45);
    font-variant-numeric: tabular-nums;
}

.kcu-meta[b-yrhmu92vrp] {
    margin: 12px 0 0;
    font-size: clamp(1rem, 1.8vh, 1.15rem);
    color: #b6c0d4;
}

.kcu-rarity[b-yrhmu92vrp] {
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #ffffff;
    background: #475569;
}

.kcu-rarity-uncommon[b-yrhmu92vrp] { background: #15803d; }
.kcu-rarity-rare[b-yrhmu92vrp] { background: #1d4ed8; }
.kcu-rarity-epic[b-yrhmu92vrp] { background: #7e22ce; }
.kcu-rarity-legendary[b-yrhmu92vrp] { background: linear-gradient(135deg, #f59e0b, #fde047); color: #1f1300; }

/* ===== Summary chips ===== */

.kcu-chips[b-yrhmu92vrp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.kcu-chip[b-yrhmu92vrp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: clamp(1.05rem, 1.9vh, 1.2rem);
    font-weight: 700;
    color: #f1f5f9;
}

.kcu-chip > i[b-yrhmu92vrp] { font-size: 1.35rem; line-height: 1; }
.kcu-chip-badges > i[b-yrhmu92vrp] { color: #fcd34d; }
.kcu-chip-level > i[b-yrhmu92vrp] { color: #22d3ee; }
.kcu-chip-rewards > i[b-yrhmu92vrp] { color: #fb7185; }
.kcu-chip-streak > i[b-yrhmu92vrp] { color: #fb923c; }
.kcu-chip-xp[b-yrhmu92vrp] { color: #fcd34d; font-weight: 800; }

/* ===== Level meter ===== */

.kcu-meter[b-yrhmu92vrp] {
    max-width: 440px;
    height: 14px;
    margin: 20px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.kcu-meter-fill[b-yrhmu92vrp] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #06b6d4, #67e8f9);
    transform-origin: left center;
    animation: kcu-meter-b-yrhmu92vrp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ===== Rewards (titles only; the code lives in My Account) ===== */

.kcu-reward-list[b-yrhmu92vrp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
    margin: 16px auto 14px;
    padding: 0;
    list-style: none;
}

.kcu-reward-item[b-yrhmu92vrp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    padding: 10px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    text-align: left;
}

.kcu-reward-text[b-yrhmu92vrp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kcu-reward-title[b-yrhmu92vrp] {
    font-size: clamp(1.1rem, 2vh, 1.25rem);
    font-weight: 800;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.kcu-reward-expiry[b-yrhmu92vrp] {
    font-size: 0.95rem;
    color: #b6c0d4;
}

.kcu-reward-level[b-yrhmu92vrp] {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(251, 113, 133, 0.16);
    border: 1px solid rgba(251, 113, 133, 0.45);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fecdd3;
    white-space: nowrap;
}

/* ===== Actions: 72px targets, never both the same weight ===== */

.kcu-actions[b-yrhmu92vrp] {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(22px, 3.4vh, 34px);
}

.kcu-btn[b-yrhmu92vrp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 170px;
    min-height: 72px;
    padding: 0 32px;
    border-radius: 18px;
    font: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.kcu-btn > i[b-yrhmu92vrp] { font-size: 1.45rem; line-height: 1; }

.kcu-btn:focus-visible[b-yrhmu92vrp] {
    outline: 4px solid #fde68a;
    outline-offset: 3px;
}

/* Always the kiosk's accent, never the card's: white on a pale rarity (common, legendary) would not read. */
.kcu-btn-primary[b-yrhmu92vrp] {
    flex: 0 1 340px;
    border: none;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.75);
}

.kcu-btn-primary:active[b-yrhmu92vrp] { transform: scale(0.97); }

.kcu-btn-ghost[b-yrhmu92vrp] {
    background: transparent;
    color: #e2e8f0;
    border: 2px solid rgba(255, 255, 255, 0.26);
}

.kcu-btn-ghost:active[b-yrhmu92vrp] { background: rgba(255, 255, 255, 0.08); }

.kcu-hint[b-yrhmu92vrp] {
    margin: 14px 0 0;
    font-size: 0.95rem;
    color: #97a1b8;
}

/* ===== Confetti (badge and level cards) ===== */

.kcu-confetti[b-yrhmu92vrp] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.kcu-confetti > span[b-yrhmu92vrp] {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 10px;
    height: 16px;
    border-radius: 3px;
    opacity: 0;
    background: #fcd34d;
    animation: kcu-burst-b-yrhmu92vrp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kcu-confetti > span:nth-child(1)[b-yrhmu92vrp] { --x: -240px; --y: -150px; --r: 220deg; background: #fcd34d; }
.kcu-confetti > span:nth-child(2)[b-yrhmu92vrp] { --x: 230px; --y: -170px; --r: -200deg; background: var(--kcu-accent-2); animation-delay: 0.04s; }
.kcu-confetti > span:nth-child(3)[b-yrhmu92vrp] { --x: -170px; --y: 120px; --r: 160deg; background: #f472b6; animation-delay: 0.08s; }
.kcu-confetti > span:nth-child(4)[b-yrhmu92vrp] { --x: 190px; --y: 140px; --r: -150deg; background: #34d399; animation-delay: 0.02s; }
.kcu-confetti > span:nth-child(5)[b-yrhmu92vrp] { --x: -290px; --y: 20px; --r: 300deg; background: #60a5fa; animation-delay: 0.1s; }
.kcu-confetti > span:nth-child(6)[b-yrhmu92vrp] { --x: 290px; --y: -10px; --r: -280deg; background: #fcd34d; animation-delay: 0.06s; }
.kcu-confetti > span:nth-child(7)[b-yrhmu92vrp] { --x: -90px; --y: -220px; --r: 120deg; background: var(--kcu-accent-2); animation-delay: 0.12s; }
.kcu-confetti > span:nth-child(8)[b-yrhmu92vrp] { --x: 100px; --y: -230px; --r: -110deg; background: #f472b6; animation-delay: 0.03s; }
.kcu-confetti > span:nth-child(9)[b-yrhmu92vrp] { --x: -220px; --y: 210px; --r: 260deg; background: #fb923c; animation-delay: 0.09s; }
.kcu-confetti > span:nth-child(10)[b-yrhmu92vrp] { --x: 230px; --y: 220px; --r: -240deg; background: #60a5fa; animation-delay: 0.05s; }
.kcu-confetti > span:nth-child(11)[b-yrhmu92vrp] { --x: -40px; --y: 250px; --r: 90deg; background: #34d399; animation-delay: 0.14s; }
.kcu-confetti > span:nth-child(12)[b-yrhmu92vrp] { --x: 50px; --y: -260px; --r: -90deg; background: #fcd34d; animation-delay: 0.07s; }
.kcu-confetti > span:nth-child(13)[b-yrhmu92vrp] { --x: -300px; --y: -80px; --r: 200deg; background: #f472b6; animation-delay: 0.11s; }
.kcu-confetti > span:nth-child(14)[b-yrhmu92vrp] { --x: 310px; --y: 90px; --r: -210deg; background: var(--kcu-accent-2); animation-delay: 0.13s; }

/* ===== Motion ===== */

@keyframes kcu-fade-in-b-yrhmu92vrp {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kcu-pop-b-yrhmu92vrp {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes kcu-hero-in-b-yrhmu92vrp {
    from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes kcu-glow-b-yrhmu92vrp {
    0%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.05), 0 18px 50px -10px var(--kcu-glow); }
    50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.07), 0 18px 70px -4px var(--kcu-glow); }
}

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

@keyframes kcu-fill-b-yrhmu92vrp {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes kcu-meter-b-yrhmu92vrp {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes kcu-burst-b-yrhmu92vrp {
    0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(0.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .kcu-backdrop[b-yrhmu92vrp],
    .kcu-panel[b-yrhmu92vrp],
    .kcu-hero[b-yrhmu92vrp],
    .kcu-rays[b-yrhmu92vrp],
    .kcu-meter-fill[b-yrhmu92vrp] {
        animation: none;
    }

    .kcu-confetti[b-yrhmu92vrp],
    .kcu-rays[b-yrhmu92vrp] {
        display: none;
    }

    /* The live segment reads as "this card" without a moving fill. */
    .kcu-segment.active .kcu-segment-fill[b-yrhmu92vrp] {
        animation: none;
        width: 100%;
        opacity: 0.55;
    }

    .kcu-btn[b-yrhmu92vrp] {
        transition: none;
    }

    .kcu-btn-primary:active[b-yrhmu92vrp] {
        transform: none;
    }
}

/* ===== Smaller and shorter screens ===== */

@media (max-width: 560px) {
    .kcu-panel[b-yrhmu92vrp] {
        border-radius: 22px;
    }

    .kcu-actions[b-yrhmu92vrp] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .kcu-btn[b-yrhmu92vrp],
    .kcu-btn-primary[b-yrhmu92vrp] {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-height: 700px) {
    .kcu-hero[b-yrhmu92vrp] {
        width: 88px;
        height: 88px;
    }

    .kcu-hero > i[b-yrhmu92vrp] {
        font-size: 44px;
    }

    .kcu-hint[b-yrhmu92vrp] {
        display: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskCheckInRoster.razor.rz.scp.css */
/* KioskCheckInRoster.razor.css — Multi-Kiosk / Multi-Participant Check-In (P1–P3) live roster.
   Dark kiosk theme, large touch targets, high-contrast status states, and a calm "you're up"
   call-out so a shared kiosk reads clearly across a room. */

.scm-checkin-roster[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    color: #f8fafc;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.scm-checkin-roster__header[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scm-checkin-roster__back[b-5c2lc03qhy] {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.scm-checkin-roster__back:hover[b-5c2lc03qhy] { background: rgba(255, 255, 255, 0.16); }
.scm-checkin-roster__back:active[b-5c2lc03qhy] { transform: scale(0.94); }

.scm-checkin-roster__heading[b-5c2lc03qhy] { flex: 1 1 auto; min-width: 0; }

.scm-checkin-roster__title[b-5c2lc03qhy] {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.scm-checkin-roster__subtitle[b-5c2lc03qhy] {
    margin: 2px 0 0;
    font-size: 1.1rem;
    color: #94a3b8;
}

/* ── Booking-wide progress ──────────────────────────────────────────────────── */
.scm-checkin-roster__progress[b-5c2lc03qhy] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px 22px;
}

.scm-checkin-roster__progress-top[b-5c2lc03qhy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.scm-checkin-roster__progress-label[b-5c2lc03qhy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-checkin-roster__progress-count[b-5c2lc03qhy] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f8fafc;
}

.scm-checkin-roster__progress-count .of[b-5c2lc03qhy] {
    font-weight: 500;
    color: #94a3b8;
    font-size: 1.05rem;
}

.scm-checkin-roster__progress-track[b-5c2lc03qhy] {
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.scm-checkin-roster__progress-fill[b-5c2lc03qhy] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.5);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── "You're up" call-out ───────────────────────────────────────────────────── */
.scm-checkin-roster__nextup[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--kiosk-accent, #f59e0b), #fb923c);
    color: #1f2937;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35);
    animation: nextUpPulse-b-5c2lc03qhy 2.4s ease-in-out infinite;
}

@keyframes nextUpPulse-b-5c2lc03qhy {
    0%, 100% { box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 10px 38px rgba(245, 158, 11, 0.6); }
}

.scm-checkin-roster__nextup-eyebrow[b-5c2lc03qhy] {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
}

.scm-checkin-roster__nextup-name[b-5c2lc03qhy] {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.1;
}

.scm-checkin-roster__nextup-hint[b-5c2lc03qhy] {
    font-size: 1.05rem;
    font-weight: 600;
    opacity: 0.85;
}

/* Prominent "Start waiver" action inside the next-up call-out (dark button on the amber card). */
.scm-checkin-roster__nextup-cta[b-5c2lc03qhy] {
    align-self: flex-start;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    background: #1f2937;
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
    transition: transform 0.12s ease, background 0.15s ease;
}

.scm-checkin-roster__nextup-cta:hover:not(:disabled)[b-5c2lc03qhy] { background: #111827; }
.scm-checkin-roster__nextup-cta:active:not(:disabled)[b-5c2lc03qhy] { transform: scale(0.98); }
.scm-checkin-roster__nextup-cta:disabled[b-5c2lc03qhy] { opacity: 0.6; cursor: default; }

/* Guardian Claim Flow — a present adult scans a single-use QR from the next-up card to claim the
   minor on their own device. The QR panel sits inside the amber call-out under the hint text. */
.scm-checkin-roster__claim[b-5c2lc03qhy] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.scm-checkin-roster__claim-cta[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    background: #0f766e;
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
    transition: transform 0.12s ease, background 0.15s ease;
}

.scm-checkin-roster__claim-cta:hover:not(:disabled)[b-5c2lc03qhy] { background: #115e59; }
.scm-checkin-roster__claim-cta:active:not(:disabled)[b-5c2lc03qhy] { transform: scale(0.98); }
.scm-checkin-roster__claim-cta:disabled[b-5c2lc03qhy] { opacity: 0.6; cursor: default; }

.scm-checkin-roster__claim-qr[b-5c2lc03qhy] {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    line-height: 0;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

.scm-checkin-roster__claim-qr svg[b-5c2lc03qhy] {
    display: block;
    width: 168px;
    height: 168px;
}

.scm-checkin-roster__claim-hint[b-5c2lc03qhy] {
    font-size: 0.98rem;
    font-weight: 600;
    opacity: 0.9;
    max-width: 420px;
}

.scm-checkin-roster__claim-error[b-5c2lc03qhy] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #7f1d1d;
}

/* Consolidated in-venue checklist shown inside the next-up card when the guest has finished every
   kiosk step and the only remaining steps are away from the kiosk. We list them ALL at once because
   the guest walks away to complete them and won't return to the kiosk. Dark-tinted rows on amber. */
.scm-checkin-roster__venue-steps[b-5c2lc03qhy] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scm-checkin-roster__venue-step[b-5c2lc03qhy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(31, 41, 55, 0.1);
    border: 1px solid rgba(31, 41, 55, 0.18);
}

.scm-checkin-roster__venue-step > i[b-5c2lc03qhy] {
    font-size: 1.35rem;
    line-height: 1.2;
    flex-shrink: 0;
    color: #1f2937;
}

.scm-checkin-roster__venue-step-body[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.scm-checkin-roster__venue-step-label[b-5c2lc03qhy] {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #1f2937;
}

.scm-checkin-roster__venue-step-detail[b-5c2lc03qhy] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0.8;
}

/* ── Roster list ────────────────────────────────────────────────────────────── */
.scm-checkin-roster__list[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scm-checkin-roster__row-group[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
}

.scm-checkin-roster__row-venue[b-5c2lc03qhy] {
    margin: -2px 16px 0;
    padding: 16px 18px 18px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: rgba(245, 158, 11, 0.1);
    color: #f8fafc;
}

.scm-checkin-roster__row-venue-head[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 800;
}

.scm-checkin-roster__row-venue .scm-checkin-roster__venue-step[b-5c2lc03qhy] {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(251, 191, 36, 0.25);
}

.scm-checkin-roster__row-venue .scm-checkin-roster__venue-step > i[b-5c2lc03qhy],
.scm-checkin-roster__row-venue .scm-checkin-roster__venue-step-label[b-5c2lc03qhy] {
    color: #fde68a;
}

.scm-checkin-roster__row-venue .scm-checkin-roster__venue-step-detail[b-5c2lc03qhy] {
    color: #e2e8f0;
    opacity: 1;
}

.scm-checkin-roster__row[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.scm-checkin-roster__row:hover:not(:disabled)[b-5c2lc03qhy] {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.scm-checkin-roster__row:active:not(:disabled)[b-5c2lc03qhy] { transform: scale(0.99); }

.scm-checkin-roster__row:disabled[b-5c2lc03qhy] { cursor: default; }

.scm-checkin-roster__row.is-next[b-5c2lc03qhy] {
    border-color: var(--kiosk-accent, #f59e0b);
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.5) inset;
}

/* W3-04: the guest whose own door code found the booking. */
.scm-checkin-roster__row-group.is-door-code-holder .scm-checkin-roster__row[b-5c2lc03qhy] {
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.45) inset;
}

.scm-checkin-roster__row.is-complete[b-5c2lc03qhy] {
    opacity: 0.7;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
}

.scm-checkin-roster__row.is-busy[b-5c2lc03qhy] { opacity: 0.85; }

.scm-checkin-roster__row-pos[b-5c2lc03qhy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    font-size: 1.35rem;
    font-weight: 800;
    color: #e2e8f0;
}

.scm-checkin-roster__row.is-next .scm-checkin-roster__row-pos[b-5c2lc03qhy] {
    background: var(--kiosk-accent, #f59e0b);
    color: #1f2937;
}

.scm-checkin-roster__row.is-complete .scm-checkin-roster__row-pos[b-5c2lc03qhy] {
    background: rgba(34, 197, 94, 0.85);
    color: #04210f;
}

.scm-checkin-roster__row-main[b-5c2lc03qhy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scm-checkin-roster__row-name[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
}

.scm-checkin-roster__minor[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    color: #38bdf8;
    font-size: 1rem;
}

/* "Guest" cue — an unlinked, typed-in participant (not a known account). Muted/neutral so it reads as
   informational for staff, not as an error. COPPA-safe: conveys link status only, no email/legal name. */
.scm-checkin-roster__guest[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.22) inset;
}

.scm-checkin-roster__chips[b-5c2lc03qhy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scm-checkin-roster__chip[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.scm-checkin-roster__chip.ok[b-5c2lc03qhy] {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
}

.scm-checkin-roster__chip.todo[b-5c2lc03qhy] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

.scm-checkin-roster__chip.express[b-5c2lc03qhy] {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(251, 146, 60, 0.22));
    color: #fde68a;
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.24) inset;
}

.scm-checkin-roster__row-action[b-5c2lc03qhy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 140px;
}

.scm-checkin-roster__cta[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    background: #22c55e;
    color: #04210f;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

.scm-checkin-roster__cta.is-blocked[b-5c2lc03qhy] {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35) inset;
}

/* Waiver is the actionable blocker: present the CTA as an inviting "sign now" action, not a warning. */
.scm-checkin-roster__cta.is-waiver[b-5c2lc03qhy] {
    background: var(--kiosk-accent, #f59e0b);
    color: #1f2937;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

/* Rows/next-up where the guest can self-serve the waiver get a gentle accent so it reads as tappable. */
.scm-checkin-roster__row.is-actionable[b-5c2lc03qhy] {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.1);
}

.scm-checkin-roster__row.is-actionable:hover:not(:disabled)[b-5c2lc03qhy] {
    background: rgba(245, 158, 11, 0.16);
    border-color: var(--kiosk-accent, #f59e0b);
}

.scm-checkin-roster__status-complete[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #86efac;
}

.scm-checkin-roster__spinner[b-5c2lc03qhy] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: rosterSpin-b-5c2lc03qhy 0.8s linear infinite;
}

@keyframes rosterSpin-b-5c2lc03qhy {
    to { transform: rotate(360deg); }
}

/* ── Empty / done / error states ────────────────────────────────────────────── */
.scm-checkin-roster__empty[b-5c2lc03qhy],
.scm-checkin-roster__done[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
    color: #cbd5e1;
}

.scm-checkin-roster__empty i[b-5c2lc03qhy] { font-size: 3.4rem; color: #64748b; }
.scm-checkin-roster__empty p[b-5c2lc03qhy] { margin: 0; font-size: 1.25rem; }

.scm-checkin-roster__done-badge[b-5c2lc03qhy] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.45);
    animation: rosterDonePop-b-5c2lc03qhy 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rosterDonePop-b-5c2lc03qhy {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.scm-checkin-roster__done h3[b-5c2lc03qhy] {
    margin: 6px 0 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: #f8fafc;
}

.scm-checkin-roster__done p[b-5c2lc03qhy] { margin: 0; font-size: 1.2rem; }

.scm-checkin-roster__error[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Outside-the-window state (§6.9) ─────────────────────────────────────────────────────────────
   Shown when self-check-in is refused because the party is too early or too late. There is no
   self-service override — the guest is routed to staff — so this presents a calm, guest-safe message
   rather than an actionable tap target. */
.scm-checkin-roster__window[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
    border-radius: 18px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.32);
    color: #cbd5e1;
}

.scm-checkin-roster__window-icon[b-5c2lc03qhy] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.18);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3) inset;
}

.scm-checkin-roster__window-title[b-5c2lc03qhy] {
    margin: 6px 0 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: #f8fafc;
}

.scm-checkin-roster__window-message[b-5c2lc03qhy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    max-width: 34ch;
}

.scm-checkin-roster__window-sub[b-5c2lc03qhy] {
    margin: 0;
    font-size: 1.1rem;
    color: #94a3b8;
}

.scm-checkin-roster__window-sub strong[b-5c2lc03qhy] { color: #e2e8f0; }

/* ── Express call-out (§6.10) ────────────────────────────────────────────────────────────────────
   A single fast-path tap for fully-cleared racers. Reuses the amber "express" accent so it reads as
   the same affordance as the per-row Express chip, but as a prominent party-level action. */
.scm-checkin-roster__express[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.16), rgba(251, 146, 60, 0.16));
    border: 1px solid rgba(250, 204, 21, 0.4);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}

.scm-checkin-roster__express-head[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.scm-checkin-roster__express-badge[b-5c2lc03qhy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #facc15, #fb923c);
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scm-checkin-roster__express-text[b-5c2lc03qhy] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fde68a;
}

.scm-checkin-roster__express-cta[b-5c2lc03qhy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: var(--kiosk-accent, #f59e0b);
    color: #1f2937;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
    transition: transform 0.12s ease, background 0.15s ease;
}

.scm-checkin-roster__express-cta:hover:not(:disabled)[b-5c2lc03qhy] { background: #fbbf24; }
.scm-checkin-roster__express-cta:active:not(:disabled)[b-5c2lc03qhy] { transform: scale(0.98); }
.scm-checkin-roster__express-cta:disabled[b-5c2lc03qhy] { opacity: 0.6; cursor: default; }

/* ── Party-wide in-venue roll-up ──────────────────────────────────────────────────────────────── */
/* Sits on the dark roster surface (not the amber next-up card), so it needs light-on-dark styling.
   It reuses the .scm-checkin-roster__venue-step* classes, which are dark-on-amber by default, so we
   override their colours here for legibility on the dark card. */
.scm-checkin-roster__party-venue[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.scm-checkin-roster__party-venue-head[b-5c2lc03qhy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--kiosk-text, #f8fafc);
}

.scm-checkin-roster__party-venue-head > i[b-5c2lc03qhy] {
    font-size: 1.4rem;
    color: var(--kiosk-accent, #f59e0b);
    flex-shrink: 0;
}

.scm-checkin-roster__party-venue-list[b-5c2lc03qhy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scm-checkin-roster__party-venue-member[b-5c2lc03qhy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scm-checkin-roster__party-venue-name[b-5c2lc03qhy] {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--kiosk-text, #f8fafc);
}

/* Dark-surface overrides for the reused venue-step rows inside the party card. */
.scm-checkin-roster__party-venue .scm-checkin-roster__venue-step[b-5c2lc03qhy] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.scm-checkin-roster__party-venue .scm-checkin-roster__venue-step > i[b-5c2lc03qhy],
.scm-checkin-roster__party-venue .scm-checkin-roster__venue-step-label[b-5c2lc03qhy] {
    color: var(--kiosk-text, #f8fafc);
}

.scm-checkin-roster__party-venue .scm-checkin-roster__venue-step-detail[b-5c2lc03qhy] {
    color: var(--kiosk-text-muted, #94a3b8);
    opacity: 1;
}

/* Compact layout for smaller kiosk screens / portrait tablets */
@media (max-width: 640px) {
    .scm-checkin-roster[b-5c2lc03qhy] { padding: 18px 14px 32px; }
    .scm-checkin-roster__title[b-5c2lc03qhy] { font-size: 1.7rem; }
    .scm-checkin-roster__nextup-name[b-5c2lc03qhy] { font-size: 2rem; }
    .scm-checkin-roster__row[b-5c2lc03qhy] { flex-wrap: wrap; }
    .scm-checkin-roster__row-action[b-5c2lc03qhy] {
        width: 100%;
        justify-content: stretch;
        min-width: 0;
    }
    .scm-checkin-roster__cta[b-5c2lc03qhy] { width: 100%; justify-content: center; }
    .scm-checkin-roster__express[b-5c2lc03qhy] { flex-direction: column; align-items: stretch; }
    .scm-checkin-roster__express-cta[b-5c2lc03qhy] { width: 100%; justify-content: center; }
}

/* Inline variant of the window notice: the roster stays usable beneath it (a payment hold lets
   the party clear waivers and videos first), so it is a banner, not a full-screen stop. */
.scm-checkin-roster__window--inline[b-5c2lc03qhy] {
    padding: 22px 20px;
    gap: 8px;
    margin-bottom: 14px;
}

.scm-checkin-roster__window--inline .scm-checkin-roster__window-icon[b-5c2lc03qhy] {
    width: 60px;
    height: 60px;
    font-size: 2rem;
}

.scm-checkin-roster__window--inline .scm-checkin-roster__window-title[b-5c2lc03qhy] {
    font-size: 1.5rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskContainer.razor.rz.scp.css */
/* 
 * KioskContainer.razor.css
 * Main kiosk container styles - touch-optimized with enhanced dark theme
 */

/* ===== CSS Variables (Enhanced Dark Theme) ===== */
.kiosk-container[b-d4cvt0qs9v] {
    /* Background colors */
    --kiosk-bg: #0a0a14;
    --kiosk-bg-gradient: linear-gradient(180deg, #0a0a14 0%, #0f0f1a 100%);
    --kiosk-surface: #13132a;
    --kiosk-surface-hover: #1a1a3a;
    --kiosk-surface-elevated: #1f1f40;
    
    /* Primary accent colors */
    --kiosk-primary: #3b82f6;
    --kiosk-primary-hover: #2563eb;
    --kiosk-secondary: #8b5cf6;
    --kiosk-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    
    /* Text colors */
    --kiosk-text: #f8fafc;
    --kiosk-text-muted: #94a3b8;
    --kiosk-text-dim: #64748b;
    
    /* Status colors */
    --kiosk-success: #22c55e;
    --kiosk-warning: #f59e0b;
    --kiosk-error: #ef4444;
    
    /* Border colors */
    --kiosk-border: rgba(255, 255, 255, 0.08);
    --kiosk-border-hover: rgba(255, 255, 255, 0.15);
    
    /* Glow effects */
    --kiosk-glow-primary: rgba(59, 130, 246, 0.4);
    --kiosk-glow-secondary: rgba(139, 92, 246, 0.3);
    
    /* Touch-friendly sizing */
    --kiosk-touch-target: 48px;
    --kiosk-button-height: 56px;
    --kiosk-input-height: 56px;
    --kiosk-spacing-xs: 8px;
    --kiosk-spacing-sm: 16px;
    --kiosk-spacing-md: 24px;
    --kiosk-spacing-lg: 32px;
    --kiosk-spacing-xl: 48px;
    --kiosk-radius: 12px;
    --kiosk-radius-lg: 16px;
    
    /* Typography */
    --kiosk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kiosk-font-display: 'Inter', sans-serif;
    
    /* Apply base styles */
    font-family: var(--kiosk-font);
    background: var(--kiosk-bg-gradient);
    color: var(--kiosk-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kiosk-container.fullscreen[b-d4cvt0qs9v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* ===== Global Scrollbar Styling (Dark Theme) ===== */
.kiosk-container[b-d4cvt0qs9v],
.kiosk-container *[b-d4cvt0qs9v] {
    scrollbar-width: thin;
    scrollbar-color: var(--kiosk-primary) var(--kiosk-surface);
}

.kiosk-container [b-d4cvt0qs9v]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.kiosk-container [b-d4cvt0qs9v]::-webkit-scrollbar-track {
    background: var(--kiosk-surface);
    border-radius: 4px;
}

.kiosk-container [b-d4cvt0qs9v]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--kiosk-primary), var(--kiosk-secondary));
    border-radius: 4px;
    border: 2px solid var(--kiosk-surface);
}

.kiosk-container [b-d4cvt0qs9v]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--kiosk-primary-hover), var(--kiosk-secondary));
}

.kiosk-container [b-d4cvt0qs9v]::-webkit-scrollbar-corner {
    background: var(--kiosk-surface);
}

/* ===== Content Area ===== */
.kiosk-content[b-d4cvt0qs9v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    animation: fadeSlideIn-b-d4cvt0qs9v 0.3s ease-out;
}

@keyframes fadeSlideIn-b-d4cvt0qs9v {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Footer ===== */
.kiosk-footer[b-d4cvt0qs9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--kiosk-spacing-md);
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--kiosk-border);
    backdrop-filter: blur(10px);
}

.powered-by[b-d4cvt0qs9v] {
    font-size: 0.75rem;
    color: var(--kiosk-text-dim);
    letter-spacing: 0.02em;
}

.user-info[b-d4cvt0qs9v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--kiosk-text);
}

.user-info i[b-d4cvt0qs9v] {
    font-size: 1.25rem;
    color: var(--kiosk-primary);
}

.user-info .short-code[b-d4cvt0qs9v] {
    font-size: 0.75rem;
    color: var(--kiosk-text-muted);
    font-family: monospace;
}

/* ===== Selection Screen Layout ===== */
[b-d4cvt0qs9v] .kiosk-selection-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Inline alerts =====
   The FullscreenDisplay theme pins every .alert to the middle of the screen (meant for Oqtane's module messages). That
   lifted the kiosk's inline notices out of their screens and on top of what they sit in: the karting confirmation's
   "Pay $X at the front desk" and "report to the pit lane" covered its confirmation code (found 2026-09-24). Inside the
   kiosk an alert is part of the page, so it stays in the flow. */
[b-d4cvt0qs9v] .alert {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
}

/* ===== Global Button Styles ===== */
[b-d4cvt0qs9v] .kiosk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
    min-height: var(--kiosk-button-height);
    padding: 14px 24px;
    border: none;
    border-radius: var(--kiosk-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

[b-d4cvt0qs9v] .kiosk-btn i {
    font-size: 1.25rem;
}

[b-d4cvt0qs9v] .kiosk-btn-primary {
    background: var(--kiosk-accent-gradient);
    color: white;
    box-shadow: 0 4px 16px var(--kiosk-glow-primary);
}

[b-d4cvt0qs9v] .kiosk-btn-primary:hover:not(:disabled),
[b-d4cvt0qs9v] .kiosk-btn-primary:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--kiosk-glow-primary);
}

[b-d4cvt0qs9v] .kiosk-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

[b-d4cvt0qs9v] .kiosk-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

[b-d4cvt0qs9v] .kiosk-btn-secondary {
    background: var(--kiosk-surface);
    color: var(--kiosk-text);
    border: 2px solid var(--kiosk-border);
}

[b-d4cvt0qs9v] .kiosk-btn-secondary:hover:not(:disabled) {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
}

[b-d4cvt0qs9v] .kiosk-btn-outline {
    background: transparent;
    color: var(--kiosk-text-muted);
    border: 2px solid var(--kiosk-border);
}

[b-d4cvt0qs9v] .kiosk-btn-outline:hover:not(:disabled) {
    background: var(--kiosk-surface);
    color: var(--kiosk-text);
    border-color: var(--kiosk-text-muted);
}

/* ===== Back Button ===== */
[b-d4cvt0qs9v] .kiosk-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

[b-d4cvt0qs9v] .kiosk-back-btn:hover,
[b-d4cvt0qs9v] .kiosk-back-btn:focus-visible {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
    color: var(--kiosk-primary);
}

[b-d4cvt0qs9v] .kiosk-back-btn:active {
    transform: scale(0.98);
}

[b-d4cvt0qs9v] .kiosk-back-btn i {
    font-size: 1.25rem;
}

/* ===== Screen Header ===== */
[b-d4cvt0qs9v] .kiosk-screen-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--kiosk-border);
}

[b-d4cvt0qs9v] .screen-title {
    flex: 1;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--kiosk-text);
}

/* ===== Form Inputs ===== */
[b-d4cvt0qs9v] .kiosk-input {
    width: 100%;
    min-height: var(--kiosk-input-height);
    padding: 16px 20px;
    background: var(--kiosk-surface);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text);
    font-size: 1rem;
    transition: all 0.2s ease;
}

[b-d4cvt0qs9v] .kiosk-input:focus {
    outline: none;
    border-color: var(--kiosk-primary);
    box-shadow: 0 0 0 3px var(--kiosk-glow-primary);
}

[b-d4cvt0qs9v] .kiosk-input::placeholder {
    color: var(--kiosk-text-muted);
}

/* ===== Loading Overlay ===== */
[b-d4cvt0qs9v] .kiosk-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 10000;
}

[b-d4cvt0qs9v] .kiosk-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid var(--kiosk-surface);
    border-top-color: var(--kiosk-primary);
    border-radius: 50%;
    animation: spin-b-d4cvt0qs9v 1s linear infinite;
}

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

[b-d4cvt0qs9v] .kiosk-loading-text {
    font-size: 1.125rem;
    color: var(--kiosk-text-muted);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .kiosk-footer[b-d4cvt0qs9v] {
        padding: 12px 16px;
    }
    
    [b-d4cvt0qs9v] .kiosk-btn {
        min-width: auto;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* ===== v3.38.0 (review #13 W2.2) — credential scan lanes ===== */

[b-d4cvt0qs9v] .welcome-scan-affordance,
[b-d4cvt0qs9v] .multi-driver-scan-affordance {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 1rem;
}

[b-d4cvt0qs9v] .welcome-scan-error {
    max-width: 520px;
    margin: 0.5rem auto 0;
}

[b-d4cvt0qs9v] .scan-arm-btn {
    background: none;
    border: 1px dashed var(--kiosk-border, #444);
    color: var(--kiosk-primary, #0d6efd);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
}

[b-d4cvt0qs9v] .scan-arm-btn.scan-armed {
    border-color: var(--kiosk-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.12);
}

[b-d4cvt0qs9v] .credential-resolved .logged-in-name i {
    color: var(--kiosk-success, #22c55e);
}

/* ===== Send to kiosk: a roster that did not open here (A6) ===== */
/* Over whatever the kiosk shows, below the timeout and achievement modals (10000), above the Up Next banner (9000). */
.kiosk-roster-notice[b-d4cvt0qs9v] {
    position: fixed;
    left: 50%;
    bottom: var(--kiosk-spacing-lg);
    transform: translateX(-50%);
    z-index: 9500;
    width: min(92vw, 720px);
    display: flex;
    align-items: center;
    gap: var(--kiosk-spacing-sm);
    padding: var(--kiosk-spacing-sm) var(--kiosk-spacing-md);
    background: var(--kiosk-surface-elevated);
    color: var(--kiosk-text);
    border: 2px solid var(--kiosk-warning);
    border-radius: var(--kiosk-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    font-size: 1.25rem;
}

.kiosk-roster-notice__icon[b-d4cvt0qs9v] {
    flex: 0 0 auto;
    font-size: 1.75rem;
    color: var(--kiosk-warning);
}

.kiosk-roster-notice__text[b-d4cvt0qs9v] {
    flex: 1 1 auto;
}

.kiosk-roster-notice__ok[b-d4cvt0qs9v] {
    flex: 0 0 auto;
    min-width: var(--kiosk-button-height);
    min-height: var(--kiosk-touch-target);
    padding: 0 var(--kiosk-spacing-md);
    border: none;
    border-radius: var(--kiosk-radius);
    background: var(--kiosk-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskContestResults.razor.rz.scp.css */
/*
 * KioskContestResults.razor.css
 * World-class contest browser — dark kiosk theme, touch-optimized
 */

/* ===== Layout ===== */
.kiosk-contests[b-vy3krblujm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ===== Filter Tabs ===== */
.contest-filters[b-vy3krblujm] {
    display: flex;
    gap: 8px;
    padding: 12px 32px;
    flex-shrink: 0;
}

.filter-tab[b-vy3krblujm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.filter-tab:hover[b-vy3krblujm] {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-border-hover);
}

.filter-tab.active[b-vy3krblujm] {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.10));
    border-color: var(--kiosk-primary);
    color: var(--kiosk-text);
    box-shadow: 0 0 16px rgba(59,130,246,0.15);
}

.filter-tab .count-badge[b-vy3krblujm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--kiosk-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ===== Contest List ===== */
.contest-list[b-vy3krblujm] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Contest Card ===== */
.contest-card[b-vy3krblujm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    width: 100%;
    color: inherit;
    overflow: hidden;
}

.contest-card:hover[b-vy3krblujm] {
    transform: translateY(-2px);
    border-color: var(--kiosk-border-hover);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.contest-card.featured[b-vy3krblujm] {
    border-color: rgba(245,158,11,0.35);
    background: linear-gradient(135deg, var(--kiosk-surface) 80%, rgba(245,158,11,0.06) 100%);
}

.featured-ribbon[b-vy3krblujm] {
    position: absolute;
    top: 12px;
    right: -2px;
    padding: 3px 12px 3px 10px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-top[b-vy3krblujm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.card-title-area h3[b-vy3krblujm] {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.card-chips[b-vy3krblujm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip[b-vy3krblujm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip-type[b-vy3krblujm], .chip-type-sm[b-vy3krblujm] {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.chip-activity[b-vy3krblujm], .chip-activity-sm[b-vy3krblujm] {
    background: rgba(139,92,246,0.15);
    color: #a78bfa;
}

.chip-live[b-vy3krblujm] {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
}

.chip-upcoming[b-vy3krblujm] {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

.chip-completed[b-vy3krblujm] {
    background: rgba(148,163,184,0.12);
    color: var(--kiosk-text-muted);
}

.live-dot[b-vy3krblujm] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: livePulse-b-vy3krblujm 1.5s ease-in-out infinite;
}

@keyframes livePulse-b-vy3krblujm {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.card-status[b-vy3krblujm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kiosk-text-muted);
    flex-shrink: 0;
}

.status-dot[b-vy3krblujm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-live[b-vy3krblujm] { background: #22c55e; animation: livePulse-b-vy3krblujm 1.5s ease-in-out infinite; }
.dot-upcoming[b-vy3krblujm] { background: #fbbf24; }
.dot-completed[b-vy3krblujm] { background: var(--kiosk-text-dim); }

.card-meta[b-vy3krblujm] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--kiosk-text-muted);
}

.card-meta span[b-vy3krblujm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.card-meta .has-prizes[b-vy3krblujm] {
    color: #fbbf24;
}

.card-action-hint[b-vy3krblujm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kiosk-primary);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.contest-card:hover .card-action-hint[b-vy3krblujm] {
    opacity: 1;
}

/* ===== Contest Empty ===== */
.contest-empty[b-vy3krblujm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
}

.empty-icon-wrapper[b-vy3krblujm] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kiosk-surface);
    margin-bottom: 8px;
}

.empty-icon-wrapper i[b-vy3krblujm] {
    font-size: 2.5rem;
    color: var(--kiosk-text-dim);
}

.contest-empty h3[b-vy3krblujm] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.contest-empty p[b-vy3krblujm] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--kiosk-text-muted);
    max-width: 320px;
}

/* ===== Skeleton (List) ===== */
.skeleton-card[b-vy3krblujm] {
    pointer-events: none;
}

.skeleton-line[b-vy3krblujm] {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--kiosk-surface-hover) 25%, var(--kiosk-surface-elevated) 50%, var(--kiosk-surface-hover) 75%);
    background-size: 400% 100%;
    animation: shimmer-b-vy3krblujm 1.5s infinite;
}

.skeleton-line.wide[b-vy3krblujm] { width: 65%; height: 18px; }
.skeleton-line.medium[b-vy3krblujm] { width: 45%; margin-top: 8px; }
.skeleton-line.short[b-vy3krblujm] { width: 30%; margin-top: 8px; }

@keyframes shimmer-b-vy3krblujm {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════
   DETAIL VIEW
   ═══════════════════════════════════════════ */

.contest-detail-body[b-vy3krblujm] {
    flex: 1;
    overflow-y: auto;
    padding: 0 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Info Banner ── */
.contest-info-banner[b-vy3krblujm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-lg);
}

.info-chips[b-vy3krblujm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.info-meta[b-vy3krblujm] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--kiosk-text-muted);
}

.info-meta span[b-vy3krblujm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.contest-description[b-vy3krblujm] {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--kiosk-text-muted);
    line-height: 1.5;
}

/* ── Section Headings ── */
.section-heading[b-vy3krblujm] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kiosk-text);
}

.section-heading i[b-vy3krblujm] {
    color: var(--kiosk-primary);
}

/* ── Prizes ── */
.prizes-section[b-vy3krblujm] {
    padding: 0;
}

.prize-cards[b-vy3krblujm] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.prize-card[b-vy3krblujm] {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 220px;
    padding: 16px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.prize-card.prize-gold[b-vy3krblujm] {
    border-color: rgba(255,215,0,0.35);
    background: linear-gradient(135deg, var(--kiosk-surface) 60%, rgba(255,215,0,0.06) 100%);
}

.prize-card.prize-silver[b-vy3krblujm] {
    border-color: rgba(192,192,192,0.35);
    background: linear-gradient(135deg, var(--kiosk-surface) 60%, rgba(192,192,192,0.06) 100%);
}

.prize-card.prize-bronze[b-vy3krblujm] {
    border-color: rgba(205,127,50,0.30);
    background: linear-gradient(135deg, var(--kiosk-surface) 60%, rgba(205,127,50,0.06) 100%);
}

.prize-rank[b-vy3krblujm] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--kiosk-text);
}

.prize-name[b-vy3krblujm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kiosk-text);
}

.prize-value[b-vy3krblujm] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fbbf24;
}

.prize-points[b-vy3krblujm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kiosk-secondary);
}

/* ── Leaderboard ── */
.leaderboard-section[b-vy3krblujm] {
    padding: 0;
}

.leaderboard-table[b-vy3krblujm] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    overflow: hidden;
}

.leaderboard-header-row[b-vy3krblujm] {
    display: grid;
    grid-template-columns: 72px 1fr 120px 100px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kiosk-text-dim);
    text-transform: uppercase;
}

.leaderboard-row[b-vy3krblujm] {
    display: grid;
    grid-template-columns: 72px 1fr 120px 100px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--kiosk-border);
    font-size: 0.9rem;
    transition: background 0.15s;
}

.leaderboard-row:hover[b-vy3krblujm] {
    background: rgba(255,255,255,0.02);
}

.leaderboard-row.is-current-user[b-vy3krblujm] {
    background: rgba(59,130,246,0.08);
    border-left: 3px solid var(--kiosk-primary);
}

.leaderboard-row.rank-gold[b-vy3krblujm] { border-left: 3px solid #ffd700; }
.leaderboard-row.rank-silver[b-vy3krblujm] { border-left: 3px solid #c0c0c0; }
.leaderboard-row.rank-bronze[b-vy3krblujm] { border-left: 3px solid #cd7f32; }

.lb-col-rank[b-vy3krblujm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.rank-medal[b-vy3krblujm] {
    font-size: 1.2rem;
}

.rank-number[b-vy3krblujm] {
    color: var(--kiosk-text-muted);
}

.rank-delta[b-vy3krblujm] {
    font-size: 0.65rem;
}

.rank-delta.up[b-vy3krblujm] { color: #22c55e; }
.rank-delta.down[b-vy3krblujm] { color: #ef4444; }

.lb-col-driver[b-vy3krblujm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--kiosk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.you-badge[b-vy3krblujm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--kiosk-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.lb-col-score[b-vy3krblujm] {
    font-weight: 700;
    color: var(--kiosk-text);
    font-variant-numeric: tabular-nums;
}

.lb-col-gap[b-vy3krblujm] {
    color: var(--kiosk-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Leaderboard skeleton */
.leaderboard-loading[b-vy3krblujm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    overflow: hidden;
}

.skeleton-row[b-vy3krblujm] {
    display: grid;
    grid-template-columns: 72px 1fr 120px;
    padding: 14px 16px;
    gap: 12px;
    border-top: 1px solid var(--kiosk-border);
}

.skeleton-row:first-child[b-vy3krblujm] {
    border-top: none;
}

.skeleton-rank[b-vy3krblujm] {
    width: 28px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--kiosk-surface-hover) 25%, var(--kiosk-surface-elevated) 50%, var(--kiosk-surface-hover) 75%);
    background-size: 400% 100%;
    animation: shimmer-b-vy3krblujm 1.5s infinite;
}

.skeleton-name[b-vy3krblujm] {
    width: 60%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--kiosk-surface-hover) 25%, var(--kiosk-surface-elevated) 50%, var(--kiosk-surface-hover) 75%);
    background-size: 400% 100%;
    animation: shimmer-b-vy3krblujm 1.5s infinite;
}

.skeleton-score[b-vy3krblujm] {
    width: 80px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--kiosk-surface-hover) 25%, var(--kiosk-surface-elevated) 50%, var(--kiosk-surface-hover) 75%);
    background-size: 400% 100%;
    animation: shimmer-b-vy3krblujm 1.5s infinite;
}

.leaderboard-empty[b-vy3krblujm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--kiosk-text-muted);
    text-align: center;
}

.leaderboard-empty i[b-vy3krblujm] {
    font-size: 2rem;
    color: var(--kiosk-text-dim);
}

.leaderboard-empty p[b-vy3krblujm] {
    margin: 0;
    font-size: 0.95rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskDoorPanel.razor.rz.scp.css */
/*
 * KioskDoorPanel.razor.css
 * The kiosk door panel (KP6): one card per door, readable from arm's length, with the code large and monospaced while
 * it is on screen.
 */

/* The panel is a <section>. The screen theme leaves sections alone, but the site's /kiosk page runs on the VenueChief
   theme, which styles EVERY <section> as a page band: its own background and text color, 60px of padding (more under
   its spacing presets), overflow: clip and a scroll margin. The last five declarations undo that; the scoped attribute
   gives this rule two classes of specificity, enough to beat the band and the presets. */
.kiosk-door-panel[b-s3285fvknd] {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-spacing-sm, 16px);
    width: 100%;
    max-width: 700px;
    margin: var(--kiosk-spacing-md, 24px) auto 0;
    text-align: left;
    color: inherit;
    background-color: transparent;
    padding: 0;
    overflow: visible;
    scroll-margin-top: 0;
}

.kiosk-door-panel-title[b-s3285fvknd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kiosk-text-muted, #94a3b8);
}

.kiosk-door[b-s3285fvknd] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: var(--kiosk-spacing-sm, 16px) var(--kiosk-spacing-md, 24px);
    border: 1px solid var(--kiosk-border, #333);
    border-radius: var(--kiosk-radius-lg, 16px);
    background: var(--kiosk-surface, #13132a);
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-door-head[b-s3285fvknd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.kiosk-door-name[b-s3285fvknd] {
    font-size: 1.5rem;
    font-weight: 700;
}

.kiosk-door-masked[b-s3285fvknd] {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Menlo', monospace;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    color: var(--kiosk-text-muted, #94a3b8);
}

.kiosk-door-state-line[b-s3285fvknd],
.kiosk-door-opens-at[b-s3285fvknd],
.kiosk-door-message[b-s3285fvknd],
.kiosk-door-code-hint[b-s3285fvknd],
.kiosk-door-countdown[b-s3285fvknd] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--kiosk-text-muted, #94a3b8);
}

.kiosk-door-message.is-success[b-s3285fvknd] {
    color: var(--kiosk-success, #4ade80);
    font-weight: 600;
}

.kiosk-door-message.is-refusal[b-s3285fvknd] {
    color: var(--kiosk-warning, #ffc107);
}

.kiosk-door-code-block[b-s3285fvknd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: var(--kiosk-spacing-sm, 16px);
    border: 2px dashed var(--kiosk-primary, #3b82f6);
    border-radius: var(--kiosk-radius-lg, 16px);
    text-align: center;
}

.kiosk-door-code[b-s3285fvknd] {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Menlo', monospace;
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.1;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-door-keypad[b-s3285fvknd] {
    max-width: 260px;
    max-height: 200px;
    border-radius: var(--kiosk-radius-md, 12px);
    object-fit: contain;
}

.kiosk-door-button[b-s3285fvknd] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.75rem 1.75rem;
    font-size: 1.2rem;
}

.kiosk-door-code-block .kiosk-door-button[b-s3285fvknd] {
    align-self: center;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskDurationSelection.razor.rz.scp.css */
/* KioskDurationSelection.razor.css - Duration selection screen styles */

.kiosk-duration-selection[b-wdm7tmk6ex] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

/* Duration grid layout - centered with flexible sizing */
.duration-grid[b-wdm7tmk6ex] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center items horizontally */
    align-items: center;
    align-content: center; /* Center wrapped rows vertically */
    gap: 1.5rem;
    padding: 2rem;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
}

/* Duration card */
.duration-card[b-wdm7tmk6ex] {
    background: var(--kiosk-surface, #1a1a2e);
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 220px;
    width: 280px;
    flex-shrink: 0;
    flex-grow: 0; /* Don't grow - keep fixed size for consistent centering */
}

.duration-card:hover:not(.unavailable):not(:disabled)[b-wdm7tmk6ex] {
    border-color: var(--kiosk-primary, #00d4ff);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
}

.duration-card.selected[b-wdm7tmk6ex] {
    border-color: var(--kiosk-primary, #00d4ff);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.3);
}

.duration-card.unavailable[b-wdm7tmk6ex] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.duration-card:disabled[b-wdm7tmk6ex] {
    cursor: not-allowed;
}

/* Duration icon */
.duration-icon[b-wdm7tmk6ex] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kiosk-primary, #00d4ff), var(--kiosk-secondary, #7b2cbf));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.duration-icon i[b-wdm7tmk6ex] {
    font-size: 1.75rem;
    color: white;
}

.duration-card.unavailable .duration-icon[b-wdm7tmk6ex] {
    background: var(--kiosk-muted, #4a4a6a);
}

/* Duration time */
.duration-time[b-wdm7tmk6ex] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kiosk-text, #ffffff);
    margin-bottom: 0.75rem;
}

/* Duration price */
.duration-price[b-wdm7tmk6ex] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.price-label[b-wdm7tmk6ex] {
    font-size: 0.875rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

.price-value[b-wdm7tmk6ex] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kiosk-success, #00ff88);
}

.price-range[b-wdm7tmk6ex] {
    font-size: 1rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

.unavailable-text[b-wdm7tmk6ex] {
    font-size: 1rem;
    color: var(--kiosk-error, #ff4757);
    font-weight: 600;
}

/* Duration availability */
.duration-availability[b-wdm7tmk6ex] {
    font-size: 0.875rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

.available-count[b-wdm7tmk6ex] {
    color: var(--kiosk-success, #00ff88);
}

.unavailable-reason[b-wdm7tmk6ex] {
    color: var(--kiosk-error, #ff4757);
}

/* Selected indicator */
.selected-indicator[b-wdm7tmk6ex] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--kiosk-primary, #00d4ff);
    font-size: 1.5rem;
}

/* Selection summary in footer */
.selection-summary[b-wdm7tmk6ex] {
    display: flex;
    align-items: center;
    color: var(--kiosk-text, #ffffff);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 8px;
    border: 1px solid var(--kiosk-primary, #00d4ff);
}

.selection-summary i[b-wdm7tmk6ex] {
    color: var(--kiosk-primary, #00d4ff);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kiosk-duration-selection[b-wdm7tmk6ex] {
        padding: 1rem;
    }

    .duration-grid[b-wdm7tmk6ex] {
        flex-direction: column;
        gap: 1rem;
    }

    .duration-card[b-wdm7tmk6ex] {
        padding: 1.5rem;
        min-height: auto;
        width: 100%;
        max-width: 320px;
    }

    .duration-icon[b-wdm7tmk6ex] {
        width: 50px;
        height: 50px;
    }

    .duration-icon i[b-wdm7tmk6ex] {
        font-size: 1.5rem;
    }

    .duration-time[b-wdm7tmk6ex] {
        font-size: 1.25rem;
    }

    .price-value[b-wdm7tmk6ex] {
        font-size: 1.5rem;
    }
}

/* Animation for loading */
.duration-card[b-wdm7tmk6ex] {
    animation: fadeInUp-b-wdm7tmk6ex 0.3s ease-out;
    animation-fill-mode: both;
}

.duration-card:nth-child(1)[b-wdm7tmk6ex] { animation-delay: 0.1s; }
.duration-card:nth-child(2)[b-wdm7tmk6ex] { animation-delay: 0.15s; }
.duration-card:nth-child(3)[b-wdm7tmk6ex] { animation-delay: 0.2s; }
.duration-card:nth-child(4)[b-wdm7tmk6ex] { animation-delay: 0.25s; }
.duration-card:nth-child(5)[b-wdm7tmk6ex] { animation-delay: 0.3s; }

@keyframes fadeInUp-b-wdm7tmk6ex {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskFBCart.razor.rz.scp.css */
.kiosk-fb-cart[b-dn8hx7qjbf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kiosk-bg, #1a1a2e);
    color: var(--kiosk-text, #fff);
}

/* Header */
.cart-header[b-dn8hx7qjbf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.back-btn[b-dn8hx7qjbf] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.back-btn:hover[b-dn8hx7qjbf] {
    background: rgba(255, 255, 255, 0.2);
}

.cart-header h2[b-dn8hx7qjbf] {
    flex: 1;
    margin: 0;
    font-size: 1.75rem;
}

.item-count[b-dn8hx7qjbf] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.95rem;
}

/* Empty State */
.cart-empty[b-dn8hx7qjbf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.cart-empty i[b-dn8hx7qjbf] {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.cart-empty h3[b-dn8hx7qjbf] {
    margin: 0 0 0.5rem;
}

.cart-empty p[b-dn8hx7qjbf] {
    opacity: 0.7;
}

/* Cart Items */
.cart-items[b-dn8hx7qjbf] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
}

.cart-item[b-dn8hx7qjbf] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.item-details[b-dn8hx7qjbf] {
    flex: 1;
}

.item-details h4[b-dn8hx7qjbf] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.item-mods[b-dn8hx7qjbf] {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

.item-notes[b-dn8hx7qjbf] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--kiosk-accent, #4361ee);
}

.item-unit-price[b-dn8hx7qjbf] {
    font-size: 0.9rem;
    opacity: 0.6;
}

.item-controls[b-dn8hx7qjbf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.quantity-control[b-dn8hx7qjbf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 25px;
    padding: 0.25rem;
}

.qty-btn[b-dn8hx7qjbf] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-dn8hx7qjbf] {
    background: rgba(255, 255, 255, 0.2);
}

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

.qty-value[b-dn8hx7qjbf] {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.item-total[b-dn8hx7qjbf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kiosk-accent, #4361ee);
}

/* Order Notes */
.order-notes[b-dn8hx7qjbf] {
    padding: 1rem 2rem;
}

.order-notes label[b-dn8hx7qjbf] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.order-notes textarea[b-dn8hx7qjbf] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: inherit;
    font-size: 1rem;
    resize: none;
    height: 80px;
}

.order-notes textarea:focus[b-dn8hx7qjbf] {
    outline: none;
    border-color: var(--kiosk-accent, #4361ee);
}

/* Order Summary */
.order-summary[b-dn8hx7qjbf] {
    padding: 1.25rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-row[b-dn8hx7qjbf] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1.05rem;
}

.summary-row.total[b-dn8hx7qjbf] {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.35rem;
}

.summary-row.total strong[b-dn8hx7qjbf] {
    color: var(--kiosk-accent, #4361ee);
}

/* Actions */
.cart-actions[b-dn8hx7qjbf] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.clear-btn[b-dn8hx7qjbf] {
    padding: 1rem 1.5rem;
}

.checkout-btn[b-dn8hx7qjbf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
}

.checkout-total[b-dn8hx7qjbf] {
    font-weight: 700;
}

/* Clear Confirm Dialog */
.confirm-overlay[b-dn8hx7qjbf] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
}

.confirm-dialog[b-dn8hx7qjbf] {
    background: var(--kiosk-bg, #1a1a2e);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
}

.confirm-dialog h3[b-dn8hx7qjbf] {
    margin: 0 0 0.5rem;
}

.confirm-dialog p[b-dn8hx7qjbf] {
    margin: 0 0 1.5rem;
    opacity: 0.7;
}

.confirm-actions[b-dn8hx7qjbf] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-actions .kiosk-btn[b-dn8hx7qjbf] {
    min-width: 120px;
}

.kiosk-btn-danger[b-dn8hx7qjbf] {
    background: #dc3545;
    border-color: #dc3545;
}

.kiosk-btn-danger:hover[b-dn8hx7qjbf] {
    background: #bb2d3b;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskFBCheckout.razor.rz.scp.css */
.kiosk-fb-checkout[b-8a265f1ola] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kiosk-bg, #1a1a2e);
    color: var(--kiosk-text, #fff);
}

.checkout-section[b-8a265f1ola] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Section Header */
.section-header[b-8a265f1ola] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-header h2[b-8a265f1ola] {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

.section-header p[b-8a265f1ola] {
    margin: 0;
    opacity: 0.7;
    font-size: 1.1rem;
}

.section-header i[b-8a265f1ola] {
    color: var(--kiosk-accent, #4361ee);
}

/* Guest Info */
[b-8a265f1ola] .name-input-container {
    width: 100%;
    margin-bottom: 2rem;
}

[b-8a265f1ola] .name-input {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: inherit;
    font-size: 1.5rem;
    text-align: center;
    transition: border-color 0.2s;
}

[b-8a265f1ola] .name-input:focus {
    outline: none;
    border-color: var(--kiosk-accent, #4361ee);
}

[b-8a265f1ola] .name-input::placeholder {
    opacity: 0.5;
}

.input-hint[b-8a265f1ola] {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* Mini Summary */
.mini-summary[b-8a265f1ola] {
    width: 100%;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.summary-items[b-8a265f1ola] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.summary-item[b-8a265f1ola] {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.9rem;
}

.summary-item.more[b-8a265f1ola] {
    opacity: 0.6;
}

.summary-total[b-8a265f1ola] {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.25rem;
}

.summary-total strong[b-8a265f1ola] {
    color: var(--kiosk-accent, #4361ee);
}

/* Payment Section */
.payment-amount[b-8a265f1ola] {
    text-align: center;
    margin-bottom: 2rem;
}

.payment-amount span[b-8a265f1ola] {
    display: block;
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.payment-amount .amount[b-8a265f1ola] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--kiosk-accent, #4361ee);
}

.payment-error[b-8a265f1ola] {
    width: 100%;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.payment-methods[b-8a265f1ola] {
    width: 100%;
    margin-bottom: 2rem;
}

.payment-methods h4[b-8a265f1ola] {
    margin: 0 0 1rem;
    font-size: 1rem;
    opacity: 0.8;
    text-align: center;
}

.payment-method-btn[b-8a265f1ola] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-method-btn:hover[b-8a265f1ola] {
    background: rgba(255, 255, 255, 0.1);
}

.payment-method-btn.selected[b-8a265f1ola] {
    border-color: var(--kiosk-accent, #4361ee);
    background: rgba(67, 97, 238, 0.1);
}

.payment-method-btn i[b-8a265f1ola] {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

/* Card Reader Prompt */
.card-reader-prompt[b-8a265f1ola] {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 2rem;
    width: 100%;
}

.tap-animation[b-8a265f1ola] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tap-animation i[b-8a265f1ola] {
    font-size: 3rem;
    color: var(--kiosk-accent, #4361ee);
    z-index: 1;
}

.tap-animation .wave[b-8a265f1ola] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--kiosk-accent, #4361ee);
    animation: pulse-b-8a265f1ola 2s ease-out infinite;
}

@keyframes pulse-b-8a265f1ola {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.card-reader-prompt p[b-8a265f1ola] {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.8;
}

.processing-indicator[b-8a265f1ola] {
    margin-top: 1rem;
    opacity: 0.8;
}

/* Checkout Actions */
.checkout-actions[b-8a265f1ola] {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    padding-top: 2rem;
}

.checkout-actions .kiosk-btn[b-8a265f1ola] {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
}

/* Complete Section */
.complete .success-animation[b-8a265f1ola] {
    margin-bottom: 1.5rem;
}

.complete .success-animation i[b-8a265f1ola] {
    font-size: 5rem;
    color: #28a745;
    animation: successPop-b-8a265f1ola 0.5s ease-out;
}

@keyframes successPop-b-8a265f1ola {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.complete h2[b-8a265f1ola] {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    text-align: center;
}

.order-number[b-8a265f1ola] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.order-number span[b-8a265f1ola] {
    display: block;
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.order-number .number[b-8a265f1ola] {
    font-size: 4rem;
    font-weight: 800;
    color: var(--kiosk-accent, #4361ee);
    letter-spacing: 0.1em;
}

.pickup-message[b-8a265f1ola] {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

/* Order Receipt */
.order-receipt[b-8a265f1ola] {
    width: 100%;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.order-receipt h5[b-8a265f1ola] {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.receipt-item[b-8a265f1ola] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.receipt-total[b-8a265f1ola] {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem;
}

.receipt-total strong[b-8a265f1ola] {
    color: var(--kiosk-accent, #4361ee);
}

.receipt-note[b-8a265f1ola] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
    color: #ffc107;
}

.done-btn[b-8a265f1ola] {
    min-width: 200px;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskFBMenuBrowser.razor.rz.scp.css */
.kiosk-fb-menu[b-k98jafi0ui] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--kiosk-bg, #1a1a2e);
    color: var(--kiosk-text, #fff);
}

/* Loading & Empty States */
.menu-loading[b-k98jafi0ui],
.menu-empty[b-k98jafi0ui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 2rem;
}

.menu-loading .spinner-border[b-k98jafi0ui] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

/* Header */
.menu-header[b-k98jafi0ui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title h2[b-k98jafi0ui] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.header-title p[b-k98jafi0ui] {
    margin: 0.25rem 0 0;
    opacity: 0.7;
}

.cart-summary-btn[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-summary-btn:hover[b-k98jafi0ui] {
    background: rgba(255, 255, 255, 0.15);
}

.cart-summary-btn.has-items[b-k98jafi0ui] {
    background: var(--kiosk-accent, #4361ee);
    border-color: var(--kiosk-accent, #4361ee);
}

.cart-summary-btn i[b-k98jafi0ui] {
    font-size: 1.25rem;
}

.cart-count[b-k98jafi0ui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
}

.cart-summary-btn.has-items .cart-count[b-k98jafi0ui] {
    background: rgba(255, 255, 255, 0.3);
}

.cart-total[b-k98jafi0ui] {
    font-weight: 600;
}

/* Category Tabs */
.category-tabs[b-k98jafi0ui] {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 2rem;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.2);
    -webkit-overflow-scrolling: touch;
}

.category-tabs[b-k98jafi0ui]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: inherit;
    font-size: 0.95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.category-tab:hover[b-k98jafi0ui] {
    background: rgba(255, 255, 255, 0.1);
}

.category-tab.active[b-k98jafi0ui] {
    background: var(--kiosk-accent, #4361ee);
    border-color: var(--kiosk-accent, #4361ee);
}

.category-tab i[b-k98jafi0ui] {
    font-size: 1.1rem;
}

/* Items Scroll Area — flex child that takes remaining space and scrolls */
.items-scroll-area[b-k98jafi0ui] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Items Grid — pure CSS Grid at natural content height (no flex constraint) */
.items-grid[b-k98jafi0ui] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 2rem;
}

.item-card[b-k98jafi0ui] {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.item-card:hover[b-k98jafi0ui] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.item-card.unavailable[b-k98jafi0ui] {
    opacity: 0.5;
    cursor: not-allowed;
}

.item-card.in-cart[b-k98jafi0ui] {
    border-color: var(--kiosk-accent, #4361ee);
}

.item-image[b-k98jafi0ui] {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.item-image.no-image[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-image.no-image i[b-k98jafi0ui] {
    font-size: 3rem;
    opacity: 0.3;
}

.item-info[b-k98jafi0ui] {
    padding: 1rem;
}

.item-info h4[b-k98jafi0ui] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.item-desc[b-k98jafi0ui] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-price[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-price .price[b-k98jafi0ui] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kiosk-accent, #4361ee);
}

.badge.sold-out[b-k98jafi0ui] {
    background: #dc3545;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.cart-badge[b-k98jafi0ui] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-accent, #4361ee);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.no-items[b-k98jafi0ui] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    opacity: 0.5;
}

/* Footer */
.menu-footer[b-k98jafi0ui] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Item Detail Modal */
.item-detail-overlay[b-k98jafi0ui] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: 2rem;
}

.item-detail-modal[b-k98jafi0ui] {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--kiosk-bg, #1a1a2e);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.close-btn[b-k98jafi0ui] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.close-btn:hover[b-k98jafi0ui] {
    background: rgba(0, 0, 0, 0.7);
}

.detail-image[b-k98jafi0ui] {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.detail-content[b-k98jafi0ui] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.detail-content h3[b-k98jafi0ui] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.detail-desc[b-k98jafi0ui] {
    margin: 0 0 1rem;
    opacity: 0.7;
    line-height: 1.5;
}

.detail-price[b-k98jafi0ui] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kiosk-accent, #4361ee);
    margin-bottom: 1.5rem;
}

/* Modifiers */
.modifiers-section[b-k98jafi0ui] {
    margin-bottom: 1.5rem;
}

.modifiers-section h5[b-k98jafi0ui],
.special-instructions h5[b-k98jafi0ui],
.quantity-section h5[b-k98jafi0ui] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    opacity: 0.9;
}

.modifier-option[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.modifier-option:hover[b-k98jafi0ui] {
    background: rgba(255, 255, 255, 0.1);
}

.modifier-option input[b-k98jafi0ui] {
    margin-right: 0.75rem;
    width: 20px;
    height: 20px;
    accent-color: var(--kiosk-accent, #4361ee);
}

.modifier-name[b-k98jafi0ui] {
    flex: 1;
}

.modifier-price[b-k98jafi0ui] {
    opacity: 0.7;
}

/* Special Instructions */
.special-instructions[b-k98jafi0ui] {
    margin-bottom: 1.5rem;
}

.special-instructions textarea[b-k98jafi0ui] {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: inherit;
    font-size: 1rem;
    resize: none;
    height: 80px;
}

.special-instructions textarea:focus[b-k98jafi0ui] {
    outline: none;
    border-color: var(--kiosk-accent, #4361ee);
}

/* Quantity Control */
.quantity-section[b-k98jafi0ui] {
    margin-bottom: 1.5rem;
}

.quantity-control[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.qty-btn[b-k98jafi0ui] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-k98jafi0ui] {
    background: rgba(255, 255, 255, 0.2);
}

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

.qty-value[b-k98jafi0ui] {
    font-size: 2rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

/* Add to Cart */
.detail-actions[b-k98jafi0ui] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.item-total[b-k98jafi0ui] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-total span[b-k98jafi0ui] {
    font-size: 0.875rem;
    opacity: 0.7;
}

.item-total strong[b-k98jafi0ui] {
    font-size: 1.5rem;
    color: var(--kiosk-accent, #4361ee);
}

.add-to-cart-btn[b-k98jafi0ui] {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskGameSelection.razor.rz.scp.css */
/* 
 * KioskGameSelection.razor.css
 * Game selection screen styles.
 */

.kiosk-selection-screen[b-3cqqfqknv6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Badge for unavailable items */
[b-3cqqfqknv6] .badge-unavailable {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    opacity: 0.8;
}

/* Refusal when no listed game can run (GuestRefusal is a child component, hence ::deep) */
.kiosk-game-refusal[b-3cqqfqknv6] {
    padding: 16px 24px;
    margin: 16px 24px 0 24px;
    border-radius: var(--kiosk-radius, 12px);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--kiosk-warning, #f59e0b);
    text-align: center;
}

.kiosk-game-refusal[b-3cqqfqknv6]  p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskGamificationPanel.razor.rz.scp.css */
/* KioskGamificationPanel.razor.css
   Touch-first "Today's Challenges" panel for the kiosk main menu.
   Matches the kiosk design language: dark glass cards, accent glows, generous
   touch targets, subtle motion. */

.kiosk-gamification-panel[b-c59r7jjvu7] {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}

.kgp-header[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.kgp-title[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.9;
}

.kgp-title i[b-c59r7jjvu7] {
    color: var(--kiosk-accent, #00d9ff);
    font-size: 1.15rem;
}

.kgp-streak[b-c59r7jjvu7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffb454;
    background: rgba(255, 140, 40, 0.12);
    border: 1px solid rgba(255, 140, 40, 0.35);
    animation: kgp-flame-pulse-b-c59r7jjvu7 2.4s ease-in-out infinite;
}

.kgp-streak i[b-c59r7jjvu7] {
    font-size: 1rem;
}

@keyframes kgp-flame-pulse-b-c59r7jjvu7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 40, 0.0); }
    50% { box-shadow: 0 0 14px 2px rgba(255, 140, 40, 0.25); }
}

.kgp-challenges[b-c59r7jjvu7] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kgp-challenge[b-c59r7jjvu7] {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.25s ease;
}

.kgp-challenge.completed[b-c59r7jjvu7] {
    border-color: rgba(70, 200, 120, 0.45);
    background: rgba(40, 160, 90, 0.10);
}

.kgp-challenge-main[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.kgp-challenge-name[b-c59r7jjvu7] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kgp-xp[b-c59r7jjvu7] {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--kiosk-accent, #00d9ff);
    white-space: nowrap;
}

.kgp-difficulty[b-c59r7jjvu7] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.kgp-difficulty.easy[b-c59r7jjvu7] {
    color: #6fe08c;
    background: rgba(80, 200, 120, 0.14);
    border: 1px solid rgba(80, 200, 120, 0.4);
}

.kgp-difficulty.medium[b-c59r7jjvu7] {
    color: #ffd166;
    background: rgba(255, 190, 60, 0.12);
    border: 1px solid rgba(255, 190, 60, 0.4);
}

.kgp-difficulty.hard[b-c59r7jjvu7] {
    color: #ff7b8a;
    background: rgba(255, 90, 110, 0.12);
    border: 1px solid rgba(255, 90, 110, 0.4);
}

.kgp-progress-row[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.55rem;
}

.kgp-progress-bar[b-c59r7jjvu7] {
    flex: 1;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.kgp-progress-fill[b-c59r7jjvu7] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--kiosk-accent, #00d9ff), #7ae7ff);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.kgp-progress-fill.done[b-c59r7jjvu7] {
    background: linear-gradient(90deg, #3ecf6e, #6fe08c);
}

.kgp-progress-text[b-c59r7jjvu7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 3.4rem;
    justify-content: flex-end;
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.85;
}

.kgp-progress-text i[b-c59r7jjvu7] {
    color: #6fe08c;
}

.kgp-signin-hint[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* A running XP promotion ("2× XP until 9:00 PM — Double XP Tuesdays"): the reason to book now, so it leads the
   panel in the kiosk accent, above today's challenges. */
.kgp-promotion[b-c59r7jjvu7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    margin-bottom: 0.85rem;
    border-radius: 0.75rem;
    background: linear-gradient(120deg, rgba(0, 217, 255, 0.18), rgba(0, 217, 255, 0.06));
    border: 1px solid rgba(0, 217, 255, 0.45);
}

.kgp-promotion:last-child[b-c59r7jjvu7] {
    margin-bottom: 0;
}

.kgp-promotion > i[b-c59r7jjvu7] {
    font-size: 1.5rem;
    color: var(--kiosk-accent, #00d9ff);
}

.kgp-promotion-text[b-c59r7jjvu7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
}

.kgp-promotion-headline[b-c59r7jjvu7] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.kgp-promotion-label[b-c59r7jjvu7] {
    font-size: 0.95rem;
    opacity: 0.8;
}

.kgp-promotion-label[b-c59r7jjvu7]::before {
    content: "— ";
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskHeldForDesk.razor.rz.scp.css */
/* KioskHeldForDesk.razor.css - "Pay at the Front Desk" screen for a simulator held for cash */
/* Same layout as KioskSessionDispatched; an amber accent says "next step: the desk", not "done". */

.session-active-container[b-nhrm3i8pq5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    text-align: center;
    gap: 24px;
}

/* Ambient glow effect */
.session-glow[b-nhrm3i8pq5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(59, 130, 246, 0.12) 40%, transparent 70%);
    opacity: 0.5;
    animation: held-glow-pulse-b-nhrm3i8pq5 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes held-glow-pulse-b-nhrm3i8pq5 {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -60%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -60%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .session-glow[b-nhrm3i8pq5] {
        animation: none;
    }
}

/* Icon */
.session-icon-wrapper[b-nhrm3i8pq5] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-icon[b-nhrm3i8pq5] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kiosk-warning, #f59e0b) 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.35);
}

.session-icon i[b-nhrm3i8pq5] {
    font-size: 2.5rem;
    color: white;
}

/* Typography */
.session-title[b-nhrm3i8pq5] {
    font-family: var(--kiosk-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.session-subtitle[b-nhrm3i8pq5] {
    font-size: 1.25rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    font-weight: 500;
    max-width: 560px;
}

/* Simulator chips */
.simulator-assignments[b-nhrm3i8pq5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.sim-chip[b-nhrm3i8pq5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text);
    font-size: 1.1rem;
    font-weight: 500;
}

.sim-chip i[b-nhrm3i8pq5] {
    color: var(--kiosk-primary);
}

/* Hint text */
.session-hint[b-nhrm3i8pq5] {
    font-size: 1.1rem;
    color: var(--kiosk-text-dim);
    margin: 0;
    font-weight: 400;
    max-width: 500px;
}

/* Done button */
.session-done-btn[b-nhrm3i8pq5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 48px;
    min-height: var(--kiosk-button-height);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    background: transparent;
    color: var(--kiosk-text);
    font-family: var(--kiosk-font);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-done-btn:hover[b-nhrm3i8pq5] {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
    box-shadow: 0 0 20px var(--kiosk-glow-primary);
}

.session-done-btn:active[b-nhrm3i8pq5] {
    transform: scale(0.98);
}

/* Auto-return countdown hint */
.session-countdown-hint[b-nhrm3i8pq5] {
    font-size: 0.9rem;
    color: var(--kiosk-text-dim);
    opacity: 0.5;
    margin: 0;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskKartingEnrollment.razor.rz.scp.css */
/*
 * KioskKartingEnrollment.razor.css
 * Driver Check-In (karting self-check-in enrollment) styles.
 *
 * The shared kiosk shell (KioskContainer.razor.css) already provides ::deep
 * styling for .kiosk-selection-screen, .kiosk-screen-header/.screen-title,
 * .kiosk-input and the .kiosk-btn* family, plus the --kiosk-* design tokens.
 * This sheet styles the form layout / typography classes that are unique to
 * the enrollment screen so it matches the rest of the kiosk theme.
 */

/* ===== Scrollable form body ===== */
.karting-enrollment-form[b-h7vqlvc227] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-spacing-md, 24px);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--kiosk-spacing-lg, 32px) var(--kiosk-spacing-md, 24px) var(--kiosk-spacing-xl, 48px);
}

/* ===== Form groups ===== */
.kiosk-form-group[b-h7vqlvc227] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiosk-label[b-h7vqlvc227] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-label-required[b-h7vqlvc227] {
    color: var(--kiosk-error, #ef4444);
    font-weight: 700;
    margin-left: 2px;
}

.kiosk-hint[b-h7vqlvc227] {
    font-size: 0.8125rem;
    color: var(--kiosk-text-muted, #94a3b8);
    line-height: 1.4;
}

.kiosk-field-info[b-h7vqlvc227] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--kiosk-text-muted, #94a3b8);
    line-height: 1.4;
}

.kiosk-field-info i[b-h7vqlvc227] {
    font-size: 1rem;
    color: var(--kiosk-primary, #3b82f6);
    flex-shrink: 0;
}

/* ===== Input + unit (height / weight) ===== */
.kiosk-input-with-unit[b-h7vqlvc227] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.kiosk-input-with-unit .kiosk-input[b-h7vqlvc227] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.kiosk-unit[b-h7vqlvc227] {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    background: var(--kiosk-surface-elevated, #1f1f40);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-top-right-radius: var(--kiosk-radius, 12px);
    border-bottom-right-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Measurement section ===== */
.kiosk-measurement-section[b-h7vqlvc227] {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-spacing-sm, 16px);
    padding: var(--kiosk-spacing-md, 24px);
    background: var(--kiosk-surface, #13132a);
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--kiosk-radius-lg, 16px);
}

.kiosk-section-label[b-h7vqlvc227] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-section-label i[b-h7vqlvc227] {
    font-size: 1.25rem;
    color: var(--kiosk-primary, #3b82f6);
}

/* ===== Checkbox rows (license / supervision) ===== */
.kiosk-checkbox-row[b-h7vqlvc227] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--kiosk-surface, #13132a);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text, #f8fafc);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.kiosk-checkbox-row:hover[b-h7vqlvc227] {
    border-color: var(--kiosk-border-hover, rgba(255, 255, 255, 0.15));
    background: var(--kiosk-surface-hover, #1a1a3a);
}

.kiosk-checkbox-row input[type="checkbox"][b-h7vqlvc227] {
    width: 26px;
    height: 26px;
    accent-color: var(--kiosk-primary, #3b82f6);
    flex-shrink: 0;
    cursor: pointer;
}

.kiosk-checkbox-row > span:not(.kiosk-label-required)[b-h7vqlvc227] {
    flex: 1;
}

/* ===== Alerts ===== */
.kiosk-alert[b-h7vqlvc227] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--kiosk-radius, 12px);
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.45;
}

.kiosk-alert i[b-h7vqlvc227] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.kiosk-alert-error[b-h7vqlvc227] {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--kiosk-error, #ef4444);
    color: var(--kiosk-error, #ef4444);
}

.kiosk-alert-warning[b-h7vqlvc227] {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--kiosk-warning, #f59e0b);
    color: var(--kiosk-warning, #f59e0b);
}

/* "Signed in as …" / "Enter the driver's details" banner above the driver form. */
.kiosk-alert-info[b-h7vqlvc227] {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--kiosk-primary, #3b82f6);
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-alert-info i[b-h7vqlvc227] {
    color: var(--kiosk-primary, #3b82f6);
}

.kiosk-prefill-text[b-h7vqlvc227] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.kiosk-link-btn[b-h7vqlvc227] {
    background: none;
    border: none;
    color: var(--kiosk-primary, #3b82f6);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--kiosk-touch-target, 48px);
    padding: 0 4px;
    touch-action: manipulation;
}

.kiosk-link-btn:hover[b-h7vqlvc227],
.kiosk-link-btn:focus-visible[b-h7vqlvc227] {
    text-decoration: underline;
}

/* A staff- or scale-recorded weight in use, shown instead of an input. */
.kiosk-on-file[b-h7vqlvc227] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--kiosk-input-height, 56px);
    padding: 0 16px;
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--kiosk-radius, 12px);
    background: var(--kiosk-surface, #13132a);
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-on-file i[b-h7vqlvc227] {
    color: var(--kiosk-success, #22c55e);
    font-size: 1.25rem;
}

.kiosk-violation-list[b-h7vqlvc227] {
    margin: 6px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===== Footer actions ===== */
.kiosk-form-actions[b-h7vqlvc227] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: var(--kiosk-spacing-md, 24px);
}

.kiosk-btn-large[b-h7vqlvc227] {
    min-height: 64px;
    padding: 0 48px;
    font-size: 1.1875rem;
    width: 100%;
    max-width: 360px;
}

/* ===== Inline spinner (submit button) ===== */
.spinner-inline[b-h7vqlvc227] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kiosk-enroll-spin-b-h7vqlvc227 0.8s linear infinite;
}

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

/* ===== Responsive (small / portrait tablets) ===== */
@media (max-width: 640px) {
    .karting-enrollment-form[b-h7vqlvc227] {
        padding: var(--kiosk-spacing-md, 24px) var(--kiosk-spacing-sm, 16px) var(--kiosk-spacing-lg, 32px);
        gap: var(--kiosk-spacing-sm, 16px);
    }

    .kiosk-btn-large[b-h7vqlvc227] {
        max-width: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskKartingSelection.razor.rz.scp.css */
/*
 * KioskKartingSelection.razor.css
 * Karting selection screen — class picker and booking choice.
 */

/* Layout */
.karting-selection[b-9pordscwwy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.karting-main[b-9pordscwwy] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 2rem;
}

/* Loading / Error States */
.loading-indicator[b-9pordscwwy],
.error-state[b-9pordscwwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--kiosk-text-muted, #aaa);
    text-align: center;
}

.loading-indicator .spinner[b-9pordscwwy] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--kiosk-surface-hover, #1a1a3a);
    border-top-color: var(--kiosk-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-9pordscwwy 0.8s linear infinite;
}

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

.error-state i[b-9pordscwwy] {
    font-size: 3rem;
    color: var(--kiosk-danger, #ef4444);
}

/* ??? Class Selection ??????????????????????????????? */

.class-selection[b-9pordscwwy] {
    flex: 1;
}

.class-grid[b-9pordscwwy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: var(--kiosk-spacing-md, 24px);
}

.class-card[b-9pordscwwy] {
    background: var(--kiosk-surface, #13132a);
    border-radius: var(--kiosk-radius-lg, 16px);
    padding: var(--kiosk-spacing-lg, 32px);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 3px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    flex-grow: 0;
}

.class-card:hover[b-9pordscwwy] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.class-card:active[b-9pordscwwy] {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.class-card.selected[b-9pordscwwy] {
    border-color: var(--kiosk-primary, #3b82f6);
    background: linear-gradient(135deg,
        var(--kiosk-surface, #13132a),
        rgba(59, 130, 246, 0.1));
    box-shadow: 0 0 0 1px var(--kiosk-primary, #3b82f6),
                0 8px 32px rgba(59, 130, 246, 0.3);
}

.class-card.ineligible[b-9pordscwwy] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.class-card.ineligible:hover[b-9pordscwwy] {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Card header */
.class-header[b-9pordscwwy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--kiosk-spacing-sm, 16px);
}

.class-icon[b-9pordscwwy] {
    font-size: 1.6rem;
    color: var(--kiosk-primary, #3b82f6);
}

.class-name[b-9pordscwwy] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--kiosk-text, #fff);
    flex: 1;
}

.electric-badge[b-9pordscwwy] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kiosk-success, #22c55e);
    background: rgba(34, 197, 94, 0.15);
    padding: 6px 12px;
    border-radius: var(--kiosk-radius-sm, 8px);
}

/* Card details */
.class-details[b-9pordscwwy] {
    flex: 1;
    margin-bottom: var(--kiosk-spacing-sm, 16px);
}

.class-description[b-9pordscwwy] {
    font-size: 0.95rem;
    color: var(--kiosk-text-muted, #aaa);
    margin: 0 0 var(--kiosk-spacing-sm, 16px);
    line-height: 1.5;
}

.eligibility-info[b-9pordscwwy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.eligibility-item[b-9pordscwwy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--kiosk-text-muted, #aaa);
}

.eligibility-item i[b-9pordscwwy] {
    color: var(--kiosk-primary, #3b82f6);
    font-size: 0.9rem;
}

.speed-info[b-9pordscwwy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--kiosk-text-muted, #aaa);
    margin-top: 8px;
}

.speed-info i[b-9pordscwwy] {
    color: var(--kiosk-warning, #f59e0b);
}

/* Card footer */
.class-footer[b-9pordscwwy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--kiosk-spacing-sm, 16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.class-footer .availability[b-9pordscwwy] {
    font-size: 0.85rem;
    color: var(--kiosk-success, #22c55e);
}

.class-footer .availability.low[b-9pordscwwy] {
    color: var(--kiosk-warning, #f59e0b);
}

.class-footer .availability.none[b-9pordscwwy] {
    color: var(--kiosk-danger, #ef4444);
}

.ineligible-badge[b-9pordscwwy] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kiosk-danger, #ef4444);
    background: rgba(239, 68, 68, 0.15);
    padding: 4px 10px;
    border-radius: var(--kiosk-radius-sm, 8px);
}

/* Selection check */
.selection-indicator[b-9pordscwwy] {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--kiosk-primary, #3b82f6);
    font-size: 1.4rem;
}

/* ??? Booking Choice (Heat vs Queue) ???????????????? */

.booking-choice[b-9pordscwwy] {
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-spacing-md, 24px);
}

.selected-class-banner[b-9pordscwwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--kiosk-surface, #13132a);
    padding: 12px var(--kiosk-spacing-md, 24px);
    border-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text, #fff);
    font-size: 1rem;
}

.change-link[b-9pordscwwy] {
    background: none;
    border: none;
    color: var(--kiosk-primary, #3b82f6);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 4px 8px;
}

.change-link:hover[b-9pordscwwy] {
    color: var(--kiosk-primary-hover, #2563eb);
}

.choice-cards[b-9pordscwwy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--kiosk-spacing-md, 24px);
}

.choice-card[b-9pordscwwy] {
    background: var(--kiosk-surface, #13132a);
    border-radius: var(--kiosk-radius-lg, 16px);
    padding: var(--kiosk-spacing-lg, 32px);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--kiosk-spacing-md, 24px);
}

.choice-card:hover:not(.disabled)[b-9pordscwwy] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.choice-card:active:not(.disabled)[b-9pordscwwy] {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.choice-card.disabled[b-9pordscwwy] {
    opacity: 0.4;
    cursor: not-allowed;
}

.choice-icon[b-9pordscwwy] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.book-heat .choice-icon[b-9pordscwwy] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--kiosk-primary, #3b82f6);
}

.join-queue .choice-icon[b-9pordscwwy] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--kiosk-success, #22c55e);
}

.choice-content[b-9pordscwwy] {
    flex: 1;
}

.choice-content h3[b-9pordscwwy] {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kiosk-text, #fff);
}

.choice-content p[b-9pordscwwy] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--kiosk-text-muted, #aaa);
}

.choice-content .availability[b-9pordscwwy] {
    font-size: 0.85rem;
    color: var(--kiosk-success, #22c55e);
}

.choice-content .availability.no-heats[b-9pordscwwy] {
    color: var(--kiosk-danger, #ef4444);
}

.choice-content .queue-info[b-9pordscwwy] {
    font-size: 0.85rem;
    color: var(--kiosk-text-muted, #aaa);
}

.choice-content .queue-info.disabled[b-9pordscwwy] {
    color: var(--kiosk-danger, #ef4444);
}

.choice-arrow[b-9pordscwwy] {
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--kiosk-text-muted, #aaa);
}

/* Footer selection summary */
.selection-summary[b-9pordscwwy] {
    font-size: 1rem;
    color: var(--kiosk-text-muted, #aaa);
}

.selection-summary strong[b-9pordscwwy] {
    color: var(--kiosk-text, #fff);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskLaunching.razor.rz.scp.css */
/* KioskLaunching.razor.css - Premium session launch screen */

.launching-container[b-pspvpbxo1n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    text-align: center;
    gap: 24px;
}

/* Ambient glow effect behind the icon */
.launching-glow[b-pspvpbxo1n] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--kiosk-glow-primary) 0%, var(--kiosk-glow-secondary) 30%, transparent 70%);
    opacity: 0.4;
    animation: glow-pulse-b-pspvpbxo1n 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-pulse-b-pspvpbxo1n {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -60%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -60%) scale(1.1); }
}

/* Icon with animated ring */
.launching-icon-wrapper[b-pspvpbxo1n] {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.launching-icon-ring[b-pspvpbxo1n] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--kiosk-primary);
    border-right-color: var(--kiosk-secondary, #8b5cf6);
    animation: spin-b-pspvpbxo1n 1.5s linear infinite;
}

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

.launching-icon[b-pspvpbxo1n] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--kiosk-accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px var(--kiosk-glow-primary);
    animation: icon-float-b-pspvpbxo1n 2s ease-in-out infinite;
}

@keyframes icon-float-b-pspvpbxo1n {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.launching-icon i[b-pspvpbxo1n] {
    font-size: 2.5rem;
    color: white;
}

/* Typography */
.launching-title[b-pspvpbxo1n] {
    font-family: var(--kiosk-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.launching-subtitle[b-pspvpbxo1n] {
    font-size: 1.25rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    font-weight: 500;
}

/* Simulator chips */
.simulator-assignments[b-pspvpbxo1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 8px 0;
}

.sim-chip[b-pspvpbxo1n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text);
    font-size: 1rem;
    font-weight: 500;
}

.sim-chip i[b-pspvpbxo1n] {
    font-size: 1.1rem;
    color: var(--kiosk-primary);
}

/* Progress indicator */
.launching-progress[b-pspvpbxo1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    margin-top: 16px;
}

.progress-bar-track[b-pspvpbxo1n] {
    width: 100%;
    height: 4px;
    background: var(--kiosk-surface);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill[b-pspvpbxo1n] {
    height: 100%;
    width: 30%;
    background: var(--kiosk-accent-gradient);
    border-radius: 2px;
    animation: progress-slide-b-pspvpbxo1n 1.5s ease-in-out infinite;
}

@keyframes progress-slide-b-pspvpbxo1n {
    0% { width: 10%; margin-left: 0; }
    50% { width: 40%; margin-left: 30%; }
    100% { width: 10%; margin-left: 90%; }
}

.launching-hint[b-pspvpbxo1n] {
    font-size: 1rem;
    color: var(--kiosk-text-dim);
    margin: 0;
    font-weight: 400;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskLogin.razor.rz.scp.css */
/* KioskLogin.razor.css & shared kiosk form styles */

.kiosk-login[b-f5y7mxbtps],
.kiosk-register[b-f5y7mxbtps] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    overflow-y: auto;
    min-height: 0;
}

/* ===== Screen Header ===== */
.kiosk-screen-header[b-f5y7mxbtps] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 16px;
    flex-shrink: 0;
}

.kiosk-back-btn[b-f5y7mxbtps] {
    width: var(--kiosk-touch-target, 48px);
    height: var(--kiosk-touch-target, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-surface);
    border: none;
    border-radius: 50%;
    color: var(--kiosk-text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kiosk-back-btn:hover[b-f5y7mxbtps],
.kiosk-back-btn:active[b-f5y7mxbtps] {
    background: var(--kiosk-surface-hover);
}

.screen-title[b-f5y7mxbtps] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

/* ===== Form Styles ===== */
.kiosk-form[b-f5y7mxbtps] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 24px;
}

.kiosk-form-group[b-f5y7mxbtps] {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Slightly increased gap between label and input */
}

.kiosk-label[b-f5y7mxbtps] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kiosk-text);
    letter-spacing: 0.02em;
}

[b-f5y7mxbtps] .kiosk-input {
    width: 100%;
    height: var(--kiosk-input-height, 56px);
    padding: 0 20px;
    background: var(--kiosk-surface);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text);
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

[b-f5y7mxbtps] .kiosk-input:focus {
    outline: none;
    border-color: var(--kiosk-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

[b-f5y7mxbtps] .kiosk-input::placeholder {
    color: var(--kiosk-text-muted);
    opacity: 0.6;
}

/* ===== Input Group with Addon (password toggle) ===== */
[b-f5y7mxbtps] .kiosk-input-group {
    display: flex;
    position: relative;
    align-items: stretch;
}

[b-f5y7mxbtps] .kiosk-input-group .kiosk-input {
    flex: 1;
    padding-right: 60px; /* Space for the addon button */
}

[b-f5y7mxbtps] .kiosk-input-addon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-surface-hover, rgba(255, 255, 255, 0.08));
    border: none;
    border-radius: 8px;
    color: var(--kiosk-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

[b-f5y7mxbtps] .kiosk-input-addon:hover {
    color: var(--kiosk-text);
    background: var(--kiosk-primary);
}

[b-f5y7mxbtps] .kiosk-input-addon:active {
    transform: translateY(-50%) scale(0.95);
}

/* ===== Alert Styles ===== */
.kiosk-alert[b-f5y7mxbtps] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1rem;
}

.kiosk-alert i[b-f5y7mxbtps] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kiosk-alert-error[b-f5y7mxbtps] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--kiosk-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.kiosk-alert-success[b-f5y7mxbtps] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--kiosk-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ===== Button Styles ===== */
.kiosk-btn[b-f5y7mxbtps] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: var(--kiosk-button-height, 56px);
    padding: 16px 24px;
    border: none;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    margin-top: 8px; /* Extra space before submit button */
}

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

.kiosk-btn i[b-f5y7mxbtps] {
    font-size: 1.5rem;
}

.kiosk-btn-primary[b-f5y7mxbtps] {
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary, var(--kiosk-primary)));
    color: white;
}

.kiosk-btn-primary:hover:not(:disabled)[b-f5y7mxbtps],
.kiosk-btn-primary:active:not(:disabled)[b-f5y7mxbtps] {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

/* ===== Spinner ===== */
.kiosk-spinner[b-f5y7mxbtps] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-f5y7mxbtps 0.8s linear infinite;
}

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

/* ===== Form Footer ===== */
.kiosk-form-footer[b-f5y7mxbtps] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kiosk-border);
    font-size: 1rem;
    color: var(--kiosk-text-muted);
    flex-shrink: 0;
}

.kiosk-link-btn[b-f5y7mxbtps] {
    background: none;
    border: none;
    color: var(--kiosk-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
}

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

/* ===== Hint text below inputs ===== */
.kiosk-hint[b-f5y7mxbtps] {
    font-size: 0.8rem;
    color: var(--kiosk-text-muted);
    margin-top: 6px;
    padding-left: 4px;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskLoginScreen.razor.rz.scp.css */
/*
 * KioskLoginScreen.razor.css
 * Authentication screen for kiosk device login — matches kiosk dark theme.
 */

.kiosk-login-screen[b-ink083r2ii] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--kiosk-bg-gradient, linear-gradient(180deg, #0a0a14 0%, #0f0f1a 100%));
    padding: 2rem;
}

.kiosk-login-card[b-ink083r2ii] {
    background: var(--kiosk-surface, #13132a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 3rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.kiosk-login-header[b-ink083r2ii] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.kiosk-login-header i[b-ink083r2ii] {
    font-size: 3rem;
    color: var(--kiosk-primary, #3b82f6);
    margin-bottom: 1rem;
    display: block;
}

.kiosk-login-header h2[b-ink083r2ii] {
    color: var(--kiosk-text, #f8fafc);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.kiosk-login-header p[b-ink083r2ii] {
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 1rem;
    margin: 0;
}

.kiosk-login-form[b-ink083r2ii] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kiosk-login-error[b-ink083r2ii] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.75rem;
    color: var(--kiosk-error, #ef4444);
    font-size: 0.95rem;
}

.kiosk-login-error i[b-ink083r2ii] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kiosk-login-field[b-ink083r2ii] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kiosk-login-field label[b-ink083r2ii] {
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 0.9rem;
    font-weight: 500;
}

[b-ink083r2ii] .kiosk-login-input {
    background: var(--kiosk-surface-hover, #1a1a3a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--kiosk-text, #f8fafc);
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[b-ink083r2ii] .kiosk-login-input::placeholder {
    color: var(--kiosk-text-dim, #64748b);
}

[b-ink083r2ii] .kiosk-login-input:focus {
    border-color: var(--kiosk-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[b-ink083r2ii] .kiosk-login-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kiosk-login-button[b-ink083r2ii] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--kiosk-accent-gradient, linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%));
    border: none;
    border-radius: 0.75rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

.kiosk-login-button:hover:not(:disabled)[b-ink083r2ii] {
    opacity: 0.9;
}

.kiosk-login-button:active:not(:disabled)[b-ink083r2ii] {
    transform: scale(0.98);
}

.kiosk-login-button:disabled[b-ink083r2ii] {
    opacity: 0.5;
    cursor: not-allowed;
}

.kiosk-login-footer[b-ink083r2ii] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kiosk-login-footer small[b-ink083r2ii] {
    color: var(--kiosk-text-dim, #64748b);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskMainMenu.razor.rz.scp.css */
/* KioskMainMenu.razor.css */
/* World-class, touch-optimized main menu design */

.kiosk-main-menu[b-8ys7dkmtfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 40px;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
    min-height: 0;
}

/* ===== Header Section ===== */
.menu-header[b-8ys7dkmtfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-bottom: 8px;
    flex-shrink: 0;
}

.greeting-container[b-8ys7dkmtfg] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-ring[b-8ys7dkmtfg] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.avatar-ring[b-8ys7dkmtfg]::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    opacity: 0.3;
    filter: blur(8px);
}

.avatar-ring i[b-8ys7dkmtfg] {
    font-size: 1.5rem;
    color: white;
    z-index: 1;
}

.greeting-text[b-8ys7dkmtfg] {
    text-align: left;
}

.welcome-label[b-8ys7dkmtfg] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kiosk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.user-name[b-8ys7dkmtfg] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--kiosk-text) 0%, var(--kiosk-text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.menu-prompt[b-8ys7dkmtfg] {
    font-size: 1.125rem;
    color: var(--kiosk-text-muted);
    margin: 0;
}

/* ===== Menu Sections ===== */
.menu-section[b-8ys7dkmtfg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Primary Action Cards ===== */
.primary-actions[b-8ys7dkmtfg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-card[b-8ys7dkmtfg] {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-card:hover[b-8ys7dkmtfg],
.action-card:focus-visible[b-8ys7dkmtfg] {
    transform: translateY(-4px) scale(1.01);
}

.action-card:active[b-8ys7dkmtfg] {
    transform: scale(0.98);
}

.action-card:focus-visible[b-8ys7dkmtfg] {
    outline: 2px solid var(--kiosk-primary);
    outline-offset: 4px;
}

/* Card glow effect */
.card-glow[b-8ys7dkmtfg] {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.action-card:hover .card-glow[b-8ys7dkmtfg],
.action-card:focus-visible .card-glow[b-8ys7dkmtfg] {
    opacity: 1;
}

/* Racing card styles */
.action-card.racing .card-glow[b-8ys7dkmtfg] {
    box-shadow: 0 8px 40px rgba(59, 130, 246, 0.4),
                inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}

.action-card.racing .card-inner[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15) 0%, 
        rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.action-card.racing .icon-bg[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

/* Karting card styles */
.action-card.karting .card-glow[b-8ys7dkmtfg] {
    box-shadow: 0 8px 40px rgba(255, 107, 53, 0.4),
                inset 0 0 0 1px rgba(255, 107, 53, 0.3);
}

.action-card.karting .card-inner[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, 
        rgba(255, 107, 53, 0.15) 0%, 
        rgba(247, 147, 30, 0.1) 100%);
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.action-card.karting .icon-bg[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

/* Food & Bev card styles */
.action-card.food-bev .card-glow[b-8ys7dkmtfg] {
    box-shadow: 0 8px 40px rgba(236, 72, 153, 0.4),
                inset 0 0 0 1px rgba(236, 72, 153, 0.3);
}

.action-card.food-bev .card-inner[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.15) 0%, 
        rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.action-card.food-bev .icon-bg[b-8ys7dkmtfg] {
    background: linear-gradient(135deg, #ec4899, #f97316);
}

/* Card inner container */
.card-inner[b-8ys7dkmtfg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-radius: 20px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    transition: all 0.3s ease;
}

/* Icon wrapper */
.card-icon-wrapper[b-8ys7dkmtfg] {
    flex-shrink: 0;
}

.icon-bg[b-8ys7dkmtfg] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.icon-bg i[b-8ys7dkmtfg] {
    font-size: 1.75rem;
    color: white;
}

/* Card content */
.card-content[b-8ys7dkmtfg] {
    flex: 1;
    min-width: 0;
}

.card-content h3[b-8ys7dkmtfg] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--kiosk-text);
}

.card-content p[b-8ys7dkmtfg] {
    font-size: 0.9375rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Card action button */
.card-action[b-8ys7dkmtfg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kiosk-text);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.action-card:hover .card-action[b-8ys7dkmtfg],
.action-card:focus-visible .card-action[b-8ys7dkmtfg] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

.card-action i[b-8ys7dkmtfg] {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.action-card:hover .card-action i[b-8ys7dkmtfg],
.action-card:focus-visible .card-action i[b-8ys7dkmtfg] {
    transform: translateX(4px);
}

/* ===== Secondary Actions ===== */
.secondary-actions[b-8ys7dkmtfg] {
    margin-top: auto;
    padding-top: 16px;
}

.section-label[b-8ys7dkmtfg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-label span[b-8ys7dkmtfg] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kiosk-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-label[b-8ys7dkmtfg]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--kiosk-border), transparent);
}

.quick-links[b-8ys7dkmtfg] {
    display: flex;
    gap: 12px;
}

.quick-link-btn[b-8ys7dkmtfg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: 14px;
    color: var(--kiosk-text);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.quick-link-btn:hover[b-8ys7dkmtfg],
.quick-link-btn:focus-visible[b-8ys7dkmtfg] {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
    color: var(--kiosk-primary);
    transform: translateY(-2px);
}

.quick-link-btn:active[b-8ys7dkmtfg] {
    transform: scale(0.98);
}

.quick-link-btn:focus-visible[b-8ys7dkmtfg] {
    outline: 2px solid var(--kiosk-primary);
    outline-offset: 2px;
}

.quick-link-btn i[b-8ys7dkmtfg] {
    font-size: 1.25rem;
}

/* ===== Footer ===== */
.menu-footer[b-8ys7dkmtfg] {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--kiosk-border);
    margin-top: auto;
    flex-shrink: 0;
}

.logout-btn[b-8ys7dkmtfg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid var(--kiosk-border);
    border-radius: 12px;
    color: var(--kiosk-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.logout-btn:hover[b-8ys7dkmtfg],
.logout-btn:focus-visible[b-8ys7dkmtfg] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.logout-btn:active[b-8ys7dkmtfg] {
    transform: scale(0.98);
}

.logout-btn:focus-visible[b-8ys7dkmtfg] {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.logout-btn i[b-8ys7dkmtfg] {
    font-size: 1.25rem;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .kiosk-main-menu[b-8ys7dkmtfg] {
        padding: 16px 20px;
        gap: 16px;
    }
    
    .greeting-container[b-8ys7dkmtfg] {
        flex-direction: column;
        text-align: center;
    }
    
    .greeting-text[b-8ys7dkmtfg] {
        text-align: center;
    }
    
    .avatar-ring[b-8ys7dkmtfg] {
        width: 64px;
        height: 64px;
    }
    
    .avatar-ring i[b-8ys7dkmtfg] {
        font-size: 1.75rem;
    }
    
    .user-name[b-8ys7dkmtfg] {
        font-size: 1.5rem;
    }
    
    .card-inner[b-8ys7dkmtfg] {
        padding: 20px;
        gap: 16px;
    }
    
    .icon-bg[b-8ys7dkmtfg] {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
    
    .icon-bg i[b-8ys7dkmtfg] {
        font-size: 1.5rem;
    }
    
    .card-content h3[b-8ys7dkmtfg] {
        font-size: 1.125rem;
    }
    
    .card-content p[b-8ys7dkmtfg] {
        font-size: 0.875rem;
    }
    
    .card-action[b-8ys7dkmtfg] {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }
    
    .quick-links[b-8ys7dkmtfg] {
        flex-direction: column;
    }
    
    .quick-link-btn[b-8ys7dkmtfg] {
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .kiosk-main-menu[b-8ys7dkmtfg] {
        padding: 16px 16px;
    }
    
    .card-action span[b-8ys7dkmtfg] {
        display: none;
    }
    
    .card-action[b-8ys7dkmtfg] {
        padding: 10px;
        border-radius: 10px;
    }
}

/* ===== Small viewport height (compact kiosk screens) ===== */
@media (max-height: 800px) {
    .kiosk-main-menu[b-8ys7dkmtfg] {
        padding: 12px 24px;
        gap: 12px;
    }

    .menu-header[b-8ys7dkmtfg] {
        gap: 8px;
        padding-bottom: 4px;
    }

    .avatar-ring[b-8ys7dkmtfg] {
        width: 40px;
        height: 40px;
    }

    .avatar-ring i[b-8ys7dkmtfg] {
        font-size: 1.125rem;
    }

    .user-name[b-8ys7dkmtfg] {
        font-size: 1.25rem;
    }

    .menu-prompt[b-8ys7dkmtfg] {
        font-size: 0.875rem;
    }

    .card-inner[b-8ys7dkmtfg] {
        padding: 14px 18px;
        gap: 12px;
    }

    .icon-bg[b-8ys7dkmtfg] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .icon-bg i[b-8ys7dkmtfg] {
        font-size: 1.25rem;
    }

    .card-content h3[b-8ys7dkmtfg] {
        font-size: 1.125rem;
    }

    .card-content p[b-8ys7dkmtfg] {
        font-size: 0.8125rem;
    }

    .logout-btn[b-8ys7dkmtfg] {
        padding: 10px 20px;
        font-size: 0.875rem;
    }

    .quick-link-btn[b-8ys7dkmtfg] {
        padding: 12px 16px;
        font-size: 0.875rem;
    }

    .menu-footer[b-8ys7dkmtfg] {
        padding-top: 12px;
    }
}

/* ===== Animation Entrance ===== */
.action-card[b-8ys7dkmtfg] {
    animation: cardSlideIn-b-8ys7dkmtfg 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.action-card:nth-child(1)[b-8ys7dkmtfg] { animation-delay: 0.1s; }
.action-card:nth-child(2)[b-8ys7dkmtfg] { animation-delay: 0.2s; }
.action-card:nth-child(3)[b-8ys7dkmtfg] { animation-delay: 0.3s; }

@keyframes cardSlideIn-b-8ys7dkmtfg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-link-btn[b-8ys7dkmtfg] {
    animation: fadeIn-b-8ys7dkmtfg 0.3s ease backwards;
    animation-delay: 0.4s;
}

@keyframes fadeIn-b-8ys7dkmtfg {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskMemberVerify.razor.rz.scp.css */
/* KioskMemberVerify.razor.css: member check-in (identifier, then a one-time code). */

.kiosk-member-verify[b-h4wdnuc9vb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--kiosk-spacing-lg, 32px);
    gap: var(--kiosk-spacing-md, 24px);
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

/* ===== Header ===== */
.verify-header[b-h4wdnuc9vb] {
    text-align: center;
}

.verify-title[b-h4wdnuc9vb] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kiosk-text, #f8fafc);
    margin: 0 0 0.5rem;
}

.verify-subtitle[b-h4wdnuc9vb] {
    font-size: 1.1rem;
    color: var(--kiosk-text-muted, #94a3b8);
    margin: 0;
    line-height: 1.45;
}

/* ===== Input ===== */
.verify-input-area[b-h4wdnuc9vb] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--kiosk-spacing-sm, 16px);
}

/* The inputs are rendered by SimxLiveTextInput, a child component: only ::deep reaches them. */
.verify-input-area[b-h4wdnuc9vb]  .verify-input {
    width: 100%;
    min-height: 72px;
    text-align: center;
    font-size: 1.5rem;
}

.verify-input-area[b-h4wdnuc9vb]  .verify-code-input {
    font-family: monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}

.verify-attempts[b-h4wdnuc9vb] {
    margin: 0;
    text-align: center;
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 1rem;
}

/* ===== Messages ===== */
.verify-error[b-h4wdnuc9vb],
.verify-notice[b-h4wdnuc9vb] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1rem;
    line-height: 1.4;
}

.verify-error[b-h4wdnuc9vb] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--kiosk-error, #ef4444);
    animation: verifyShake-b-h4wdnuc9vb 0.4s ease;
}

.verify-notice[b-h4wdnuc9vb] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--kiosk-success, #22c55e);
}

.verify-error i[b-h4wdnuc9vb],
.verify-notice i[b-h4wdnuc9vb] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

@keyframes verifyShake-b-h4wdnuc9vb {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .verify-error[b-h4wdnuc9vb] {
        animation: none;
    }
}

/* ===== Welcome ===== */
.verify-welcome[b-h4wdnuc9vb] {
    width: 100%;
}

/* ===== Actions ===== */
.verify-primary[b-h4wdnuc9vb],
.verify-footer .kiosk-btn[b-h4wdnuc9vb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--kiosk-button-height, 56px);
    padding: 14px 24px;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1.1rem;
    font-weight: 600;
    touch-action: manipulation;
}

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

.verify-secondary[b-h4wdnuc9vb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.verify-secondary .kiosk-btn-link[b-h4wdnuc9vb] {
    min-height: 48px;
    font-size: 1rem;
}

.verify-footer[b-h4wdnuc9vb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.verify-footer .kiosk-btn-outline[b-h4wdnuc9vb] {
    background: transparent;
    color: var(--kiosk-text-muted, #94a3b8);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
}

.verify-footer .kiosk-btn-outline:hover:not(:disabled)[b-h4wdnuc9vb] {
    background: var(--kiosk-surface, #13132a);
    color: var(--kiosk-text, #f8fafc);
    border-color: var(--kiosk-text-muted, #94a3b8);
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .kiosk-member-verify[b-h4wdnuc9vb] {
        padding: var(--kiosk-spacing-md, 24px) var(--kiosk-spacing-sm, 16px);
        gap: var(--kiosk-spacing-sm, 16px);
    }

    .verify-title[b-h4wdnuc9vb] {
        font-size: 1.5rem;
    }

    .verify-subtitle[b-h4wdnuc9vb] {
        font-size: 0.95rem;
    }

    .verify-input-area[b-h4wdnuc9vb]  .verify-code-input {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskMultiDriverIdentity.razor.rz.scp.css */
/* KioskMultiDriverIdentity.razor.css */

/* ===== Custom Scrollbar Styling (Dark Theme) ===== */
.identity-content[b-00gonf6eol] {
    /* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: var(--kiosk-primary, #3b82f6) var(--kiosk-surface, #1a1a2e);
}

.identity-content[b-00gonf6eol]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.identity-content[b-00gonf6eol]::-webkit-scrollbar-track {
    background: var(--kiosk-surface, #1a1a2e);
    border-radius: 4px;
}

.identity-content[b-00gonf6eol]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    border-radius: 4px;
    border: 2px solid var(--kiosk-surface, #1a1a2e);
}

.identity-content[b-00gonf6eol]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--kiosk-primary-hover, #2563eb), var(--kiosk-secondary, #8b5cf6));
}

.kiosk-multi-driver-identity[b-00gonf6eol] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--kiosk-bg, #0f0f1a);
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-screen-header[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
}

.kiosk-back-btn[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--kiosk-surface, #1a1a2e);
    color: var(--kiosk-text, #f8fafc);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kiosk-back-btn:hover[b-00gonf6eol] {
    background: var(--kiosk-surface-hover, #252540);
    transform: scale(1.05);
}

.screen-title[b-00gonf6eol] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.step-indicator[b-00gonf6eol] {
    font-size: 0.875rem;
    color: var(--kiosk-text-muted, #94a3b8);
}

.identity-content[b-00gonf6eol] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}

.identity-intro[b-00gonf6eol] {
    text-align: center;
    margin-bottom: 32px;
}

.identity-icon[b-00gonf6eol] {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    border-radius: 20px;
    font-size: 2.5rem;
    color: white;
}

.identity-intro h3[b-00gonf6eol] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.intro-text[b-00gonf6eol] {
    margin: 0;
    color: var(--kiosk-text-muted, #94a3b8);
    max-width: 500px;
    margin: 0 auto;
}

/* Loading state */
.loading-state[b-00gonf6eol] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--kiosk-text-muted, #94a3b8);
}

.loading-state .spinner[b-00gonf6eol] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--kiosk-surface, #1a1a2e);
    border-top-color: var(--kiosk-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-00gonf6eol 1s linear infinite;
    margin-bottom: 16px;
}

/* Driver cards container */
.driver-cards-container[b-00gonf6eol] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

/* Single driver - center it */
.driver-cards-container:has(.driver-card:only-child)[b-00gonf6eol] {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.driver-card[b-00gonf6eol] {
    background: var(--kiosk-surface, #1a1a2e);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s ease;
}

.driver-card:focus-within[b-00gonf6eol] {
    border-color: var(--kiosk-primary, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.driver-card.has-errors[b-00gonf6eol] {
    border-color: var(--kiosk-error, #ef4444);
}

.driver-card.logged-in-user[b-00gonf6eol] {
    border-color: var(--kiosk-success, #22c55e);
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.1), 
        rgba(34, 197, 94, 0.05));
}

.driver-card-header[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
}

.simulator-badge[b-00gonf6eol] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--kiosk-primary, #3b82f6);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
}

.simulator-badge i[b-00gonf6eol] {
    font-size: 1rem;
}

.copy-from-first-btn[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--kiosk-surface-hover, #252540);
    color: var(--kiosk-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-from-first-btn:hover:not(:disabled)[b-00gonf6eol] {
    background: var(--kiosk-primary, #3b82f6);
    color: white;
}

.copy-from-first-btn:disabled[b-00gonf6eol] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Form styling */
.driver-form[b-00gonf6eol] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-00gonf6eol] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-00gonf6eol] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--kiosk-text-muted, #94a3b8);
    font-weight: 500;
}

.form-group label i[b-00gonf6eol] {
    font-size: 1rem;
    color: var(--kiosk-primary, #3b82f6);
}

.kiosk-input[b-00gonf6eol] {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background: var(--kiosk-bg, #0f0f1a);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    color: var(--kiosk-text, #f8fafc);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.kiosk-input:focus[b-00gonf6eol] {
    outline: none;
    border-color: var(--kiosk-primary, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.kiosk-input[b-00gonf6eol]::placeholder {
    color: var(--kiosk-text-dim, #64748b);
}

.kiosk-input.input-error[b-00gonf6eol] {
    border-color: var(--kiosk-error, #ef4444);
}

.kiosk-input:disabled[b-00gonf6eol] {
    opacity: 0.6;
    cursor: not-allowed;
}

.field-error[b-00gonf6eol] {
    font-size: 0.75rem;
    color: var(--kiosk-error, #ef4444);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Form error */
.form-error[b-00gonf6eol] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--kiosk-error, #ef4444);
    border-radius: 12px;
    color: var(--kiosk-error, #ef4444);
    margin-bottom: 16px;
}

.form-error i[b-00gonf6eol] {
    font-size: 1.25rem;
}

/* Action buttons */
.action-buttons[b-00gonf6eol] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 24px;
}

.kiosk-btn[b-00gonf6eol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 32px;
    height: 56px;
    border: none;
    border-radius: 16px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.kiosk-btn-primary[b-00gonf6eol] {
    background: linear-gradient(135deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    color: white;
}

.kiosk-btn-primary:hover:not(:disabled)[b-00gonf6eol] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.kiosk-btn-primary:active:not(:disabled)[b-00gonf6eol] {
    transform: translateY(0);
}

.kiosk-btn:disabled[b-00gonf6eol] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.kiosk-btn-lg[b-00gonf6eol] {
    height: 64px;
    padding: 0 48px;
    font-size: 1.25rem;
}

.kiosk-btn .spinner[b-00gonf6eol] {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-00gonf6eol 1s linear infinite;
}

/* Privacy notice */
.identity-privacy[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    margin-top: 24px;
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 0.875rem;
    text-align: center;
}

.identity-privacy i[b-00gonf6eol] {
    font-size: 1.25rem;
    color: var(--kiosk-success, #22c55e);
}

/* Logged-in user styling */
.logged-in-badge[b-00gonf6eol] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--kiosk-success, #22c55e);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
}

.logged-in-badge i[b-00gonf6eol] {
    font-size: 1rem;
}

.logged-in-info[b-00gonf6eol] {
    padding: 16px;
    text-align: center;
}

.logged-in-name[b-00gonf6eol] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kiosk-text, #f8fafc);
    margin-bottom: 8px;
}

.logged-in-name i[b-00gonf6eol] {
    color: var(--kiosk-success, #22c55e);
    font-size: 1.5rem;
}

.logged-in-note[b-00gonf6eol] {
    margin: 0;
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 0.875rem;
}

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

/* Responsive */
@media (max-width: 768px) {
    .driver-cards-container[b-00gonf6eol] {
        grid-template-columns: 1fr;
    }
    
    .identity-content[b-00gonf6eol] {
        padding: 16px;
    }
    
    .kiosk-btn-lg[b-00gonf6eol] {
        width: 100%;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPackageSelection.razor.rz.scp.css */
/* KioskPackageSelection.razor.css */

/* Package tiles within the grid */
.package-tile[b-w661qrlwy8] {
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius-lg);
    padding: var(--kiosk-spacing-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 3px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.package-tile:hover[b-w661qrlwy8] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.package-tile:active[b-w661qrlwy8] {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.package-tile.selected[b-w661qrlwy8] {
    border-color: var(--kiosk-primary);
    background: linear-gradient(135deg, 
        var(--kiosk-surface), 
        rgba(59, 130, 246, 0.1));
    box-shadow: 0 0 0 1px var(--kiosk-primary),
                0 8px 32px rgba(59, 130, 246, 0.3);
}

/* Package header with type badge */
.package-header[b-w661qrlwy8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--kiosk-spacing-sm);
    gap: var(--kiosk-spacing-sm);
}

.package-type[b-w661qrlwy8] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kiosk-primary);
    background: rgba(59, 130, 246, 0.15);
    padding: 6px 12px;
    border-radius: var(--kiosk-radius-sm);
}

.package-popular-badge[b-w661qrlwy8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kiosk-warning);
    background: rgba(245, 158, 11, 0.15);
    padding: 6px 12px;
    border-radius: var(--kiosk-radius-sm);
}

.package-popular-badge i[b-w661qrlwy8] {
    font-size: 0.65rem;
}

/* Package name */
.package-name[b-w661qrlwy8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0 0 var(--kiosk-spacing-md);
    line-height: 1.2;
}

/* Package details */
.package-details[b-w661qrlwy8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kiosk-spacing-md);
    margin-bottom: var(--kiosk-spacing-md);
}

.package-detail-item[b-w661qrlwy8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--kiosk-text-muted);
}

.package-detail-item i[b-w661qrlwy8] {
    color: var(--kiosk-primary);
    font-size: 1rem;
}

/* Package description */
.package-description[b-w661qrlwy8] {
    font-size: 0.9rem;
    color: var(--kiosk-text-muted);
    line-height: 1.5;
    margin: 0 0 var(--kiosk-spacing-md);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Package pricing */
.package-pricing[b-w661qrlwy8] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--kiosk-spacing-sm);
    margin-top: auto;
    padding-top: var(--kiosk-spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.package-price[b-w661qrlwy8] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--kiosk-success);
    letter-spacing: -0.02em;
}

.package-original-price[b-w661qrlwy8] {
    font-size: 1rem;
    color: var(--kiosk-text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

.member-badge[b-w661qrlwy8],
.peak-badge[b-w661qrlwy8] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--kiosk-radius-sm);
}

.member-badge[b-w661qrlwy8] {
    color: var(--kiosk-success);
    background: rgba(34, 197, 94, 0.15);
}

.peak-badge[b-w661qrlwy8] {
    color: var(--kiosk-warning);
    background: rgba(245, 158, 11, 0.15);
}

/* Selected indicator */
.selected-indicator[b-w661qrlwy8] {
    position: absolute;
    top: var(--kiosk-spacing-md);
    right: var(--kiosk-spacing-md);
    color: var(--kiosk-primary);
    font-size: 2rem;
    animation: scaleIn-b-w661qrlwy8 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn-b-w661qrlwy8 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Footer selection info */
.footer-selection-info[b-w661qrlwy8] {
    display: flex;
    align-items: center;
    gap: var(--kiosk-spacing-md);
}

.selected-label[b-w661qrlwy8] {
    font-size: 0.85rem;
    color: var(--kiosk-text-muted);
}

.selected-value[b-w661qrlwy8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kiosk-text);
}

.selected-price[b-w661qrlwy8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kiosk-success);
    padding-left: var(--kiosk-spacing-md);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .package-tile[b-w661qrlwy8] {
        min-height: 240px;
        padding: var(--kiosk-spacing-md);
    }
    
    .package-name[b-w661qrlwy8] {
        font-size: 1.25rem;
    }
    
    .package-price[b-w661qrlwy8] {
        font-size: 1.75rem;
    }
    
    .footer-selection-info[b-w661qrlwy8] {
        flex-direction: column;
        gap: var(--kiosk-spacing-xs);
        text-align: center;
    }
    
    .selected-price[b-w661qrlwy8] {
        border-left: none;
        padding-left: 0;
    }
}

/* Large screens - show more columns */
@media (min-width: 1400px) {
    .package-tile[b-w661qrlwy8] {
        min-height: 300px;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPageLayout.razor.rz.scp.css */
/*
 * KioskPageLayout.razor.css
 * Dark-theme wrapper for kiosk sub-flow screens (karting, etc.).
 *
 * Slotted karting screens were authored with Bootstrap light-theme helpers
 * (.bg-light / .text-muted). On the kiosk's dark background these produced
 * white-on-white card text and dark-on-dark muted text. The ::deep rules below
 * remap those helpers to the kiosk surface/text variables so the content stays
 * readable without having to edit every slotted screen.
 */

.kiosk-page-layout[b-3dddq46v0n] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-page-content[b-3dddq46v0n] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
}

/* Remap Bootstrap light-theme card backgrounds to the kiosk dark surface and
   force readable (light) text inside them. */
.kiosk-page-content[b-3dddq46v0n]  .bg-light {
    background-color: var(--kiosk-surface, #13132a) !important;
    color: var(--kiosk-text, #f8fafc) !important;
}

/* Bootstrap muted text (#6c757d) is unreadable on a dark background; use the
   kiosk muted token instead. */
.kiosk-page-content[b-3dddq46v0n]  .text-muted {
    color: var(--kiosk-text-muted, #94a3b8) !important;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskParticipantData.razor.rz.scp.css */
/*
 * KioskParticipantData.razor.css
 * "Your Details" self-serve participant-data capture styles.
 *
 * Mirrors the kiosk design language established by KioskKartingEnrollment.razor.css
 * (same --kiosk-* tokens, form groups, labels, input-with-unit, alerts and footer
 * actions) so this screen looks like a first-class part of the kiosk rather than a
 * bare form. The shared kiosk shell (KioskContainer.razor.css) already styles
 * .kiosk-selection-screen, the header and the .kiosk-btn* family via ::deep.
 */

/* ===== Scrollable form body ===== */
.kiosk-participant-data-form[b-9lj8vj7ky1] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--kiosk-spacing-md, 24px);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--kiosk-spacing-lg, 32px) var(--kiosk-spacing-md, 24px) var(--kiosk-spacing-xl, 48px);
}

/* ===== Intro helper (reassures the guest this is faster than waiting) ===== */
.kiosk-participant-data__intro[b-9lj8vj7ky1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--kiosk-surface, #13132a);
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--kiosk-radius-lg, 16px);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--kiosk-text-muted, #94a3b8);
}

.kiosk-participant-data__intro i[b-9lj8vj7ky1] {
    font-size: 1.25rem;
    color: var(--kiosk-primary, #3b82f6);
    flex-shrink: 0;
}

/* ===== Form groups ===== */
.kiosk-participant-data .kiosk-form-group[b-9lj8vj7ky1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kiosk-participant-data .kiosk-label[b-9lj8vj7ky1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-participant-data .kiosk-label-required[b-9lj8vj7ky1] {
    color: var(--kiosk-error, #ef4444);
    font-weight: 700;
    margin-left: 2px;
}

.kiosk-participant-data .kiosk-hint[b-9lj8vj7ky1] {
    font-size: 0.8125rem;
    color: var(--kiosk-text-muted, #94a3b8);
    line-height: 1.4;
}

/* Requirement hint: the actual age/height/weight requirement for the activity, shown under the
   matching field so the guest knows what to enter. Emphasised over the generic muted hint. */
.kiosk-participant-data .kiosk-participant-data__req[b-9lj8vj7ky1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kiosk-text, #f8fafc);
    font-weight: 600;
}

.kiosk-participant-data .kiosk-participant-data__req i[b-9lj8vj7ky1] {
    color: var(--kiosk-primary, #3b82f6);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* ===== Date input ===== */
.kiosk-participant-data input[type="date"].kiosk-input[b-9lj8vj7ky1] {
    color-scheme: dark;
}

/* ===== Input + unit (height / weight) ===== */
.kiosk-participant-data .kiosk-input-with-unit[b-9lj8vj7ky1] {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.kiosk-participant-data .kiosk-input-with-unit .kiosk-input[b-9lj8vj7ky1] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    min-width: 0;
}

.kiosk-participant-data .kiosk-unit[b-9lj8vj7ky1] {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    background: var(--kiosk-surface-elevated, #1f1f40);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-top-right-radius: var(--kiosk-radius, 12px);
    border-bottom-right-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text-muted, #94a3b8);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Imperial height (feet + inches side by side) ===== */
.kiosk-height-imperial[b-9lj8vj7ky1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ===== Alerts ===== */
.kiosk-participant-data .kiosk-alert[b-9lj8vj7ky1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--kiosk-radius, 12px);
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.45;
}

.kiosk-participant-data .kiosk-alert i[b-9lj8vj7ky1] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.kiosk-participant-data .kiosk-alert-error[b-9lj8vj7ky1] {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--kiosk-error, #ef4444);
    color: var(--kiosk-error, #ef4444);
}

/* Eligibility-correction banner: factual reason the guest was sent here to fix a value. */
.kiosk-participant-data .kiosk-alert-warning[b-9lj8vj7ky1] {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--kiosk-warning, #f59e0b);
    color: var(--kiosk-warning, #f59e0b);
}

.kiosk-participant-data .kiosk-participant-data__eligibility > div[b-9lj8vj7ky1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kiosk-participant-data .kiosk-participant-data__eligibility strong[b-9lj8vj7ky1] {
    font-weight: 600;
}

/* Attendant-escalation callout: shown whenever the activity has an age/size requirement, so a guest
   who can't meet it knows to see an attendant to have the booking modified (the loop-breaker's
   guest-facing half). Warning-toned to read as an actionable notice, distinct from the blue intro. */
.kiosk-participant-data .kiosk-participant-data__attendant[b-9lj8vj7ky1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--kiosk-radius, 12px);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-participant-data .kiosk-participant-data__attendant i[b-9lj8vj7ky1] {
    font-size: 1.25rem;
    color: var(--kiosk-warning, #f59e0b);
    flex-shrink: 0;
}

/* ===== Footer actions ===== */
.kiosk-participant-data .kiosk-form-actions[b-9lj8vj7ky1] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: var(--kiosk-spacing-md, 24px);
}

.kiosk-participant-data .kiosk-btn-large[b-9lj8vj7ky1] {
    min-height: 64px;
    padding: 0 48px;
    font-size: 1.1875rem;
    width: 100%;
    max-width: 360px;
}

/* ===== Inline spinner (submit button) ===== */
.kiosk-participant-data .spinner-inline[b-9lj8vj7ky1] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kiosk-participant-data-spin-b-9lj8vj7ky1 0.8s linear infinite;
}

@keyframes kiosk-participant-data-spin-b-9lj8vj7ky1 {
    to { transform: rotate(360deg); }
}

/* ===== Responsive (small / portrait tablets) ===== */
@media (max-width: 640px) {
    .kiosk-participant-data-form[b-9lj8vj7ky1] {
        padding: var(--kiosk-spacing-md, 24px) var(--kiosk-spacing-sm, 16px) var(--kiosk-spacing-lg, 32px);
        gap: var(--kiosk-spacing-sm, 16px);
    }

    .kiosk-participant-data .kiosk-btn-large[b-9lj8vj7ky1] {
        max-width: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPayment.razor.rz.scp.css */
/* KioskPayment.razor.css */

/* ── Value Redemption (gift cards & member credits) ── */

.kiosk-value-redemption-section[b-1n3fks2s6n] {
    width: 100%;
    max-width: 420px;
    padding: var(--kiosk-spacing-md);
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Fully-covered state */
.kiosk-fully-covered[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--kiosk-spacing-md);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
    border: 2px solid var(--kiosk-success);
    border-radius: var(--kiosk-radius-lg);
    min-width: 240px;
}

.kiosk-fully-covered__icon[b-1n3fks2s6n] {
    font-size: 2.5rem;
    color: var(--kiosk-success);
    animation: successPop-b-1n3fks2s6n 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kiosk-fully-covered h3[b-1n3fks2s6n] {
    color: var(--kiosk-success);
    font-weight: 700;
    margin: 0;
}

.kiosk-fully-covered p[b-1n3fks2s6n] {
    color: var(--kiosk-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Remaining amount display (partial coverage) */
.kiosk-remaining-amount[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--kiosk-spacing-md);
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius-lg);
    border: 2px solid var(--kiosk-primary);
    min-width: 200px;
}

/* ── Main content area ── */

.payment-main-content[b-1n3fks2s6n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--kiosk-spacing-lg);
    overflow-y: auto;
}

/* Payment state containers */
.payment-state[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    gap: var(--kiosk-spacing-md);
}

.payment-state h3[b-1n3fks2s6n] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--kiosk-text);
}

.payment-state p[b-1n3fks2s6n] {
    font-size: 1rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Amount display */
.amount-display[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--kiosk-spacing-lg);
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius-lg);
    border: 2px solid var(--kiosk-primary);
    min-width: 240px;
}

.amount-display.small[b-1n3fks2s6n] {
    padding: var(--kiosk-spacing-md);
    min-width: 180px;
}

.amount-tax-breakdown[b-1n3fks2s6n] {
    text-align: center;
    margin-top: 4px;
}

.amount-tax-breakdown .tax-line[b-1n3fks2s6n] {
    font-size: 0.9rem;
    color: var(--kiosk-text-secondary, inherit);
    opacity: 0.85;
}

.amount-label[b-1n3fks2s6n] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--kiosk-text-muted);
}

.amount-value[b-1n3fks2s6n] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--kiosk-primary);
    letter-spacing: -0.02em;
}

.amount-display.small .amount-value[b-1n3fks2s6n] {
    font-size: 1.75rem;
}

/* Reader animation and instructions */
.reader-instructions[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kiosk-spacing-sm);
}

.reader-animation[b-1n3fks2s6n] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-container[b-1n3fks2s6n] {
    position: relative;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--kiosk-surface), rgba(59, 130, 246, 0.1));
    border-radius: var(--kiosk-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--kiosk-primary);
}

.card-icon-container i[b-1n3fks2s6n] {
    font-size: 2rem;
    color: var(--kiosk-primary);
}

.card-icon-container.pulse[b-1n3fks2s6n] {
    animation: cardPulse-b-1n3fks2s6n 1.5s ease-in-out infinite;
}

@keyframes cardPulse-b-1n3fks2s6n {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.2);
    }
}

.reader-glow[b-1n3fks2s6n] {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    animation: glowPulse-b-1n3fks2s6n 2s ease-in-out infinite;
}

@keyframes glowPulse-b-1n3fks2s6n {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.reader-waves[b-1n3fks2s6n] {
    position: absolute;
    inset: -15px;
    border: 2px solid var(--kiosk-primary);
    border-radius: var(--kiosk-radius);
    opacity: 0;
    animation: waveExpand-b-1n3fks2s6n 1.5s ease-out infinite;
}

.reader-waves[b-1n3fks2s6n]::before,
.reader-waves[b-1n3fks2s6n]::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid var(--kiosk-primary);
    border-radius: var(--kiosk-radius);
    animation: waveExpand-b-1n3fks2s6n 1.5s ease-out infinite;
}

.reader-waves[b-1n3fks2s6n]::before {
    animation-delay: 0.5s;
}

.reader-waves[b-1n3fks2s6n]::after {
    animation-delay: 1s;
}

@keyframes waveExpand-b-1n3fks2s6n {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Timeout display */
.payment-timeout[b-1n3fks2s6n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--kiosk-text-muted);
    padding: 8px 12px;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
}

.payment-timeout i[b-1n3fks2s6n] {
    color: var(--kiosk-warning);
}

/* Cash payment option */
.cash-option[b-1n3fks2s6n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kiosk-spacing-sm);
    margin-top: var(--kiosk-spacing-md);
    padding-top: var(--kiosk-spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.divider-text[b-1n3fks2s6n] {
    font-size: 0.8rem;
    color: var(--kiosk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cash-hint[b-1n3fks2s6n] {
    font-size: 0.8rem;
    color: var(--kiosk-text-dim);
}

/* Processing animation */
.processing-animation[b-1n3fks2s6n] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-ring[b-1n3fks2s6n] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-top-color: var(--kiosk-primary);
    border-radius: 50%;
    animation: spin-b-1n3fks2s6n 1s linear infinite;
}

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

.processing-animation i[b-1n3fks2s6n] {
    font-size: 2rem;
    color: var(--kiosk-primary);
}

/* Success animation */
.success-animation[b-1n3fks2s6n] {
    position: relative;
}

.success-circle[b-1n3fks2s6n] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--kiosk-success), #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop-b-1n3fks2s6n 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-circle i[b-1n3fks2s6n] {
    font-size: 2.5rem;
    color: white;
}

@keyframes successPop-b-1n3fks2s6n {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.payment-success h3[b-1n3fks2s6n] {
    color: var(--kiosk-success);
}

.card-info[b-1n3fks2s6n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--kiosk-text-muted);
    padding: 8px 12px;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
}

/* Error state */
.error-animation i[b-1n3fks2s6n] {
    font-size: 3.5rem;
    color: var(--kiosk-error);
}

.payment-failed h3[b-1n3fks2s6n] {
    color: var(--kiosk-error);
}

.error-message[b-1n3fks2s6n] {
    background: rgba(239, 68, 68, 0.1);
    padding: var(--kiosk-spacing-sm);
    border-radius: var(--kiosk-radius);
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.9rem;
}

/* Stored-value refusal shown in the Ready state — the guest can still pay another way,
   so this is an inline notice rather than the full-screen failed state. */
.kiosk-value-error[b-1n3fks2s6n] {
    display: flex;
    align-items: center;
    gap: var(--kiosk-spacing-sm);
    padding: var(--kiosk-spacing-sm) var(--kiosk-spacing-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-error);
    font-size: 0.95rem;
    text-align: left;
}

.kiosk-value-error i[b-1n3fks2s6n] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.error-actions[b-1n3fks2s6n] {
    display: flex;
    gap: var(--kiosk-spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

/* Not configured state */
.info-animation i[b-1n3fks2s6n] {
    font-size: 3.5rem;
    color: var(--kiosk-warning);
}

.payment-not-configured .hint[b-1n3fks2s6n] {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Contact info display */
.contact-info[b-1n3fks2s6n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--kiosk-spacing-md);
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-size: 1rem;
    color: var(--kiosk-text);
}

.contact-info i[b-1n3fks2s6n] {
    font-size: 1.25rem;
    color: var(--kiosk-primary);
}

.contact-info strong[b-1n3fks2s6n] {
    color: var(--kiosk-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Reader unavailable state */
.payment-reader-unavailable .error-animation i[b-1n3fks2s6n] {
    font-size: 3.5rem;
    color: var(--kiosk-warning);
}

.payment-reader-unavailable h3[b-1n3fks2s6n] {
    color: var(--kiosk-warning);
}

/* Assistance box - prominent help display */
.assistance-box[b-1n3fks2s6n] {
    display: flex;
    align-items: flex-start;
    gap: var(--kiosk-spacing-md);
    padding: var(--kiosk-spacing-lg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
    border: 2px solid var(--kiosk-primary);
    border-radius: var(--kiosk-radius-lg);
    max-width: 400px;
    text-align: left;
    margin: var(--kiosk-spacing-md) 0;
}

.assistance-icon[b-1n3fks2s6n] {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--kiosk-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assistance-icon i[b-1n3fks2s6n] {
    font-size: 1.5rem;
    color: white;
}

.assistance-content[b-1n3fks2s6n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistance-content h4[b-1n3fks2s6n] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0;
}

.assistance-content p[b-1n3fks2s6n] {
    font-size: 0.9rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    line-height: 1.5;
}

.contact-phone[b-1n3fks2s6n] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kiosk-primary);
    margin-top: 8px;
}

.contact-phone i[b-1n3fks2s6n] {
    font-size: 1rem;
    color: var(--kiosk-primary);
}

/* Cash pending state */
.cash-animation i[b-1n3fks2s6n] {
    font-size: 3.5rem;
    color: var(--kiosk-success);
    animation: bounce-b-1n3fks2s6n 1s ease infinite;
}

@keyframes bounce-b-1n3fks2s6n {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Skip payment option (testing) */
.skip-payment-option[b-1n3fks2s6n] {
    margin-top: var(--kiosk-spacing-sm);
    padding-top: var(--kiosk-spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.skip-payment-option .kiosk-btn[b-1n3fks2s6n] {
    opacity: 0.7;
    font-size: 0.8rem;
    min-height: 40px;
    padding: 8px 16px;
}

.skip-payment-option .kiosk-btn:hover[b-1n3fks2s6n] {
    opacity: 1;
}

/* Compact button sizes for payment screen */
.payment-state .kiosk-btn-lg[b-1n3fks2s6n] {
    min-height: 52px;
    padding: 12px 24px;
    font-size: 1rem;
}

.payment-state .kiosk-btn-sm[b-1n3fks2s6n] {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .payment-main-content[b-1n3fks2s6n] {
        padding: var(--kiosk-spacing-md);
    }

    .amount-value[b-1n3fks2s6n] {
        font-size: 2rem;
    }

    .payment-state h3[b-1n3fks2s6n] {
        font-size: 1.25rem;
    }

    .reader-animation[b-1n3fks2s6n] {
        width: 60px;
        height: 60px;
    }

    .card-icon-container[b-1n3fks2s6n] {
        width: 50px;
        height: 50px;
    }

    .card-icon-container i[b-1n3fks2s6n] {
        font-size: 1.5rem;
    }

    .kiosk-value-redemption-section[b-1n3fks2s6n] {
        max-width: 100%;
        padding: var(--kiosk-spacing-sm);
    }

    .kiosk-fully-covered__icon[b-1n3fks2s6n] {
        font-size: 2rem;
    }

    .assistance-box[b-1n3fks2s6n] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .assistance-content[b-1n3fks2s6n] {
        align-items: center;
    }
    
    .contact-phone[b-1n3fks2s6n] {
        font-size: 1rem;
    }
}

/* Extra small screens / tight vertical space */
@media (max-height: 700px) {
    .payment-main-content[b-1n3fks2s6n] {
        padding: var(--kiosk-spacing-sm);
    }
    
    .payment-state[b-1n3fks2s6n] {
        gap: var(--kiosk-spacing-sm);
    }
    
    .amount-display[b-1n3fks2s6n] {
        padding: var(--kiosk-spacing-md);
    }
    
    .amount-value[b-1n3fks2s6n] {
        font-size: 2rem;
    }
    
    .reader-animation[b-1n3fks2s6n] {
        width: 60px;
        height: 60px;
    }
    
    .card-icon-container[b-1n3fks2s6n] {
        width: 50px;
        height: 50px;
    }
    
    .assistance-box[b-1n3fks2s6n] {
        padding: var(--kiosk-spacing-md);
    }
    
    .assistance-icon[b-1n3fks2s6n] {
        width: 40px;
        height: 40px;
    }
    
    .assistance-icon i[b-1n3fks2s6n] {
        font-size: 1.25rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPreferencesChoice.razor.rz.scp.css */
/* KioskPreferencesChoice.razor.css */

.kiosk-preferences-choice[b-ztbcdrvirr] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
}

.preferences-choice-content[b-ztbcdrvirr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Saved preferences card */
.saved-preferences-card[b-ztbcdrvirr] {
    background: var(--kiosk-surface, #1a1a2e);
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 500px;
}

.saved-preferences-card .card-header[b-ztbcdrvirr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--kiosk-border, #2a2a4e);
}

.saved-preferences-card .card-header i[b-ztbcdrvirr] {
    font-size: 1.5rem;
    color: var(--kiosk-success, #00ff88);
}

.saved-preferences-card .card-header h3[b-ztbcdrvirr] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--kiosk-text, #ffffff);
}

/* Preferences list */
.preferences-list[b-ztbcdrvirr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preference-item[b-ztbcdrvirr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.pref-type[b-ztbcdrvirr] {
    color: var(--kiosk-text-secondary, #a0a0c0);
    font-size: 0.9rem;
}

.pref-value[b-ztbcdrvirr] {
    color: var(--kiosk-text, #ffffff);
    font-weight: 600;
}

/* Choice buttons */
.choice-buttons[b-ztbcdrvirr] {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
}

.choice-btn[b-ztbcdrvirr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 16px;
    background: var(--kiosk-surface, #1a1a2e);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.choice-btn:hover[b-ztbcdrvirr] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.choice-btn.primary[b-ztbcdrvirr] {
    border-color: var(--kiosk-primary, #00d4ff);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
}

.choice-btn.primary:hover[b-ztbcdrvirr] {
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
}

.choice-btn.secondary:hover[b-ztbcdrvirr] {
    border-color: var(--kiosk-text-secondary, #a0a0c0);
}

.choice-btn i[b-ztbcdrvirr] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.choice-btn.primary i[b-ztbcdrvirr] {
    color: var(--kiosk-primary, #00d4ff);
}

.choice-btn.secondary i[b-ztbcdrvirr] {
    color: var(--kiosk-text-secondary, #a0a0c0);
}

.btn-title[b-ztbcdrvirr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kiosk-text, #ffffff);
    margin-bottom: 0.25rem;
}

.btn-subtitle[b-ztbcdrvirr] {
    font-size: 0.875rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

/* No saved preferences state */
.no-saved-preferences[b-ztbcdrvirr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 3rem;
}

.no-saved-preferences i[b-ztbcdrvirr] {
    font-size: 4rem;
    color: var(--kiosk-primary, #00d4ff);
    opacity: 0.8;
}

.no-saved-preferences h3[b-ztbcdrvirr] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--kiosk-text, #ffffff);
}

.no-saved-preferences p[b-ztbcdrvirr] {
    margin: 0;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

/* Responsive */
@media (max-width: 768px) {
    .kiosk-preferences-choice[b-ztbcdrvirr] {
        padding: 1rem;
    }

    .choice-buttons[b-ztbcdrvirr] {
        flex-direction: column;
    }

    .choice-btn[b-ztbcdrvirr] {
        padding: 1.5rem;
    }

    .choice-btn i[b-ztbcdrvirr] {
        font-size: 2rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPreferencesEntry.razor.rz.scp.css */
/* KioskPreferencesEntry.razor.css */

/* Content area */
.kiosk-preferences-content[b-xvbdikp5s4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    overflow-y: auto;
    min-height: 0;
}

/* Questions grid (show all mode) */
.questions-grid[b-xvbdikp5s4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
    flex: 1;
    align-content: start;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.question-card[b-xvbdikp5s4] {
    background: var(--kiosk-surface, #1a1a2e);
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.question-card.answered[b-xvbdikp5s4] {
    border-color: var(--kiosk-success, #00ff88);
}

.question-card .question-text[b-xvbdikp5s4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kiosk-text, #ffffff);
    margin-bottom: 1rem;
}

.question-card .question-image[b-xvbdikp5s4] {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.options-row[b-xvbdikp5s4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.option-btn[b-xvbdikp5s4] {
    flex: 1;
    min-width: 80px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 8px;
    background: transparent;
    color: var(--kiosk-text, #ffffff);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-btn:hover[b-xvbdikp5s4] {
    border-color: var(--kiosk-primary, #00d4ff);
    background: rgba(0, 212, 255, 0.1);
}

.option-btn.selected[b-xvbdikp5s4] {
    border-color: var(--kiosk-primary, #00d4ff);
    background: var(--kiosk-primary, #00d4ff);
    color: #000;
    font-weight: 600;
}

/* Single question view */
.single-question-view[b-xvbdikp5s4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.question-progress[b-xvbdikp5s4] {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;
}

.question-progress span[b-xvbdikp5s4] {
    display: block;
    color: var(--kiosk-text-secondary, #a0a0c0);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.progress-bar[b-xvbdikp5s4] {
    height: 4px;
    background: var(--kiosk-border, #2a2a4e);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-xvbdikp5s4] {
    height: 100%;
    background: var(--kiosk-primary, #00d4ff);
    transition: width 0.3s ease;
}

.question-content[b-xvbdikp5s4] {
    text-align: center;
    margin-bottom: 2rem;
}

.question-image-large[b-xvbdikp5s4] {
    max-width: 300px;
    max-height: 200px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    border-radius: 12px;
}

.question-text-large[b-xvbdikp5s4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kiosk-text, #ffffff);
    margin: 0 0 0.5rem 0;
}

.question-help[b-xvbdikp5s4] {
    color: var(--kiosk-text-secondary, #a0a0c0);
    font-size: 1rem;
    margin: 0;
}

/* Options grid for single question */
.options-grid[b-xvbdikp5s4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}

.option-card[b-xvbdikp5s4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 12px;
    background: var(--kiosk-surface, #1a1a2e);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
}

.option-card:hover[b-xvbdikp5s4] {
    border-color: var(--kiosk-primary, #00d4ff);
    transform: translateY(-2px);
}

.option-card.selected[b-xvbdikp5s4] {
    border-color: var(--kiosk-primary, #00d4ff);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.option-card img[b-xvbdikp5s4] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.option-label[b-xvbdikp5s4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kiosk-text, #ffffff);
    text-align: center;
}

.option-desc[b-xvbdikp5s4] {
    font-size: 0.85rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
    text-align: center;
    margin-top: 0.25rem;
}

.selected-icon[b-xvbdikp5s4] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--kiosk-primary, #00d4ff);
    font-size: 1.25rem;
}

/* Empty state */
.kiosk-empty-state[b-xvbdikp5s4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.kiosk-empty-state i[b-xvbdikp5s4] {
    font-size: 4rem;
    color: var(--kiosk-success, #00ff88);
    opacity: 0.8;
}

.kiosk-empty-state h3[b-xvbdikp5s4] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--kiosk-text, #ffffff);
}

.kiosk-empty-state p[b-xvbdikp5s4] {
    margin: 0;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

/* Loading state */
.kiosk-loading[b-xvbdikp5s4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.kiosk-loading p[b-xvbdikp5s4] {
    color: var(--kiosk-text-secondary, #a0a0c0);
}

/* Responsive */
@media (max-width: 768px) {
    .kiosk-preferences-content[b-xvbdikp5s4] {
        padding: 1rem;
    }

    .questions-grid[b-xvbdikp5s4] {
        grid-template-columns: 1fr;
    }

    .options-grid[b-xvbdikp5s4] {
        grid-template-columns: 1fr;
    }

    .question-text-large[b-xvbdikp5s4] {
        font-size: 1.5rem;
    }
}

/* Animation */
.option-card[b-xvbdikp5s4] {
    animation: fadeIn-b-xvbdikp5s4 0.3s ease-out;
}

@keyframes fadeIn-b-xvbdikp5s4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskPreferencesQR.razor.rz.scp.css */
/* KioskPreferencesQR.razor.css */

/* Use kiosk-selection-screen class (defined in parent) for consistent layout */

.qr-content[b-ov1ev1bn60] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    gap: 1.5rem;
    overflow-y: auto;
    min-height: 0; /* Allow content to scroll */
}

/* Drivers grid */
.drivers-grid[b-ov1ev1bn60] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    width: 100%;
    max-width: 1200px;
}

.driver-card[b-ov1ev1bn60] {
    background: var(--kiosk-surface, #1a1a2e);
    border: 2px solid var(--kiosk-border, #2a2a4e);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.driver-card.completed[b-ov1ev1bn60] {
    border-color: var(--kiosk-success, #00ff88);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%);
}

.driver-header[b-ov1ev1bn60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.simulator-badge[b-ov1ev1bn60] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--kiosk-primary, #00d4ff);
    color: #000;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.driver-name[b-ov1ev1bn60] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kiosk-text, #ffffff);
}

/* QR container */
.qr-container[b-ov1ev1bn60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.qr-placeholder[b-ov1ev1bn60] {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qr-placeholder img[b-ov1ev1bn60] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-instructions[b-ov1ev1bn60] {
    text-align: center;
}

.qr-instructions p[b-ov1ev1bn60] {
    margin: 0;
    color: var(--kiosk-text-secondary, #a0a0c0);
    font-size: 0.85rem;
}

.qr-url[b-ov1ev1bn60] {
    font-family: monospace;
    font-size: 0.75rem !important;
    color: var(--kiosk-primary, #00d4ff) !important;
    margin-top: 0.25rem !important;
}

/* Completed state */
.completed-indicator[b-ov1ev1bn60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    gap: 0.5rem;
}

.completed-indicator i[b-ov1ev1bn60] {
    font-size: 3rem;
    color: var(--kiosk-success, #00ff88);
    animation: checkmark-b-ov1ev1bn60 0.5s ease-out;
}

.completed-indicator span[b-ov1ev1bn60] {
    font-size: 1rem;
    color: var(--kiosk-success, #00ff88);
    font-weight: 600;
}

@keyframes checkmark-b-ov1ev1bn60 {
    from {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Countdown section - compact and at bottom of scrollable area */
.countdown-section[b-ov1ev1bn60] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: auto; /* Push to bottom of scroll area */
}

.countdown-ring[b-ov1ev1bn60] {
    position: relative;
    width: 80px;
    height: 80px;
}

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

.countdown-bg[b-ov1ev1bn60] {
    fill: none;
    stroke: var(--kiosk-border, #2a2a4e);
    stroke-width: 6;
}

.countdown-progress[b-ov1ev1bn60] {
    fill: none;
    stroke: var(--kiosk-primary, #00d4ff);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 282.74;
    transition: stroke-dashoffset 1s linear;
}

.countdown-text[b-ov1ev1bn60] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.countdown-number[b-ov1ev1bn60] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kiosk-text, #ffffff);
    line-height: 1;
}

.countdown-label[b-ov1ev1bn60] {
    display: block;
    font-size: 0.6rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
    text-transform: uppercase;
}

.countdown-message[b-ov1ev1bn60] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--kiosk-text-secondary, #a0a0c0);
}

/* Responsive - smaller viewport heights */
@media (max-height: 800px) {
    .qr-content[b-ov1ev1bn60] {
        padding: 1rem;
        gap: 1rem;
    }
    
    .drivers-grid[b-ov1ev1bn60] {
        gap: 1rem;
    }
    
    .driver-card[b-ov1ev1bn60] {
        padding: 1rem;
    }
    
    .qr-placeholder[b-ov1ev1bn60] {
        width: 100px;
        height: 100px;
    }
    
    .countdown-ring[b-ov1ev1bn60] {
        width: 60px;
        height: 60px;
    }
    
    .countdown-number[b-ov1ev1bn60] {
        font-size: 1.25rem;
    }
    
    .completed-indicator[b-ov1ev1bn60] {
        min-height: 120px;
    }
    
    .completed-indicator i[b-ov1ev1bn60] {
        font-size: 2.5rem;
    }
}

@media (max-height: 700px) {
    .qr-content[b-ov1ev1bn60] {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .driver-card[b-ov1ev1bn60] {
        padding: 0.75rem;
    }
    
    .qr-placeholder[b-ov1ev1bn60] {
        width: 80px;
        height: 80px;
    }
    
    .countdown-ring[b-ov1ev1bn60] {
        width: 50px;
        height: 50px;
    }
    
    .countdown-number[b-ov1ev1bn60] {
        font-size: 1rem;
    }
    
    .completed-indicator[b-ov1ev1bn60] {
        min-height: 100px;
    }
    
    .completed-indicator i[b-ov1ev1bn60] {
        font-size: 2rem;
    }
    
    .driver-name[b-ov1ev1bn60] {
        font-size: 1rem;
    }
}

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

    .driver-card[b-ov1ev1bn60] {
        padding: 1rem;
    }

    .qr-placeholder[b-ov1ev1bn60] {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 600px) {
    .drivers-grid[b-ov1ev1bn60] {
        grid-template-columns: 1fr;
    }
}

/* Loading state */
.kiosk-loading[b-ov1ev1bn60] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.kiosk-loading p[b-ov1ev1bn60] {
    color: var(--kiosk-text-secondary, #a0a0c0);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskQueueBanner.razor.rz.scp.css */
/* KioskQueueBanner.razor.css — P7 named-kiosk "Up Next" banner */

.scm-kiosk-queue-banner[b-za97wilhs0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000; /* above content, below timeout/achievement modals (10000) */
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.97));
    color: #fff;
    padding: 14px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    border-bottom: 3px solid var(--kiosk-accent, #f59e0b);
    display: flex;
    align-items: center;
    gap: 24px;
    animation: queueSlideDown-b-za97wilhs0 0.35s ease;
    pointer-events: none; /* purely informational; never steals taps from the flow */
}

@keyframes queueSlideDown-b-za97wilhs0 {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.scm-kiosk-queue-banner__title[b-za97wilhs0] {
    flex: 0 0 auto;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.scm-kiosk-queue-banner__list[b-za97wilhs0] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
    flex: 1 1 auto;
}

.scm-kiosk-queue-banner__item[b-za97wilhs0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 1.15rem;
    white-space: nowrap;
}

.scm-kiosk-queue-banner__item.is-highlighted[b-za97wilhs0] {
    background: var(--kiosk-accent, #f59e0b);
    color: #1f2937;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.scm-kiosk-queue-banner__pos[b-za97wilhs0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    font-weight: 700;
    font-size: 1rem;
}

.scm-kiosk-queue-banner__item.is-highlighted .scm-kiosk-queue-banner__pos[b-za97wilhs0] {
    background: rgba(0, 0, 0, 0.18);
    color: #1f2937;
}

.scm-kiosk-queue-banner__label[b-za97wilhs0] {
    font-weight: 600;
}

.scm-kiosk-queue-banner__detail[b-za97wilhs0] {
    opacity: 0.8;
    font-size: 0.95rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskRegister.razor.rz.scp.css */
/* KioskRegister.razor.css */

.kiosk-register[b-u8p5gdn1ga] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

/* Form group spacing - key fix for vertical spacing */
.kiosk-register .kiosk-form-group[b-u8p5gdn1ga] {
    margin-bottom: 1.75rem;
}

.kiosk-hint[b-u8p5gdn1ga] {
    font-size: 0.8rem;
    color: var(--kiosk-text-muted);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.kiosk-label-required[b-u8p5gdn1ga] {
    color: var(--kiosk-error, #ef4444);
    margin-left: 2px;
}

.kiosk-field-info[b-u8p5gdn1ga] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 12px 14px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--kiosk-text-muted);
    line-height: 1.5;
}

.kiosk-field-info i[b-u8p5gdn1ga] {
    color: var(--kiosk-primary, #3b82f6);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.kiosk-field-info strong[b-u8p5gdn1ga] {
    color: var(--kiosk-text);
    font-weight: 600;
}

/* Ensure screen header has proper spacing */
.kiosk-register .kiosk-screen-header[b-u8p5gdn1ga] {
    margin-bottom: 2rem;
}

/* Form spacing */
.kiosk-register .kiosk-form[b-u8p5gdn1ga] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Button spacing */
.kiosk-register .kiosk-btn-primary[b-u8p5gdn1ga] {
    margin-top: 1rem;
}

/* Footer spacing */
.kiosk-register .kiosk-form-footer[b-u8p5gdn1ga] {
    margin-top: 1.5rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskSessionActive.razor.rz.scp.css */
/* KioskSessionActive.razor.css - Premium active session screen */

.session-active-container[b-xgxgrjoso2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    text-align: center;
    gap: 24px;
}

/* Ambient glow effect */
.session-glow[b-xgxgrjoso2] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, rgba(59, 130, 246, 0.15) 40%, transparent 70%);
    opacity: 0.5;
    animation: session-glow-pulse-b-xgxgrjoso2 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes session-glow-pulse-b-xgxgrjoso2 {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -60%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -60%) scale(1.05); }
}

/* Icon */
.session-icon-wrapper[b-xgxgrjoso2] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-icon[b-xgxgrjoso2] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kiosk-success) 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.35);
}

.session-icon i[b-xgxgrjoso2] {
    font-size: 2.5rem;
    color: white;
}

/* Typography */
.session-title[b-xgxgrjoso2] {
    font-family: var(--kiosk-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.session-subtitle[b-xgxgrjoso2] {
    font-size: 1.25rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    font-weight: 500;
}

/* Timer card */
.session-timer-card[b-xgxgrjoso2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 48px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.timer-label[b-xgxgrjoso2] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--kiosk-text-dim);
}

.timer-value[b-xgxgrjoso2] {
    font-family: var(--kiosk-font-display);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* Hint text */
.session-hint[b-xgxgrjoso2] {
    font-size: 1rem;
    color: var(--kiosk-text-dim);
    margin: 0;
    font-weight: 400;
    max-width: 400px;
}

/* Done button - styled like other kiosk buttons */
.session-done-btn[b-xgxgrjoso2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 48px;
    min-height: var(--kiosk-button-height);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    background: transparent;
    color: var(--kiosk-text);
    font-family: var(--kiosk-font);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.session-done-btn:hover[b-xgxgrjoso2] {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
    box-shadow: 0 0 20px var(--kiosk-glow-primary);
}

.session-done-btn:active[b-xgxgrjoso2] {
    transform: scale(0.98);
}

.session-done-btn i[b-xgxgrjoso2] {
    font-size: 1.3rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskSessionDispatched.razor.rz.scp.css */
/* KioskSessionDispatched.razor.css - Multi-sim kiosk dispatch confirmation screen */
/* Follows the same visual pattern as KioskSessionActive */

.session-active-container[b-vd9uv4ykyt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    text-align: center;
    gap: 24px;
}

/* Ambient glow effect */
.session-glow[b-vd9uv4ykyt] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, rgba(59, 130, 246, 0.15) 40%, transparent 70%);
    opacity: 0.5;
    animation: session-glow-pulse-b-vd9uv4ykyt 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes session-glow-pulse-b-vd9uv4ykyt {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -60%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -60%) scale(1.05); }
}

/* Icon */
.session-icon-wrapper[b-vd9uv4ykyt] {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-icon[b-vd9uv4ykyt] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kiosk-success) 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.35);
}

.session-icon.session-icon-success[b-vd9uv4ykyt] {
    background: linear-gradient(135deg, var(--kiosk-accent, #00c853) 0%, var(--kiosk-success, #16a34a) 100%);
    box-shadow: 0 8px 32px rgba(0, 200, 83, 0.35);
}

.session-icon i[b-vd9uv4ykyt] {
    font-size: 2.5rem;
    color: white;
}

/* Typography */
.session-title[b-vd9uv4ykyt] {
    font-family: var(--kiosk-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--kiosk-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.session-subtitle[b-vd9uv4ykyt] {
    font-size: 1.25rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    font-weight: 500;
}

/* Simulator assignment chips */
.simulator-assignments[b-vd9uv4ykyt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.sim-chip[b-vd9uv4ykyt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    color: var(--kiosk-text);
    font-size: 1.1rem;
    font-weight: 500;
}

.sim-chip i[b-vd9uv4ykyt] {
    color: var(--kiosk-primary);
}

.sim-chip-driver[b-vd9uv4ykyt] {
    opacity: 0.7;
}

/* Hint text */
.session-hint[b-vd9uv4ykyt] {
    font-size: 1.1rem;
    color: var(--kiosk-text-dim);
    margin: 0;
    font-weight: 400;
    max-width: 500px;
}

/* Done button */
.session-done-btn[b-vd9uv4ykyt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 48px;
    min-height: var(--kiosk-button-height);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    background: transparent;
    color: var(--kiosk-text);
    font-family: var(--kiosk-font);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-done-btn:hover[b-vd9uv4ykyt] {
    background: var(--kiosk-surface-hover);
    border-color: var(--kiosk-primary);
    box-shadow: 0 0 20px var(--kiosk-glow-primary);
}

.session-done-btn:active[b-vd9uv4ykyt] {
    transform: scale(0.98);
}

/* Auto-return countdown hint */
.session-countdown-hint[b-vd9uv4ykyt] {
    font-size: 0.9rem;
    color: var(--kiosk-text-dim);
    opacity: 0.5;
    margin: 0;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskSessionSummary.razor.rz.scp.css */
/* KioskSessionSummary.razor.css - Professional session summary styling */

/* Launch error banner (failed session start) */
.form-error.launch-error[b-3fw2yma61o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin: 0 auto 16px;
    max-width: 1200px;
    width: 100%;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--kiosk-error, #ef4444);
    border-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-error, #ef4444);
    flex-shrink: 0;
}

.form-error.launch-error i[b-3fw2yma61o] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Main content - ensure it fits within available space */
.summary-main-content[b-3fw2yma61o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 48px;
    overflow: hidden;
    min-height: 0; /* Important for flex child to respect parent bounds */
}

/* Two-column professional layout */
.summary-layout[b-3fw2yma61o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    max-height: 100%;
}

.summary-left[b-3fw2yma61o],
.summary-right[b-3fw2yma61o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

/* Hero Section - Vehicle showcase (landscape images) */
.summary-hero[b-3fw2yma61o] {
    flex-shrink: 0;
}

.hero-image-container[b-3fw2yma61o] {
    position: relative;
    width: 100%;
    /* 3:1 aspect ratio works well for vehicle thumbnails (72px tall, ~200px wide) */
    aspect-ratio: 3 / 1;
    border-radius: var(--kiosk-radius-lg, 16px);
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-image[b-3fw2yma61o] {
    width: 100%;
    height: 100%;
    /* Use contain to show full vehicle image without cropping */
    object-fit: contain;
    object-position: center;
}

.hero-placeholder[b-3fw2yma61o] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary) 0%, var(--kiosk-secondary, #6366f1) 100%);
}

.hero-placeholder i[b-3fw2yma61o] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
}

.hero-overlay[b-3fw2yma61o] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 80%);
    display: flex;
    align-items: flex-end;
    padding: 16px 20px;
}

.hero-content[b-3fw2yma61o] {
    color: white;
}

.hero-label[b-3fw2yma61o] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin-bottom: 2px;
    display: block;
}

.hero-title[b-3fw2yma61o] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.hero-subtitle[b-3fw2yma61o] {
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.85;
}

/* Summary Cards - Clean, professional styling */
.summary-card[b-3fw2yma61o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--kiosk-surface);
    border: 1px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius, 12px);
    transition: all 0.2s ease;
}

.summary-card.featured[b-3fw2yma61o] {
    background: linear-gradient(135deg, var(--kiosk-surface) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: var(--kiosk-primary);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}

.summary-card.package-card[b-3fw2yma61o] {
    padding: 14px 18px;
}

/* Card Icon */
.card-icon[b-3fw2yma61o] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-surface-hover, rgba(255,255,255,0.08));
    border-radius: 10px;
}

.summary-card.featured .card-icon[b-3fw2yma61o] {
    background: var(--kiosk-primary);
}

.card-icon i[b-3fw2yma61o] {
    font-size: 1.1rem;
    color: var(--kiosk-text-muted);
}

.summary-card.featured .card-icon i[b-3fw2yma61o] {
    color: white;
}

/* Card Content */
.card-content[b-3fw2yma61o] {
    flex: 1;
    min-width: 0;
}

.card-label[b-3fw2yma61o] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kiosk-text-muted);
    margin-bottom: 1px;
    display: block;
}

.card-title[b-3fw2yma61o] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--kiosk-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-description[b-3fw2yma61o] {
    font-size: 0.75rem;
    color: var(--kiosk-text-muted);
    margin: 2px 0 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-badge[b-3fw2yma61o] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--kiosk-primary);
    color: white;
    border-radius: 10px;
    margin-top: 2px;
}

.card-meta[b-3fw2yma61o] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.meta-item[b-3fw2yma61o] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--kiosk-text-muted);
}

.meta-item i[b-3fw2yma61o] {
    font-size: 0.85rem;
    color: var(--kiosk-primary);
}

/* Card Price */
.card-price[b-3fw2yma61o] {
    flex-shrink: 0;
    text-align: right;
}

.price-amount[b-3fw2yma61o] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kiosk-success, #22c55e);
}

/* Card Thumbnail - for game icon etc */
.card-thumbnail[b-3fw2yma61o] {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--kiosk-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumbnail img[b-3fw2yma61o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Track thumbnail - square images (200x200), use cover for square container */
.card-thumbnail.track-thumbnail[b-3fw2yma61o] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%);
}

.card-thumbnail.track-thumbnail img[b-3fw2yma61o] {
    object-fit: cover;
}

/* Footer Total - Professional styling */
.summary-total[b-3fw2yma61o] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    border: 1px solid var(--kiosk-border);
}

.total-label[b-3fw2yma61o] {
    font-size: 0.9rem;
    color: var(--kiosk-text-muted);
    font-weight: 500;
}

.total-amount[b-3fw2yma61o] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--kiosk-success, #22c55e);
}

/* Responsive - Portrait/smaller screens */
@media (max-width: 900px), (max-height: 700px) {
    .summary-main-content[b-3fw2yma61o] {
        padding: 12px 20px;
        overflow-y: auto;
        justify-content: flex-start;
    }
    
    .summary-layout[b-3fw2yma61o] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .hero-image-container[b-3fw2yma61o] {
        aspect-ratio: 4 / 1;
    }
    
    .hero-title[b-3fw2yma61o] {
        font-size: 1.2rem;
    }
    
    .summary-card[b-3fw2yma61o] {
        padding: 10px 14px;
    }
    
    .card-icon[b-3fw2yma61o] {
        width: 36px;
        height: 36px;
    }
    
    .card-thumbnail.track-thumbnail[b-3fw2yma61o] {
        width: 48px;
        height: 48px;
    }
    
    .total-amount[b-3fw2yma61o] {
        font-size: 1.4rem;
    }
}

/* Large widescreen */
@media (min-width: 1400px) and (min-height: 900px) {
    .summary-main-content[b-3fw2yma61o] {
        padding: 24px 64px;
    }
    
    .summary-layout[b-3fw2yma61o] {
        gap: 32px;
        max-width: 1400px;
    }
    
    .hero-image-container[b-3fw2yma61o] {
        aspect-ratio: 3.5 / 1;
    }
    
    .hero-title[b-3fw2yma61o] {
        font-size: 1.6rem;
    }
    
    .card-title[b-3fw2yma61o] {
        font-size: 1.1rem;
    }
    
    .price-amount[b-3fw2yma61o] {
        font-size: 1.5rem;
    }
    
    .total-amount[b-3fw2yma61o] {
        font-size: 2rem;
    }
    
    .card-thumbnail.track-thumbnail[b-3fw2yma61o] {
        width: 64px;
        height: 64px;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskSessionTypeSelection.razor.rz.scp.css */
/* KioskSessionTypeSelection.razor.css */

.kiosk-session-type-selection[b-6hqe3djjaw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
}

/* Header */
.kiosk-header[b-6hqe3djjaw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kiosk-border, rgba(255,255,255,0.1));
}

.kiosk-back-btn[b-6hqe3djjaw] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-surface, #1e1e2e);
    border: 1px solid var(--kiosk-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--kiosk-text, #fff);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kiosk-back-btn:hover[b-6hqe3djjaw] {
    background: var(--kiosk-surface-hover, #2a2a3e);
    transform: scale(1.05);
}

.header-content[b-6hqe3djjaw] {
    flex: 1;
}

.kiosk-title[b-6hqe3djjaw] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--kiosk-text, #fff);
}

.kiosk-subtitle[b-6hqe3djjaw] {
    font-size: 1rem;
    color: var(--kiosk-text-muted, rgba(255,255,255,0.6));
    margin: 4px 0 0 0;
}

.step-indicator[b-6hqe3djjaw] {
    font-size: 0.875rem;
    color: var(--kiosk-text-muted, rgba(255,255,255,0.6));
    background: var(--kiosk-surface, #1e1e2e);
    padding: 8px 16px;
    border-radius: 20px;
}

/* Content Area */
.kiosk-content-area[b-6hqe3djjaw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Loading */
.loading-container[b-6hqe3djjaw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--kiosk-text-muted, rgba(255,255,255,0.6));
}

.kiosk-spinner[b-6hqe3djjaw] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--kiosk-surface, #1e1e2e);
    border-top-color: var(--kiosk-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-6hqe3djjaw 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-6hqe3djjaw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    color: var(--kiosk-text-muted, rgba(255,255,255,0.6));
}

.empty-state i[b-6hqe3djjaw] {
    font-size: 4rem;
    opacity: 0.5;
}

.empty-state h2[b-6hqe3djjaw] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--kiosk-text, #fff);
}

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

/* Session Type Grid */
.session-type-grid[b-6hqe3djjaw] {
    display: grid;
    gap: 24px;
    padding: 8px;
}

.session-type-grid.single-tile[b-6hqe3djjaw] {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
}

.session-type-grid.two-tiles[b-6hqe3djjaw] {
    grid-template-columns: repeat(2, 1fr);
}

.session-type-grid.three-tiles[b-6hqe3djjaw] {
    grid-template-columns: repeat(3, 1fr);
}

.session-type-grid.multi-tiles[b-6hqe3djjaw] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Session Type Tile */
.session-type-tile[b-6hqe3djjaw] {
    display: flex;
    flex-direction: column;
    background: var(--kiosk-surface, #1e1e2e);
    border: 2px solid var(--kiosk-border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.session-type-tile:hover:not(.unavailable)[b-6hqe3djjaw] {
    border-color: var(--kiosk-primary, #3b82f6);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
}

.session-type-tile.selected[b-6hqe3djjaw] {
    border-color: var(--kiosk-primary, #3b82f6);
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15), 
        rgba(139, 92, 246, 0.15));
}

.session-type-tile.unavailable[b-6hqe3djjaw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tile Icon */
.tile-icon[b-6hqe3djjaw] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    border-radius: 20px;
    margin-bottom: 16px;
}

.tile-icon i[b-6hqe3djjaw] {
    font-size: 2.5rem;
    color: white;
}

.tile-icon img[b-6hqe3djjaw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Tile Content */
.tile-content[b-6hqe3djjaw] {
    flex: 1;
}

.tile-name[b-6hqe3djjaw] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--kiosk-text, #fff);
}

.tile-description[b-6hqe3djjaw] {
    font-size: 0.9rem;
    color: var(--kiosk-text-muted, rgba(255,255,255,0.6));
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tile Availability */
.tile-availability[b-6hqe3djjaw] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kiosk-border, rgba(255,255,255,0.1));
}

.tile-availability span[b-6hqe3djjaw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.tile-availability .available[b-6hqe3djjaw] {
    color: var(--kiosk-success, #22c55e);
}

.tile-availability .unavailable[b-6hqe3djjaw] {
    color: var(--kiosk-text-muted, rgba(255,255,255,0.5));
}

/* Select Indicator */
.tile-select-indicator[b-6hqe3djjaw] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-primary, #3b82f6);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transition: all 0.3s ease;
}

.session-type-tile:hover:not(.unavailable) .tile-select-indicator[b-6hqe3djjaw] {
    opacity: 1;
}

.session-type-tile.selected .tile-select-indicator[b-6hqe3djjaw] {
    opacity: 1;
    background: var(--kiosk-success, #22c55e);
}

/* Responsive */
@media (max-width: 768px) {
    .session-type-grid.two-tiles[b-6hqe3djjaw],
    .session-type-grid.three-tiles[b-6hqe3djjaw] {
        grid-template-columns: 1fr;
    }
    
    .kiosk-title[b-6hqe3djjaw] {
        font-size: 1.5rem;
    }
    
    .session-type-tile[b-6hqe3djjaw] {
        min-height: auto;
        padding: 20px;
    }
    
    .tile-icon[b-6hqe3djjaw] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }
    
    .tile-icon i[b-6hqe3djjaw] {
        font-size: 1.75rem;
    }
    
    .tile-name[b-6hqe3djjaw] {
        font-size: 1.25rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskShared.razor.rz.scp.css */
/* Shared kiosk selection screen styles */

[b-9mx9zihhc8] .kiosk-selection-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[b-9mx9zihhc8] .placeholder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 40px;
}

[b-9mx9zihhc8] .placeholder-content > i {
    font-size: 4rem;
    color: var(--kiosk-primary);
    opacity: 0.7;
}

[b-9mx9zihhc8] .placeholder-content h3 {
    font-size: 1.5rem;
    margin: 0;
}

[b-9mx9zihhc8] .placeholder-content p {
    color: var(--kiosk-text-muted);
    margin: 0;
}

[b-9mx9zihhc8] .placeholder-content .hint {
    font-size: 0.875rem;
    opacity: 0.7;
}

[b-9mx9zihhc8] .placeholder-content .amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kiosk-primary);
}

[b-9mx9zihhc8] .placeholder-content .kiosk-btn {
    margin-top: 24px;
    max-width: 300px;
}

[b-9mx9zihhc8] .payment-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
    max-width: 300px;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskSimulatorSelection.razor.rz.scp.css */
/* KioskSimulatorSelection.razor.css */

/* Loading state */
.kiosk-loading[b-siel01v3lk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.kiosk-spinner.large[b-siel01v3lk] {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.kiosk-loading p[b-siel01v3lk] {
    color: var(--kiosk-text-muted);
    font-size: 1rem;
}

/* Empty state */
.kiosk-empty-state[b-siel01v3lk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 40px;
}

.kiosk-empty-state i[b-siel01v3lk] {
    font-size: 4rem;
    color: var(--kiosk-text-muted);
    opacity: 0.5;
}

.kiosk-empty-state h3[b-siel01v3lk] {
    font-size: 1.5rem;
    margin: 0;
}

.kiosk-empty-state p[b-siel01v3lk] {
    color: var(--kiosk-text-muted);
    margin: 0;
}

/* Simulator grid */
.simulator-grid[b-siel01v3lk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    flex: 1;
    align-content: start;
    padding: 24px;
}

.simulator-card[b-siel01v3lk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: var(--kiosk-surface);
    border: 2px solid var(--kiosk-border);
    border-radius: var(--kiosk-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.simulator-card:hover:not(:disabled)[b-siel01v3lk] {
    background: var(--kiosk-surface-hover);
}

.simulator-card.selected[b-siel01v3lk] {
    border-color: var(--kiosk-primary);
    background: rgba(59, 130, 246, 0.1);
}

.simulator-card.unavailable[b-siel01v3lk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Offline simulator card */
.simulator-card.offline[b-siel01v3lk] {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(100, 116, 139, 0.1);
    border-color: var(--kiosk-text-dim);
}

.sim-icon[b-siel01v3lk] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-surface-hover);
    border-radius: 16px;
    position: relative;
}

.simulator-card.selected .sim-icon[b-siel01v3lk] {
    background: var(--kiosk-primary);
}

.sim-icon i[b-siel01v3lk] {
    font-size: 2rem;
    color: var(--kiosk-text);
}

.simulator-card.selected .sim-icon i[b-siel01v3lk] {
    color: white;
}

/* Offline overlay on icon */
.offline-overlay[b-siel01v3lk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
}

.offline-overlay i[b-siel01v3lk] {
    font-size: 1.5rem;
    color: var(--kiosk-error, #ef4444);
}

.sim-info[b-siel01v3lk] {
    text-align: center;
}

/* Fix: Ensure simulator name and status text are readable (white) */
.sim-info h4[b-siel01v3lk] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--kiosk-text, #f8fafc);
}

.sim-status[b-siel01v3lk] {
    font-size: 0.875rem;
    font-weight: 500;
}

.sim-status.available[b-siel01v3lk] {
    color: var(--kiosk-success);
}

.sim-status.in-use[b-siel01v3lk] {
    color: var(--kiosk-warning);
}

/* Fix: Offline status text should be clearly visible */
.sim-status.offline[b-siel01v3lk] {
    color: var(--kiosk-error, #ef4444);
}

.selected-badge[b-siel01v3lk] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-primary);
    border-radius: 50%;
}

.selected-badge i[b-siel01v3lk] {
    color: white;
    font-size: 1rem;
}

/* Selection summary */
.selection-summary[b-siel01v3lk] {
    padding: 16px;
    text-align: center;
    color: var(--kiosk-primary);
    font-weight: 500;
}

/* Actions */
.kiosk-form-actions[b-siel01v3lk] {
    padding-top: 24px;
    border-top: 1px solid var(--kiosk-border);
    margin-top: auto;
}

/* Fix: Warning alert - centered with proper padding */
.kiosk-alert[b-siel01v3lk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    margin: 0 24px 16px 24px;
    border-radius: var(--kiosk-radius, 12px);
    text-align: center;
}

.kiosk-alert.warning[b-siel01v3lk] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--kiosk-warning, #f59e0b);
}

.kiosk-alert.warning i[b-siel01v3lk] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kiosk-alert.warning span[b-siel01v3lk] {
    font-size: 1rem;
    font-weight: 500;
}

/* Refusal for a selection no game can run on (GuestRefusal is a child component, hence ::deep) */
.kiosk-simulator-refusal[b-siel01v3lk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    margin: 0 24px 16px 24px;
    border-radius: var(--kiosk-radius, 12px);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--kiosk-warning, #f59e0b);
    text-align: center;
}

.kiosk-simulator-refusal > i[b-siel01v3lk] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kiosk-simulator-refusal[b-siel01v3lk]  p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskTimeoutOverlay.razor.rz.scp.css */
/* KioskTimeoutOverlay.razor.css */

.kiosk-timeout-overlay[b-nv45m5qko3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-nv45m5qko3 0.3s ease;
}

@keyframes fadeIn-b-nv45m5qko3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.timeout-content[b-nv45m5qko3] {
    text-align: center;
    padding: 48px;
    max-width: 400px;
}

.timeout-icon[b-nv45m5qko3] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kiosk-warning);
    border-radius: 50%;
    margin: 0 auto 24px;
    animation: pulse-b-nv45m5qko3 1s ease-in-out infinite;
}

.timeout-icon i[b-nv45m5qko3] {
    font-size: 3rem;
    color: white;
}

@keyframes pulse-b-nv45m5qko3 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.timeout-content h2[b-nv45m5qko3] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--kiosk-text, #ffffff);
}

.timeout-content p[b-nv45m5qko3] {
    font-size: 1rem;
    color: var(--kiosk-text-muted, #a0a0a0);
    margin: 0;
}

.countdown[b-nv45m5qko3] {
    font-size: 5rem;
    font-weight: 700;
    color: var(--kiosk-warning, #f59e0b);
    line-height: 1;
    margin: 16px 0 0;
}

.countdown-label[b-nv45m5qko3] {
    font-size: 1rem;
    color: var(--kiosk-text-muted, #a0a0a0);
    margin: 0 0 52px 0; /* Increased from 32px to 52px (added 20px) */
}

.timeout-content .kiosk-btn[b-nv45m5qko3] {
    max-width: 280px;
    margin: 0 auto;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskTrackSelection.razor.rz.scp.css */
/* 
 * KioskTrackSelection.razor.css
 * Track selection screen styles.
 */

.kiosk-selection-screen[b-38xv91cvbw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Important for flex child scrolling */
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskVehicleSelection.razor.rz.scp.css */
/* 
 * KioskVehicleSelection.razor.css
 * Vehicle selection screen styles.
 */

.kiosk-selection-screen[b-mxfc7ujcu6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Important for flex child scrolling */
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskWaiver.razor.rz.scp.css */
/* KioskWaiver.razor.css */

.kiosk-waiver[b-9acp076dkh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 16px;
    min-height: 0;
}

.kiosk-waiver > .kiosk-screen-header[b-9acp076dkh] {
    flex-shrink: 0;
}

.kiosk-waiver > .kiosk-screen-header .waiver-progress[b-9acp076dkh] {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--kiosk-surface, rgba(255, 255, 255, 0.08));
    color: var(--kiosk-text-muted, #b0b0b0);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.waiver-loading[b-9acp076dkh],
.waiver-error[b-9acp076dkh],
.waiver-not-required[b-9acp076dkh],
.waiver-already-signed[b-9acp076dkh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 48px;
}

.waiver-loading .spinner[b-9acp076dkh],
.waiver-error i[b-9acp076dkh],
.waiver-not-required i[b-9acp076dkh],
.waiver-already-signed i[b-9acp076dkh] {
    font-size: 3rem;
    color: var(--kiosk-primary);
}

.waiver-error i[b-9acp076dkh] {
    color: var(--kiosk-warning);
}

.waiver-already-signed i[b-9acp076dkh] {
    color: var(--kiosk-success);
}

.waiver-content[b-9acp076dkh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    padding-bottom: 16px;
}

.waiver-text[b-9acp076dkh] {
    flex-shrink: 0;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    padding: 24px;
    border: 1px solid var(--kiosk-border);
}

.waiver-text h3[b-9acp076dkh] {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin: 0 0 8px 0;
}

.waiver-subtitle[b-9acp076dkh] {
    flex-shrink: 0;
    color: var(--kiosk-text-muted);
    margin: 0 0 16px 0;
}

.waiver-scroll-area[b-9acp076dkh] {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--kiosk-text);
}

.waiver-scroll-area p[b-9acp076dkh] {
    margin: 0 0 16px 0;
}

.waiver-scroll-area[b-9acp076dkh]::-webkit-scrollbar {
    width: 6px;
}

.waiver-scroll-area[b-9acp076dkh]::-webkit-scrollbar-thumb {
    background: var(--kiosk-border);
    border-radius: 3px;
}

/* Signature Section */
/* Signature Section */
.signature-section[b-9acp076dkh] {
    flex-shrink: 0;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    padding: 20px;
    border: 1px solid var(--kiosk-border);
}

.signature-section h4[b-9acp076dkh] {
    font-size: 1.1rem;
    margin: 0 0 4px 0;
}

.signature-instructions[b-9acp076dkh] {
    color: var(--kiosk-text-muted);
    font-size: 0.9rem;
    margin: 0 0 12px 0;
}

.signature-container[b-9acp076dkh] {
    background: #ffffff;
    border: 2px solid var(--kiosk-border);
    border-radius: 8px;
    overflow: hidden;
    height: 150px;
}

/* The canvas fills the fixed-height box above. touch-action is set inline on the element too,
   because without it a finger drag scrolls the page instead of drawing. */
.signature-canvas[b-9acp076dkh] {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.signature-actions[b-9acp076dkh] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.kiosk-btn-sm[b-9acp076dkh] {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Checkbox */
.waiver-agreement[b-9acp076dkh] {
    flex-shrink: 0;
}

.kiosk-checkbox[b-9acp076dkh] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    padding: 16px 20px;
    background: var(--kiosk-surface);
    border-radius: var(--kiosk-radius);
    border: 2px solid var(--kiosk-border);
    transition: border-color 0.2s;
}

.kiosk-checkbox:has(input:checked)[b-9acp076dkh] {
    border-color: var(--kiosk-primary);
}

.kiosk-checkbox input[b-9acp076dkh] {
    display: none;
}

.checkbox-mark[b-9acp076dkh] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--kiosk-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.kiosk-checkbox input:checked + .checkbox-mark[b-9acp076dkh] {
    background: var(--kiosk-primary);
    border-color: var(--kiosk-primary);
}

.kiosk-checkbox input:checked + .checkbox-mark[b-9acp076dkh]::after {
    content: '\2713'; /* Unicode checkmark ? */
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
}

.checkbox-label[b-9acp076dkh] {
    font-size: 1rem;
    color: var(--kiosk-text);
}

/* Spinner for signing */
.spinner-border-sm[b-9acp076dkh] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Submit button - must never be pushed offscreen */
.waiver-content > .kiosk-btn-primary[b-9acp076dkh] {
    flex-shrink: 0;
}

/* Expired / guardian notices — inline callouts above the waiver text */
.waiver-expired-notice[b-9acp076dkh],
.waiver-guardian-notice[b-9acp076dkh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--kiosk-radius);
    font-size: 0.95rem;
    line-height: 1.4;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.waiver-expired-notice[b-9acp076dkh] {
    background: color-mix(in srgb, var(--kiosk-warning) 15%, transparent);
    border: 1px solid var(--kiosk-warning);
    color: var(--kiosk-text);
}

.waiver-guardian-notice[b-9acp076dkh] {
    background: color-mix(in srgb, var(--kiosk-primary) 12%, transparent);
    border: 1px solid var(--kiosk-primary);
    color: var(--kiosk-text);
}

.waiver-expired-notice i[b-9acp076dkh],
.waiver-guardian-notice i[b-9acp076dkh] {
    font-size: 1.25rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.waiver-expired-notice i[b-9acp076dkh] {
    color: var(--kiosk-warning);
}

.waiver-guardian-notice i[b-9acp076dkh] {
    color: var(--kiosk-primary);
}

/* Inline submit/validation error (keeps the guardian form visible; distinct from full-screen load error) */
.waiver-inline-error[b-9acp076dkh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--kiosk-radius);
    background: color-mix(in srgb, var(--kiosk-danger, #dc3545) 12%, transparent);
    border: 1px solid var(--kiosk-danger, #dc3545);
    color: var(--kiosk-text);
    font-size: 0.95rem;
    line-height: 1.4;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.waiver-inline-error i[b-9acp076dkh] {
    font-size: 1.25rem;
    line-height: 1.2;
    flex-shrink: 0;
    color: var(--kiosk-danger, #dc3545);
}

/* Guardian name field */
.waiver-guardian-field[b-9acp076dkh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 12px;
}

.kiosk-field-label[b-9acp076dkh] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kiosk-text);
}

[b-9acp076dkh] .kiosk-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.05rem;
    /* The input is always a white field, so pin dark text explicitly — the kiosk theme's
       --kiosk-text is near-white in dark mode, which rendered typed text invisible. */
    color: #1f2937;
    caret-color: #1f2937;
    background: #ffffff;
    border: 2px solid var(--kiosk-border);
    border-radius: 8px;
    transition: border-color 0.2s;
}

[b-9acp076dkh] .kiosk-input::placeholder {
    color: #6b7280;
}

[b-9acp076dkh] .kiosk-input:focus {
    outline: none;
    border-color: var(--kiosk-primary);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/KioskWelcome.razor.rz.scp.css */
/* KioskWelcome.razor.css */

.kiosk-welcome[b-u93xsceryf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    gap: 48px;
}

.welcome-header[b-u93xsceryf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.logo-area[b-u93xsceryf] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    border-radius: 24px;
    margin-bottom: 16px;
}

.logo-area i[b-u93xsceryf] {
    font-size: 4rem;
    color: white;
}

.welcome-title[b-u93xsceryf] {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--kiosk-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.sim-center-name[b-u93xsceryf] {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-actions[b-u93xsceryf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 400px;
}

/* ===== Kiosk Button Styles ===== */
.kiosk-btn[b-u93xsceryf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: var(--kiosk-button-height, 56px);
    padding: 16px 24px;
    border: none;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.kiosk-btn i[b-u93xsceryf] {
    font-size: 1.5rem;
}

.kiosk-btn-primary[b-u93xsceryf] {
    background: linear-gradient(135deg, var(--kiosk-primary), var(--kiosk-secondary));
    color: white;
}

.kiosk-btn-primary:hover[b-u93xsceryf],
.kiosk-btn-primary:active[b-u93xsceryf] {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.kiosk-btn-secondary[b-u93xsceryf] {
    background: var(--kiosk-surface);
    color: var(--kiosk-text);
    border: 2px solid var(--kiosk-primary);
}

.kiosk-btn-secondary:hover[b-u93xsceryf],
.kiosk-btn-secondary:active[b-u93xsceryf] {
    background: var(--kiosk-surface-hover);
}

.kiosk-btn-outline[b-u93xsceryf] {
    background: transparent;
    color: var(--kiosk-text-muted);
    border: 2px solid var(--kiosk-border);
}

.kiosk-btn-outline:hover[b-u93xsceryf],
.kiosk-btn-outline:active[b-u93xsceryf] {
    background: var(--kiosk-surface);
    color: var(--kiosk-text);
    border-color: var(--kiosk-text-muted);
}

.welcome-footer[b-u93xsceryf] {
    margin-top: auto;
}

.tap-instruction[b-u93xsceryf] {
    font-size: 0.875rem;
    color: var(--kiosk-text-muted);
    margin: 0;
    animation: pulse-b-u93xsceryf 2s ease-in-out infinite;
}

@keyframes pulse-b-u93xsceryf {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Responsive */
@media (max-width: 480px) {
    .kiosk-welcome[b-u93xsceryf] {
        padding: 24px;
        gap: 32px;
    }
    
    .logo-area[b-u93xsceryf] {
        width: 80px;
        height: 80px;
        border-radius: 16px;
    }
    
    .logo-area i[b-u93xsceryf] {
        font-size: 2.5rem;
    }
    
    .sim-center-name[b-u93xsceryf] {
        font-size: 2rem;
    }
    
    .welcome-title[b-u93xsceryf] {
        font-size: 1rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/Shared/KioskConfirmationCode.razor.rz.scp.css */
/*
 * KioskConfirmationCode.razor.css
 * The confirmation code chip on kiosk confirmation screens: large, high-contrast and monospaced so a
 * guest can read it off the screen or photograph it from arm's length.
 */

.kiosk-confirmation-code[b-mfl75p7uxh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kiosk-spacing-xs, 8px);
    margin: 0 auto var(--kiosk-spacing-md, 24px);
    padding: var(--kiosk-spacing-sm, 16px) var(--kiosk-spacing-md, 24px);
    max-width: 500px;
    border: 2px dashed var(--kiosk-primary, #3b82f6);
    border-radius: var(--kiosk-radius-lg, 16px);
    background: var(--kiosk-surface, #13132a);
    color: var(--kiosk-text, #f8fafc);
}

.kiosk-confirmation-code-label[b-mfl75p7uxh] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kiosk-text-muted, #94a3b8);
}

.kiosk-confirmation-code-value[b-mfl75p7uxh] {
    font-family: ui-monospace, 'Cascadia Mono', 'Consolas', 'Menlo', monospace;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.1;
    user-select: all;
}

.kiosk-confirmation-code-hint[b-mfl75p7uxh] {
    font-size: 0.95rem;
    color: var(--kiosk-text-muted, #94a3b8);
    text-align: center;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/Shared/KioskFooter.razor.rz.scp.css */
/* 
 * KioskFooter.razor.css
 * Footer styles for kiosk screens.
 */

.kiosk-footer[b-sjwiabytgf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    min-height: 72px;
    backdrop-filter: blur(10px);
    gap: 16px;
}

.footer-left[b-sjwiabytgf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.footer-center[b-sjwiabytgf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-right[b-sjwiabytgf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.powered-by[b-sjwiabytgf] {
    font-size: 0.75rem;
    color: var(--kiosk-text-dim, #64748b);
    letter-spacing: 0.02em;
}

/* Selection info in footer */
[b-sjwiabytgf] .footer-selection-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--kiosk-surface, #13132a);
    border-radius: var(--kiosk-radius, 12px);
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
}

[b-sjwiabytgf] .selected-label {
    font-size: 0.875rem;
    color: var(--kiosk-text-muted, #94a3b8);
}

[b-sjwiabytgf] .selected-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kiosk-primary, #3b82f6);
}

/* Continue button in footer */
[b-sjwiabytgf] .kiosk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    min-height: var(--kiosk-button-height, 56px);
    padding: 14px 28px;
    border: none;
    border-radius: var(--kiosk-radius, 12px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

[b-sjwiabytgf] .kiosk-btn i {
    font-size: 1.25rem;
}

[b-sjwiabytgf] .kiosk-btn-primary {
    background: linear-gradient(135deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    color: white;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

[b-sjwiabytgf] .kiosk-btn-primary:hover:not(:disabled),
[b-sjwiabytgf] .kiosk-btn-primary:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

[b-sjwiabytgf] .kiosk-btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

[b-sjwiabytgf] .kiosk-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

[b-sjwiabytgf] .kiosk-btn-secondary {
    background: var(--kiosk-surface, #13132a);
    color: var(--kiosk-text, #f8fafc);
    border: 2px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
}

[b-sjwiabytgf] .kiosk-btn-secondary:hover:not(:disabled),
[b-sjwiabytgf] .kiosk-btn-secondary:focus-visible:not(:disabled) {
    background: var(--kiosk-surface-hover, #1a1a3a);
    border-color: var(--kiosk-primary, #3b82f6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kiosk-footer[b-sjwiabytgf] {
        padding: 12px 16px;
        min-height: 64px;
    }
    
    .footer-left[b-sjwiabytgf] {
        display: none;
    }
    
    .footer-center[b-sjwiabytgf] {
        flex: 1;
        justify-content: flex-start;
    }
    
    [b-sjwiabytgf] .kiosk-btn {
        min-width: auto;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    [b-sjwiabytgf] .footer-selection-info {
        padding: 6px 12px;
    }
    
    [b-sjwiabytgf] .selected-label,
    [b-sjwiabytgf] .selected-value {
        font-size: 0.8rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/Shared/KioskHeader.razor.rz.scp.css */
/* 
 * KioskHeader.razor.css
 * Header styles for kiosk screens.
 */

.kiosk-header[b-qytwu4q9sv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    min-height: 80px;
    backdrop-filter: blur(10px);
}

.header-left[b-qytwu4q9sv],
.header-right[b-qytwu4q9sv] {
    flex: 0 0 auto;
    min-width: 120px;
}

.header-left[b-qytwu4q9sv] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-right[b-qytwu4q9sv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-center[b-qytwu4q9sv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.header-icon[b-qytwu4q9sv] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kiosk-primary, #3b82f6), var(--kiosk-secondary, #8b5cf6));
    border-radius: 12px;
}

.header-icon i[b-qytwu4q9sv] {
    font-size: 1.5rem;
    color: white;
}

.header-titles[b-qytwu4q9sv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.screen-title[b-qytwu4q9sv] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kiosk-text, #f8fafc);
    line-height: 1.2;
}

.screen-subtitle[b-qytwu4q9sv] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--kiosk-text-muted, #94a3b8);
}

/* Back button */
.kiosk-back-btn[b-qytwu4q9sv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--kiosk-surface, #13132a);
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--kiosk-radius, 12px);
    color: var(--kiosk-text, #f8fafc);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.kiosk-back-btn:hover[b-qytwu4q9sv],
.kiosk-back-btn:focus-visible[b-qytwu4q9sv] {
    background: var(--kiosk-surface-hover, #1a1a3a);
    border-color: var(--kiosk-primary, #3b82f6);
    color: var(--kiosk-primary, #3b82f6);
}

.kiosk-back-btn:active[b-qytwu4q9sv] {
    transform: scale(0.98);
}

.kiosk-back-btn i[b-qytwu4q9sv] {
    font-size: 1.25rem;
}

.back-text[b-qytwu4q9sv] {
    display: inline;
}

/* Step indicator */
.step-indicator[b-qytwu4q9sv] {
    padding: 8px 16px;
    background: var(--kiosk-surface, #13132a);
    border: 1px solid var(--kiosk-border, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
}

.step-text[b-qytwu4q9sv] {
    font-size: 0.875rem;
    color: var(--kiosk-text-muted, #94a3b8);
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kiosk-header[b-qytwu4q9sv] {
        padding: 16px;
        min-height: 70px;
    }
    
    .header-left[b-qytwu4q9sv],
    .header-right[b-qytwu4q9sv] {
        min-width: 60px;
    }
    
    .screen-title[b-qytwu4q9sv] {
        font-size: 1.25rem;
    }
    
    .screen-subtitle[b-qytwu4q9sv] {
        font-size: 0.8rem;
    }
    
    .back-text[b-qytwu4q9sv] {
        display: none;
    }
    
    .kiosk-back-btn[b-qytwu4q9sv] {
        padding: 12px 14px;
    }
    
    .header-icon[b-qytwu4q9sv] {
        display: none;
    }
    
    .step-indicator[b-qytwu4q9sv] {
        padding: 6px 12px;
    }
    
    .step-text[b-qytwu4q9sv] {
        font-size: 0.75rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/Shared/KioskTile.razor.rz.scp.css */
/* 
 * KioskTile.razor.css
 * Touch-optimized tile component styles for kiosk displays.
 * 
 * Image handling:
 * - Track thumbnails: 200x200 (square) - use object-fit: cover
 * - Vehicle thumbnails: 72px tall, 179-260px wide (landscape ~3:1) - use object-fit: contain
 * - Medium images are too large for tiles, use thumbnails
 */

.kiosk-tile[b-ubbhv8oe6f] {
    background: #13132a;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fixed height ensures consistent tile sizing regardless of content */
    height: 280px;
    /* Fixed width to match grid */
    width: 100%;
}

.kiosk-tile:hover[b-ubbhv8oe6f],
.kiosk-tile:focus-visible[b-ubbhv8oe6f] {
    transform: translateY(-4px);
    border-color: #3b82f6;
    box-shadow: 
        0 12px 40px rgba(59, 130, 246, 0.25),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

.kiosk-tile:focus-visible[b-ubbhv8oe6f] {
    outline: none;
}

.kiosk-tile:active[b-ubbhv8oe6f] {
    transform: translateY(-2px) scale(0.98);
    transition: transform 0.1s ease;
}

.kiosk-tile.selected[b-ubbhv8oe6f] {
    border-color: #3b82f6;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15), 
        rgba(139, 92, 246, 0.1));
    box-shadow: 
        0 8px 32px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kiosk-tile.disabled[b-ubbhv8oe6f] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.kiosk-tile.disabled:hover[b-ubbhv8oe6f] {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

/* Tile Image Container - fixed height portion */
.tile-image-container[b-ubbhv8oe6f] {
    position: relative;
    width: 100%;
    height: 160px;
    flex-shrink: 0;
    overflow: hidden;
    /* Dark background visible around contained images */
    background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%);
    /* Center the image content */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-image[b-ubbhv8oe6f] {
    /* Default: cover mode for photographic art. Track and layout maps use .contained:
       their outline runs to the image edge, so cropping cuts the circuit off. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Contained mode for landscape vehicle images (72px tall, ~200px wide) */
.tile-image.contained[b-ubbhv8oe6f] {
    object-fit: contain;
    /* Don't scale up - show at native size or smaller */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.kiosk-tile:hover .tile-image[b-ubbhv8oe6f] {
    transform: scale(1.05);
}

.kiosk-tile:hover .tile-image.contained[b-ubbhv8oe6f] {
    transform: scale(1.08);
}

/* Placeholder Image */
.tile-placeholder-image[b-ubbhv8oe6f] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.08) 0%, 
        rgba(139, 92, 246, 0.08) 100%);
}

.tile-placeholder-image i[b-ubbhv8oe6f] {
    font-size: 3rem;
    color: #94a3b8;
    opacity: 0.5;
}

/* Selected Badge */
.tile-selected-badge[b-ubbhv8oe6f] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
    z-index: 2;
    animation: badge-pop-b-ubbhv8oe6f 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.tile-selected-badge i[b-ubbhv8oe6f] {
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
}

@keyframes badge-pop-b-ubbhv8oe6f {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Tile Badge */
.tile-badge[b-ubbhv8oe6f] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Tile Content - fills remaining space */
.tile-content[b-ubbhv8oe6f] {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tile-title[b-ubbhv8oe6f] {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-subtitle[b-ubbhv8oe6f] {
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    color: #3b82f6;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-description[b-ubbhv8oe6f] {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive tile sizing */
@media (max-width: 768px) {
    .kiosk-tile[b-ubbhv8oe6f] {
        height: 250px;
    }
    
    .tile-image-container[b-ubbhv8oe6f] {
        height: 140px;
    }
    
    .tile-content[b-ubbhv8oe6f] {
        padding: 12px 14px;
    }
    
    .tile-title[b-ubbhv8oe6f] {
        font-size: 0.95rem;
    }
    
    .tile-placeholder-image i[b-ubbhv8oe6f] {
        font-size: 2.5rem;
    }
}

@media (max-width: 500px) {
    .kiosk-tile[b-ubbhv8oe6f] {
        height: 220px;
    }
    
    .tile-image-container[b-ubbhv8oe6f] {
        height: 120px;
    }
    
    .tile-content[b-ubbhv8oe6f] {
        padding: 10px 12px;
    }
    
    .tile-title[b-ubbhv8oe6f] {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    
    .tile-subtitle[b-ubbhv8oe6f],
    .tile-description[b-ubbhv8oe6f] {
        font-size: 0.75rem;
    }
    
    .tile-placeholder-image i[b-ubbhv8oe6f] {
        font-size: 2rem;
    }
    
    .tile-selected-badge[b-ubbhv8oe6f] {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
    }
    
    .tile-selected-badge i[b-ubbhv8oe6f] {
        font-size: 1rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/Kiosk/Shared/KioskTileGrid.razor.rz.scp.css */
/* 
 * KioskTileGrid.razor.css
 * Responsive tile grid with touch scrolling for kiosk displays.
 * Uses FIXED tile widths to ensure consistent sizing.
 */

.kiosk-tile-grid-container[b-uq7ej19b85] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.kiosk-tile-grid[b-uq7ej19b85] {
    display: grid;
    /* Fixed tile width of 280px - no stretching */
    grid-template-columns: repeat(auto-fill, 280px);
    /* Center the grid within the container */
    justify-content: center;
    gap: 24px;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* CRITICAL: align-content start prevents grid from stretching items to fill space */
    align-content: start;
}

/* Visible scrollbar */
.kiosk-tile-grid[b-uq7ej19b85] {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.6) rgba(19, 19, 42, 0.3);
}

.kiosk-tile-grid[b-uq7ej19b85]::-webkit-scrollbar {
    width: 12px;
}

.kiosk-tile-grid[b-uq7ej19b85]::-webkit-scrollbar-track {
    background: rgba(19, 19, 42, 0.3);
    border-radius: 6px;
}

.kiosk-tile-grid[b-uq7ej19b85]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.6);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.kiosk-tile-grid[b-uq7ej19b85]::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.8);
    background-clip: padding-box;
}

/* Responsive grid columns - all use fixed widths */
@media (min-width: 1200px) {
    .kiosk-tile-grid[b-uq7ej19b85] {
        grid-template-columns: repeat(auto-fill, 300px);
        gap: 28px;
        padding: 28px;
    }
}

@media (min-width: 1600px) {
    .kiosk-tile-grid[b-uq7ej19b85] {
        grid-template-columns: repeat(4, 300px);
        gap: 32px;
        padding: 32px;
    }
}

@media (min-width: 1920px) {
    .kiosk-tile-grid[b-uq7ej19b85] {
        grid-template-columns: repeat(5, 300px);
    }
}

@media (max-width: 768px) {
    .kiosk-tile-grid[b-uq7ej19b85] {
        grid-template-columns: repeat(auto-fill, 220px);
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 500px) {
    .kiosk-tile-grid[b-uq7ej19b85] {
        /* On very small screens, allow tiles to fill available space */
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }
}

/* Skeleton Loading */
.kiosk-tile-skeleton[b-uq7ej19b85] {
    pointer-events: none;
}

.kiosk-tile-skeleton .skeleton-image[b-uq7ej19b85] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        #13132a 0%,
        #1a1a3a 50%,
        #13132a 100%);
    background-size: 200% 100%;
    animation: shimmer-b-uq7ej19b85 1.5s infinite linear;
}

.kiosk-tile-skeleton .skeleton-text[b-uq7ej19b85] {
    background: linear-gradient(90deg,
        #1a1a3a 0%,
        rgba(255, 255, 255, 0.05) 50%,
        #1a1a3a 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer-b-uq7ej19b85 1.5s infinite linear;
}

.kiosk-tile-skeleton .skeleton-title[b-uq7ej19b85] { height: 20px; width: 80%; margin-bottom: 8px; }
.kiosk-tile-skeleton .skeleton-subtitle[b-uq7ej19b85] { height: 14px; width: 50%; margin-bottom: 8px; }
.kiosk-tile-skeleton .skeleton-description[b-uq7ej19b85] { height: 14px; width: 100%; }

@keyframes shimmer-b-uq7ej19b85 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.kiosk-empty-state[b-uq7ej19b85] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    min-height: 300px;
}

.kiosk-empty-state .empty-icon[b-uq7ej19b85] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 50%;
    margin-bottom: 24px;
}

.kiosk-empty-state .empty-icon i[b-uq7ej19b85] {
    font-size: 3rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.7;
}

.kiosk-empty-state .empty-title[b-uq7ej19b85] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0 0 12px 0;
}

.kiosk-empty-state .empty-message[b-uq7ej19b85] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
    max-width: 380px;
}

/* Scroll Indicator */
.kiosk-scroll-indicator[b-uq7ej19b85] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(to top, #0a0a14 0%, rgba(10, 10, 20, 0.85) 60%, transparent 100%);
    color: #94a3b8;
    font-size: 0.875rem;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.kiosk-scroll-indicator.hidden[b-uq7ej19b85] { opacity: 0; }

.kiosk-scroll-indicator i[b-uq7ej19b85] {
    font-size: 1.2rem;
    animation: bounce-arrow-b-uq7ej19b85 2s ease-in-out infinite;
}

@keyframes bounce-arrow-b-uq7ej19b85 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Components/SimulatorOverlay/RigPhoneBlock.razor.rz.scp.css */
/* W6-01: the rig screen's phone block. Unobtrusive over a running game; readable from the seat on the idle screen. */
.rig-phone[b-c1fkzuqkpy] {
    position: fixed;
    right: 2vw;
    bottom: 3vh;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
    color: #ffffff;
    font-family: inherit;
}

.rig-phone__band[b-c1fkzuqkpy] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.rig-phone--none .rig-phone__band[b-c1fkzuqkpy] { opacity: 0.85; }
.rig-phone[data-ending="true"] .rig-phone__left[b-c1fkzuqkpy] { color: #ffb547; font-weight: 700; }
.rig-phone__ends[b-c1fkzuqkpy] { opacity: 0.8; }

.rig-phone__qr-card[b-c1fkzuqkpy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(10, 12, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 34rem;
}

.rig-phone__qr[b-c1fkzuqkpy] {
    width: 11rem;
    height: 11rem;
    padding: 0.4rem;
    border-radius: 8px;
    background: #ffffff;
    image-rendering: pixelated;
}

.rig-phone--extend .rig-phone__qr[b-c1fkzuqkpy] { width: 8rem; height: 8rem; }

.rig-phone__headline[b-c1fkzuqkpy] { margin: 0; font-size: 1.6rem; font-weight: 700; }
.rig-phone__detail[b-c1fkzuqkpy] { margin: 0.25rem 0 0; font-size: 1.1rem; opacity: 0.85; }
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/Karting/KartingDriverCard.razor.rz.scp.css */
/* KartingDriverCard.razor.css - World-class driver status styling */

/* 
 * Design System:
 * - Uses CSS custom properties for theming
 * - Status-driven color coding (red ? yellow ? green progression)
 * - Smooth transitions for micro-interactions
 * - Touch-friendly sizing for kiosk/mobile
 */

.karting-driver-card[b-g88h0h5hbx] {
    display: flex;
    align-items: stretch;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.5rem;
    min-height: 72px;
}

.karting-driver-card:hover[b-g88h0h5hbx] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.karting-driver-card.compact[b-g88h0h5hbx] {
    min-height: 56px;
}

.karting-driver-card.expanded[b-g88h0h5hbx] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Status Rail - Visual status indicator on the left */
.driver-status-rail[b-g88h0h5hbx] {
    width: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.driver-status-rail .status-icon[b-g88h0h5hbx] {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg, #fff);
    font-size: 0.75rem;
    z-index: 1;
}

.driver-status-rail.status-pending[b-g88h0h5hbx] {
    background: var(--bs-secondary, #6c757d);
}

.driver-status-rail.status-pending .status-icon[b-g88h0h5hbx] {
    color: var(--bs-secondary, #6c757d);
    border: 2px solid var(--bs-secondary, #6c757d);
}

.driver-status-rail.status-waiver-signed[b-g88h0h5hbx] {
    background: var(--bs-warning, #ffc107);
}

.driver-status-rail.status-waiver-signed .status-icon[b-g88h0h5hbx] {
    color: var(--bs-warning, #ffc107);
    border: 2px solid var(--bs-warning, #ffc107);
}

.driver-status-rail.status-checked-in[b-g88h0h5hbx] {
    background: var(--bs-info, #0dcaf0);
}

.driver-status-rail.status-checked-in .status-icon[b-g88h0h5hbx] {
    color: var(--bs-info, #0dcaf0);
    border: 2px solid var(--bs-info, #0dcaf0);
}

.driver-status-rail.status-ready[b-g88h0h5hbx] {
    background: var(--bs-success, #198754);
}

.driver-status-rail.status-ready .status-icon[b-g88h0h5hbx] {
    color: var(--bs-success, #198754);
    border: 2px solid var(--bs-success, #198754);
}

/* Main Content */
.driver-content[b-g88h0h5hbx] {
    flex: 1;
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.karting-driver-card.compact .driver-content[b-g88h0h5hbx] {
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    gap: 0.375rem;
}

/* Header */
.driver-header[b-g88h0h5hbx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.driver-identity[b-g88h0h5hbx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.driver-name[b-g88h0h5hbx] {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.first-time-badge[b-g88h0h5hbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 1rem;
    white-space: nowrap;
    animation: pulse-badge-b-g88h0h5hbx 2s infinite;
}

@keyframes pulse-badge-b-g88h0h5hbx {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Kart Assignment Chip */
.kart-assignment[b-g88h0h5hbx] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--kart-class-color, var(--bs-primary, #0d6efd));
    color: white;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.kart-number[b-g88h0h5hbx] {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.85rem;
}

.kart-class[b-g88h0h5hbx] {
    opacity: 0.9;
    font-weight: 500;
}

/* Status Checklist - Horizontal progress indicator */
.driver-checklist[b-g88h0h5hbx] {
    display: flex;
    align-items: center;
    gap: 0;
}

.check-item[b-g88h0h5hbx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.check-item i[b-g88h0h5hbx] {
    font-size: 0.8rem;
}

.check-item.pending[b-g88h0h5hbx] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary, #6c757d);
}

.check-item.current[b-g88h0h5hbx] {
    background: rgba(255, 193, 7, 0.15);
    color: var(--bs-warning, #b45309);
    animation: pulse-current-b-g88h0h5hbx 1.5s infinite;
}

@keyframes pulse-current-b-g88h0h5hbx {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0); }
}

.check-item.completed[b-g88h0h5hbx] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--bs-success, #198754);
}

.check-connector[b-g88h0h5hbx] {
    width: 16px;
    height: 2px;
    background: var(--bs-border-color, #dee2e6);
    transition: all 0.3s ease;
}

.check-connector.active[b-g88h0h5hbx] {
    background: var(--bs-success, #198754);
}

/* Details Section */
.driver-details[b-g88h0h5hbx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.25s ease-out;
}

.driver-details.preview[b-g88h0h5hbx] {
    max-height: 60px;
    opacity: 0.8;
}

.driver-details.expanded[b-g88h0h5hbx] {
    max-height: 120px;
    opacity: 1;
}

.detail-row[b-g88h0h5hbx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
}

.detail-row i[b-g88h0h5hbx] {
    font-size: 0.8rem;
    width: 16px;
}

.detail-value[b-g88h0h5hbx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action Buttons */
.driver-actions[b-g88h0h5hbx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.action-btn[b-g88h0h5hbx] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
}

.action-btn:hover[b-g88h0h5hbx] {
    transform: scale(1.1);
}

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

.action-btn.primary[b-g88h0h5hbx] {
    background: var(--bs-primary, #0d6efd);
    color: white;
}

.action-btn.primary:hover[b-g88h0h5hbx] {
    background: var(--bs-primary-shade, #0b5ed7);
}

.action-btn.success[b-g88h0h5hbx] {
    background: var(--bs-success, #198754);
    color: white;
}

.action-btn.success:hover[b-g88h0h5hbx] {
    background: #157347;
}

.action-btn.secondary[b-g88h0h5hbx] {
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.action-btn.secondary:hover[b-g88h0h5hbx] {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
}

/* State Variations */
.karting-driver-card.ready-to-race[b-g88h0h5hbx] {
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.05) 0%, transparent 100%);
    border-color: var(--bs-success, #198754);
}

.karting-driver-card.first-time[b-g88h0h5hbx] {
    position: relative;
}

.karting-driver-card.first-time[b-g88h0h5hbx]::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent #f59e0b transparent transparent;
    border-radius: 0 0.75rem 0 0;
}

/* Compact Mode Adjustments */
.karting-driver-card.compact .driver-checklist[b-g88h0h5hbx] {
    display: none;
}

.karting-driver-card.compact .driver-details[b-g88h0h5hbx] {
    display: none;
}

.karting-driver-card.compact .driver-actions[b-g88h0h5hbx] {
    flex-direction: row;
}

/* Dark Mode Support */
/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it; until 4.0.34 this block
   answered "Match system" alone, in Bootstrap's dark greys. --simx-* tokens rather than --bs-*: the --bs-* aliases exist
   only inside .scm-admin-shell, and this card also renders in the booking detail panel. */
html[data-simx-theme-resolved="dark"] .karting-driver-card[b-g88h0h5hbx] {
    background: var(--simx-bg-surface);
    border-color: var(--simx-border-default);
}

html[data-simx-theme-resolved="dark"] .karting-driver-card:hover[b-g88h0h5hbx] {
    box-shadow: var(--simx-shadow-md);
}

html[data-simx-theme-resolved="dark"] .driver-status-rail .status-icon[b-g88h0h5hbx] {
    background: var(--simx-bg-surface);
}

html[data-simx-theme-resolved="dark"] .check-item.pending[b-g88h0h5hbx] {
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
}

html[data-simx-theme-resolved="dark"] .driver-actions[b-g88h0h5hbx] {
    background: var(--simx-bg-sunken);
    border-color: var(--simx-border-default);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/Karting/KartingHeatTimeline.razor.rz.scp.css */
/* KartingHeatTimeline.razor.css - Heat progression timeline styling */

/*
 * Timeline Design:
 * - Horizontal: For inline display in cards
 * - Vertical: For detailed views
 * - Real-time animations for active heats
 * - Color-coded status progression
 */

.karting-heat-timeline[b-pcvmc71v9h] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0;
}

.karting-heat-timeline.horizontal[b-pcvmc71v9h] {
    flex-direction: row;
    align-items: center;
}

.karting-heat-timeline.vertical[b-pcvmc71v9h] {
    flex-direction: column;
    align-items: flex-start;
}

/* Timeline Connector */
.timeline-connector[b-pcvmc71v9h] {
    position: relative;
    background: var(--bs-border-color, #dee2e6);
    transition: all 0.3s ease;
}

.karting-heat-timeline.horizontal .timeline-connector[b-pcvmc71v9h] {
    width: 24px;
    height: 3px;
    margin: 0 -1px;
}

.karting-heat-timeline.vertical .timeline-connector[b-pcvmc71v9h] {
    width: 3px;
    height: 24px;
    margin-left: 18px;
}

.timeline-connector.filled[b-pcvmc71v9h] {
    background: var(--bs-success, #198754);
}

.progress-pulse[b-pcvmc71v9h] {
    position: absolute;
    background: var(--bs-primary, #0d6efd);
    border-radius: 4px;
    animation: pulse-progress-b-pcvmc71v9h 1.5s ease-in-out infinite;
}

.karting-heat-timeline.horizontal .progress-pulse[b-pcvmc71v9h] {
    height: 100%;
    width: 50%;
    left: 0;
}

@keyframes pulse-progress-b-pcvmc71v9h {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Heat Node */
.heat-node[b-pcvmc71v9h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.heat-node:hover[b-pcvmc71v9h] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.karting-heat-timeline.vertical .heat-node[b-pcvmc71v9h] {
    flex-direction: row;
    width: 100%;
}

/* Heat Marker */
.heat-marker[b-pcvmc71v9h] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 3px solid;
}

.heat-node.pending .heat-marker[b-pcvmc71v9h] {
    background: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary, #6c757d);
}

.heat-node.next .heat-marker[b-pcvmc71v9h] {
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
    animation: pulse-next-b-pcvmc71v9h 2s infinite;
}

@keyframes pulse-next-b-pcvmc71v9h {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(13, 110, 253, 0); }
}

.heat-node.active .heat-marker[b-pcvmc71v9h] {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: white;
    animation: pulse-active-b-pcvmc71v9h 1.5s infinite;
}

@keyframes pulse-active-b-pcvmc71v9h {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.heat-node.completed .heat-marker[b-pcvmc71v9h] {
    background: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
    color: white;
}

.heat-node.final .heat-marker[b-pcvmc71v9h] {
    border-width: 4px;
}

.active-indicator[b-pcvmc71v9h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Heat Info */
.heat-info[b-pcvmc71v9h] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.heat-label[b-pcvmc71v9h] {
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.final-badge[b-pcvmc71v9h] {
    font-size: 0.75rem;
}

.heat-time[b-pcvmc71v9h] {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
}

.heat-time.highlight[b-pcvmc71v9h] {
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

/* Live Badge */
.live-badge[b-pcvmc71v9h] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: var(--bs-danger, #dc3545);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: blink-live-b-pcvmc71v9h 1s infinite;
}

@keyframes blink-live-b-pcvmc71v9h {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Countdown */
.countdown[b-pcvmc71v9h] {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
}

.countdown.urgent[b-pcvmc71v9h] {
    color: var(--bs-warning, #ffc107);
    animation: pulse-urgent-b-pcvmc71v9h 0.5s infinite;
}

@keyframes pulse-urgent-b-pcvmc71v9h {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Heat Meta */
.heat-meta[b-pcvmc71v9h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.class-badge[b-pcvmc71v9h] {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.driver-count[b-pcvmc71v9h] {
    font-size: 0.7rem;
    color: var(--bs-secondary, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.driver-count i[b-pcvmc71v9h] {
    font-size: 0.65rem;
}

/* Compact Mode */
.karting-heat-timeline.compact .heat-node[b-pcvmc71v9h] {
    padding: 0.25rem;
}

.karting-heat-timeline.compact .heat-marker[b-pcvmc71v9h] {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    border-width: 2px;
}

.karting-heat-timeline.compact .heat-info[b-pcvmc71v9h] {
    display: none;
}

.karting-heat-timeline.compact .timeline-connector[b-pcvmc71v9h] {
    width: 12px;
}

.karting-heat-timeline.compact.vertical .timeline-connector[b-pcvmc71v9h] {
    height: 12px;
    width: 3px;
}

/* Hover Effects */
.heat-node:hover .heat-marker[b-pcvmc71v9h] {
    transform: scale(1.1);
}

.heat-node:hover .heat-info[b-pcvmc71v9h] {
    color: var(--bs-primary, #0d6efd);
}

/* Dark Mode */
/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it; until 4.0.34 this block
   answered "Match system" alone, in Bootstrap's dark greys. */
html[data-simx-theme-resolved="dark"] .heat-node:hover[b-pcvmc71v9h] {
    background: var(--simx-bg-hover);
}

html[data-simx-theme-resolved="dark"] .heat-node.pending .heat-marker[b-pcvmc71v9h] {
    background: var(--simx-bg-surface);
    border-color: var(--simx-border-strong);
    color: var(--simx-text-secondary);
}

/* Responsive */
@media (max-width: 576px) {
    .karting-heat-timeline.horizontal[b-pcvmc71v9h] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/PaymentStationPicker.razor.rz.scp.css */
.station-picker[b-k45r1o0213] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    padding: 1rem;
}

.station-picker-header[b-k45r1o0213] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.station-picker-header > i[b-k45r1o0213] {
    font-size: 1.4rem;
    color: var(--bs-primary, #0d6efd);
    line-height: 1;
    margin-top: 0.1rem;
}

.station-picker-title[b-k45r1o0213] {
    font-weight: 600;
    font-size: 0.95rem;
}

.station-picker-subtitle[b-k45r1o0213] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.station-picker-list[b-k45r1o0213] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.station-option[b-k45r1o0213] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.station-option:hover:not(:disabled)[b-k45r1o0213] {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #e7f1ff);
}

.station-option:focus-visible[b-k45r1o0213] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.station-option.selected[b-k45r1o0213] {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    box-shadow: 0 0 0 1px var(--bs-primary, #0d6efd) inset;
}

.station-option:disabled[b-k45r1o0213] {
    opacity: 0.65;
    cursor: wait;
}

.station-option-icon[b-k45r1o0213] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-primary, #0d6efd);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.station-option-details[b-k45r1o0213] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.station-option-name[b-k45r1o0213] {
    font-weight: 600;
    font-size: 0.9rem;
}

.station-option-reader[b-k45r1o0213] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-option-check[b-k45r1o0213] {
    margin-left: auto;
    color: var(--bs-primary, #0d6efd);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.station-picker-empty[b-k45r1o0213],
.station-picker-error[b-k45r1o0213] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.875rem;
}

.station-picker-error[b-k45r1o0213] {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
}

.station-picker-empty > i[b-k45r1o0213],
.station-picker-error > i[b-k45r1o0213] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.station-picker-skeleton[b-k45r1o0213] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.station-skeleton-row[b-k45r1o0213] {
    height: 3.1rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg,
        var(--bs-tertiary-bg, #f0f0f0) 25%,
        var(--bs-secondary-bg, #e6e6e6) 50%,
        var(--bs-tertiary-bg, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: station-skeleton-shimmer-b-k45r1o0213 1.4s ease infinite;
}

@keyframes station-skeleton-shimmer-b-k45r1o0213 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/SellPassToBookingDialog.razor.rz.scp.css */
/* Counter sale of a pass against an open booking. Follows the PaymentStationPicker option-list
   idiom so the two feel like the same product, and leans on Bootstrap variables throughout so the
   dialog inherits light/dark without a second set of colours. */

.sell-pass-content[b-atikj8m1f7] {
    font-size: 0.9rem;
}

.pass-option-list[b-atikj8m1f7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pass-option[b-atikj8m1f7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.pass-option:hover[b-atikj8m1f7] {
    border-color: var(--bs-primary, #0d6efd);
}

/* Keyboard users must see the same affordance the mouse gets. */
.pass-option:focus-visible[b-atikj8m1f7] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.pass-option.selected[b-atikj8m1f7] {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, transparent);
}

.pass-option-check[b-atikj8m1f7] {
    color: var(--bs-primary, #0d6efd);
    font-size: 1.05rem;
    line-height: 1;
}

.pass-option-body[b-atikj8m1f7] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pass-option-body strong[b-atikj8m1f7] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pass-option-meta[b-atikj8m1f7] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.pass-option-price[b-atikj8m1f7] {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.credits-input[b-atikj8m1f7] {
    width: 5.5rem;
    text-align: center;
}

.sell-pass-summary[b-atikj8m1f7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.85rem;
}

/* Narrow screens: the price would otherwise squeeze the name to a couple of characters. */
@media (max-width: 480px) {
    .pass-option[b-atikj8m1f7] {
        flex-wrap: wrap;
    }

    .pass-option-price[b-atikj8m1f7] {
        width: 100%;
        padding-left: 1.8rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/SessionConfigDialog.razor.rz.scp.css */
/*
 * SessionConfigDialog.razor.css
 * 
 * IMPORTANT: The styles in this file are NOT USED at runtime!
 * 
 * Syncfusion SfDialog renders outside the Blazor component tree (at body level),
 * so Blazor CSS isolation scoping attributes are not applied to dialog elements.
 * 
 * All dialog styles have been moved to:
 *   SCM.Module.Admin.SCMUIKit/wwwroot/SCMUIKit.css
 * 
 * This file is kept for documentation/reference only.
 * To modify dialog styling, edit SCMUIKit.css instead.
 * 
 * See: .github/copilot-instructions.md - "SCMUIKit CSS Rule"
 */

/* ===============================================================
   ARCHIVED STYLES - See SCMUIKit.css for active implementation
   =============================================================== */
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/ShellNotificationBell.razor.rz.scp.css */
/* The shell bell (master plan W4-08). --simx-* tokens only, so it follows light, dark and density. */

.scm-bell[b-0lwd3syh32] {
    position: relative;
    display: inline-flex;
}

.scm-bell-button[b-0lwd3syh32] {
    position: relative;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scm-bell-button-alert[b-0lwd3syh32] {
    color: var(--simx-danger-text, #842029);
    border-color: var(--simx-danger-border, #f2b8be);
    background-color: var(--simx-danger-bg, #fdeaec);
}

.scm-bell-count[b-0lwd3syh32] {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: var(--simx-radius-pill, 999px);
    background-color: var(--simx-danger-text, #842029);
    color: var(--simx-bg-surface, #fff);
    font-size: var(--simx-font-size-xs, 0.7rem);
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.scm-bell-stale[b-0lwd3syh32] {
    position: absolute;
    bottom: -0.2rem;
    right: -0.2rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--simx-warning-text, #997404);
    border: 1px solid var(--simx-bg-surface, #fff);
}

.scm-bell-backdrop[b-0lwd3syh32] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.scm-bell-panel[b-0lwd3syh32] {
    position: absolute;
    top: calc(100% + var(--simx-space-2, 0.5rem));
    right: 0;
    z-index: 1045;
    width: min(24rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 32rem);
    display: flex;
    flex-direction: column;
    background-color: var(--simx-bg-surface, #fff);
    color: var(--simx-text-primary, #212529);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-md, 0.5rem);
    box-shadow: var(--simx-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
}

.scm-bell-panel-head[b-0lwd3syh32],
.scm-bell-panel-foot[b-0lwd3syh32] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

.scm-bell-panel-head[b-0lwd3syh32] {
    border-bottom: 1px solid var(--simx-border-subtle, #e9ecef);
}

.scm-bell-panel-foot[b-0lwd3syh32] {
    border-top: 1px solid var(--simx-border-subtle, #e9ecef);
}

.scm-bell-failed[b-0lwd3syh32] {
    color: var(--simx-warning-text, #997404);
    background-color: var(--simx-warning-bg, #fff3cd);
    border: 1px solid var(--simx-warning-border, #ffe69c);
    border-radius: var(--simx-radius-sm, 0.25rem);
    padding: 0 var(--simx-space-1, 0.25rem);
    font-size: var(--simx-font-size-xs, 0.75rem);
    white-space: nowrap;
}

.scm-bell-close[b-0lwd3syh32] {
    font-size: 0.7rem;
}

.scm-bell-list[b-0lwd3syh32] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.scm-bell-item[b-0lwd3syh32] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-bottom: 1px solid var(--simx-border-subtle, #e9ecef);
    border-left: 3px solid var(--simx-danger-text, #842029);
}

.scm-bell-item-seen[b-0lwd3syh32] {
    border-left-color: var(--simx-border-strong, #adb5bd);
    background-color: var(--simx-bg-sunken, #f8f9fa);
}

.scm-bell-item-main[b-0lwd3syh32] {
    min-width: 0;
}

.scm-bell-item-title[b-0lwd3syh32] {
    display: block;
    color: var(--simx-text-primary, #212529);
    font-size: var(--simx-font-size-md, 0.875rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.scm-bell-item-meta[b-0lwd3syh32],
.scm-bell-item-state[b-0lwd3syh32],
.scm-bell-empty[b-0lwd3syh32] {
    color: var(--simx-text-secondary, #6c757d);
    font-size: var(--simx-font-size-xs, 0.75rem);
}

/* #244: the "Heat under minimum" alert's two choices, under its title. */
.scm-bell-item-actions[b-0lwd3syh32] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-1, 0.25rem);
}

.scm-bell-ack[b-0lwd3syh32] {
    flex-shrink: 0;
    min-height: 2.25rem;
}

.scm-bell-empty[b-0lwd3syh32],
.scm-bell-error[b-0lwd3syh32] {
    margin: 0;
    padding: var(--simx-space-3, 0.75rem);
}

.scm-bell-error[b-0lwd3syh32] {
    color: var(--simx-danger-text, #842029);
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

/* A phone: the panel is pinned to the viewport instead of the button, so it can never hang off the left edge. */
@media (max-width: 575.98px) {
    .scm-bell-panel[b-0lwd3syh32] {
        position: fixed;
        top: 3.25rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Components/SimxColorPicker.razor.rz.scp.css */
/* SimxColorPicker Component Styles */

.simx-color-picker[b-5oo2zl1xun] {
    position: relative;
}

.color-preview-row[b-5oo2zl1xun] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-swatch[b-5oo2zl1xun] {
    width: 40px;
    height: 38px;
    border-radius: 6px;
    border: 2px solid var(--bs-gray-300);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.color-swatch:hover[b-5oo2zl1xun] {
    border-color: var(--bs-primary);
    transform: scale(1.05);
}

.color-swatch.empty[b-5oo2zl1xun] {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.color-input-group[b-5oo2zl1xun] {
    display: flex;
    flex: 1;
}

.color-input-group .form-control[b-5oo2zl1xun] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.color-input-group .btn[b-5oo2zl1xun] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Color Picker Dropdown */
.color-picker-dropdown[b-5oo2zl1xun] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 1050;
    padding: 1rem;
    animation: fadeInUp-b-5oo2zl1xun 0.2s ease;
}

@keyframes fadeInUp-b-5oo2zl1xun {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.color-picker-header[b-5oo2zl1xun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.color-picker-header .fw-medium[b-5oo2zl1xun] {
    font-weight: 600;
    color: var(--bs-gray-800);
}

/* Preset Colors */
.preset-colors[b-5oo2zl1xun] {
    margin-bottom: 1rem;
}

.preset-label[b-5oo2zl1xun] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bs-gray-500);
    margin-bottom: 0.5rem;
}

.preset-grid[b-5oo2zl1xun] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.preset-swatch[b-5oo2zl1xun] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.preset-swatch:hover[b-5oo2zl1xun] {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.preset-swatch.selected[b-5oo2zl1xun] {
    border-color: var(--bs-gray-800);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--bs-gray-800);
}

/* Custom Picker */
.custom-picker[b-5oo2zl1xun] {
    margin-bottom: 1rem;
}

[b-5oo2zl1xun] .simx-sf-color-picker {
    width: 100%;
}

[b-5oo2zl1xun] .simx-sf-color-picker .e-container {
    border: none !important;
    box-shadow: none !important;
}

/* Footer */
.color-picker-footer[b-5oo2zl1xun] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-gray-200);
}

.color-picker-footer .btn-link[b-5oo2zl1xun] {
    text-decoration: none;
}

.color-picker-footer .btn-link:hover[b-5oo2zl1xun] {
    text-decoration: underline;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Automations/AutomationBuilder.razor.rz.scp.css */
/* The rule builder (master plan W5a-03).
   Theme tokens only (--simx-*), which the shell re-tunes for dark: no prefers-color-scheme block, no fixed colors.
   Selected fills use the accent-subtle / accent-text / accent trio, because --simx-accent is light in dark mode and
   white ink on it fails contrast. */

.auto-builder[b-nj4lgehaz3] {
    padding: var(--simx-space-4, 1rem);
    max-width: 60rem;
    color: var(--simx-text-primary);
}

.auto-builder__bar[b-nj4lgehaz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-4, 1rem);
}

.auto-builder__empty[b-nj4lgehaz3] {
    text-align: center;
    padding: var(--simx-space-7, 3rem) var(--simx-space-4, 1rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    background: var(--simx-bg-sunken);
}

/* ── Sections ─────────────────────────────────────────── */

.auto-section[b-nj4lgehaz3] {
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    padding: var(--simx-space-4, 1rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

.auto-section__title[b-nj4lgehaz3] {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin: 0 0 var(--simx-space-3, 0.75rem);
    font-weight: 600;
}

.auto-section__number[b-nj4lgehaz3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    border: 1px solid var(--simx-accent);
    font-size: 0.8rem;
    font-weight: 600;
}

.auto-section__optional[b-nj4lgehaz3] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--simx-text-tertiary);
}

/* ── Trigger and action options ───────────────────────── */

.auto-group[b-nj4lgehaz3] {
    margin-bottom: var(--simx-space-3, 0.75rem);
}

.auto-group__title[b-nj4lgehaz3] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simx-text-secondary);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.auto-options[b-nj4lgehaz3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--simx-space-2, 0.5rem);
}

.auto-option[b-nj4lgehaz3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    color: var(--simx-text-primary);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    transition: background var(--simx-duration-fast, 120ms), border-color var(--simx-duration-fast, 120ms);
}

.auto-option:hover:not(:disabled)[b-nj4lgehaz3] {
    background: var(--simx-bg-hover);
    border-color: var(--simx-border-strong);
}

.auto-option:disabled[b-nj4lgehaz3] {
    color: var(--simx-text-disabled);
    background: var(--simx-bg-sunken);
    cursor: not-allowed;
}

.auto-option--selected[b-nj4lgehaz3] {
    background: var(--simx-accent-subtle);
    border-color: var(--simx-accent);
    color: var(--simx-accent-text);
}

.auto-option__label[b-nj4lgehaz3] {
    font-weight: 600;
}

.auto-option__hint[b-nj4lgehaz3] {
    font-size: 0.8rem;
    color: var(--simx-text-secondary);
}

.auto-option:disabled .auto-option__hint[b-nj4lgehaz3] {
    color: var(--simx-text-disabled);
}

.auto-refused[b-nj4lgehaz3] {
    margin-top: 0.25rem;
    padding: var(--simx-space-2, 0.5rem);
    border-radius: var(--simx-radius-sm, 0.25rem);
    background: var(--simx-warning-bg);
    border: 1px solid var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.auto-chosen[b-nj4lgehaz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-accent-subtle);
    border: 1px solid var(--simx-accent);
}

.auto-details[b-nj4lgehaz3] {
    margin-top: var(--simx-space-2, 0.5rem);
    font-size: 0.875rem;
}

.auto-details > summary[b-nj4lgehaz3] {
    cursor: pointer;
    color: var(--simx-text-link);
}

.auto-sample[b-nj4lgehaz3] {
    margin: 0;
    padding: var(--simx-space-2, 0.5rem);
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-sm, 0.25rem);
}

/* ── Only if ──────────────────────────────────────────── */

.auto-conditions[b-nj4lgehaz3] {
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-sunken);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
}

.auto-condition[b-nj4lgehaz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.auto-condition__joiner[b-nj4lgehaz3] {
    min-width: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--simx-text-secondary);
}

.auto-condition__field[b-nj4lgehaz3] {
    flex: 1 1 14rem;
    max-width: 20rem;
}

.auto-condition__op[b-nj4lgehaz3],
.auto-condition__time[b-nj4lgehaz3] {
    flex: 0 0 auto;
    width: auto;
}

.auto-condition__value[b-nj4lgehaz3] {
    flex: 1 1 10rem;
    max-width: 16rem;
}

.auto-condition__word[b-nj4lgehaz3] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
}

.auto-condition__help[b-nj4lgehaz3] {
    margin: -0.25rem 0 var(--simx-space-2, 0.5rem) 2.5rem;
}

.auto-days[b-nj4lgehaz3] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.auto-or[b-nj4lgehaz3] {
    margin: var(--simx-space-2, 0.5rem) 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--simx-text-tertiary);
}

.auto-readback[b-nj4lgehaz3] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
}

/* ── Steps ────────────────────────────────────────────── */

.auto-steps[b-nj4lgehaz3] {
    list-style: none;
    margin: 0 0 var(--simx-space-3, 0.75rem);
    padding: 0;
}

.auto-step[b-nj4lgehaz3] {
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-2, 0.5rem);
    background: var(--simx-bg-raised, var(--simx-bg-surface));
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
}

.auto-step--issue[b-nj4lgehaz3] {
    border-color: var(--simx-warning-border);
}

.auto-step__head[b-nj4lgehaz3] {
    display: flex;
    align-items: flex-start;
    gap: var(--simx-space-3, 0.75rem);
}

.auto-step__number[b-nj4lgehaz3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--simx-radius-pill, 999px);
    background: var(--simx-bg-sunken);
    border: 1px solid var(--simx-border-default);
    font-weight: 600;
    font-size: 0.85rem;
}

.auto-step__body[b-nj4lgehaz3] {
    margin-top: var(--simx-space-3, 0.75rem);
    padding-left: 2.5rem;
}

.auto-picker[b-nj4lgehaz3] {
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-sunken);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
}

/* ── Fields ───────────────────────────────────────────── */

.auto-field[b-nj4lgehaz3] {
    margin-bottom: var(--simx-space-3, 0.75rem);
    max-width: 38rem;
}

.auto-field--inline[b-nj4lgehaz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    max-width: none;
}

.auto-field__amount[b-nj4lgehaz3] {
    width: 6rem;
}

.auto-field__unit[b-nj4lgehaz3] {
    width: auto;
}

.auto-field__control[b-nj4lgehaz3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--simx-space-2, 0.5rem);
}

.auto-field__control > .form-control[b-nj4lgehaz3],
.auto-field__control > .form-select[b-nj4lgehaz3] {
    flex: 1 1 14rem;
}

.auto-field__tokens[b-nj4lgehaz3] {
    margin-top: 0.25rem;
    color: var(--simx-text-secondary);
}

.auto-chip[b-nj4lgehaz3] {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.4rem;
    border-radius: var(--simx-radius-pill, 999px);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    border: 1px solid var(--simx-accent);
}

.auto-chip--unknown[b-nj4lgehaz3] {
    background: var(--simx-warning-bg);
    color: var(--simx-warning-text);
    border-color: var(--simx-warning-border);
}

.auto-field-issue[b-nj4lgehaz3] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--simx-danger-text);
}

.auto-field[data-invalid="true"] .form-control[b-nj4lgehaz3],
.auto-field[data-invalid="true"] .form-select[b-nj4lgehaz3] {
    border-color: var(--simx-danger-border);
}

.auto-rails[b-nj4lgehaz3] {
    display: grid;
    gap: var(--simx-space-2, 0.5rem);
}

/* ── Read-back, actions, test ─────────────────────────── */

.auto-summary[b-nj4lgehaz3] {
    padding: var(--simx-space-4, 1rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
    background: var(--simx-accent-subtle);
    border: 1px solid var(--simx-accent);
    border-radius: var(--simx-radius-lg, 0.75rem);
    color: var(--simx-text-primary);
}

.auto-summary__title[b-nj4lgehaz3] {
    margin: 0 0 var(--simx-space-2, 0.5rem);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simx-accent-text);
}

.auto-actions[b-nj4lgehaz3] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-3, 0.75rem) 0;
    margin-top: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-app, var(--simx-bg-surface));
    border-top: 1px solid var(--simx-border-subtle);
}

.auto-test[b-nj4lgehaz3] {
    padding: var(--simx-space-4, 1rem);
    margin-top: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-strong);
    border-radius: var(--simx-radius-lg, 0.75rem);
}

.auto-test__source[b-nj4lgehaz3] {
    width: auto;
    max-width: 24rem;
}

.auto-test__list[b-nj4lgehaz3] {
    list-style: none;
    margin: 0 0 var(--simx-space-3, 0.75rem);
    padding: 0;
    font-size: 0.9rem;
}

.auto-test__list > li[b-nj4lgehaz3] {
    padding: 0.25rem 0;
}

/* W5a-05: the way from the step picker to Resources, Connections. */
.auto-connections-hint[b-nj4lgehaz3] {
    margin: var(--simx-space-2, 0.5rem) 0 var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
}

/* ── Keyboard focus, visible on every control the builder draws itself ── */

.auto-option:focus-visible[b-nj4lgehaz3],
.auto-details > summary:focus-visible[b-nj4lgehaz3],
.auto-builder .btn:focus-visible[b-nj4lgehaz3],
.auto-builder .btn-check:focus-visible + .btn[b-nj4lgehaz3] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .auto-builder[b-nj4lgehaz3] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .auto-step__body[b-nj4lgehaz3] {
        padding-left: 0;
    }

    .auto-condition__help[b-nj4lgehaz3] {
        margin-left: 0;
    }

    .auto-actions .btn[b-nj4lgehaz3] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Automations/AutomationPacks.razor.rz.scp.css */
/* Template packs (master plan W5a-04).
   Theme tokens only (--simx-*), which the shell re-tunes for dark: no prefers-color-scheme block, no fixed colors.
   Selected and "done" fills use the subtle / text / border trios, because --simx-accent is light in dark mode and white
   ink on it fails contrast. */

.auto-packs[b-lggu6a40yz] {
    margin-bottom: var(--simx-space-5, 1.5rem);
    color: var(--simx-text-primary);
}

.auto-packs__head[b-lggu6a40yz] {
    margin-bottom: var(--simx-space-3, 0.75rem);
}

.auto-packs__lede[b-lggu6a40yz] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
    margin: 0;
    max-width: 48rem;
}

.auto-packs__empty[b-lggu6a40yz] {
    padding: var(--simx-space-4, 1rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.auto-packs__grid[b-lggu6a40yz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--simx-space-3, 0.75rem);
}

/* ── A pack card ─────────────────────────────────────── */

.auto-pack[b-lggu6a40yz] {
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-4, 1rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    min-width: 0;
}

.auto-pack[data-all-installed="true"][b-lggu6a40yz] {
    border-color: var(--simx-success-border, var(--simx-border-strong));
}

.auto-pack__top[b-lggu6a40yz] {
    display: flex;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
}

.auto-pack__icon[b-lggu6a40yz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    border: 1px solid var(--simx-accent);
    font-size: 1.15rem;
}

.auto-pack__name[b-lggu6a40yz] {
    font-weight: 600;
    line-height: 1.25;
}

.auto-pack__audience[b-lggu6a40yz] {
    font-size: 0.8rem;
    color: var(--simx-text-secondary);
}

.auto-pack__state[b-lggu6a40yz],
.auto-pack__waiting[b-lggu6a40yz] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-primary);
}

.auto-pack__state--done[b-lggu6a40yz] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.auto-pack__state--partial[b-lggu6a40yz] {
    background: var(--simx-info-bg);
    border-color: var(--simx-info-border);
    color: var(--simx-info-text);
}

.auto-pack__waiting[b-lggu6a40yz] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.auto-pack__summary[b-lggu6a40yz] {
    font-size: 0.875rem;
    margin: 0;
    color: var(--simx-text-primary);
}

.auto-pack__needs[b-lggu6a40yz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-1, 0.25rem) var(--simx-space-2, 0.5rem);
}

.auto-pack__label[b-lggu6a40yz] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simx-text-secondary);
}

.auto-pack__need[b-lggu6a40yz] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    color: var(--simx-text-primary);
    background: var(--simx-bg-surface);
}

.auto-pack__need--met[b-lggu6a40yz] {
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
    background: var(--simx-success-bg);
}

.auto-pack__need--missing[b-lggu6a40yz] {
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
    background: var(--simx-warning-bg);
}

.auto-pack__need--optional[b-lggu6a40yz] {
    border-style: dashed;
    color: var(--simx-text-secondary);
}

.auto-pack__toggle[b-lggu6a40yz] {
    align-self: flex-start;
    text-decoration: none;
}

.auto-pack__contents[b-lggu6a40yz] {
    list-style: none;
    margin: 0;
    padding: var(--simx-space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-sunken);
    border-radius: var(--simx-radius-md, 0.5rem);
    font-size: 0.85rem;
}

.auto-pack__when[b-lggu6a40yz] {
    color: var(--simx-text-secondary);
    font-size: 0.8rem;
}

.auto-pack__steps[b-lggu6a40yz] {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
}

.auto-pack__tag[b-lggu6a40yz] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    padding: 0 0.45rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    color: var(--simx-text-secondary);
}

.auto-pack__tag--on[b-lggu6a40yz] {
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
    background: var(--simx-success-bg);
}

.auto-pack__actions[b-lggu6a40yz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: auto;
    padding-top: var(--simx-space-2, 0.5rem);
}

/* ── The install dialog ──────────────────────────────── */

.auto-pack-dialog[b-lggu6a40yz] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--simx-space-3, 0.75rem);
}

.auto-pack-dialog__backdrop[b-lggu6a40yz] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.auto-pack-dialog__panel[b-lggu6a40yz] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(40rem, 100%);
    max-height: calc(100vh - 2rem);
    background: var(--simx-bg-surface);
    color: var(--simx-text-primary);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    box-shadow: var(--simx-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.3));
}

.auto-pack-dialog__header[b-lggu6a40yz],
.auto-pack-dialog__footer[b-lggu6a40yz] {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
}

.auto-pack-dialog__header[b-lggu6a40yz] {
    justify-content: space-between;
    border-bottom: 1px solid var(--simx-border-default);
}

.auto-pack-dialog__footer[b-lggu6a40yz] {
    border-top: 1px solid var(--simx-border-default);
    flex-wrap: wrap;
}

.auto-pack-dialog__body[b-lggu6a40yz] {
    padding: var(--simx-space-4, 1rem);
    overflow-y: auto;
}

.auto-pack-dialog__lede[b-lggu6a40yz] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
}

.auto-pack-dialog__group[b-lggu6a40yz] {
    margin-bottom: var(--simx-space-4, 1rem);
    padding: 0;
    border: 0;
}

.auto-pack-dialog__legend[b-lggu6a40yz] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simx-text-secondary);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.auto-pack-dialog__need[b-lggu6a40yz] {
    padding: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.auto-pack-dialog__need[data-answered="true"][b-lggu6a40yz] {
    border-color: var(--simx-accent);
    background: var(--simx-accent-subtle);
}

.auto-pack-dialog__hint[b-lggu6a40yz],
.auto-pack-dialog__usedby[b-lggu6a40yz] {
    font-size: 0.8rem;
    color: var(--simx-text-secondary);
    margin-bottom: var(--simx-space-1, 0.25rem);
}

.auto-pack-dialog__usedby[b-lggu6a40yz] {
    margin: var(--simx-space-1, 0.25rem) 0 0;
}

.auto-pack-dialog__missing[b-lggu6a40yz] {
    font-size: 0.85rem;
    padding: var(--simx-space-2, 0.5rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-warning-bg);
    border: 1px solid var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.auto-pack-dialog__need[data-optional="true"] .auto-pack-dialog__missing[b-lggu6a40yz] {
    background: var(--simx-info-bg);
    border-color: var(--simx-info-border);
    color: var(--simx-info-text);
}

.auto-pack-dialog__template[b-lggu6a40yz] {
    padding: var(--simx-space-2, 0.5rem) 0 var(--simx-space-2, 0.5rem) 1.75rem;
    border-bottom: 1px solid var(--simx-border-default);
}

.auto-pack-dialog__template:last-of-type[b-lggu6a40yz] {
    border-bottom: 0;
}

.auto-pack-dialog__note[b-lggu6a40yz] {
    font-size: 0.8rem;
    color: var(--simx-success-text);
    margin-top: var(--simx-space-1, 0.25rem);
}

.auto-pack-dialog__note--warn[b-lggu6a40yz] {
    color: var(--simx-warning-text);
}

.auto-pack-dialog__count[b-lggu6a40yz] {
    font-size: 0.85rem;
    color: var(--simx-text-secondary);
}

.auto-pack :focus-visible[b-lggu6a40yz],
.auto-pack-dialog :focus-visible[b-lggu6a40yz] {
    outline: 2px solid var(--simx-focus-ring, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .auto-pack-dialog[b-lggu6a40yz] {
        align-items: flex-end;
        padding: 0;
    }

    .auto-pack-dialog__panel[b-lggu6a40yz] {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--simx-radius-lg, 0.75rem) var(--simx-radius-lg, 0.75rem) 0 0;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Automations/AutomationTokenPicker.razor.rz.scp.css */
/* "Insert a value" (master plan W5a-03). Theme tokens only; see AutomationBuilder.razor.css. */

.auto-token[b-5e2602arc6] {
    position: relative;
    flex: 0 0 auto;
}

.auto-token__menu[b-5e2602arc6] {
    position: absolute;
    right: 0;
    z-index: 5;
    min-width: 17rem;
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--simx-bg-overlay, var(--simx-bg-surface));
    border: 1px solid var(--simx-border-strong);
    border-radius: var(--simx-radius-md, 0.5rem);
    box-shadow: var(--simx-shadow-md);
}

.auto-token__option[b-5e2602arc6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0.4rem 0.5rem;
    text-align: left;
    background: transparent;
    color: var(--simx-text-primary);
    border: 0;
    border-radius: var(--simx-radius-sm, 0.25rem);
}

.auto-token__option:hover[b-5e2602arc6] {
    background: var(--simx-bg-hover);
}

.auto-token__option:focus-visible[b-5e2602arc6],
.auto-token__open:focus-visible[b-5e2602arc6] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 1px;
}

.auto-token__label[b-5e2602arc6] {
    font-weight: 600;
    font-size: 0.875rem;
}

.auto-token__sample[b-5e2602arc6] {
    font-size: 0.75rem;
    color: var(--simx-text-secondary);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Connections/ConnectionEditor.razor.rz.scp.css */
/* Add or change a connection (master plan W5a-05).
   Theme tokens only (--simx-*). Selected fills use the accent-subtle / accent-text / accent trio, because --simx-accent
   is light in dark mode and white ink on it fails contrast. */

.conn-editor[b-ijnalekr3p] {
    padding: var(--simx-space-4, 1rem);
    max-width: 60rem;
    color: var(--simx-text-primary);
}

.conn-editor__bar[b-ijnalekr3p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

/* ── The steps ───────────────────────────────────────── */

.conn-steps[b-ijnalekr3p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem) var(--simx-space-4, 1rem);
    list-style: none;
    margin: 0 0 var(--simx-space-3, 0.75rem);
    padding: 0;
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
}

.conn-steps__item[b-ijnalekr3p] {
    display: inline-flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

.conn-steps__number[b-ijnalekr3p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    font-size: 0.8rem;
    font-weight: 600;
}

.conn-steps__item--current[b-ijnalekr3p] {
    color: var(--simx-text-primary);
    font-weight: 600;
}

.conn-steps__item--current .conn-steps__number[b-ijnalekr3p] {
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    border-color: var(--simx-accent);
}

.conn-steps__item--done .conn-steps__number[b-ijnalekr3p] {
    background: var(--simx-success-bg);
    color: var(--simx-success-text);
    border-color: var(--simx-success-border);
}

/* ── Sections and cards ──────────────────────────────── */

.conn-section[b-ijnalekr3p] {
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    padding: var(--simx-space-4, 1rem);
}

.conn-section__title[b-ijnalekr3p] {
    margin: 0 0 var(--simx-space-2, 0.5rem);
    font-weight: 600;
}

.conn-section__title:focus[b-ijnalekr3p] {
    outline: none;
}

.conn-section__title:focus-visible[b-ijnalekr3p] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

.conn-card[b-ijnalekr3p] {
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

.conn-empty[b-ijnalekr3p] {
    padding: var(--simx-space-4, 1rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

/* ── Gallery ─────────────────────────────────────────── */

.conn-group[b-ijnalekr3p] {
    margin-top: var(--simx-space-3, 0.75rem);
}

.conn-group__title[b-ijnalekr3p] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--simx-text-secondary);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.conn-badge[b-ijnalekr3p] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-warning-border);
    background: var(--simx-warning-bg);
    color: var(--simx-warning-text);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.conn-badge--ok[b-ijnalekr3p] {
    border-color: var(--simx-success-border);
    background: var(--simx-success-bg);
    color: var(--simx-success-text);
}

.conn-tiles[b-ijnalekr3p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--simx-space-2, 0.5rem);
}

.conn-tiles--compact[b-ijnalekr3p] {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.conn-tile[b-ijnalekr3p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    color: var(--simx-text-primary);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    transition: background var(--simx-duration-fast, 120ms), border-color var(--simx-duration-fast, 120ms);
}

.conn-tile:hover:not(:disabled)[b-ijnalekr3p] {
    background: var(--simx-bg-hover);
    border-color: var(--simx-border-strong);
}

.conn-tile--selected[b-ijnalekr3p] {
    background: var(--simx-accent-subtle);
    border-color: var(--simx-accent);
    color: var(--simx-accent-text);
}

.conn-tile__name[b-ijnalekr3p] {
    font-weight: 600;
}

.conn-tile__hint[b-ijnalekr3p],
.conn-tile__host[b-ijnalekr3p] {
    font-size: 0.8rem;
    color: var(--simx-text-secondary);
}

/* ── Form ────────────────────────────────────────────── */

.conn-field[b-ijnalekr3p] {
    margin-bottom: var(--simx-space-3, 0.75rem);
    max-width: 36rem;
}

.conn-required[b-ijnalekr3p] {
    color: var(--simx-danger-text);
    margin-left: 0.15rem;
}

.conn-runs-on[b-ijnalekr3p] {
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

.conn-actions[b-ijnalekr3p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-3, 0.75rem);
}

.conn-safety[b-ijnalekr3p] {
    margin: var(--simx-space-2, 0.5rem) 0;
    padding: var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-danger-bg);
    border: 1px solid var(--simx-danger-border);
    color: var(--simx-danger-text);
}

/* ── Results ─────────────────────────────────────────── */

.conn-result[b-ijnalekr3p] {
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    border: 1px solid var(--simx-border-default);
    overflow-wrap: anywhere;
}

.conn-result--ok[b-ijnalekr3p] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.conn-result--bad[b-ijnalekr3p] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.conn-request[b-ijnalekr3p] {
    padding: var(--simx-space-2, 0.5rem);
    border-radius: var(--simx-radius-sm, 0.25rem);
    background: var(--simx-bg-surface);
    color: var(--simx-text-primary);
    border: 1px solid var(--simx-border-subtle);
}

.conn-mono[b-ijnalekr3p] {
    font-family: var(--simx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    overflow-wrap: anywhere;
}

.conn-request__headers[b-ijnalekr3p] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.conn-request__body[b-ijnalekr3p] {
    max-height: 16rem;
    overflow: auto;
    margin: 0.25rem 0 0;
    padding: var(--simx-space-2, 0.5rem);
    white-space: pre-wrap;
    background: var(--simx-bg-sunken);
    color: var(--simx-text-primary);
    border-radius: var(--simx-radius-sm, 0.25rem);
}

/* ── W5b-04: Runs on (Edge picker), safety note, saved actions ── */

.conn-runs-on legend[b-ijnalekr3p] {
    float: none;
    width: auto;
    margin-bottom: 0.25rem;
}

.conn-runs-on .form-check[b-ijnalekr3p] {
    margin-bottom: 0.35rem;
}

.conn-chip[b-ijnalekr3p] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.conn-chip--ok[b-ijnalekr3p] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.conn-chip--warn[b-ijnalekr3p] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.conn-safety-note[b-ijnalekr3p] {
    margin: var(--simx-space-2, 0.5rem) 0;
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-warning-bg);
    border: 1px solid var(--simx-warning-border);
    color: var(--simx-warning-text);
    font-size: 0.875rem;
}

.conn-save-named[b-ijnalekr3p] {
    padding: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-surface);
    max-width: 36rem;
}

.conn-saved[b-ijnalekr3p] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
}

.conn-saved__row[b-ijnalekr3p] {
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-md, 0.5rem);
    overflow-wrap: anywhere;
}

.conn-row__buttons[b-ijnalekr3p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-1, 0.25rem);
}

/* ── Keyboard focus, visible on every control drawn here ── */

.conn-tile:focus-visible[b-ijnalekr3p],
.conn-editor .btn:focus-visible[b-ijnalekr3p],
.conn-editor .form-check-input:focus-visible[b-ijnalekr3p],
.conn-editor .form-control:focus-visible[b-ijnalekr3p],
.conn-editor a:focus-visible[b-ijnalekr3p] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .conn-editor[b-ijnalekr3p] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .conn-section[b-ijnalekr3p] {
        padding: var(--simx-space-3, 0.75rem);
    }

    .conn-actions .btn[b-ijnalekr3p] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Connections/ConnectionHealthChip.razor.rz.scp.css */
/* A connection's health chip (master plan W5a-05). Words and a glyph carry the state; color only repeats it.
   Status ink uses the --simx-*-text tokens, which are defined per theme. */

.conn-health[b-zdvy7v53p1] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

.conn-chip[b-zdvy7v53p1] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.conn-chip--ok[b-zdvy7v53p1] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.conn-chip--bad[b-zdvy7v53p1] {
    background: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
    color: var(--simx-danger-text);
}

.conn-chip--warn[b-zdvy7v53p1] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.conn-health__when[b-zdvy7v53p1] {
    font-size: 0.8rem;
    color: var(--simx-text-secondary);
}

.conn-health__reason[b-zdvy7v53p1] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--simx-text-secondary);
    overflow-wrap: anywhere;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Connections/ConnectionsPanel.razor.rz.scp.css */
/* Resources, Connections (master plan W5a-05).
   Theme tokens only (--simx-*), which the shell re-tunes for dark: no prefers-color-scheme block, no fixed colors. */

.conn-panel[b-vjpccipi9a] {
    padding: var(--simx-space-4, 1rem);
    color: var(--simx-text-primary);
}

.conn-empty[b-vjpccipi9a] {
    text-align: center;
    padding: var(--simx-space-6, 2rem) var(--simx-space-4, 1rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    background: var(--simx-bg-sunken);
    max-width: 40rem;
    margin: var(--simx-space-3, 0.75rem) auto;
}

.conn-empty__icon[b-vjpccipi9a] {
    display: block;
    font-size: 2rem;
    color: var(--simx-text-tertiary);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.conn-list[b-vjpccipi9a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
}

.conn-row[b-vjpccipi9a] {
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
}

.conn-row--selected[b-vjpccipi9a] {
    border-color: var(--simx-accent);
    box-shadow: 0 0 0 1px var(--simx-accent);
}

.conn-row--off .conn-row__title[b-vjpccipi9a],
.conn-row--off .conn-row__icon[b-vjpccipi9a] {
    opacity: 0.7;
}

.conn-row:focus-visible[b-vjpccipi9a] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

.conn-row__top[b-vjpccipi9a] {
    display: flex;
    align-items: flex-start;
    gap: var(--simx-space-3, 0.75rem);
}

.conn-row__icon[b-vjpccipi9a] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    font-size: 1.1rem;
}

.conn-row__title[b-vjpccipi9a] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.conn-row__switch[b-vjpccipi9a] {
    flex: 0 0 auto;
    margin: 0;
}

.conn-row__health[b-vjpccipi9a] {
    margin: var(--simx-space-2, 0.5rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
}

.conn-row__footer[b-vjpccipi9a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-2, 0.5rem);
    padding-top: var(--simx-space-2, 0.5rem);
    border-top: 1px solid var(--simx-border-subtle);
}

.conn-row__buttons[b-vjpccipi9a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-1, 0.25rem);
}

.conn-notice[b-vjpccipi9a] {
    margin-top: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-info-bg);
    border: 1px solid var(--simx-info-border);
    color: var(--simx-info-text);
    font-size: 0.875rem;
}

.conn-notice--warn[b-vjpccipi9a] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.conn-users[b-vjpccipi9a] {
    margin: var(--simx-space-2, 0.5rem) 0 0;
    padding-left: var(--simx-space-5, 1.5rem);
    font-size: 0.875rem;
}

/* W5b-04: the venue's own type badge, and the health alert card. */

.conn-badge[b-vjpccipi9a] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-info-border);
    background: var(--simx-info-bg);
    color: var(--simx-info-text);
    font-size: 0.7rem;
    font-weight: 600;
}

.conn-card[b-vjpccipi9a] {
    padding: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

.conn-panel .btn:focus-visible[b-vjpccipi9a],
.conn-panel .form-check-input:focus-visible[b-vjpccipi9a],
.conn-panel a:focus-visible[b-vjpccipi9a] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .conn-panel[b-vjpccipi9a] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .conn-row__health[b-vjpccipi9a] {
        margin-left: 0;
    }

    .conn-row__buttons[b-vjpccipi9a] {
        width: 100%;
    }

    .conn-row__buttons .btn[b-vjpccipi9a] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Connections/ConnectionTypesManager.razor.rz.scp.css */
/* Connection types (master plan W5b-04): the site's own imported types, import and download.
   Theme tokens only (--simx-*), which the shell re-tunes for dark: no prefers-color-scheme block, no fixed colors. */

.conn-types[b-yqng5wq6ne] {
    padding: var(--simx-space-4, 1rem);
    max-width: 60rem;
    color: var(--simx-text-primary);
}

.conn-editor__bar[b-yqng5wq6ne] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

.conn-editor__bar h5:focus[b-yqng5wq6ne] {
    outline: none;
}

.conn-card[b-yqng5wq6ne] {
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

.conn-section__title[b-yqng5wq6ne] {
    margin: 0 0 var(--simx-space-2, 0.5rem);
    font-weight: 600;
}

.conn-badge[b-yqng5wq6ne] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-info-border);
    background: var(--simx-info-bg);
    color: var(--simx-info-text);
    font-size: 0.7rem;
    font-weight: 600;
}

.conn-actions[b-yqng5wq6ne] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-3, 0.75rem);
}

.conn-result[b-yqng5wq6ne] {
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    border: 1px solid var(--simx-border-default);
    overflow-wrap: anywhere;
}

.conn-result--bad[b-yqng5wq6ne] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.conn-result code[b-yqng5wq6ne] {
    color: inherit;
}

.conn-mono[b-yqng5wq6ne] {
    font-family: var(--simx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    overflow-wrap: anywhere;
}

.conn-list[b-yqng5wq6ne] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
}

.conn-row[b-yqng5wq6ne] {
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
}

.conn-row__top[b-yqng5wq6ne] {
    display: flex;
    align-items: flex-start;
    gap: var(--simx-space-3, 0.75rem);
}

.conn-row__icon[b-yqng5wq6ne] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    font-size: 1.1rem;
}

.conn-row__title[b-yqng5wq6ne] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.conn-row__buttons[b-yqng5wq6ne] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-1, 0.25rem);
}

.conn-types__builtin[b-yqng5wq6ne] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.conn-types__builtin li[b-yqng5wq6ne] {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--simx-border-subtle);
}

.conn-types .btn:focus-visible[b-yqng5wq6ne],
.conn-types .form-control:focus-visible[b-yqng5wq6ne],
.conn-types summary:focus-visible[b-yqng5wq6ne],
.conn-types a:focus-visible[b-yqng5wq6ne] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .conn-types[b-yqng5wq6ne] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .conn-row__top[b-yqng5wq6ne] {
        flex-wrap: wrap;
    }

    .conn-row__buttons[b-yqng5wq6ne] {
        width: 100%;
    }

    .conn-row__buttons .btn[b-yqng5wq6ne] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/ContestsPanel.razor.rz.scp.css */
/* ContestsPanel — Contest Lifecycle dialog.
   Token-driven (--simx-*), never --bs-*: see admin-dialog-theme-tokens. */

[b-xs67shsoww] .simx-lifecycle {
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-4, 1rem);
    color: var(--simx-text-primary, #1c2b3a);
}

[b-xs67shsoww] .simx-lifecycle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--simx-space-3, 0.75rem);
}

[b-xs67shsoww] .simx-lifecycle-title {
    margin: 0;
    font-size: var(--simx-font-size-lg, 1.125rem);
    font-weight: var(--simx-font-weight-semibold, 600);
}

[b-xs67shsoww] .simx-lifecycle-sub {
    margin: 0;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #55697d);
}

/* ---- stage track ---- */
[b-xs67shsoww] .simx-lifecycle-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--simx-space-1, 0.25rem);
}

[b-xs67shsoww] .simx-lifecycle-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--simx-space-1, 0.25rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-1, 0.25rem);
    border-radius: var(--simx-radius-md, 0.375rem);
    background: var(--simx-bg-sunken, #f0f2f5);
    color: var(--simx-text-muted, #7a8b9c);
    font-size: var(--simx-font-size-xs, 0.75rem);
    text-align: center;
    position: relative;
}

[b-xs67shsoww] .simx-lifecycle-stage .simx-lifecycle-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--simx-border-default, #dee2e6);
    background: var(--simx-bg-overlay, #fff);
    font-size: 0.7rem;
}

[b-xs67shsoww] .simx-lifecycle-stage.is-done {
    color: var(--simx-success-text, #0f5132);
    background: var(--simx-success-bg, #e8f6ed);
}

[b-xs67shsoww] .simx-lifecycle-stage.is-done .simx-lifecycle-dot {
    border-color: var(--simx-success-text, #0f5132);
    background: var(--simx-success-text, #0f5132);
    color: #fff;
}

[b-xs67shsoww] .simx-lifecycle-stage.is-current {
    color: var(--simx-accent-text, #0a58ca);
    background: var(--simx-accent-subtle, #e7f0ff);
    font-weight: var(--simx-font-weight-semibold, 600);
}

[b-xs67shsoww] .simx-lifecycle-stage.is-current .simx-lifecycle-dot {
    border-color: var(--simx-accent-strong, #0d6efd);
    background: var(--simx-accent-strong, #0d6efd);
    color: #fff;
}

[b-xs67shsoww] .simx-lifecycle-stage.is-cancelled {
    color: var(--simx-danger-text, #842029);
    background: var(--simx-danger-bg, #fdeaec);
}

/* ---- next action card ---- */
[b-xs67shsoww] .simx-lifecycle-next {
    display: flex;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-lg, 0.5rem);
    background: var(--simx-bg-overlay, #fff);
}

[b-xs67shsoww] .simx-lifecycle-next-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-accent-subtle, #e7f0ff);
    color: var(--simx-accent-text, #0a58ca);
    font-size: 1.1rem;
}

[b-xs67shsoww] .simx-lifecycle-next-body {
    flex: 1 1 auto;
    min-width: 0;
}

[b-xs67shsoww] .simx-lifecycle-next-title {
    margin: 0;
    font-weight: var(--simx-font-weight-semibold, 600);
    font-size: var(--simx-font-size-md, 0.875rem);
}

[b-xs67shsoww] .simx-lifecycle-next-desc {
    margin: 0;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #55697d);
}

[b-xs67shsoww] .simx-lifecycle-terminal {
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
    border-radius: var(--simx-radius-lg, 0.5rem);
    font-size: var(--simx-font-size-md, 0.875rem);
}

[b-xs67shsoww] .simx-lifecycle-terminal.is-complete {
    background: var(--simx-success-bg, #e8f6ed);
    color: var(--simx-success-text, #0f5132);
}

[b-xs67shsoww] .simx-lifecycle-terminal.is-cancelled {
    background: var(--simx-danger-bg, #fdeaec);
    color: var(--simx-danger-text, #842029);
}

/* ---- footer ---- */
[b-xs67shsoww] .simx-lifecycle-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--simx-space-2, 0.5rem);
    padding-top: var(--simx-space-3, 0.75rem);
    border-top: 1px solid var(--simx-border-subtle, #eaeef2);
}

[b-xs67shsoww] .simx-lifecycle-footer .btn-link {
    color: var(--simx-danger-text, #842029);
    text-decoration: none;
    padding-left: 0;
}

[b-xs67shsoww] .simx-lifecycle-footer .btn-link:hover {
    text-decoration: underline;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/EdgeBoxes/EdgeBoxAddFlow.razor.rz.scp.css */
/* Add an Edge box and its pairing screen (master plan W5b-02). Theme tokens only (--simx-*): works in dark and light. */

.edge-add[b-4xsxh9twqt] {
    padding: var(--simx-space-4, 1rem);
    color: var(--simx-text-primary);
    max-width: 64rem;
}

.edge-add h5:focus[b-4xsxh9twqt] {
    outline: none;
}

.edge-add h5:focus-visible[b-4xsxh9twqt] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

.edge-add__steps ol[b-4xsxh9twqt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--simx-space-3, 0.75rem);
    counter-reset: edge-step;
}

.edge-add__steps li[b-4xsxh9twqt] {
    counter-increment: edge-step;
    padding: 0.125rem 0.625rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    color: var(--simx-text-secondary);
    font-size: 0.8rem;
}

.edge-add__steps li[b-4xsxh9twqt]::before {
    content: counter(edge-step) ". ";
}

.edge-add__steps li.is-current[b-4xsxh9twqt] {
    border-color: var(--simx-accent);
    color: var(--simx-accent-text);
    background: var(--simx-accent-subtle);
    font-weight: 600;
}

.edge-add__steps li.is-done[b-4xsxh9twqt] {
    color: var(--simx-success-text);
}

.edge-add__form[b-4xsxh9twqt] {
    max-width: 36rem;
}

.edge-add__actions[b-4xsxh9twqt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-3, 0.75rem);
}

.edge-pair[b-4xsxh9twqt] {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: var(--simx-space-4, 1rem);
    align-items: start;
}

.edge-pair__code-card[b-4xsxh9twqt] {
    padding: var(--simx-space-4, 1rem);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    background: var(--simx-bg-surface);
    text-align: center;
}

.edge-pair__label[b-4xsxh9twqt] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--simx-text-secondary);
}

.edge-pair__code[b-4xsxh9twqt] {
    display: flex;
    justify-content: center;
    gap: var(--simx-space-3, 0.75rem);
    margin: var(--simx-space-2, 0.5rem) 0;
    font-family: var(--simx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--simx-text-primary);
}

.edge-pair__code--expired[b-4xsxh9twqt] {
    color: var(--simx-text-tertiary);
    text-decoration: line-through;
}

.edge-pair__group[b-4xsxh9twqt] {
    padding: 0.125rem 0.5rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
}

.edge-pair__timer[b-4xsxh9twqt] {
    font-size: 0.875rem;
    color: var(--simx-text-secondary);
    font-variant-numeric: tabular-nums;
}

.edge-pair__buttons[b-4xsxh9twqt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-top: var(--simx-space-3, 0.75rem);
}

.edge-pair__qr[b-4xsxh9twqt] {
    margin: var(--simx-space-3, 0.75rem) 0 0;
}

.edge-pair__qr img[b-4xsxh9twqt] {
    background: #fff; /* a QR needs a light quiet zone to scan, in either theme */
    padding: 0.5rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    max-width: 100%;
    height: auto;
}

.edge-pair__list[b-4xsxh9twqt] {
    padding-left: 1.25rem;
}

.edge-pair__list li[b-4xsxh9twqt] {
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.edge-pair__pre[b-4xsxh9twqt] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--simx-space-2, 0.5rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-primary);
    font-size: 0.8rem;
}

.edge-pair__watch[b-4xsxh9twqt] {
    margin-top: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-info-bg);
    border: 1px solid var(--simx-info-border);
    color: var(--simx-info-text);
}

.edge-pair__watch-failed[b-4xsxh9twqt] {
    font-size: 0.85rem;
}

.edge-add .btn:focus-visible[b-4xsxh9twqt],
.edge-add .form-control:focus-visible[b-4xsxh9twqt],
.edge-add .form-select:focus-visible[b-4xsxh9twqt],
.edge-add summary:focus-visible[b-4xsxh9twqt] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .edge-pair[b-4xsxh9twqt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .edge-add[b-4xsxh9twqt] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .edge-add__actions .btn[b-4xsxh9twqt] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/EdgeBoxes/EdgeBoxesPanel.razor.rz.scp.css */
/* Resources, Edge boxes (master plan W5b-02).
   Theme tokens only (--simx-*), which the shell re-tunes for dark: no prefers-color-scheme block, no fixed colors.
   Status chips carry words and a glyph; color only repeats them. */

.edge-panel[b-eg2d6aohvj] {
    padding: var(--simx-space-4, 1rem);
    color: var(--simx-text-primary);
}

.edge-software[b-eg2d6aohvj] {
    margin: var(--simx-space-3, 0.75rem) 0;
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-sunken);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-lg, 0.75rem);
}

.edge-software__form[b-eg2d6aohvj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

.edge-software__form .form-select[b-eg2d6aohvj] {
    width: auto;
    min-width: 14rem;
    max-width: 100%;
}

.edge-software__problem[b-eg2d6aohvj] {
    color: var(--simx-warning-text);
}

.edge-empty[b-eg2d6aohvj] {
    text-align: center;
    padding: var(--simx-space-6, 2rem) var(--simx-space-4, 1rem);
    border: 1px dashed var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
    background: var(--simx-bg-sunken);
    max-width: 40rem;
    margin: var(--simx-space-3, 0.75rem) auto;
}

.edge-empty__icon[b-eg2d6aohvj] {
    display: block;
    font-size: 2rem;
    color: var(--simx-text-tertiary);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.edge-list[b-eg2d6aohvj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
}

.edge-row[b-eg2d6aohvj] {
    padding: var(--simx-space-3, 0.75rem);
    background: var(--simx-bg-surface);
    border: 1px solid var(--simx-border-default);
    border-radius: var(--simx-radius-lg, 0.75rem);
}

.edge-row--selected[b-eg2d6aohvj] {
    border-color: var(--simx-accent);
    box-shadow: 0 0 0 1px var(--simx-accent);
}

.edge-row:focus-visible[b-eg2d6aohvj] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

.edge-row__top[b-eg2d6aohvj] {
    display: flex;
    align-items: flex-start;
    gap: var(--simx-space-3, 0.75rem);
}

.edge-row__icon[b-eg2d6aohvj] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-accent-subtle);
    color: var(--simx-accent-text);
    font-size: 1.1rem;
}

.edge-row__title[b-eg2d6aohvj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.edge-row__toggle[b-eg2d6aohvj] {
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--simx-text-secondary);
}

.edge-row__chips[b-eg2d6aohvj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin: var(--simx-space-2, 0.5rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
}

.edge-chip[b-eg2d6aohvj] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--simx-radius-pill, 999px);
    border: 1px solid var(--simx-border-default);
    background: var(--simx-bg-sunken);
    color: var(--simx-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.edge-chip--ok[b-eg2d6aohvj] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.edge-chip--bad[b-eg2d6aohvj] {
    background: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
    color: var(--simx-danger-text);
}

.edge-chip--warn[b-eg2d6aohvj] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.edge-chip--info[b-eg2d6aohvj] {
    background: var(--simx-info-bg);
    border-color: var(--simx-info-border);
    color: var(--simx-info-text);
}

.edge-row__detail[b-eg2d6aohvj] {
    overflow-wrap: anywhere;
}

.edge-notice[b-eg2d6aohvj] {
    margin: var(--simx-space-2, 0.5rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
    padding: var(--simx-space-2, 0.5rem) var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-info-bg);
    border: 1px solid var(--simx-info-border);
    color: var(--simx-info-text);
    font-size: 0.875rem;
}

.edge-notice--warn[b-eg2d6aohvj] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.edge-row__problem[b-eg2d6aohvj] {
    margin: var(--simx-space-1, 0.25rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
    color: var(--simx-text-secondary);
    overflow-wrap: anywhere;
}

.edge-details[b-eg2d6aohvj] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--simx-space-1, 0.25rem) var(--simx-space-3, 0.75rem);
    margin: var(--simx-space-3, 0.75rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
    padding: var(--simx-space-3, 0.75rem);
    border-radius: var(--simx-radius-md, 0.5rem);
    background: var(--simx-bg-sunken);
    font-size: 0.875rem;
}

.edge-details dt[b-eg2d6aohvj] {
    font-weight: 600;
    color: var(--simx-text-secondary);
}

.edge-details dd[b-eg2d6aohvj] {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Agent 1.2.4 — the box label's preview: paper-like in either theme, the size it prints at. */
.edge-label-preview[b-eg2d6aohvj] {
    margin: var(--simx-space-2, 0.5rem) 0 0 calc(2.25rem + var(--simx-space-3, 0.75rem));
}

.edge-box-label[b-eg2d6aohvj] {
    width: 4in;
    max-width: 100%;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.edge-box-label__brand[b-eg2d6aohvj] {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.edge-box-label__name[b-eg2d6aohvj] {
    font-size: 13px;
    font-weight: 600;
    margin: 2px 0 8px;
}

.edge-box-label__warning[b-eg2d6aohvj] {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
}

.edge-box-label__purpose[b-eg2d6aohvj] {
    font-size: 12px;
    margin: 0 0 8px;
}

.edge-box-label__steps[b-eg2d6aohvj] {
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
    padding-left: 18px;
}

.edge-box-label__steps li[b-eg2d6aohvj] {
    margin: 0 0 4px;
}

.edge-box-label__id[b-eg2d6aohvj] {
    font-size: 10px;
    margin: 8px 0 0;
    font-family: "Courier New", monospace;
}

.edge-details__inline[b-eg2d6aohvj] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem);
    align-items: center;
}

.edge-details__inline .form-select[b-eg2d6aohvj] {
    width: auto;
    max-width: 100%;
}

.edge-row__footer[b-eg2d6aohvj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--simx-space-1, 0.25rem);
    margin-top: var(--simx-space-2, 0.5rem);
    padding-top: var(--simx-space-2, 0.5rem);
    border-top: 1px solid var(--simx-border-subtle);
}

.edge-panel .btn:focus-visible[b-eg2d6aohvj],
.edge-panel .form-select:focus-visible[b-eg2d6aohvj],
.edge-panel a:focus-visible[b-eg2d6aohvj] {
    outline: 2px solid var(--simx-border-focus, var(--simx-accent));
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .edge-panel[b-eg2d6aohvj] {
        padding: var(--simx-space-2, 0.5rem);
    }

    .edge-row__chips[b-eg2d6aohvj],
    .edge-notice[b-eg2d6aohvj],
    .edge-row__problem[b-eg2d6aohvj],
    .edge-details[b-eg2d6aohvj],
    .edge-label-preview[b-eg2d6aohvj] {
        margin-left: 0;
    }

    .edge-details[b-eg2d6aohvj] {
        grid-template-columns: 1fr;
    }

    .edge-row__footer .btn[b-eg2d6aohvj] {
        flex: 1 1 auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Events/VenueEventCategoriesPanel.razor.rz.scp.css */
/*
    Shared layout for the What's On settings tabs (categories, organizers, subscribed calendars).

    Scoped to this component but written for all three: the categories tab is a dense inline list
    and the other two are cards, so the row and card rules live together where the shapes can be
    kept consistent.
*/

[b-mjnz4fd4hp] .veg-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-mjnz4fd4hp] .veg-row {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--simx-border-subtle, #e2e8f0);
    flex-wrap: wrap;
}

[b-mjnz4fd4hp] .veg-swatch {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--simx-radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* White ink on an operator-chosen background. The swatch is decorative and marked
       aria-hidden, so contrast here is aesthetic rather than an accessibility floor — the
       category's name sits beside it in the page's own text colour. */
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

[b-mjnz4fd4hp] .veg-name {
    flex: 1 1 12rem;
    min-width: 8rem;
}

[b-mjnz4fd4hp] .veg-active {
    flex: 0 0 auto;
}

[b-mjnz4fd4hp] .veg-count {
    flex: 0 0 2.5rem;
    text-align: right;
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

/* ── Cards (organizers, subscribed calendars) ─────────────────────────────── */

[b-mjnz4fd4hp] .veg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--simx-space-3, 0.75rem);
}

[b-mjnz4fd4hp] .veg-card {
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-surface, #fff);
    padding: var(--simx-space-3, 0.75rem);
}

[b-mjnz4fd4hp] .veg-card-head {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

[b-mjnz4fd4hp] .veg-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
    [b-mjnz4fd4hp] .veg-cards {
        grid-template-columns: 1fr;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Events/VenueEventEditor.razor.rz.scp.css */
/*
    The event editor overlay.

    A two-column sheet rather than a modal box: an event carries six sections and a decision rail,
    and squeezing that into a centred dialog produces the scroll-and-hunt form this feature was
    supposed to replace. Tokens throughout — the admin has its own theme switch, so a
    prefers-color-scheme rule would contradict the operator's explicit choice.

    ── PLAIN SELECTORS, NOT ::deep — and this file is why the rule matters ─────────────────────

    Every element styled here is written in VenueEventEditor.razor, so it carries this component's
    scope attribute and a plain selector compiles to `.vee-scrim[b-xxxxx]`, which matches.

    `::deep` compiles to `[b-xxxxx] .vee-scrim` — a DESCENDANT of a scoped element. That is right
    for markup a CHILD component renders, and wrong for a component's own markup. It happens to
    work for anything below the root (the root is a scoped ancestor of everything inside it),
    which is exactly what makes the mistake survive review.

    It does not work for the ROOT element itself, because the root has no scoped ancestor — its
    parents belong to the panel that hosted this component. Written with ::deep, `.vee-scrim` got
    no `position: fixed`, no z-index and no backdrop, so clicking the edit pencil rendered the
    whole editor inline at the bottom of the page and looked, from the operator's chair, exactly
    like a dead button. Reported as "nothing happens" and confirmed with getComputedStyle:
    position `static`, z-index `auto` — while every descendant styled perfectly.
*/

.vee-scrim[b-wcm8szr9i7] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: var(--simx-bg-backdrop, rgba(15, 23, 42, 0.45));
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--simx-space-4, 1rem);
}

.vee[b-wcm8szr9i7] {
    background: var(--simx-bg-surface, #fff);
    color: var(--simx-text-primary, #0f172a);
    border-radius: var(--simx-radius-lg, 12px);
    box-shadow: var(--simx-shadow-overlay, 0 24px 48px rgba(15, 23, 42, 0.25));
    width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vee-head[b-wcm8szr9i7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-4, 1rem) var(--simx-space-5, 1.25rem);
    border-bottom: 1px solid var(--simx-border-subtle, #e2e8f0);
    background: var(--simx-bg-raised, #fff);
}

/* The form on the left; on the right the rail, which scrolls, over the action bar, which does not (tester bug #350). */
.vee-body[b-wcm8szr9i7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    flex: 1 1 auto;
}

.vee-main[b-wcm8szr9i7] {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    overflow-y: auto;
    padding: var(--simx-space-5, 1.25rem);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.vee-section + .vee-section[b-wcm8szr9i7] {
    margin-top: var(--simx-space-6, 2rem);
    padding-top: var(--simx-space-5, 1.25rem);
    border-top: 1px solid var(--simx-border-subtle, #e2e8f0);
}

.vee-section-head[b-wcm8szr9i7] {
    display: flex;
    align-items: baseline;
    gap: var(--simx-space-2, 0.5rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
    font-weight: var(--simx-font-weight-semibold, 600);
    color: var(--simx-text-primary, #0f172a);
}

.vee-section-note[b-wcm8szr9i7] {
    font-size: var(--simx-font-size-sm, 0.8125rem);
    font-weight: var(--simx-font-weight-normal, 400);
    color: var(--simx-text-tertiary, #64748b);
}

.vee-repeat[b-wcm8szr9i7] {
    background: var(--simx-bg-sunken, #f8fafc);
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    padding: var(--simx-space-3, 0.75rem);
}

.vee-dates summary[b-wcm8szr9i7] {
    cursor: pointer;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-link, #2563eb);
}

.vee-dates ul[b-wcm8szr9i7] {
    margin: var(--simx-space-2, 0.5rem) 0 0;
    padding-left: 1.1rem;
    max-height: 12rem;
    overflow-y: auto;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #475569);
}

.vee-dates li.is-off[b-wcm8szr9i7] {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ── Claims ───────────────────────────────────────────────────────────────── */

.vee-claim[b-wcm8szr9i7] {
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-2, 0.5rem);
    background: var(--simx-bg-sunken, #f8fafc);
}

.vee-claim-row[b-wcm8szr9i7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

.vee-claim-kind[b-wcm8szr9i7] {
    flex: 0 0 13rem;
}

.vee-claim-asset[b-wcm8szr9i7] {
    flex: 1 1 10rem;
    min-width: 8rem;
}

.vee-claim-qty[b-wcm8szr9i7] {
    flex: 0 0 5rem;
}

.vee-claim-switches[b-wcm8szr9i7] {
    margin-top: var(--simx-space-2, 0.5rem);
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

.vee-claim-warn[b-wcm8szr9i7] {
    margin-top: var(--simx-space-2, 0.5rem);
    padding: 0.35rem 0.5rem;
    border-radius: var(--simx-radius-sm, 4px);
    background: var(--simx-warning-bg, #fef3c7);
    color: var(--simx-warning-text, #92400e);
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

/* ── Rail ─────────────────────────────────────────────────────────────────── */

.vee-rail[b-wcm8szr9i7] {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    border-left: 1px solid var(--simx-border-subtle, #e2e8f0);
    background: var(--simx-bg-sunken, #f8fafc);
    padding: var(--simx-space-4, 1rem);
    overflow-y: auto;
}

.vee-rail-card[b-wcm8szr9i7] {
    background: var(--simx-bg-surface, #fff);
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

.vee-rail-card h6[b-wcm8szr9i7] {
    font-size: var(--simx-font-size-sm, 0.8125rem);
    font-weight: var(--simx-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--simx-text-secondary, #475569);
    margin-bottom: var(--simx-space-2, 0.5rem);
}

.vee-conflicts[b-wcm8szr9i7] {
    border-color: var(--simx-danger-border, #fecaca);
    background: var(--simx-danger-bg, #fef2f2);
}

.vee-conflict-list[b-wcm8szr9i7] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow-y: auto;
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

.vee-conflict-list li[b-wcm8szr9i7] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--simx-border-subtle, #e2e8f0);
}

.vee-conflict-list li:last-child[b-wcm8szr9i7] {
    border-bottom: 0;
}

.vee-rail-delete[b-wcm8szr9i7] {
    margin-top: var(--simx-space-4, 1rem);
    padding-top: var(--simx-space-3, 0.75rem);
    border-top: 1px solid var(--simx-border-subtle, #e2e8f0);
}

/* Save, Hold it anyway and Cancel: always in view, under the rail on a desktop, at the bottom of the screen on a phone. */
.vee-actions[b-wcm8szr9i7] {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-top: 1px solid var(--simx-border-subtle, #e2e8f0);
    background: var(--simx-bg-sunken, #f8fafc);
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

/* Below 900 the rail moves under the form rather than shrinking: at 15rem the status and
   visibility labels wrap to three lines each and stop being readable at a glance. */
@media (max-width: 900px) {
    .vee-scrim[b-wcm8szr9i7] {
        padding: 0;
    }

    .vee[b-wcm8szr9i7] {
        border-radius: 0;
        width: 100%;
    }

    /* One column that scrolls as a whole: the form, the rail under it, and the action bar, which is the scrolling box's
       own child so it can stick to its bottom edge from the first screen to the last (tester bug #350). */
    .vee-body[b-wcm8szr9i7] {
        display: block;
        overflow-y: auto;
    }

    .vee-main[b-wcm8szr9i7] {
        overflow-y: visible;
    }

    .vee-rail[b-wcm8szr9i7] {
        border-left: 0;
        border-top: 1px solid var(--simx-border-subtle, #e2e8f0);
        overflow-y: visible;
    }

    .vee-actions[b-wcm8szr9i7] {
        position: sticky;
        bottom: 0;
        z-index: 1;
        border-left: 0;
        box-shadow: var(--simx-shadow-sm, 0 -2px 8px rgba(15, 23, 42, 0.08));
    }

    .vee-claim-kind[b-wcm8szr9i7] {
        flex: 1 1 100%;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Events/VenueEventFeedsPanel.razor.rz.scp.css */
/*
    Subscribed-calendar cards. Same shape as the organizer cards; scoped CSS cannot be shared
    across components, so the rules are restated rather than silently applying to nothing.
*/
[b-5i89kzbi28] .veg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--simx-space-3, 0.75rem);
}

[b-5i89kzbi28] .veg-card {
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-surface, #fff);
    padding: var(--simx-space-3, 0.75rem);
}

[b-5i89kzbi28] .veg-card-head {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

[b-5i89kzbi28] .veg-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
    [b-5i89kzbi28] .veg-cards {
        grid-template-columns: 1fr;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Events/VenueEventOrganizersPanel.razor.rz.scp.css */
/*
    Organizer cards.

    Scoped CSS is per component, so these rules are stated here rather than shared with the
    categories tab — a scoped stylesheet cannot reach another component's markup, and a rule that
    silently applies to nothing is worse than a duplicated one.
*/

[b-kpwlxkk6jt] .veg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: var(--simx-space-3, 0.75rem);
}

[b-kpwlxkk6jt] .veg-card {
    border: 1px solid var(--simx-border-subtle, #e2e8f0);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-surface, #fff);
    padding: var(--simx-space-3, 0.75rem);
}

[b-kpwlxkk6jt] .veg-card-head {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
}

[b-kpwlxkk6jt] .veg-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
    [b-kpwlxkk6jt] .veg-cards {
        grid-template-columns: 1fr;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Events/VenueEventsPanel.razor.rz.scp.css */
/*
    What's On — the event list.

    Everything here is expressed in --simx-* design tokens, never raw hex and never
    prefers-color-scheme. The admin shell has its own theme switch, so a media query would
    contradict the operator's explicit choice on exactly the sites that made one.
*/

[b-fovupmcidq] .vep-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

[b-fovupmcidq] .vep-filter-select {
    width: auto;
    min-width: 9rem;
}

[b-fovupmcidq] .vep-search {
    min-width: 12rem;
    flex: 1 1 12rem;
    max-width: 22rem;
}

/* ── Month grouping ───────────────────────────────────────────────────────── */

[b-fovupmcidq] .vep-month + .vep-month {
    margin-top: var(--simx-space-5, 1.5rem);
}

[b-fovupmcidq] .vep-month-head {
    position: sticky;
    /* Sticks under the shell's own header rather than at 0, or the first row of each month
       slides underneath the toolbar and cannot be read. */
    top: 0;
    z-index: 2;
    margin: 0 0 var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-2, 0.5rem) 0;
    background: var(--simx-bg-app, #fff);
    color: var(--simx-text-secondary, #475569);
    font-size: var(--simx-font-size-sm, 0.8125rem);
    font-weight: var(--simx-font-weight-semibold, 600);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--simx-border-subtle, #e2e8f0);
}

/* Each month's events sit on a card, one row per event with a hairline between them. The rows used to sit straight on
   the page with the faintest rule, so two events ran together (tester round, 4.0.27). */
[b-fovupmcidq] .vep-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--simx-bg-surface, #fff);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-card, 0.75rem);
    overflow: hidden;
}

/* ── Row ──────────────────────────────────────────────────────────────────── */

[b-fovupmcidq] .vep-row {
    display: flex;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
}

[b-fovupmcidq] .vep-row + .vep-row {
    border-top: 1px solid var(--simx-border-default, #dee2e6);
}

[b-fovupmcidq] .vep-row:hover {
    background: var(--simx-bg-hover, rgba(0, 0, 0, 0.02));
}

/* A called-off date stays in the list and reads as off. Removing it would answer
   "what happened to Tuesday?" with silence. */
[b-fovupmcidq] .vep-row.is-off .vep-title,
[b-fovupmcidq] .vep-row.is-off .vep-meta {
    text-decoration: line-through;
    opacity: 0.65;
}

[b-fovupmcidq] .vep-date {
    flex: 0 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    color: var(--simx-text-secondary, #475569);
}

[b-fovupmcidq] .vep-date-day {
    font-size: 1.25rem;
    font-weight: var(--simx-font-weight-semibold, 600);
    color: var(--simx-text-primary, #0f172a);
}

[b-fovupmcidq] .vep-date-dow {
    font-size: var(--simx-font-size-xs, 0.6875rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-fovupmcidq] .vep-body {
    flex: 1 1 auto;
    min-width: 0;
}

[b-fovupmcidq] .vep-title-line {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
    min-width: 0;
}

/* A button rather than an anchor: this opens an editor in place, and an <a href="#"> that
   navigates nowhere is a link that lies to a screen reader. */
[b-fovupmcidq] .vep-title {
    all: unset;
    cursor: pointer;
    font-weight: var(--simx-font-weight-medium, 500);
    color: var(--simx-text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fovupmcidq] .vep-title:hover,
[b-fovupmcidq] .vep-title:focus-visible {
    color: var(--simx-text-link, #2563eb);
    text-decoration: underline;
}

[b-fovupmcidq] .vep-title:focus-visible {
    outline: 2px solid var(--simx-border-focus, #2563eb);
    outline-offset: 2px;
    border-radius: var(--simx-radius-sm, 4px);
}

[b-fovupmcidq] .vep-meta {
    margin-top: 0.125rem;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #475569);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

[b-fovupmcidq] .vep-sep {
    opacity: 0.5;
}

[b-fovupmcidq] .vep-organizer {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

[b-fovupmcidq] .vep-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

[b-fovupmcidq] .vep-dot-sm {
    width: 0.45rem;
    height: 0.45rem;
}

[b-fovupmcidq] .vep-flags {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

[b-fovupmcidq] .vep-actions {
    display: flex;
    gap: 0.25rem;
    flex: 0 0 auto;
}

/* ── Chips ────────────────────────────────────────────────────────────────── */

/* Every chip carries a word as well as a colour. Roughly one man in twelve cannot rely on
   the colour, and "which of these is published" is the question the list exists to answer. */
[b-fovupmcidq] .vep-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--simx-radius-pill, 999px);
    font-size: var(--simx-font-size-xs, 0.6875rem);
    font-weight: var(--simx-font-weight-medium, 500);
    white-space: nowrap;
    border: 1px solid transparent;
}

[b-fovupmcidq] .vep-chip-live {
    background: var(--simx-success-bg, #dcfce7);
    color: var(--simx-success-text, #166534);
    border-color: var(--simx-success-border, #86efac);
}

[b-fovupmcidq] .vep-chip-draft {
    background: var(--simx-bg-sunken, #f1f5f9);
    color: var(--simx-text-secondary, #475569);
    border-color: var(--simx-border-subtle, #e2e8f0);
}

[b-fovupmcidq] .vep-chip-off {
    background: var(--simx-danger-bg, #fee2e2);
    color: var(--simx-danger-text, #991b1b);
    border-color: var(--simx-danger-border, #fecaca);
}

[b-fovupmcidq] .vep-chip-hold {
    background: var(--simx-warning-bg, #fef3c7);
    color: var(--simx-warning-text, #92400e);
    border-color: var(--simx-warning-border, #fde68a);
}

[b-fovupmcidq] .vep-chip-internal {
    background: var(--simx-info-bg, #e0f2fe);
    color: var(--simx-info-text, #075985);
    border-color: var(--simx-info-border, #bae6fd);
}

[b-fovupmcidq] .vep-chip-quiet {
    background: transparent;
    color: var(--simx-text-tertiary, #64748b);
    border-color: var(--simx-border-subtle, #e2e8f0);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

/* Staff run this from a tablet at the counter as often as from a desk. Below 720 the row
   stacks rather than compressing the title to nothing. */
@media (max-width: 720px) {
    [b-fovupmcidq] .vep-row {
        flex-wrap: wrap;
    }

    [b-fovupmcidq] .vep-body {
        flex: 1 1 60%;
    }

    [b-fovupmcidq] .vep-flags {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-left: 3.75rem;
    }

    [b-fovupmcidq] .vep-actions {
        margin-left: auto;
    }

    [b-fovupmcidq] .vep-search {
        max-width: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/FoodAndBev/FBPOSPanel.razor.rz.scp.css */
/* FBPOSPanel.razor.css - POS Terminal responsive styles */

/* =================================================================
   BASE TERMINAL STYLES
   ================================================================= */

.pos-terminal[b-lo6btq9nc9] {
    height: calc(100vh - 140px);
    min-height: 600px;
    background-color: var(--simx-surface, #f8f9fa);
}

/* =================================================================
   TAB HEADER (COMPACT - DESKTOP)
   ================================================================= */

.pos-tab-header-compact[b-lo6btq9nc9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--simx-surface-alt, #fff);
    border-bottom: 1px solid var(--simx-border, #dee2e6);
}

.pos-tab-header-compact .tab-info[b-lo6btq9nc9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.pos-tab-header-compact .tab-badge[b-lo6btq9nc9] {
    padding: 0.25rem 0.625rem;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.pos-tab-header-compact .tab-name[b-lo6btq9nc9] {
    font-weight: 500;
    color: var(--simx-text, #212529);
}

.pos-tab-header-compact .table-badge[b-lo6btq9nc9] {
    padding: 0.25rem 0.5rem;
    background: var(--bs-info, #0dcaf0);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pos-tab-header-compact .no-tab[b-lo6btq9nc9] {
    color: var(--simx-text-muted, #6c757d);
}

.pos-tab-header-compact .tab-actions[b-lo6btq9nc9] {
    display: flex;
    gap: 0.5rem;
}

.pos-tab-header-compact .tab-action-btn[b-lo6btq9nc9] {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-surface, #f8f9fa);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 8px;
    color: var(--simx-text-muted, #6c757d);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pos-tab-header-compact .tab-action-btn:hover[b-lo6btq9nc9] {
    border-color: var(--simx-primary, #0d6efd);
    color: var(--simx-primary, #0d6efd);
}

.pos-tab-header-compact .tab-action-btn .count-badge[b-lo6btq9nc9] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================================================================
   ITEMS CONTAINER
   ================================================================= */

.pos-items-container[b-lo6btq9nc9] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

.pos-items-grid[b-lo6btq9nc9] {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (min-width: 768px) {
    .pos-items-grid[b-lo6btq9nc9] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (min-width: 1200px) {
    .pos-items-grid[b-lo6btq9nc9] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.625rem;
    }
}

.empty-items[b-lo6btq9nc9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
    color: var(--simx-text-muted, #6c757d);
}

.empty-items i[b-lo6btq9nc9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-items p[b-lo6btq9nc9] {
    margin: 0;
    font-size: 1rem;
}

/* =================================================================
   ORDER TAB HEADER (MOBILE)
   ================================================================= */

.order-tab-header[b-lo6btq9nc9] {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--simx-border, #dee2e6);
    margin-bottom: 0.75rem;
}

/* =================================================================
   CART ITEMS LIST
   ================================================================= */

.cart-items-list[b-lo6btq9nc9] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cart-items-list .cart-item[b-lo6btq9nc9] {
    background: var(--simx-surface-alt, #fff);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 10px;
    padding: 0.75rem;
    transition: border-color 0.2s ease;
}

.cart-items-list .cart-item.sent[b-lo6btq9nc9] {
    background: var(--simx-surface, #f8f9fa);
    border-color: var(--bs-success, #198754);
}

.cart-items-list .item-main[b-lo6btq9nc9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.cart-items-list .qty-badge[b-lo6btq9nc9] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-primary, #0d6efd);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.cart-items-list .cart-item.sent .qty-badge[b-lo6btq9nc9] {
    background: var(--bs-success, #198754);
}

.cart-items-list .item-details[b-lo6btq9nc9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cart-items-list .item-name[b-lo6btq9nc9] {
    font-weight: 500;
    color: var(--simx-text, #212529);
    word-wrap: break-word;
}

.cart-items-list .item-mods[b-lo6btq9nc9] {
    font-size: 0.8125rem;
    color: var(--simx-text-muted, #6c757d);
}

.cart-items-list .item-notes[b-lo6btq9nc9] {
    font-size: 0.8125rem;
    color: var(--bs-info, #0dcaf0);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cart-items-list .sent-badge[b-lo6btq9nc9] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    background: var(--bs-success, #198754);
    color: #fff;
    border-radius: 4px;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 600;
}

.cart-items-list .item-price[b-lo6btq9nc9] {
    font-weight: 600;
    color: var(--simx-text, #212529);
    white-space: nowrap;
}

.cart-items-list .item-actions[b-lo6btq9nc9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-left: calc(28px + 0.625rem);
}

.cart-items-list .qty-btn[b-lo6btq9nc9] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--simx-surface, #f8f9fa);
    border: 1px solid var(--simx-border, #dee2e6);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--simx-text, #212529);
    cursor: pointer;
}

.cart-items-list .qty-btn:hover[b-lo6btq9nc9] {
    border-color: var(--simx-primary, #0d6efd);
}

.cart-items-list .qty-btn:active[b-lo6btq9nc9] {
    background: var(--simx-border, #dee2e6);
}

.cart-items-list .remove-btn[b-lo6btq9nc9] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 6px;
    color: var(--bs-danger, #dc3545);
    cursor: pointer;
    margin-left: auto;
}

.cart-items-list .remove-btn:hover[b-lo6btq9nc9] {
    background: var(--bs-danger, #dc3545);
    color: #fff;
}

/* =================================================================
   EMPTY CART STATE
   ================================================================= */

.empty-cart[b-lo6btq9nc9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--simx-text-muted, #6c757d);
}

.empty-cart i[b-lo6btq9nc9] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-cart p[b-lo6btq9nc9] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--simx-text, #212529);
}

.empty-cart span[b-lo6btq9nc9] {
    font-size: 0.875rem;
}

/* =================================================================
   ORDER TOTALS
   ================================================================= */

.order-totals[b-lo6btq9nc9] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--simx-border, #dee2e6);
}

.order-totals .total-row[b-lo6btq9nc9] {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
}

.order-totals .grand-total[b-lo6btq9nc9] {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--simx-border, #dee2e6);
    font-size: 1.25rem;
    font-weight: 700;
}

.order-totals .grand-total span:last-child[b-lo6btq9nc9] {
    color: var(--simx-primary, #0d6efd);
}

/* =================================================================
   ACTION BUTTON GROUP
   ================================================================= */

.action-btn-group[b-lo6btq9nc9] {
    display: flex;
    gap: 0.5rem;
}

.action-btn-group .e-btn[b-lo6btq9nc9] {
    flex: 1;
    padding: 0.625rem;
}

/* =================================================================
   TABLE SELECTION STYLES
   ================================================================= */

.table-card[b-lo6btq9nc9] {
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}

.table-card:hover:not(.opacity-50)[b-lo6btq9nc9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.table-shape[b-lo6btq9nc9] {
    width: 40px;
    height: 30px;
    margin: 0 auto;
    border: 2px solid currentColor;
}

.table-shape.rectangle[b-lo6btq9nc9] {
    border-radius: 4px;
}

.table-shape.round[b-lo6btq9nc9] {
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

.table-shape.square[b-lo6btq9nc9] {
    width: 35px;
    height: 35px;
    border-radius: 4px;
}

.table-shape.status-available[b-lo6btq9nc9] {
    background-color: rgba(25, 135, 84, 0.2);
    border-color: #198754;
    color: #198754;
}

.table-shape.status-occupied[b-lo6btq9nc9] {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #dc3545;
}

.table-shape.status-reserved[b-lo6btq9nc9] {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffc107;
}

.table-shape.status-cleaning[b-lo6btq9nc9] {
    background-color: rgba(108, 117, 125, 0.2);
    border-color: #6c757d;
    color: #6c757d;
}

.table-shape.status-closed[b-lo6btq9nc9] {
    background-color: rgba(33, 37, 41, 0.2);
    border-color: #212529;
    color: #212529;
}

/* =================================================================
   CREDIT REDEMPTION STYLES
   ================================================================= */

.credit-dialog[b-lo6btq9nc9] {
    max-height: 70vh;
    overflow-y: auto;
}

.credit-list[b-lo6btq9nc9] {
    max-height: 300px;
    overflow-y: auto;
}

/* =================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 767px) {
    .pos-terminal[b-lo6btq9nc9] {
        height: calc(100vh - 120px);
        min-height: 500px;
    }
    
    .pos-items-container[b-lo6btq9nc9] {
        padding: 0.75rem;
    }
    
    .pos-items-grid[b-lo6btq9nc9] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .cart-items-list .cart-item[b-lo6btq9nc9] {
        padding: 0.625rem;
    }
    
    .cart-items-list .item-actions[b-lo6btq9nc9] {
        padding-left: calc(28px + 0.5rem);
    }
    
    .empty-cart[b-lo6btq9nc9] {
        padding: 2rem 1rem;
    }
    
    .empty-cart i[b-lo6btq9nc9] {
        font-size: 2.5rem;
    }
}

/* =================================================================
   TOUCH OPTIMIZATIONS
   ================================================================= */

@media (pointer: coarse) {
    .pos-tab-header-compact .tab-action-btn[b-lo6btq9nc9] {
        width: 44px;
        height: 44px;
    }
    
    .cart-items-list .qty-btn[b-lo6btq9nc9],
    .cart-items-list .remove-btn[b-lo6btq9nc9] {
        width: 40px;
        height: 40px;
    }
    
    /* Remove hover effects on touch */
    .pos-tab-header-compact .tab-action-btn:hover[b-lo6btq9nc9] {
        border-color: var(--simx-border, #dee2e6);
        color: var(--simx-text-muted, #6c757d);
    }
    
    .cart-items-list .qty-btn:hover[b-lo6btq9nc9] {
        border-color: var(--simx-border, #dee2e6);
    }
    
    .cart-items-list .remove-btn:hover[b-lo6btq9nc9] {
        background: transparent;
        color: var(--bs-danger, #dc3545);
    }
}

/* =================================================================
   DARK MODE
   ================================================================= */

/* Keyed on the shell's resolved theme, so "Dark" and "Match system" on a dark OS both get it. Until 4.0.34 this block
   answered "Match system" alone, with near-black greys that matched nothing else in the shell. Surfaces and ink already
   follow the theme through the --simx-* vocabulary; only what is drawn in fixed light values gets a dark face here. */

/* Bootstrap's #0d6efd as ink measured 3.66:1 on the dark card. */
html[data-simx-theme-resolved="dark"] .pos-tab-header-compact .tab-action-btn:hover[b-lo6btq9nc9],
html[data-simx-theme-resolved="dark"] .order-totals .grand-total span:last-child[b-lo6btq9nc9] {
    color: var(--simx-accent-text);
}

/* The table map's status shapes: Bootstrap's saturated inks fail as text on the dark ground (closed was #212529, near
   invisible). Each takes its status trio, so fill, outline and number move together. */
html[data-simx-theme-resolved="dark"] .table-shape.status-available[b-lo6btq9nc9] {
    background-color: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

html[data-simx-theme-resolved="dark"] .table-shape.status-occupied[b-lo6btq9nc9] {
    background-color: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
    color: var(--simx-danger-text);
}

html[data-simx-theme-resolved="dark"] .table-shape.status-reserved[b-lo6btq9nc9] {
    background-color: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

html[data-simx-theme-resolved="dark"] .table-shape.status-cleaning[b-lo6btq9nc9],
html[data-simx-theme-resolved="dark"] .table-shape.status-closed[b-lo6btq9nc9] {
    background-color: var(--simx-neutral-bg);
    border-color: var(--simx-border-strong);
    color: var(--simx-text-secondary);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Gamification/XpAuditPanel.razor.rz.scp.css */
/* XP Audit — the driver picker, the ledger and the adjustment.
   Token-driven (--simx-*), never --bs-*: see admin-dialog-theme-tokens. */

[b-e48pu2cnbm] .xp-audit-search {
    display: flex;
    align-items: center;
    gap: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-4, 1rem);
}

[b-e48pu2cnbm] .xp-audit-search-box {
    max-width: 480px;
}

[b-e48pu2cnbm] .xp-audit-search-status {
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-tertiary, #607080);
}

/* ── Picker results ─────────────────────────────────────────────────── */

[b-e48pu2cnbm] .xp-audit-results {
    list-style: none;
    margin: 0 0 var(--simx-space-4, 1rem) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2, 0.5rem);
    max-width: 680px;
}

[b-e48pu2cnbm] .xp-audit-result {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-surface, #fff);
    color: var(--simx-text-primary, #1c2b3a);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

[b-e48pu2cnbm] .xp-audit-result:hover,
[b-e48pu2cnbm] .xp-audit-result:focus-visible {
    border-color: var(--simx-accent, #0d6efd);
    background: var(--simx-accent-subtle, #e7f0ff);
}

[b-e48pu2cnbm] .xp-audit-result-name {
    font-weight: 600;
}

[b-e48pu2cnbm] .xp-audit-result-racer {
    margin-left: 0.4rem;
    font-weight: 400;
    color: var(--simx-text-secondary, #55697d);
}

[b-e48pu2cnbm] .xp-audit-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-3, 0.75rem);
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-tertiary, #607080);
}

[b-e48pu2cnbm] .xp-audit-result-level {
    font-variant-numeric: tabular-nums;
}

/* ── The driver ─────────────────────────────────────────────────────── */

[b-e48pu2cnbm] .xp-audit-driver {
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-4, 1rem);
}

[b-e48pu2cnbm] .xp-audit-driver-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--simx-space-3, 0.75rem);
    flex-wrap: wrap;
}

[b-e48pu2cnbm] .xp-audit-driver-name {
    margin: 0 0 0.2rem 0;
    font-size: var(--simx-font-size-lg, 1.125rem);
    font-weight: 700;
    color: var(--simx-text-primary, #1c2b3a);
}

[b-e48pu2cnbm] .xp-audit-driver-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-3, 0.75rem);
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-secondary, #55697d);
}

[b-e48pu2cnbm] .xp-audit-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--simx-space-3, 0.75rem);
}

[b-e48pu2cnbm] .xp-audit-figure {
    display: flex;
    flex-direction: column;
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-surface, #fff);
}

[b-e48pu2cnbm] .xp-audit-figure-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--simx-text-primary, #1c2b3a);
    line-height: 1.2;
}

[b-e48pu2cnbm] .xp-audit-figure-label {
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-tertiary, #607080);
}

[b-e48pu2cnbm] .xp-audit-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-2, 0.5rem);
}

[b-e48pu2cnbm] .xp-audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--simx-border-default, #dee2e6);
    background: var(--simx-bg-surface, #fff);
    color: var(--simx-text-secondary, #55697d);
    font-size: var(--simx-font-size-sm, 0.875rem);
}

[b-e48pu2cnbm] .xp-audit-badge-xp {
    font-weight: 700;
    color: var(--simx-accent, #0d6efd);
    font-variant-numeric: tabular-nums;
}

[b-e48pu2cnbm] .xp-audit-section-title {
    margin: var(--simx-space-2, 0.5rem) 0 0 0;
    font-size: var(--simx-font-size-base, 1rem);
    font-weight: 700;
    color: var(--simx-text-primary, #1c2b3a);
}

/* ── The ledger ─────────────────────────────────────────────────────── */

[b-e48pu2cnbm] .xp-audit-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[b-e48pu2cnbm] .xp-audit-amount.is-positive { color: var(--simx-success-text, #0f5132); }
[b-e48pu2cnbm] .xp-audit-amount.is-negative { color: var(--simx-danger-text, #842029); }
[b-e48pu2cnbm] .xp-audit-amount.is-zero { color: var(--simx-text-tertiary, #607080); }

[b-e48pu2cnbm] .xp-audit-reason {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* A grant the abuse guard reduced or blocked: the figure asked for is the point of the row. */
[b-e48pu2cnbm] .xp-audit-limited {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-warning-text, #664d03);
}

[b-e48pu2cnbm] .xp-audit-source {
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-secondary, #55697d);
}

[b-e48pu2cnbm] .xp-audit-levelup {
    margin-left: 0.35rem;
    color: var(--simx-accent, #0d6efd);
    font-weight: 700;
}

/* ── Adjust ─────────────────────────────────────────────────────────── */

[b-e48pu2cnbm] .xp-audit-adjust {
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-4, 1rem);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-md, 8px);
    background: var(--simx-bg-subtle, #f7f9fb);
}

[b-e48pu2cnbm] .xp-audit-adjust-note {
    margin: 0;
    font-size: var(--simx-font-size-sm, 0.875rem);
    color: var(--simx-text-secondary, #55697d);
    max-width: 62ch;
}

[b-e48pu2cnbm] .xp-audit-adjust-row {
    display: flex;
    gap: var(--simx-space-3, 0.75rem);
    flex-wrap: wrap;
    align-items: center;
}

[b-e48pu2cnbm] .xp-audit-adjust-amount {
    max-width: 200px;
}

[b-e48pu2cnbm] .xp-audit-adjust-reason {
    flex: 1 1 280px;
    min-width: 0;
}

@media (max-width: 640px) {
    [b-e48pu2cnbm] .xp-audit-adjust-row > * {
        flex: 1 1 100%;
        max-width: none;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/KartClassesPanel.razor.rz.scp.css */
/* KartClassesPanel Dialog Styles */

/* Grid color badge */
[b-c7a7ncoz0b] .class-color-badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Section Headers */
[b-c7a7ncoz0b] .section-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

[b-c7a7ncoz0b] .section-header i {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Form Section Container */
[b-c7a7ncoz0b] .form-section {
    background: var(--bs-gray-50, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

/* Form Label Styling */
[b-c7a7ncoz0b] .e-label-top {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-bottom: 0.35rem;
    display: block;
}

/* Form Text Helper */
[b-c7a7ncoz0b] .form-text {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Checkbox Group Styling */
[b-c7a7ncoz0b] .e-checkbox-wrapper {
    margin-right: 0.5rem;
}

/* Modern Dialog Styling */
[b-c7a7ncoz0b] .simx-dialog-modern .e-dlg-content {
    padding: 1.5rem;
}

[b-c7a7ncoz0b] .simx-dialog-modern .e-dlg-header-content {
    border-bottom: 1px solid var(--bs-gray-200);
    padding-bottom: 1rem;
}

[b-c7a7ncoz0b] .simx-dialog-modern .e-dlg-header {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Outline Input Focus States */
[b-c7a7ncoz0b] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left).e-input-focus,
[b-c7a7ncoz0b] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left):focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    [b-c7a7ncoz0b] .form-section {
        margin-bottom: 0.5rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/KartingSeriesPanel.razor.rz.scp.css */
/* KartingSeriesPanel Dialog Styles */

/* Section Headers */
[b-yj4iq7r5t1] .section-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

[b-yj4iq7r5t1] .section-header i {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Form Section Container */
[b-yj4iq7r5t1] .form-section {
    background: var(--bs-gray-50, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

/* Form Label Styling */
[b-yj4iq7r5t1] .e-label-top {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-bottom: 0.35rem;
    display: block;
}

/* Form Text Helper */
[b-yj4iq7r5t1] .form-text {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Checkbox Group Styling */
[b-yj4iq7r5t1] .e-checkbox-wrapper {
    margin-right: 0.5rem;
}

/* Modern Dialog Styling */
[b-yj4iq7r5t1] .simx-dialog-modern .e-dlg-content {
    padding: 1.5rem;
}

[b-yj4iq7r5t1] .simx-dialog-modern .e-dlg-header-content {
    border-bottom: 1px solid var(--bs-gray-200);
    padding-bottom: 1rem;
}

[b-yj4iq7r5t1] .simx-dialog-modern .e-dlg-header {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Custom points table inside the scoring section */
[b-yj4iq7r5t1] .form-section .table {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

[b-yj4iq7r5t1] .form-section .table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
}

/* Outline Input Focus States */
[b-yj4iq7r5t1] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left).e-input-focus,
[b-yj4iq7r5t1] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left):focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    [b-yj4iq7r5t1] .form-section {
        margin-bottom: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   SERIES DETAIL HEADER ACTIONS

   The header is a tinted fill (`bg-primary bg-opacity-10`). Every action on it —
   "View on website", Publish/Unpublish, Mark Completed, Reopen, Restore and the close
   X — was an UNFILLED button: Bootstrap's `.btn-outline-primary` paints brand blue on
   near-transparent, and Syncfusion's `.e-flat` takes `--simx-text-secondary`, a grey the
   shared theme picks for the plain white panel surface (see SCMUIKit.theme.css, "Syncfusion
   button variants"). Neither ink was ever chosen against a blue fill, so on this one header
   the whole action row faded into its background.

   The fix follows the theme's own rule — ink chosen against the fill — by giving these
   buttons a fill of their own: the panel surface they were designed for, carried onto the
   header as a chip. Tokens rather than literals, so it holds in dark theme too, where the
   same tint resolves to a dark blue and a hard-coded white chip would be the new defect.

   Only the UNFILLED variants are touched. Publish is `.e-success`, a filled Syncfusion
   button that already carries white on a saturated green — the theme's own note says a
   filled button needs no help, and repainting it would be the next defect.
   --------------------------------------------------------------------------- */

[b-yj4iq7r5t1] .series-detail-header .btn,
[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat {
    background-color: var(--simx-bg-surface, #ffffff);
    border: 1px solid var(--simx-border-default, #dee2e6);
    color: var(--simx-text-primary, #1c2b3a);
}

/* Syncfusion colours `.e-icons` independently of the button's own `color`, so the close X
   has to be told explicitly or its glyph keeps the old low-contrast grey. */
[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat .e-icons {
    color: inherit;
}

[b-yj4iq7r5t1] .series-detail-header .btn:hover,
[b-yj4iq7r5t1] .series-detail-header .btn:focus-visible,
[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat:hover,
[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat:focus-visible {
    background-color: var(--simx-bg-sunken, #f0f2f5);
    border-color: var(--simx-accent, #0d6efd);
    color: var(--simx-text-primary, #1c2b3a);
}

[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat:hover .e-icons,
[b-yj4iq7r5t1] .series-detail-header .e-btn.e-flat:focus-visible .e-icons {
    color: inherit;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/ResourceTypesPanel.razor.rz.scp.css */
/* ResourceTypesPanel Dialog Styles */

/* Section Headers */
[b-sncmxit65t] .section-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-gray-700);
    border-bottom: 2px solid var(--bs-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

[b-sncmxit65t] .section-header i {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Form Section Container */
[b-sncmxit65t] .form-section {
    background: var(--bs-gray-50, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

/* Live Preview Card */
[b-sncmxit65t] .resource-type-preview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1.25rem;
    color: white;
}

[b-sncmxit65t] .resource-type-preview .preview-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

[b-sncmxit65t] .resource-type-preview .preview-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

[b-sncmxit65t] .resource-type-preview .preview-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[b-sncmxit65t] .resource-type-preview .preview-content {
    flex: 1;
    min-width: 0;
}

[b-sncmxit65t] .resource-type-preview .preview-name {
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-sncmxit65t] .resource-type-preview .preview-code {
    font-size: 0.8rem;
    opacity: 0.8;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[b-sncmxit65t] .resource-type-preview .preview-badges {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

[b-sncmxit65t] .resource-type-preview .badge {
    font-size: 0.7rem;
    padding: 0.35rem 0.6rem;
}

/* Form Label Styling */
[b-sncmxit65t] .e-label-top {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-gray-600);
    margin-bottom: 0.35rem;
    display: block;
}

/* Form Text Helper */
[b-sncmxit65t] .form-text {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
    margin-top: 0.25rem;
}

/* Checkbox Group Styling */
[b-sncmxit65t] .e-checkbox-wrapper {
    margin-right: 0.5rem;
}

/* Modern Dialog Styling */
[b-sncmxit65t] .simx-dialog-modern .e-dlg-content {
    padding: 1.5rem;
}

[b-sncmxit65t] .simx-dialog-modern .e-dlg-header-content {
    border-bottom: 1px solid var(--bs-gray-200);
    padding-bottom: 1rem;
}

[b-sncmxit65t] .simx-dialog-modern .e-dlg-header {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Outline Input Focus States */
[b-sncmxit65t] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left).e-input-focus,
[b-sncmxit65t] .e-outline.e-input-group:not(.e-disabled):not(.e-float-icon-left):focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    [b-sncmxit65t] .resource-type-preview .preview-card {
        flex-wrap: wrap;
    }
    
    [b-sncmxit65t] .resource-type-preview .preview-badges {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/SafetyVideosPanel.razor.rz.scp.css */
/* SafetyVideosPanel.razor.css */

.panel-content[b-t3xemkcck7] {
    padding: 16px;
}

.loading-container[b-t3xemkcck7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/ScreensPanel.razor.rz.scp.css */
/* ScreensPanel.razor.css */

/* Color picker input group styling */
.input-group .form-control-color[b-k7hdhet8ac] {
    cursor: pointer;
}

/* Ensure text input next to color picker has visible text */
.input-group > .form-control[b-k7hdhet8ac] {
    color: var(--bs-body-color, #212529) !important;
    background-color: var(--bs-body-bg, #fff) !important;
}

/* Color preview swatch styling */
.input-group-text[b-k7hdhet8ac] {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Theme color picker specific - show hex value clearly */
.input-group .form-control[placeholder^="#"][b-k7hdhet8ac] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.875rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Simulators/ClientVersionsPanel.razor.rz.scp.css */
.client-versions[b-mowvav5e68] {
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md);
    background: var(--simx-surface);
    padding: var(--simx-space-2) var(--simx-space-3);
    margin-bottom: var(--simx-space-3);
}

.client-versions__header[b-mowvav5e68] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--simx-space-2);
}

.client-versions__toggle[b-mowvav5e68] {
    display: inline-flex;
    align-items: center;
    gap: var(--simx-space-1);
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--simx-text-primary);
}

.client-versions__title[b-mowvav5e68] {
    font-weight: var(--simx-font-weight-semibold);
    font-size: var(--simx-font-size-md);
}

.client-versions__chip[b-mowvav5e68] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--simx-border);
    border-radius: 999px;
    padding: 0 var(--simx-space-2);
    font-size: 0.8125rem;
}

.client-versions__chip--ok[b-mowvav5e68] {
    color: var(--simx-success-text);
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
}

.client-versions__chip--drift[b-mowvav5e68] {
    color: var(--simx-warning-text);
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
}

.client-versions__body[b-mowvav5e68] {
    margin-top: var(--simx-space-3);
}

.client-versions__policy[b-mowvav5e68] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--simx-space-2);
    margin-bottom: var(--simx-space-2);
}

.client-versions__label[b-mowvav5e68] {
    font-weight: var(--simx-font-weight-medium);
    color: var(--simx-text-primary);
    margin: 0;
}

.client-versions__select[b-mowvav5e68] {
    width: auto;
    min-width: 12rem;
}

.client-versions__muted[b-mowvav5e68] {
    color: var(--simx-text-secondary);
    margin-bottom: var(--simx-space-2);
}

/* W5b-02: marks an Edge box among the simulators. */
.client-versions__kind[b-mowvav5e68] {
    display: inline-block;
    margin-left: var(--simx-space-1, 0.25rem);
    padding: 0 var(--simx-space-1, 0.25rem);
    border: 1px solid var(--simx-border);
    border-radius: var(--simx-radius-sm, 0.25rem);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--simx-text-secondary);
}

.client-versions__problem[b-mowvav5e68] {
    color: var(--simx-warning-text);
    margin-bottom: var(--simx-space-2);
}

.client-versions__table th[b-mowvav5e68] {
    color: var(--simx-text-secondary);
    font-weight: var(--simx-font-weight-medium);
}

.client-versions__pill[b-mowvav5e68] {
    display: inline-block;
    border: 1px solid var(--simx-border);
    border-radius: 999px;
    padding: 0 var(--simx-space-2);
    font-size: 0.8125rem;
    color: var(--simx-text-secondary);
}

.client-versions__pill--up-to-date[b-mowvav5e68],
.client-versions__pill--ahead[b-mowvav5e68] {
    color: var(--simx-success-text);
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
}

.client-versions__pill--behind[b-mowvav5e68],
.client-versions__pill--manual-install[b-mowvav5e68],
.client-versions__pill--unknown[b-mowvav5e68] {
    color: var(--simx-warning-text);
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
}

.client-versions__pill--update-failed[b-mowvav5e68] {
    color: var(--simx-danger-text);
    background: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
}

.client-versions__outcome[b-mowvav5e68] {
    color: var(--simx-danger-text);
    font-size: 0.8125rem;
    margin-top: var(--simx-space-1);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Staff/DemandCoverageStrip.razor.rz.scp.css */
/*
 * One day's need against its cover (master plan W7-05).
 *
 * Colors, checked with the data-viz six checks against both shell surfaces (OKLab, Machado 2009 simulation):
 *   covered  = --simx-accent               light #0d6efd  dark #4c9aff
 *   draft    = accent 55% into the surface light #7aaffe  dark #35639e
 *   short    = --simx-danger-solid         light #dc3545  dark #e05563
 * Adjacent pairs clear color-blind separation (lowest protan/deutan 12.6, target 8) and normal vision (lowest 19.8,
 * floor 15). Green against red was rejected: deutan 7.4. The draft step sits under 3:1 against the surface, so the
 * legend, the day's summary line and the numbers table carry every value as well.
 */

.dcs[b-e4v3hi5tef] {
    margin: var(--simx-space-2, 0.5rem) 0 var(--simx-space-1, 0.25rem);
}

.dcs-plot[b-e4v3hi5tef] {
    position: relative;
    height: 2.75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--simx-border-strong, #adb5bd);
    border-radius: var(--simx-radius-sm, 0.25rem) var(--simx-radius-sm, 0.25rem) 0 0;
    background-color: var(--simx-bg-sunken, #f0f2f5);
}

.dcs-plot:focus-visible[b-e4v3hi5tef] {
    outline: 2px solid var(--simx-border-focus, #86b7fe);
    outline-offset: 2px;
}

.dcs-tick[b-e4v3hi5tef] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--simx-border-default, #dee2e6);
}

/* A column grows from the baseline; its data end is rounded, its foot square. */
.dcs-col[b-e4v3hi5tef] {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}

.dcs-col:hover[b-e4v3hi5tef] {
    filter: brightness(1.1);
}

.dcs-part[b-e4v3hi5tef] {
    display: block;
    min-height: 2px;
}

.dcs-covered[b-e4v3hi5tef] {
    background-color: var(--simx-accent, #0d6efd);
}

.dcs-draft[b-e4v3hi5tef] {
    background-color: color-mix(in srgb, var(--simx-accent, #0d6efd) 55%, var(--simx-bg-surface, #fff));
}

.dcs-short[b-e4v3hi5tef] {
    background-color: var(--simx-danger-solid, #dc3545);
}

.dcs-axis[b-e4v3hi5tef] {
    position: relative;
    height: 1.1rem;
    color: var(--simx-text-tertiary, #6c757d);
    font-size: var(--simx-font-size-xs, 0.75rem);
}

.dcs-axis-label[b-e4v3hi5tef] {
    position: absolute;
    top: 0.1rem;
    transform: translateX(-50%);
    white-space: nowrap;
}

.dcs-toggle[b-e4v3hi5tef] {
    font-size: var(--simx-font-size-xs, 0.75rem);
}

.dcs-table th[b-e4v3hi5tef],
.dcs-table td[b-e4v3hi5tef] {
    padding: 0.1rem 0.4rem;
    font-weight: var(--simx-font-weight-normal, 400);
}

.dcs-table thead th[b-e4v3hi5tef] {
    color: var(--simx-text-secondary, #55697d);
}

/* Windows high contrast: keep the three states apart without the palette. */
@media (forced-colors: active) {
    .dcs-covered[b-e4v3hi5tef] {
        background-color: CanvasText;
    }

    .dcs-draft[b-e4v3hi5tef] {
        background-color: GrayText;
    }

    .dcs-short[b-e4v3hi5tef] {
        background-color: Highlight;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Staff/ScheduleSuggestionsDrawer.razor.rz.scp.css */
/*
 * Schedule from the book: the review drawer (master plan W7-05).
 * Token-driven only (--simx-*), which the shell re-tunes for its own dark theme; no prefers-color-scheme block,
 * because the shell's theme is its own toggle, not the operating system's.
 */

.sfb-backdrop[b-1grx4ux5bq] {
    position: fixed;
    inset: 0;
    z-index: var(--simx-z-drawer, 1040);
    background-color: var(--simx-bg-backdrop, rgba(15, 23, 32, 0.45));
}

.sfb-drawer[b-1grx4ux5bq] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--simx-z-drawer, 1040) + 1);
    width: min(40rem, 100vw);
    display: flex;
    flex-direction: column;
    background-color: var(--simx-bg-overlay, #fff);
    color: var(--simx-text-primary, #1c2b3a);
    border-left: 1px solid var(--simx-border-default, #dee2e6);
    box-shadow: var(--simx-shadow-overlay, 0 16px 48px rgba(15, 23, 32, 0.22));
    animation: sfb-slide-b-1grx4ux5bq var(--simx-duration-base, 200ms) var(--simx-ease-decelerate, ease-out);
}

@keyframes sfb-slide-b-1grx4ux5bq {
    from {
        transform: translateX(1.5rem);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfb-drawer[b-1grx4ux5bq] {
        animation: none;
    }
}

.sfb-head[b-1grx4ux5bq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--simx-space-3, 0.75rem);
    padding: var(--simx-space-4, 1rem) var(--simx-space-4, 1rem) var(--simx-space-2, 0.5rem);
}

.sfb-head h5:focus[b-1grx4ux5bq] {
    outline: none;
}

.sfb-head h5:focus-visible[b-1grx4ux5bq] {
    outline: 2px solid var(--simx-border-focus, #86b7fe);
    outline-offset: 2px;
}

.sfb-muted[b-1grx4ux5bq] {
    color: var(--simx-text-secondary, #55697d);
}

.sfb-tabs[b-1grx4ux5bq] {
    display: flex;
    gap: var(--simx-space-1, 0.25rem);
    padding: 0 var(--simx-space-4, 1rem);
    border-bottom: 1px solid var(--simx-border-default, #dee2e6);
}

.sfb-tab[b-1grx4ux5bq] {
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--simx-workspace-tab-color, var(--simx-text-secondary, #55697d));
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

.sfb-tab:hover[b-1grx4ux5bq] {
    color: var(--simx-workspace-tab-hover-color, var(--simx-text-primary, #1c2b3a));
}

.sfb-tab[aria-selected="true"][b-1grx4ux5bq] {
    color: var(--simx-workspace-tab-active-color, var(--simx-text-primary, #1c2b3a));
    border-bottom-color: var(--simx-workspace-tab-active-indicator, var(--simx-accent, #0d6efd));
    font-weight: var(--simx-font-weight-semibold, 600);
}

.sfb-tab:focus-visible[b-1grx4ux5bq] {
    outline: 2px solid var(--simx-border-focus, #86b7fe);
    outline-offset: -2px;
}

.sfb-body[b-1grx4ux5bq] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
}

.sfb-foot[b-1grx4ux5bq] {
    border-top: 1px solid var(--simx-border-default, #dee2e6);
    padding: var(--simx-space-3, 0.75rem) var(--simx-space-4, 1rem);
    background-color: var(--simx-bg-surface, #fff);
}

.sfb-state[b-1grx4ux5bq] {
    padding: var(--simx-space-5, 1.5rem) 0;
    color: var(--simx-text-secondary, #55697d);
}

.sfb-summary[b-1grx4ux5bq] {
    padding: var(--simx-space-3, 0.75rem);
    margin-bottom: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-subtle, #e9ecef);
    border-radius: var(--simx-radius-md, 0.375rem);
    background-color: var(--simx-bg-sunken, #f0f2f5);
}

.sfb-shape summary[b-1grx4ux5bq],
.sfb-needs summary[b-1grx4ux5bq] {
    cursor: pointer;
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #55697d);
}

.sfb-shape summary:focus-visible[b-1grx4ux5bq],
.sfb-needs summary:focus-visible[b-1grx4ux5bq] {
    outline: 2px solid var(--simx-border-focus, #86b7fe);
    outline-offset: 2px;
}

.sfb-needs ul[b-1grx4ux5bq] {
    padding-left: 1rem;
    margin-top: 0.25rem;
}

.sfb-legend[b-1grx4ux5bq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--simx-space-3, 0.75rem);
    margin: var(--simx-space-3, 0.75rem) 0 var(--simx-space-1, 0.25rem);
    color: var(--simx-text-secondary, #55697d);
}

.sfb-swatch[b-1grx4ux5bq] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    vertical-align: -1px;
}

/* The strip's three states; checked for color-blind separation in both themes (see DemandCoverageStrip). */
.sfb-swatch-covered[b-1grx4ux5bq] {
    background-color: var(--simx-accent, #0d6efd);
}

.sfb-swatch-draft[b-1grx4ux5bq] {
    background-color: color-mix(in srgb, var(--simx-accent, #0d6efd) 55%, var(--simx-bg-surface, #fff));
}

.sfb-swatch-short[b-1grx4ux5bq] {
    background-color: var(--simx-danger-solid, #dc3545);
}

.sfb-day[b-1grx4ux5bq] {
    padding: var(--simx-space-3, 0.75rem) 0;
    border-top: 1px solid var(--simx-border-subtle, #e9ecef);
}

.sfb-day-head[b-1grx4ux5bq] {
    display: flex;
    align-items: center;
    gap: var(--simx-space-2, 0.5rem);
}

.sfb-note[b-1grx4ux5bq],
.sfb-conflicts[b-1grx4ux5bq] {
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0;
    border: 1px solid var(--simx-warning-border, #ffe69c);
    border-radius: var(--simx-radius-sm, 0.25rem);
    background-color: var(--simx-warning-bg, #fff6e0);
    color: var(--simx-warning-text, #664d03);
}

.sfb-refusal[b-1grx4ux5bq] {
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0;
    border: 1px solid var(--simx-danger-border, #f1aeb5);
    border-radius: var(--simx-radius-sm, 0.25rem);
    background-color: var(--simx-danger-bg, #fdeaec);
    color: var(--simx-danger-text, #842029);
}

.sfb-card[b-1grx4ux5bq] {
    margin-top: var(--simx-space-2, 0.5rem);
    padding: var(--simx-space-3, 0.75rem);
    border: 1px solid var(--simx-border-default, #dee2e6);
    border-radius: var(--simx-radius-md, 0.375rem);
    background-color: var(--simx-bg-surface, #fff);
}

.sfb-card[data-selected="true"][b-1grx4ux5bq] {
    border-color: var(--simx-accent, #0d6efd);
    box-shadow: inset 3px 0 0 var(--simx-accent, #0d6efd);
}

.sfb-card-head[b-1grx4ux5bq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--simx-space-2, 0.5rem);
}

.sfb-card-title[b-1grx4ux5bq] {
    flex: 1 1 10rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.sfb-time[b-1grx4ux5bq] {
    font-size: var(--simx-font-size-sm, 0.8125rem);
    color: var(--simx-text-secondary, #55697d);
}

.sfb-person-chip[b-1grx4ux5bq] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--simx-radius-pill, 50rem);
    background-color: var(--simx-accent-subtle, #e7f0ff);
    color: var(--simx-accent-text, #0a58ca);
    font-size: var(--simx-font-size-sm, 0.8125rem);
}

.sfb-person-chip.is-open[b-1grx4ux5bq] {
    border-color: var(--simx-warning-border, #ffe69c);
    background-color: var(--simx-warning-bg, #fff6e0);
    color: var(--simx-warning-text, #664d03);
}

.sfb-reasons[b-1grx4ux5bq] {
    margin: var(--simx-space-2, 0.5rem) 0 var(--simx-space-1, 0.25rem);
    padding-left: 1.1rem;
}

.sfb-edit[b-1grx4ux5bq] {
    margin-top: var(--simx-space-2, 0.5rem);
    padding-top: var(--simx-space-2, 0.5rem);
    border-top: 1px solid var(--simx-border-subtle, #e9ecef);
}

@media (max-width: 575.98px) {
    .sfb-drawer[b-1grx4ux5bq] {
        width: 100vw;
        border-left: 0;
    }

    .sfb-head[b-1grx4ux5bq],
    .sfb-body[b-1grx4ux5bq],
    .sfb-foot[b-1grx4ux5bq] {
        padding-left: var(--simx-space-3, 0.75rem);
        padding-right: var(--simx-space-3, 0.75rem);
    }

    .sfb-edit-toggle[b-1grx4ux5bq] {
        margin-left: auto;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/TaxJurisdictionsPanel.razor.rz.scp.css */
/* Tax Jurisdictions Panel Styles */

.tax-jurisdictions-panel[b-8jc11ib9wj] {
    /* Panel-specific styling */
}

/* Combined Rate Summary Card */
.combined-rate-card[b-8jc11ib9wj] {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #4a6fa5 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rate-summary[b-8jc11ib9wj] {
    text-align: center;
    padding-right: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.rate-value[b-8jc11ib9wj] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.rate-label[b-8jc11ib9wj] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

.rate-breakdown[b-8jc11ib9wj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.rate-item[b-8jc11ib9wj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.rate-name[b-8jc11ib9wj] {
    opacity: 0.9;
}

.rate-percent[b-8jc11ib9wj] {
    font-weight: 600;
}

/* Tax Rate Display on Cards */
.tax-rate-display[b-8jc11ib9wj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
}

/* Jurisdiction Level Badges */
.jurisdiction-level-badge[b-8jc11ib9wj] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.level-federal[b-8jc11ib9wj] {
    background-color: #fef3cd;
    color: #856404;
}

.level-state[b-8jc11ib9wj] {
    background-color: #cce5ff;
    color: #004085;
}

.level-county[b-8jc11ib9wj] {
    background-color: #d4edda;
    color: #155724;
}

.level-city[b-8jc11ib9wj] {
    background-color: #f8d7da;
    color: #721c24;
}

.level-district[b-8jc11ib9wj] {
    background-color: #e2e3e5;
    color: #383d41;
}

.level-other[b-8jc11ib9wj] {
    background-color: #e2e3e5;
    color: #6c757d;
}

/* Card States */
.inactive-card[b-8jc11ib9wj] {
    opacity: 0.6;
    background-color: #f8f9fa;
}

.pending-card[b-8jc11ib9wj] {
    border-left: 4px solid var(--bs-warning);
}

/* Form Sections */
.form-section[b-8jc11ib9wj] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

.section-header[b-8jc11ib9wj] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--simx-text-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .combined-rate-card[b-8jc11ib9wj] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .rate-summary[b-8jc11ib9wj] {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .rate-breakdown[b-8jc11ib9wj] {
        justify-content: center;
    }
}

/* Dark: the level badges, the inactive card and the form sections were fixed pastel and #f8f9fa fills, and
   --bs-primary as ink (the rate) is Bootstrap's #0d6efd, 3.66:1 on the dark card. Each level takes a status pair, keyed
   on the shell's resolved theme so light is untouched. */
:root[data-simx-theme-resolved="dark"] .tax-rate-display[b-8jc11ib9wj] {
    color: var(--simx-accent-text);
}

:root[data-simx-theme-resolved="dark"] .level-federal[b-8jc11ib9wj] { background-color: var(--simx-warning-bg); color: var(--simx-warning-text); }
:root[data-simx-theme-resolved="dark"] .level-state[b-8jc11ib9wj] { background-color: var(--simx-info-bg); color: var(--simx-info-text); }
:root[data-simx-theme-resolved="dark"] .level-county[b-8jc11ib9wj] { background-color: var(--simx-success-bg); color: var(--simx-success-text); }
:root[data-simx-theme-resolved="dark"] .level-city[b-8jc11ib9wj] { background-color: var(--simx-danger-bg); color: var(--simx-danger-text); }
:root[data-simx-theme-resolved="dark"] .level-district[b-8jc11ib9wj],
:root[data-simx-theme-resolved="dark"] .level-other[b-8jc11ib9wj] { background-color: var(--simx-neutral-bg); color: var(--simx-neutral-text); }

:root[data-simx-theme-resolved="dark"] .inactive-card[b-8jc11ib9wj],
:root[data-simx-theme-resolved="dark"] .form-section[b-8jc11ib9wj] {
    background-color: var(--simx-bg-sunken);
}

:root[data-simx-theme-resolved="dark"] .section-header[b-8jc11ib9wj] {
    color: var(--simx-text-secondary);
    border-bottom-color: var(--simx-border-default);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Unattended/NightReportPanel.razor.rz.scp.css */
/* NightReportPanel.razor.css: token-only (--simx-*), so both themes and densities follow the design system. */

.night-report-headline[b-fy33cblo77] {
    font-size: var(--simx-font-size-md);
    font-weight: var(--simx-font-weight-semibold);
    color: var(--simx-text-primary);
}

.night-report-meta[b-fy33cblo77],
.night-report-resolution[b-fy33cblo77] {
    color: var(--simx-text-secondary);
}

.night-report-section[b-fy33cblo77] {
    margin-top: var(--simx-space-3);
}

.night-report-section-title[b-fy33cblo77] {
    font-weight: var(--simx-font-weight-semibold);
    color: var(--simx-text-primary);
    border-bottom: 1px solid var(--simx-border-subtle);
    padding-bottom: var(--simx-space-2);
}

.night-report-line[b-fy33cblo77] {
    display: flex;
    align-items: baseline;
    gap: var(--simx-space-2);
    padding: var(--simx-space-2) 0;
    border-bottom: 1px solid var(--simx-border-subtle);
    color: var(--simx-text-primary);
}

.night-report-time[b-fy33cblo77] {
    flex: 0 0 5.5rem;
    color: var(--simx-text-tertiary);
}

.night-report-text[b-fy33cblo77] {
    flex: 1 1 auto;
}

.night-report-open[b-fy33cblo77] {
    flex: 0 0 auto;
    padding: 0;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Unattended/ProveItPanel.razor.rz.scp.css */
/* ProveItPanel.razor.css: token-only (--simx-*), so both themes and densities follow the design system. */

.prove-it-hint[b-86pxc93oxw],
.prove-it-step-reason[b-86pxc93oxw] {
    color: var(--simx-text-secondary);
}

.prove-it-sentence[b-86pxc93oxw] {
    padding: var(--simx-space-2) var(--simx-space-3);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md);
    font-weight: var(--simx-font-weight-semibold);
    color: var(--simx-text-primary);
}

.prove-it-pass[b-86pxc93oxw] {
    background: var(--simx-success-bg);
    border-color: var(--simx-success-border);
    color: var(--simx-success-text);
}

.prove-it-warn[b-86pxc93oxw] {
    background: var(--simx-warning-bg);
    border-color: var(--simx-warning-border);
    color: var(--simx-warning-text);
}

.prove-it-fail[b-86pxc93oxw] {
    background: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
    color: var(--simx-danger-text);
}

.prove-it-step[b-86pxc93oxw] {
    display: flex;
    gap: var(--simx-space-2);
    padding: var(--simx-space-2) 0;
    border-bottom: 1px solid var(--simx-border-subtle);
}

.prove-it-step-title[b-86pxc93oxw] {
    color: var(--simx-text-primary);
    font-weight: var(--simx-font-weight-semibold);
}

.prove-it-dot[b-86pxc93oxw] {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: var(--simx-border);
}

.prove-it-dot-pass[b-86pxc93oxw] {
    background: var(--simx-success-text);
}

.prove-it-dot-warn[b-86pxc93oxw] {
    background: var(--simx-warning-text);
}

.prove-it-dot-fail[b-86pxc93oxw] {
    background: var(--simx-danger-text);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/Unattended/TonightBoardPanel.razor.rz.scp.css */
/* TonightBoardPanel.razor.css: token-only (--simx-*), so both themes and densities follow the design system. */

.tonight-summary[b-rcnxe3kpas] {
    font-size: var(--simx-font-size-md);
    font-weight: var(--simx-font-weight-semibold);
    color: var(--simx-text-primary);
}

.tonight-meta[b-rcnxe3kpas] {
    color: var(--simx-text-secondary);
}

.tonight-refresh-failed[b-rcnxe3kpas] {
    color: var(--simx-danger-text);
}

.tonight-empty[b-rcnxe3kpas] {
    padding: var(--simx-space-3);
    border: 1px dashed var(--simx-border);
    border-radius: var(--simx-radius-md);
    color: var(--simx-text-secondary);
}

.tonight-row[b-rcnxe3kpas] {
    display: flex;
    flex-direction: column;
    gap: var(--simx-space-2);
    padding: var(--simx-space-2) var(--simx-space-3);
    border: 1px solid var(--simx-border-subtle);
    border-radius: var(--simx-radius-md);
    background: var(--simx-surface);
    margin-bottom: var(--simx-space-2);
}

.tonight-gap[b-rcnxe3kpas] {
    flex-direction: row;
    align-items: center;
    background: var(--simx-danger-bg);
    border-color: var(--simx-danger-border);
    color: var(--simx-danger-text);
}

.tonight-row-head[b-rcnxe3kpas] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-2);
}

.tonight-row-toggle[b-rcnxe3kpas] {
    border: 0;
    background: transparent;
    color: var(--simx-text-secondary);
    padding: 0 var(--simx-space-1);
}

.tonight-time[b-rcnxe3kpas] {
    font-weight: var(--simx-font-weight-semibold);
    color: var(--simx-text-primary);
}

.tonight-ref[b-rcnxe3kpas],
.tonight-where[b-rcnxe3kpas] {
    color: var(--simx-text-tertiary);
}

.tonight-arrived[b-rcnxe3kpas] {
    font-weight: var(--simx-font-weight-medium);
}

.tonight-dots[b-rcnxe3kpas] {
    display: inline-flex;
    gap: var(--simx-space-1);
}

.tonight-dot[b-rcnxe3kpas] {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 1px solid var(--simx-border);
    padding: 0;
    vertical-align: middle;
    background: var(--simx-bg-sunken);
}

.tonight-dot-ok[b-rcnxe3kpas] {
    background: var(--simx-success-text);
    border-color: var(--simx-success-border);
}

.tonight-dot-warn[b-rcnxe3kpas] {
    background: var(--simx-warning-text);
    border-color: var(--simx-warning-border);
}

.tonight-dot-fail[b-rcnxe3kpas] {
    background: var(--simx-danger-text);
    border-color: var(--simx-danger-border);
}

.tonight-reasons[b-rcnxe3kpas] {
    padding-left: var(--simx-space-5);
    color: var(--simx-text-secondary);
}

.tonight-reason[b-rcnxe3kpas] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--simx-space-1);
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.AdminShell/Features/WaiversPanel.razor.rz.scp.css */
/* WaiversPanel.razor.css */

.panel-content[b-nug5n9que7] {
    padding: 16px;
}

.loading-container[b-nug5n9que7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.dialog-form[b-nug5n9que7] {
    padding: 8px 0;
}

.btn-group-sm .btn[b-nug5n9que7] {
    padding: 0.25rem 0.5rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.PublicDisplays/KartingHeatLeaderboard/AchievementCelebrationSlide.razor.rz.scp.css */
/*
    Achievement celebration slide. Scoped to the component so every display page that shows it
    (the karting heat leaderboard, the sim race leaderboard) gets these styles through the CSS
    isolation bundle PublicDisplayResources already loads. The same rules remain in the admin
    Module.css for the pages that load it; the values are identical.
*/

.achievement-celebration-slide[b-mf4nlbkdx1] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0f3460 100%);
    color: #fff;
    animation: celebration-fade-in-b-mf4nlbkdx1 0.5s ease-out;
}

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

.celebration-content[b-mf4nlbkdx1] {
    text-align: center;
    max-width: 800px;
    padding: 2rem;
}

.celebration-title[b-mf4nlbkdx1] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    animation: celebration-title-scale-b-mf4nlbkdx1 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.celebration-title .trophy-icon[b-mf4nlbkdx1] {
    font-size: 2rem;
    margin: 0 0.5rem;
}

@keyframes celebration-title-scale-b-mf4nlbkdx1 {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.badge-container[b-mf4nlbkdx1] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    margin: 1.5rem auto;
    max-width: 600px;
    animation: celebration-badge-appear-b-mf4nlbkdx1 0.5s 0.5s ease-out both;
}

@keyframes celebration-badge-appear-b-mf4nlbkdx1 {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.badge-glow[b-mf4nlbkdx1] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: celebration-glow-pulse-b-mf4nlbkdx1 2s ease-in-out infinite;
}

.badge-glow.rarity-common[b-mf4nlbkdx1]    { box-shadow: 0 0 30px rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
.badge-glow.rarity-uncommon[b-mf4nlbkdx1]  { box-shadow: 0 0 30px rgba(76,175,80,0.5); background: rgba(76,175,80,0.15); }
.badge-glow.rarity-rare[b-mf4nlbkdx1]      { box-shadow: 0 0 40px rgba(33,150,243,0.6); background: rgba(33,150,243,0.15); }
.badge-glow.rarity-epic[b-mf4nlbkdx1]      { box-shadow: 0 0 50px rgba(156,39,176,0.7); background: rgba(156,39,176,0.2); }
.badge-glow.rarity-legendary[b-mf4nlbkdx1] { box-shadow: 0 0 60px rgba(255,215,0,0.8); background: rgba(255,215,0,0.2); }

@keyframes celebration-glow-pulse-b-mf4nlbkdx1 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.badge-icon-large[b-mf4nlbkdx1] {
    font-size: 3.5rem;
    color: #fff;
}

.badge-name[b-mf4nlbkdx1] {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.badge-description[b-mf4nlbkdx1] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.badge-meta[b-mf4nlbkdx1] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.rarity-badge[b-mf4nlbkdx1] {
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.rarity-badge.rarity-common[b-mf4nlbkdx1]    { background: rgba(255,255,255,0.2); color: #fff; }
.rarity-badge.rarity-uncommon[b-mf4nlbkdx1]  { background: rgba(76,175,80,0.3); color: #81c784; }
.rarity-badge.rarity-rare[b-mf4nlbkdx1]      { background: rgba(33,150,243,0.3); color: #64b5f6; }
.rarity-badge.rarity-epic[b-mf4nlbkdx1]      { background: rgba(156,39,176,0.3); color: #ce93d8; }
.rarity-badge.rarity-legendary[b-mf4nlbkdx1] { background: rgba(255,215,0,0.3); color: #ffd700; }

.xp-badge[b-mf4nlbkdx1] {
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    font-weight: 700;
    font-size: 0.9rem;
}

.driver-info[b-mf4nlbkdx1] {
    font-size: 1.5rem;
    color: #fff;
    margin-top: 2rem;
    animation: celebration-fade-in-b-mf4nlbkdx1 0.5s 1s ease-out both;
}

.driver-kart[b-mf4nlbkdx1] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
}

.venue-stats-bar[b-mf4nlbkdx1] {
    margin-top: 2rem;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.PublicDisplays/KartingHeatLeaderboard/DriverSpotlightSlide.razor.rz.scp.css */
/*
    Driver spotlight slide (post-heat results rotation). Scoped to the component so venue TV pages —
    which load the CSS isolation bundle through PublicDisplayResources but never the admin Module.css —
    get these styles. Until 2026-09-19 they lived only in the admin stylesheet and the slide rendered
    unstyled on every TV. The same rules remain in the admin Module.css; the values are identical.
*/

.driver-spotlight-slide[b-p5cf25kcpb] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0f3460 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    color: #fff;
    animation: spotlight-fade-in-b-p5cf25kcpb 0.5s ease-out;
}

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

.spotlight-banner[b-p5cf25kcpb] {
    font-size: 2rem;
    font-weight: 900;
    color: #ffd700;
    text-align: center;
    letter-spacing: 4px;
    padding: 1rem 0;
    animation: banner-slide-down-b-p5cf25kcpb 0.5s ease-out;
}

@keyframes banner-slide-down-b-p5cf25kcpb {
    from { transform: translateY(-30px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.spotlight-content[b-p5cf25kcpb] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-card[b-p5cf25kcpb] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 900px;
    width: 100%;
}

.driver-identity[b-p5cf25kcpb] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.grade-badge[b-p5cf25kcpb] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}

.grade-badge.grade-rookie[b-p5cf25kcpb]   { background: linear-gradient(135deg, #6c757d, #adb5bd); }
.grade-badge.grade-amateur[b-p5cf25kcpb]  { background: linear-gradient(135deg, #198754, #20c997); }
.grade-badge.grade-semipro[b-p5cf25kcpb]  { background: linear-gradient(135deg, #0d6efd, #6ea8fe); }
.grade-badge.grade-pro[b-p5cf25kcpb]      { background: linear-gradient(135deg, #6f42c1, #b197fc); }
.grade-badge.grade-elite[b-p5cf25kcpb]    { background: linear-gradient(135deg, #dc3545, #ffd700); }

.driver-name-large[b-p5cf25kcpb] {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.driver-grade-label[b-p5cf25kcpb] {
    font-size: 1rem;
    color: #ffd700;
    letter-spacing: 2px;
}

.driver-level[b-p5cf25kcpb] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.spotlight-stats-grid[b-p5cf25kcpb] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-section[b-p5cf25kcpb] {
    animation: stat-fade-in-b-p5cf25kcpb 0.3s ease-out both;
}

@keyframes stat-fade-in-b-p5cf25kcpb {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.stat-section-title[b-p5cf25kcpb] {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.3rem;
}

.stat-row[b-p5cf25kcpb] {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 1.1rem;
}

.stat-label[b-p5cf25kcpb] {
    color: rgba(255, 255, 255, 0.7);
}

.stat-value[b-p5cf25kcpb] {
    color: #fff;
    font-weight: 600;
}

.pb-indicator[b-p5cf25kcpb] {
    color: #ffc107;
    margin-left: 0.5rem;
    font-weight: 700;
}

.badge-list[b-p5cf25kcpb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mini-badge[b-p5cf25kcpb] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.season-stats-row[b-p5cf25kcpb] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding-top: 0.5rem;
}

.season-stat[b-p5cf25kcpb] {
    text-align: center;
}

.season-stat-value[b-p5cf25kcpb] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.season-stat-label[b-p5cf25kcpb] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spotlight-reason[b-p5cf25kcpb] {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
    letter-spacing: 1px;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.PublicDisplays/KartingHeatLeaderboard/HeatSummarySlide.razor.rz.scp.css */
/*
    Heat summary slide (post-heat results rotation). Scoped to the component so venue TV pages —
    which load the CSS isolation bundle through PublicDisplayResources but never the admin Module.css —
    get these styles. Until 2026-09-19 they lived only in the admin stylesheet and the slide rendered
    unstyled on every TV. The same rules remain in the admin Module.css; the values are identical.
*/

.heat-summary-slide[b-e67l7gsexu] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #0f3460 100%);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    color: #fff;
    animation: summary-fade-in-b-e67l7gsexu 0.5s ease-out;
}

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

.summary-header[b-e67l7gsexu] {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.summary-header .summary-icon[b-e67l7gsexu] {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.summary-subheader[b-e67l7gsexu] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
}

.summary-content[b-e67l7gsexu] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-columns[b-e67l7gsexu] {
    display: flex;
    gap: 3rem;
    max-width: 1000px;
    width: 100%;
}

.summary-column[b-e67l7gsexu] {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.column-title[b-e67l7gsexu] {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-stat[b-e67l7gsexu] {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 1.1rem;
    color: #fff;
}

.summary-stat .stat-label[b-e67l7gsexu] {
    color: rgba(255, 255, 255, 0.7);
}

.summary-stat .stat-value[b-e67l7gsexu] {
    font-weight: 600;
}

.summary-stat .stat-value.highlight[b-e67l7gsexu] {
    color: #ffd700;
}

.summary-stat.track-record[b-e67l7gsexu] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.top-achiever[b-e67l7gsexu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 0;
    font-size: 1.1rem;
    color: #fff;
}

.achiever-rank[b-e67l7gsexu] {
    font-size: 1.3rem;
}

.achiever-name[b-e67l7gsexu] {
    flex: 1;
    font-weight: 600;
}

.achiever-badges[b-e67l7gsexu] {
    color: rgba(255, 255, 255, 0.6);
}

.xp-total[b-e67l7gsexu] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #ffd700;
    font-weight: 600;
    font-size: 1rem;
}

.no-achievers[b-e67l7gsexu] {
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 2rem 0;
}

.summary-footer[b-e67l7gsexu] {
    margin-top: 1rem;
}

.venue-today-bar[b-e67l7gsexu],
.next-heat-bar[b-e67l7gsexu] {
    text-align: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.next-heat-bar[b-e67l7gsexu] {
    color: #64b5f6;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.PublicDisplays/Kiosk/Index.razor.rz.scp.css */
/* 
 * Kiosk/Index.razor.css
 * Scoped styles for the Kiosk Oqtane module wrapper.
 */

.kiosk-module[b-zi946gviid] {
    min-height: 100vh;
    background: #0a0a14;
    color: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.kiosk-module.fullscreen[b-zi946gviid] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #0a0a14 0%, #0f0f1a 100%);
    overflow: hidden;
}

/* Loading state */
.module-loading[b-zi946gviid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1.5rem;
}

.module-loading .spinner[b-zi946gviid] {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(59, 130, 246, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-zi946gviid 1s linear infinite;
}

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

.module-loading p[b-zi946gviid] {
    color: #94a3b8;
    font-size: 1.125rem;
    margin: 0;
}

/* Error state */
.kiosk-error[b-zi946gviid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
}

.kiosk-error i[b-zi946gviid] {
    font-size: 4rem;
    color: #ef4444;
}

.kiosk-error h3[b-zi946gviid] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #f8fafc;
}

.kiosk-error p[b-zi946gviid] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
    max-width: 400px;
}

.kiosk-error small[b-zi946gviid] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Not configured state */
.kiosk-not-configured[b-zi946gviid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
}

.kiosk-not-configured i[b-zi946gviid] {
    font-size: 4rem;
    color: #f59e0b;
}

.kiosk-not-configured h3[b-zi946gviid] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #f8fafc;
}

.kiosk-not-configured p[b-zi946gviid] {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
    max-width: 400px;
}

.kiosk-not-configured small[b-zi946gviid] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Device binding notice (#146): above the fullscreen kiosk, never covering its controls. */
.kiosk-device-binding-notice[b-zi946gviid] {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: min(90vw, 760px);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(250, 204, 21, 0.6);
    background: rgba(15, 15, 26, 0.92);
    color: #fde68a;
    font-size: 0.9rem;
    line-height: 1.35;
    pointer-events: none;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.PublicDisplays/TimeClock/TimeClockTerminal.razor.rz.scp.css */
/* The shared time clock (W7-02): a tablet on a wall. Big targets, high contrast, one decision per screen. */

.tc-terminal[b-1mn99anjds] {
    min-height: 100vh;
    padding: 1.25rem;
    background: var(--scm-display-bg, #111827);
    color: var(--scm-display-fg, #f9fafb);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tc-header[b-1mn99anjds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tc-venue[b-1mn99anjds] { font-size: 1.5rem; font-weight: 700; }

.tc-clock[b-1mn99anjds] {
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tc-muted[b-1mn99anjds] { color: var(--scm-display-muted, #cbd5e1); }

.tc-big[b-1mn99anjds] { font-size: 1.75rem; font-weight: 700; }

.tc-center[b-1mn99anjds] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
}

.tc-names[b-1mn99anjds] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.tc-name[b-1mn99anjds] {
    min-height: 5.5rem;
    padding: 0.75rem;
    border-radius: 14px;
    border: 2px solid var(--scm-display-border, #374151);
    background: var(--scm-display-surface, #1f2937);
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.tc-name:focus-visible[b-1mn99anjds],
.tc-key:focus-visible[b-1mn99anjds] {
    outline: 3px solid var(--scm-display-focus, #60a5fa);
    outline-offset: 2px;
}

.tc-state-In[b-1mn99anjds] { border-color: var(--scm-display-success, #22c55e); }
.tc-state-OnBreak[b-1mn99anjds] { border-color: var(--scm-display-info, #38bdf8); }

.tc-name-text[b-1mn99anjds] { font-size: 1.2rem; font-weight: 700; }
.tc-name-state[b-1mn99anjds] { font-size: 0.9rem; color: var(--scm-display-muted, #cbd5e1); }

.tc-pin[b-1mn99anjds] {
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.5rem;
}

.tc-dots[b-1mn99anjds] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    min-height: 1.5rem;
}

.tc-dot[b-1mn99anjds] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--scm-display-fg, #f9fafb);
}

.tc-dot-on[b-1mn99anjds] { background: var(--scm-display-fg, #f9fafb); }

.tc-pad[b-1mn99anjds] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.tc-key[b-1mn99anjds] {
    min-height: 4.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid var(--scm-display-border, #374151);
    background: var(--scm-display-surface, #1f2937);
    color: inherit;
}

.tc-key-small[b-1mn99anjds] { font-size: 1.1rem; }

.tc-actions[b-1mn99anjds] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.tc-actions .btn[b-1mn99anjds] { min-height: 3.75rem; font-size: 1.35rem; font-weight: 700; }

.tc-result-icon[b-1mn99anjds] { font-size: 4.5rem; }
.tc-ok .tc-result-icon[b-1mn99anjds] { color: var(--scm-display-success, #22c55e); }
.tc-refused .tc-result-icon[b-1mn99anjds] { color: var(--scm-display-warning, #fbbf24); }

.tc-message[b-1mn99anjds] { font-size: 1.35rem; max-width: 36rem; }
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.WebsiteDisplays/BookNow/Index.razor.rz.scp.css */
/* 
   BookNow Module - Component-Scoped Styles

   NOTE:
   - Primary styles are in the module-level static stylesheet:
     `Server/wwwroot/Modules/SCM.Module.Admin.WebsiteDisplays.BookNow/Module.css`
   - This file uses Blazor CSS isolation and should only contain truly
     component-scoped styles that must not apply to child components.
*/

/* Any truly component-scoped styles go here */
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.WebsiteDisplays/Claim/Index.razor.rz.scp.css */
/*
 * Claim Website Module Styles
 * 
 * Scoped styles for the Claim Oqtane website module wrapper.
 * The actual claim flow styling is in the ClaimContainer component.
 */

/* Module container - respects parent container */
.scm-mod-Claim[b-vqggp3shlm] {
    /* Theme tokens come from SCMUIKit.theme-bridge.css, which declares them on .scm-mod --
       an ancestor-or-self of this element. Four re-export lines used to sit here aliasing
       them under the retired --scm-mod-* names; once that vocabulary was retired the lines
       became self-references, which CSS discards. Removed rather than rewritten: with the
       bridge on every public page there is nothing left for them to do. */
    
    /* Container sizing */
    width: 100%;
    min-height: 300px;
    
    /* Visual styling */
    background: var(--scm-surface);
    color: var(--scm-surface-contrast);
    border-radius: 8px;
    overflow: hidden;
    
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
}

/* Loading state */
.scm-mod-Claim .scm-mod-loading[b-vqggp3shlm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    min-height: 200px;
}

.scm-mod-Claim .scm-mod-spinner[b-vqggp3shlm] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--scm-border);
    border-top-color: var(--scm-accent);
    border-radius: 50%;
    animation: scm-mod-spin-b-vqggp3shlm 1s linear infinite;
}

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

.scm-mod-Claim .scm-mod-loading p[b-vqggp3shlm] {
    margin: 0;
    color: var(--scm-surface-contrast);
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Ensure ClaimContainer fills the module */
.scm-mod-Claim[b-vqggp3shlm]  .claim-container {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scm-mod-Claim[b-vqggp3shlm] {
        min-height: 250px;
        border-radius: 0;
    }
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.WebsiteDisplays/ContestLeaderboard/Index.razor.rz.scp.css */
/*
 * ContestLeaderboard Website Module Styles
 * 
 * Scoped styles for the ContestLeaderboard Oqtane website module wrapper.
 * The actual leaderboard styling is in the ContestLeaderboardDisplay component.
 * 
 * This module respects page layout - for fullscreen displays, use PublicDisplays.
 */

/* Module container - respects parent container, no fullscreen forcing */
.scm-mod-ContestLeaderboard[b-4w7x24wa73] {
    /* Theme tokens come from SCMUIKit.theme-bridge.css, which declares them on .scm-mod --
       an ancestor-or-self of this element. Four re-export lines used to sit here aliasing
       them under the retired --scm-mod-* names; once that vocabulary was retired the lines
       became self-references, which CSS discards. Removed rather than rewritten: with the
       bridge on every public page there is nothing left for them to do. */
    
    /* Container sizing - fills parent, minimum height for usability */
    width: 100%;
    min-height: 400px;
    
    /* Visual styling */
    background: var(--scm-surface);
    color: var(--scm-surface-contrast);
    border-radius: 8px;
    overflow: hidden;
    
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
}

/* Loading state */
.scm-mod-ContestLeaderboard .scm-mod-loading[b-4w7x24wa73] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    min-height: 300px;
}

.scm-mod-ContestLeaderboard .scm-mod-spinner[b-4w7x24wa73] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--scm-border);
    border-top-color: var(--scm-accent);
    border-radius: 50%;
    animation: scm-mod-spin-b-4w7x24wa73 1s linear infinite;
}

@keyframes scm-mod-spin-b-4w7x24wa73 {
    to { transform: rotate(360deg); }
}

.scm-mod-ContestLeaderboard .scm-mod-loading p[b-4w7x24wa73] {
    margin: 0;
    color: var(--scm-surface-contrast);
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Ensure the ContestLeaderboardDisplay component fills the container */
.scm-mod-ContestLeaderboard[b-4w7x24wa73]  .contest-leaderboard {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: inherit;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scm-mod-ContestLeaderboard[b-4w7x24wa73] {
        min-height: 300px;
        border-radius: 0;
    }
}

/* Size variants */
.scm-mod-ContestLeaderboard.scm-mod-compact[b-4w7x24wa73] {
    min-height: 250px;
}

.scm-mod-ContestLeaderboard.scm-mod-large[b-4w7x24wa73] {
    min-height: 600px;
}

.scm-mod-ContestLeaderboard.scm-mod-fullheight[b-4w7x24wa73] {
    min-height: 80vh;
}
/* _content/SCM.Module.Admin.Client.Oqtane/Modules/SCM.Module.WebsiteDisplays/RaceLeaderboard/Index.razor.rz.scp.css */
/*
 * RaceLeaderboard Website Module Styles
 * 
 * Scoped styles for the RaceLeaderboard Oqtane website module wrapper.
 * The actual leaderboard styling is in the RaceLeaderboardDisplay component.
 * 
 * This module respects page layout - for fullscreen displays, use PublicDisplays.
 */

/* Module container - respects parent container, no fullscreen forcing */
.scm-mod-RaceLeaderboard[b-3m6jb8kkln] {
    /* Theme tokens come from SCMUIKit.theme-bridge.css, which declares them on .scm-mod --
       an ancestor-or-self of this element. Four re-export lines used to sit here aliasing
       them under the retired --scm-mod-* names; once that vocabulary was retired the lines
       became self-references, which CSS discards. Removed rather than rewritten: with the
       bridge on every public page there is nothing left for them to do. */
    
    /* Container sizing - fills parent, minimum height for usability */
    width: 100%;
    min-height: 400px;
    
    /* Visual styling */
    background: var(--scm-surface);
    color: var(--scm-surface-contrast);
    border-radius: 8px;
    overflow: hidden;
    
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
}

/* Loading state */
.scm-mod-RaceLeaderboard .scm-mod-loading[b-3m6jb8kkln] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    min-height: 300px;
}

.scm-mod-RaceLeaderboard .scm-mod-spinner[b-3m6jb8kkln] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--scm-border);
    border-top-color: var(--scm-accent);
    border-radius: 50%;
    animation: scm-mod-spin-b-3m6jb8kkln 1s linear infinite;
}

@keyframes scm-mod-spin-b-3m6jb8kkln {
    to { transform: rotate(360deg); }
}

.scm-mod-RaceLeaderboard .scm-mod-loading p[b-3m6jb8kkln] {
    margin: 0;
    color: var(--scm-surface-contrast);
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Ensure the RaceLeaderboardDisplay component fills the container */
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .race-leaderboard {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: inherit;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scm-mod-RaceLeaderboard[b-3m6jb8kkln] {
        min-height: 400px;
        border-radius: 0;
    }
}

/* Size variants - can be applied via parent container or settings */
.scm-mod-RaceLeaderboard.scm-mod-compact[b-3m6jb8kkln] {
    min-height: 250px;
}

.scm-mod-RaceLeaderboard.scm-mod-large[b-3m6jb8kkln] {
    min-height: 600px;
}

.scm-mod-RaceLeaderboard.scm-mod-fullheight[b-3m6jb8kkln] {
    min-height: 80vh;
}

/* ---------- Professional polish ---------- */

/* Outer container: soft shadow + gradient surround */
.scm-mod-RaceLeaderboard[b-3m6jb8kkln] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--scm-surface) 90%, #000 10%) 0%,
        var(--scm-surface) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--scm-border);
    font-family: var(--scm-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* Stack multiple leaderboard cards with breathing room */
.scm-mod-RaceLeaderboard .scm-mod-leaderboard-item[b-3m6jb8kkln] {
    position: relative;
    border-bottom: 1px solid var(--scm-border);
}

.scm-mod-RaceLeaderboard .scm-mod-leaderboard-item:last-child[b-3m6jb8kkln] {
    border-bottom: none;
}

/* Results banner — Provisional / Official / Amended */
.scm-mod-RaceLeaderboard .scm-mod-results-banner[b-3m6jb8kkln] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--scm-accent) 14%, transparent);
    color: var(--scm-surface-contrast);
    border-bottom: 1px solid var(--scm-border);
}

.scm-mod-RaceLeaderboard .scm-mod-results-banner--provisional[b-3m6jb8kkln] {
    background: color-mix(in srgb, #f5a524 22%, transparent);
}

.scm-mod-RaceLeaderboard .scm-mod-results-banner--official[b-3m6jb8kkln] {
    background: color-mix(in srgb, #17c964 22%, transparent);
}

.scm-mod-RaceLeaderboard .scm-mod-results-banner--amended[b-3m6jb8kkln] {
    background: color-mix(in srgb, #7828c8 22%, transparent);
}

.scm-mod-RaceLeaderboard .scm-mod-results-banner__meta[b-3m6jb8kkln] {
    opacity: 0.75;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Empty state — polished racing-themed card */
.scm-mod-RaceLeaderboard .scm-mod-empty-state[b-3m6jb8kkln] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    min-height: 320px;
    background:
        radial-gradient(circle at 50% 0%,
            color-mix(in srgb, var(--scm-accent) 12%, transparent) 0%,
            transparent 60%);
}

.scm-mod-RaceLeaderboard .scm-mod-empty-icon[b-3m6jb8kkln] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--scm-accent) 18%, transparent);
    color: var(--scm-accent);
    margin-bottom: 0.5rem;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--scm-accent) 8%, transparent);
}

.scm-mod-RaceLeaderboard .scm-mod-empty-title[b-3m6jb8kkln] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--scm-surface-contrast);
}

.scm-mod-RaceLeaderboard .scm-mod-empty-message[b-3m6jb8kkln] {
    margin: 0;
    max-width: 480px;
    color: var(--scm-surface-contrast);
    opacity: 0.7;
    font-size: 0.95rem;
    line-height: 1.5;
}

.scm-mod-RaceLeaderboard .scm-mod-empty-cta[b-3m6jb8kkln] {
    margin: 0.5rem 0 0 0;
    font-weight: 600;
    color: var(--scm-accent);
    font-size: 0.95rem;
}

/* Tighten/upgrade the embedded RaceLeaderboardDisplay when shown inside the website module */
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .race-leaderboard {
    background: transparent;
    color: var(--scm-surface-contrast);
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--scm-surface) 70%, #000 30%) 0%,
        color-mix(in srgb, var(--scm-surface) 92%, #000 8%) 100%);
    border-bottom: 1px solid var(--scm-border);
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .session-name {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .session-type-chip,
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .game-phase-chip,
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .kd-series-chip,
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .kd-round-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--scm-accent) 18%, transparent);
    color: var(--scm-surface-contrast);
    border: 1px solid color-mix(in srgb, var(--scm-accent) 35%, transparent);
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-columns {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--scm-border);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-row {
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--scm-border) 60%, transparent);
    transition: background-color 120ms ease;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-row:hover {
    background: color-mix(in srgb, var(--scm-accent) 6%, transparent);
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-row:nth-child(even) {
    background: color-mix(in srgb, var(--scm-surface-contrast) 3%, transparent);
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .position-number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .driver-name {
    font-weight: 600;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .col-time,
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .col-gap,
.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .col-pits {
    font-variant-numeric: tabular-nums;
}

.scm-mod-RaceLeaderboard[b-3m6jb8kkln]  .leaderboard-footer {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    opacity: 0.55;
    border-top: 1px solid var(--scm-border);
}