/* _content/LiveEventBingo.Shared/Pages/Common/Pages/NewGame/CallListImportStatus.razor.rz.scp.css */
/* #10861 import status block. Colour and type only (layout and padding are the Stack's props);
   every value is a token NewGame bridges onto its root as an --ng-* custom property, except the
   list indent, which is the global --meb-space-inline-20 spacing token. The block
   sits on the white section card, so it takes the page surface (the import textarea's too) to
   stand apart from it. */
.ngi-status[b-kkfdgeb9ik] {
    background-color: var(--ng-page-bg);
    border-radius: var(--ng-radius);
}

.ngi-hint[b-kkfdgeb9ik] {
    margin: 0;
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-sm-d);
}

.ngi-warn[b-kkfdgeb9ik] {
    margin: 0;
    color: var(--ng-warn-fg);
    font-size: var(--ng-fs-sm-d);
}

.ngi-err[b-kkfdgeb9ik] {
    margin: 0;
    color: var(--ng-bad-fg);
    font-size: var(--ng-fs-sm-d);
    font-weight: var(--ng-fw-medium);
}

.ngi-list[b-kkfdgeb9ik] {
    margin: 0;
    padding-inline-start: var(--meb-space-inline-20);
    overflow-wrap: anywhere;
}

.ngi-dismiss[b-kkfdgeb9ik] {
    background: transparent;
    border: 0;
    color: var(--ng-text);
    font-size: var(--ng-fs-body-d);
    cursor: pointer;
    line-height: 1;
}

.ngi-dismiss:focus-visible[b-kkfdgeb9ik] {
    outline: 2px solid var(--ng-heading);
    outline-offset: 2px;
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/NewGame/CreateCompletedPopup.razor.rz.scp.css */
/*
 * CreateCompletedPopup -- Figma 293:6690
 * Two-column layout: left (icon + heading + desc + QR), right (buttons + banner).
 * Button colours override MebButton's default via ::deep (crosses component scope).
 */

/* ── Two-column layout ── */

.ccp-layout[b-ysxaqh4u6u] {
    display: flex;
    gap: var(--meb-space-xl, 2rem);
    align-items: flex-start;
}

.ccp-left[b-ysxaqh4u6u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--meb-space-md, 1rem);
    text-align: center;
}

.ccp-right[b-ysxaqh4u6u] {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-md, 1rem);
}

/* ── Success circle ── */

.ccp-check[b-ysxaqh4u6u] {
    display: flex;
    justify-content: center;
}

/* ── Heading (Poppins ExtraBold 48px per Figma) ── */

.ccp-heading[b-ysxaqh4u6u] {
    font-family: var(--meb-font-heading, 'Poppins', sans-serif);
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--meb-text-heading, #1c1e52);
    line-height: 1.17;
    margin: 0;
}

/* ── Description ── */

.ccp-desc[b-ysxaqh4u6u] {
    color: var(--meb-text-default);
    font-size: var(--meb-font-size-body);
    margin: 0;
}

/* ── Inline QR ── */

.ccp-qr[b-ysxaqh4u6u] {
    border-radius: var(--meb-radius-sm, 4px);
}

/* ── Button colour overrides (Figma exact) ──────────────────────────────────
   MebButton renders Class directly onto its <button> element (its own Blazor
   scope). ::deep crosses the scope boundary so [b-ccp-scope] .ccp-btn-action
   matches button descendants regardless of their own scope attribute.         */

[b-ysxaqh4u6u] .ccp-btn-action,
[b-ysxaqh4u6u] .ccp-btn-action:hover {
    background: #FFF569 !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: 8px 8px 0 #000 !important;
    border-radius: var(--meb-radius-pill, 40px) !important;
    width: 100%;
}

[b-ysxaqh4u6u] .ccp-btn-go,
[b-ysxaqh4u6u] .ccp-btn-go:hover {
    background: #3BFF93 !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: 8px 8px 0 #000 !important;
    border-radius: var(--meb-radius-pill, 40px) !important;
    width: 100%;
}

/* ── Attention banner (edit mode, D26) — Figma 293:6695 ── */

.ccp-attention[b-ysxaqh4u6u] {
    display: flex;
    align-items: flex-start;
    gap: var(--meb-space-sm, 0.5rem);
    background: var(--meb-surface-notification-warning, #FFE7C0);
    border-radius: var(--meb-radius-lg, 24px);
    padding: var(--meb-space-md, 1rem);
    color: var(--meb-text-notification-warning, #1c1e52);
    font-size: var(--meb-font-size-body);
    text-align: start;
    width: 100%;
    margin-top: var(--meb-space-md, 1rem);
}

.ccp-attention strong[b-ysxaqh4u6u] {
    color: var(--meb-text-notification-warning-accent, #DF057D);
}

.ccp-attention-icon[b-ysxaqh4u6u] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ── Narrow screens: stack columns ── */

@media (max-width: 680px) {
    .ccp-layout[b-ysxaqh4u6u] {
        flex-direction: column;
    }

    .ccp-right[b-ysxaqh4u6u] {
        width: 100%;
    }
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/NewGame/NewGame.razor.rz.scp.css */
/* =============================================================================
   NewGame (Create Game) scoped styles.

   CONTRACT (Bingo-Template §23):
   - Layout is owned by the six primitives via PROPS. This file styles ONLY the
     page-local leaf elements (.ng-*) for COLOR / TYPOGRAPHY / RADIUS, plus the
     internal arrangement of small leaf controls (chips, badges) -- the same
     category as a button's internal layout. It never targets a primitive's
     class with flex/gap/overflow/display.
   - All colors/typography come from the --ng-* custom properties bridged in
     code-behind (BuildPageStyle -> ThemeState.ResolveToken / TokenResolver).
   - Decorative sizes are CSS-local vars (single source, responsive) -- not raw
     literals scattered through rules, and not design tokens (one-off geometry).
   - Typography is data-driven by the .ng-root--mobile / --desktop root class,
     so no @media query drives type and no rebuild is needed on resize.
   ============================================================================= */

.ng-root[b-h5qnsglr0z] {
    /* Decorative geometry (local vars; mobile overrides below). */
    --ng-thumb-size: var(--meb-game-icon-size-editor-desktop);
    --ng-badge-size: 56px;
    --ng-motion-fast: 160ms;

    background-color: var(--ng-page-bg);
    color: var(--ng-text);
    font-family: var(--ng-ff-body);
    font-weight: var(--ng-fw-body);
    line-height: var(--ng-lh-body);
}

.ng-root--mobile[b-h5qnsglr0z] {
    --ng-thumb-size: var(--meb-game-icon-size-editor-phone);
    --ng-badge-size: 36px;
}

/* ---- Brand orange panel (owned wrapper; surface only — layout stays on the inner primitives) ---- */
.ng-panel[b-h5qnsglr0z] {
    background-color: var(--ng-panel-bg);
    border: 1px solid var(--ng-panel-border);
    border-radius: var(--ng-radius);
}

/* ---- Breadcrumb ---- */
.ng-breadcrumb-text[b-h5qnsglr0z] {
    color: var(--ng-text);
    font-size: var(--ng-fs-body-d);
    font-weight: var(--ng-fw-medium);
}

/* ---- Accessibility helper ---- */
.ng-sr-only[b-h5qnsglr0z] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Header (centered hero, matches Figma) ---- */
.ng-title-block[b-h5qnsglr0z] {
    text-align: center;
}

.ng-eyebrow[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-weight: var(--ng-fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--ng-fs-sm-d);
}

.ng-title[b-h5qnsglr0z] {
    color: var(--ng-heading);
    font-family: var(--ng-ff-display);
    font-weight: var(--ng-fw-display);
    line-height: var(--ng-lh-display);
    font-size: var(--ng-fs-display-d);
}

.ng-subtitle[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-body-d);
}

/* ---- Editable thumbnail (a button: clicking it toggles the icon picker, #9110) ---- */
/* ADO #10783: the box holds the shared GameIcon, which draws its own border and background at the
   editor slot size, so the button has no border of its own (one would shrink the icon's box) and
   marks hover with the focus outline instead. */
.ng-thumb[b-h5qnsglr0z] {
    box-sizing: border-box;
    width: var(--ng-thumb-size);
    height: var(--ng-thumb-size);
    border-radius: var(--meb-game-icon-radius);
    border: 0;
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    color: var(--ng-text-muted);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: var(--ng-card-shadow);
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.ng-thumb:hover[b-h5qnsglr0z],
.ng-thumb:focus-visible[b-h5qnsglr0z] {
    outline: 2px solid var(--ng-heading);
    outline-offset: 2px;
}

.ng-thumb--empty[b-h5qnsglr0z] {
    border: 2px dashed var(--ng-text-muted);
    background-color: transparent;
}

.ng-thumb-hint[b-h5qnsglr0z] {
    text-align: center;
    font-size: var(--ng-fs-sm-d);
    color: var(--ng-text-muted);
}

.ng-avatar-grid[b-h5qnsglr0z] {
    max-width: 320px;
}

.ng-avatar-option[b-h5qnsglr0z] {
    width: 56px;
    height: 56px;
    border-radius: var(--ng-radius);
    border: 2px solid transparent;
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    cursor: pointer;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ng-avatar-option :deep(svg)[b-h5qnsglr0z] {
    width: 80%;
    height: 80%;
}

.ng-avatar-option--sel[b-h5qnsglr0z] {
    border-color: var(--ng-heading);
}

/* ---- Sections + numbered badges ---- */
.ng-section[b-h5qnsglr0z] {
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    border-radius: var(--ng-radius);
    padding: 1.25rem;
    box-shadow: var(--ng-card-shadow);
}

.ng-badge[b-h5qnsglr0z] {
    width: var(--ng-badge-size);
    height: var(--ng-badge-size);
    border-radius: var(--ng-radius-chip);
    border: 1px solid var(--ng-border-strong);
    background-color: var(--ng-badge-bg);
    color: var(--ng-badge-fg);
    display: inline-grid;
    place-items: center;
    font-family: var(--ng-ff-heading);
    font-weight: var(--ng-fw-display);
    flex: 0 0 auto;
}

.ng-badge--1[b-h5qnsglr0z]::before { content: "1"; }
.ng-badge--2[b-h5qnsglr0z]::before { content: "2"; }
.ng-badge--3[b-h5qnsglr0z]::before { content: "3"; }

.ng-h2[b-h5qnsglr0z] {
    color: var(--ng-heading);
    font-family: var(--ng-ff-heading);
    font-weight: var(--ng-fw-heading);
    line-height: var(--ng-lh-heading);
    font-size: var(--ng-fs-h2-d);
    margin: 0;
}

/* ---- Notes / hints / errors ---- */
.ng-note[b-h5qnsglr0z],
.ng-hint[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-sm-d);
}

.ng-field-err[b-h5qnsglr0z] {
    color: var(--ng-bad-fg);
    font-size: var(--ng-fs-sm-d);
    font-weight: var(--ng-fw-medium);
}

.ng-gate[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-body-d);
    text-align: center;
}

.ng-help[b-h5qnsglr0z] {
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    border-radius: var(--ng-radius);
    padding: 0.75rem 1rem;
    color: var(--ng-text);
    font-size: var(--ng-fs-sm-d);
}

.ng-help kbd[b-h5qnsglr0z] {
    font-family: var(--ng-ff-body);
    border: 1px solid var(--ng-text-muted);
    border-radius: 4px;
    padding: 0 4px;
}

/* ---- Chip box + chips ---- */
.ng-chipbox[b-h5qnsglr0z] {
    border: 1px solid var(--ng-text-muted);
    border-radius: var(--ng-radius);
    padding: 0.75rem;
    background-color: var(--ng-page-bg);
    cursor: text;
}

.ng-chipbox--empty[b-h5qnsglr0z] {
    border-style: dashed;
    cursor: pointer;
}

.ng-chipbox-hint[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-body-d);
    text-align: center;
}

/* Chip: a leaf control (text + remove), not a layout primitive. */
.ng-chip[b-h5qnsglr0z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--ng-radius-chip);
    border: 1px solid var(--ng-border-strong);
    background-color: var(--ng-chip-bg);
    color: var(--ng-chip-fg);
    padding: 0.25rem 0.6rem;
    font-size: var(--ng-fs-sm-d);
    max-width: 100%;
}

/* ---- Toolbar pills (page-owned; Figma colors not in MebButton variants) ---- */
.ng-tool[b-h5qnsglr0z] {
    border: 1px solid var(--ng-border-strong);
    border-radius: var(--ng-radius-chip);
    padding: 0.4rem 1.1rem;
    font-family: var(--ng-ff-body);
    font-weight: var(--ng-fw-medium);
    font-size: var(--ng-fs-sm-d);
    color: var(--ng-text);
    cursor: pointer;
}

.ng-tool--delete[b-h5qnsglr0z] { background-color: var(--ng-tool-delete-bg); }
.ng-tool--blue[b-h5qnsglr0z] { background-color: var(--ng-tool-blue-bg); }

.ng-tool:disabled[b-h5qnsglr0z] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ng-tool:focus-visible[b-h5qnsglr0z] {
    outline: 2px solid var(--ng-heading);
    outline-offset: 2px;
}

/* ---- Create CTA (page-owned; Figma mint #3BFF93) ---- */
.ng-cta[b-h5qnsglr0z] {
    border: 1px solid var(--ng-border-strong);
    border-radius: var(--ng-radius-chip);
    /* Fall back to the globally-emitted token var (guaranteed by the CSS generator's
       default-merge) in case the new token isn't yet in the active DB theme. */
    background-color: var(--ng-cta-bg, var(--meb-palette-green-mint));
    color: var(--ng-cta-fg);
    font-family: var(--ng-ff-heading);
    font-weight: var(--ng-fw-heading);
    font-size: var(--ng-fs-h3-d);
    padding: 0.85rem 2.75rem;
    cursor: pointer;
}

.ng-cta:disabled[b-h5qnsglr0z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ng-cta:focus-visible[b-h5qnsglr0z] {
    outline: 2px solid var(--ng-heading);
    outline-offset: 2px;
}

.ng-chip-text[b-h5qnsglr0z] {
    cursor: pointer;
    outline-offset: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ng-chip-x[b-h5qnsglr0z] {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0 2px;
}

.ng-chip-edit[b-h5qnsglr0z],
.ng-chip-new[b-h5qnsglr0z] {
    border: 1px solid var(--ng-heading);
    border-radius: var(--ng-radius-chip);
    padding: 0.25rem 0.6rem;
    font-size: var(--ng-fs-sm-d);
    font-family: var(--ng-ff-body);
    color: var(--ng-text);
    background-color: var(--ng-page-bg);
}

.ng-add-wrap[b-h5qnsglr0z] {
    /* leaf wrapper so the '+ Add' click does not bubble to the box add handler */
    display: inline-block;
}

/* ---- Min-count indicator (icon + text + color = not color-only) ---- */
.ng-mincount[b-h5qnsglr0z] {
    font-size: var(--ng-fs-body-d);
    font-weight: var(--ng-fw-medium);
}

.ng-mincount--ok[b-h5qnsglr0z] { color: var(--ng-ok-fg); }
.ng-mincount--bad[b-h5qnsglr0z] { color: var(--ng-bad-fg); }

.ng-mincount-icon[b-h5qnsglr0z] {
    display: inline-grid;
    place-items: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: var(--ng-radius-chip);
    flex: 0 0 auto;
}

.ng-mincount--ok .ng-mincount-icon[b-h5qnsglr0z] { background-color: var(--ng-ok-bg); }
.ng-mincount--bad .ng-mincount-icon[b-h5qnsglr0z] { background-color: var(--ng-bad-bg); }
.ng-mincount--ok .ng-mincount-icon[b-h5qnsglr0z]::before { content: "\2713"; }
.ng-mincount--bad .ng-mincount-icon[b-h5qnsglr0z]::before { content: "\2715"; }

.ng-mincount-count[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-weight: var(--ng-fw-body);
}

/* ---- Import panel ---- */
.ng-import[b-h5qnsglr0z] {
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    border-radius: var(--ng-radius);
    padding: 0.75rem;
}

.ng-import-text[b-h5qnsglr0z] {
    width: 100%;
    border: 1px solid var(--ng-text-muted);
    border-radius: var(--ng-radius);
    padding: 0.5rem;
    font-family: var(--ng-ff-body);
    font-size: var(--ng-fs-body-d);
    color: var(--ng-text);
    background-color: var(--ng-page-bg);
    resize: vertical;
}

.ng-file-btn[b-h5qnsglr0z] {
    position: relative; /* #10861: anchors the visually hidden file input below */
    cursor: pointer;
    color: var(--ng-heading);
    font-weight: var(--ng-fw-medium);
    font-size: var(--ng-fs-sm-d);
}

/* #10861: Blazor's "::deep", not the Vue form. The old selector was invalid, so the browser dropped it and
   the native "Choose File" control showed next to the label. Visually hidden rather than
   display:none, so the input stays in the tab order; the label shows its focus. */
.ng-file-btn[b-h5qnsglr0z]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ng-file-btn:focus-within[b-h5qnsglr0z] {
    outline: 2px solid var(--ng-heading);
    outline-offset: 2px;
}

/* ---- Loading skeleton ---- */
.ng-loading-label[b-h5qnsglr0z] {
    color: var(--ng-text-muted);
    font-size: var(--ng-fs-body-d);
}

.ng-skeleton[b-h5qnsglr0z] {
    border-radius: var(--ng-radius);
    background-color: var(--ng-section-bg, var(--ng-section-bg-fallback));
    opacity: 0.6;
}

.ng-skeleton--block[b-h5qnsglr0z] { height: 8rem; width: 100%; }

/* ============================ Responsive type ============================ */
.ng-root--mobile .ng-title[b-h5qnsglr0z] { font-size: var(--ng-fs-display-m); }
.ng-root--mobile .ng-subtitle[b-h5qnsglr0z] { font-size: var(--ng-fs-body-m); }
.ng-root--mobile .ng-eyebrow[b-h5qnsglr0z] { font-size: var(--ng-fs-sm-m); }
.ng-root--mobile .ng-h2[b-h5qnsglr0z] { font-size: var(--ng-fs-h2-m); }
.ng-root--mobile .ng-note[b-h5qnsglr0z],
.ng-root--mobile .ng-hint[b-h5qnsglr0z],
.ng-root--mobile .ng-field-err[b-h5qnsglr0z],
.ng-root--mobile .ng-thumb-hint[b-h5qnsglr0z] { font-size: var(--ng-fs-sm-m); }
.ng-root--mobile .ng-gate[b-h5qnsglr0z],
.ng-root--mobile .ng-chipbox-hint[b-h5qnsglr0z],
.ng-root--mobile .ng-mincount[b-h5qnsglr0z],
.ng-root--mobile .ng-import-text[b-h5qnsglr0z] { font-size: var(--ng-fs-body-m); }
.ng-root--mobile .ng-chip[b-h5qnsglr0z],
.ng-root--mobile .ng-chip-edit[b-h5qnsglr0z],
.ng-root--mobile .ng-chip-new[b-h5qnsglr0z] { font-size: var(--ng-fs-sm-m); }

/* ============================ Micro-interactions ========================= */
@media (prefers-reduced-motion: no-preference) {
    .ng-chip[b-h5qnsglr0z] {
        animation: ng-chip-in-b-h5qnsglr0z var(--ng-motion-fast) ease-out;
    }

    .ng-skeleton[b-h5qnsglr0z] {
        animation: ng-pulse-b-h5qnsglr0z 1.4s ease-in-out infinite;
    }

    .ng-mincount-icon[b-h5qnsglr0z],
    .ng-avatar-option[b-h5qnsglr0z],
    .ng-thumb[b-h5qnsglr0z] {
        transition: background-color var(--ng-motion-fast) ease,
                    border-color var(--ng-motion-fast) ease,
                    color var(--ng-motion-fast) ease;
    }

    @keyframes ng-chip-in-b-h5qnsglr0z {
        from { opacity: 0; transform: translateY(2px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes ng-pulse-b-h5qnsglr0z {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 0.35; }
    }
}