/* _content/LiveEventBingo.Shared/Pages/Common/Pages/GameListFolder/DesktopGameList.razor.rz.scp.css */
/* ===================================================================
   DesktopGameList.razor.css
   Visual surfaces for the desktop /gamelist body. Layout (rows, gaps,
   columns, insets, alignment) is owned by the six primitives in the
   markup -- this file only paints surfaces, type and leaf controls.
   Colour, shadow, border, radius and motion route through tokens;
   intrinsic px sizing / spacing on leaf controls (the Scan-QR button etc.)
   follows the in-house component-CSS norm. The search magnifier tint is set
   via the DecorativeSvg Color param in markup (no cross-boundary rule needed).
   =================================================================== */

.gl-root[b-h9lzttpmky] {
    background: var(--meb-surface-page);
    min-height: 100%;
    /* Desktop tab-toggle text size (inherited into the shared Tabs variant-toggle). */
    --tabs-toggle-font-size: var(--meb-font-size-h3-desktop, 24px);
}

/* Bingo-Yellow panel on the peach page. Inset + section spacing come from the
   Stack primitive (Padding / PaddingBlock / Gap), not from this rule. */
.gl-panel[b-h9lzttpmky] {
    background: var(--meb-palette-yellow-bingo);
    border: 1px solid var(--meb-border-default);
    border-radius: var(--meb-radius-panel);
}

/* Title -- Poppins ExtraBold (B2 display family), display size, brand navy. */
.gl-title[b-h9lzttpmky] {
    margin: 0;
    font-family: var(--meb-font-family-heading-display);
    font-weight: var(--meb-font-weight-extrabold, 800);
    font-size: var(--meb-font-size-display-desktop);
    line-height: 1.1;
    color: var(--meb-text-heading-brand);
}

/* Scan QR -- mint action surface, brand navy ink, comic shadow. */
.gl-scan[b-h9lzttpmky] {
    display: inline-flex;
    align-items: center;
    gap: var(--meb-space-inline-10, 10px);
    padding: 14px 22px;
    border-radius: var(--meb-radius-pagination);
    border: 1px solid var(--meb-border-default);
    background: var(--meb-palette-green-mint);
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-body-desktop, 16px);
    cursor: pointer;
    box-shadow: var(--meb-shadow-surface-comic-sm);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

.gl-scan:hover[b-h9lzttpmky] {
    transform: translate(-1px, -1px);
    box-shadow: var(--meb-shadow-surface-comic);
}

.gl-scan:focus-visible[b-h9lzttpmky] {
    /* Transparent, not none: forced-colors mode strips the box-shadow ring and repaints this outline in a system colour (ADO 11309). */
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* Count -- big number stacked over the "games found" label (Figma 293:3274). */
.gl-count[b-h9lzttpmky] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    color: var(--meb-text-default);
}

.gl-count strong[b-h9lzttpmky] {
    font-weight: var(--meb-font-weight-extrabold, 800);
    font-size: var(--meb-font-size-h2-desktop, 32px);
    color: var(--meb-text-heading-brand);
}

.gl-count-label[b-h9lzttpmky] {
    font-size: var(--meb-font-size-body-desktop, 16px);
    color: var(--meb-text-default);
}

/* ADO #10563: low-emphasis lobby notice, same visual weight as the chat "Earlier messages
   aren't shown" / "Messages from players you've blocked are hidden" status lines. */
.gl-blocked-hosts-notice[b-h9lzttpmky] {
    margin: 0;
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

.gl-blocked-hosts-notice a[b-h9lzttpmky] {
    color: inherit;
    text-decoration: underline;
}

/* Loading / empty messaging. */
.gl-status-msg[b-h9lzttpmky] {
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-desktop, 24px);
    color: var(--meb-text-muted);
}

.gl-clear[b-h9lzttpmky] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--meb-text-heading-brand);
    font-size: var(--meb-font-size-body-desktop, 16px);
    text-decoration: underline;
    cursor: pointer;
}

/* #9032: guided empty state (genuinely zero public games). Padding/gap/alignment are owned by the
   Stack primitive in markup; this rule only paints type. */
.gl-empty-title[b-h9lzttpmky] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-h3-desktop, 24px);
    color: var(--meb-text-heading-brand);
    text-align: center;
}

.gl-empty-body[b-h9lzttpmky] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop, 16px);
    color: var(--meb-text-muted);
    text-align: center;
}

/* White inner card -- wraps the count/search header + the flush row list (Figma 293:3274).
   overflow:hidden clips the alternating row stripes to the rounded corners. Inset + section
   gaps for the header come from the Stack primitive; the row list is flush (Stack Gap=none). */
.gl-card[b-h9lzttpmky] {
    background: var(--meb-surface-card);
    border: 1px solid var(--meb-border-default);
    border-radius: var(--meb-radius-pagination);
    box-shadow: var(--meb-shadow-surface-comic);
    overflow: hidden;
}

/* Hairline between the search header and the first row (matches the Figma divider). */
.gl-list[b-h9lzttpmky] {
    border-top: 1px solid var(--meb-border-subtle);
}

/* Search field -- stadium pill with a leading magnifier inside (drives the shared Input's
   sizing custom properties; the icon slot is the Input StartIcon). */
.gl-search[b-h9lzttpmky] {
    inline-size: 380px;
    max-inline-size: 100%;
    --input-radius: var(--meb-radius-pagination);
    --input-min-height: 56px;
    --input-padding-y: 14px;
    --input-padding-x: 22px;
    --input-start-icon-inset: 20px;
    --input-start-icon-pad: 52px;
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/GameListFolder/GameList.razor.rz.scp.css */
/* ===================================================================
   GameList.razor.css
   Scoped styles for the game list host page.
   Migrated from inline <style> block — §4.2 compliance.
   Raw color values replaced with token vars — token migration fix.
   =================================================================== */

/* Accessibility utility — screen-reader-only visually hidden helper */
[b-roeuclalgq] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: var(--meb-space-stack-none);
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: var(--meb-space-stack-none);
}

/* QR code Telerik window overrides — token-governed surface */
[b-roeuclalgq] .qr-window {
    border-radius: var(--meb-radius-sm);
    background: var(--meb-surface-card);
}

[b-roeuclalgq] .qr-window > .k-window-titlebar {
    border-radius: var(--meb-radius-sm) var(--meb-radius-sm) var(--meb-space-stack-none) var(--meb-space-stack-none);
    background: var(--meb-surface-card);
}

[b-roeuclalgq] .qr-title {
    color: var(--meb-text-inverse);
    margin: var(--meb-space-stack-none);
}

/* QR code centering — pending §1.1 primitive migration review */
[b-roeuclalgq] .qrcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[b-roeuclalgq] .checkbox-control {
    letter-spacing: .7px;
}

/* Room card text — token-governed muted colour */
[b-roeuclalgq] .room-title,
[b-roeuclalgq] .room-desc {
    color: var(--meb-text-muted);
}

[b-roeuclalgq] .room-card {
    border-radius: 10px;
    background: #FFF;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px;
    margin-bottom: 10px;
}

[b-roeuclalgq] .avatar-image {
    width: 90%;
    height: 90%;
    object-fit: cover;
}

[b-roeuclalgq] .room-avatar {
    background: #fff;
    border-radius: 50%;
    border: 1px solid #131313;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-roeuclalgq] .room-info {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    flex: 1;
    flex-basis: 34px;
}

[b-roeuclalgq] .room-info-mobile {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: 34px;
}

[b-roeuclalgq] .room-title {
    font-size: 1.5em;
    margin: var(--meb-space-stack-none);
}

[b-roeuclalgq] .room-desc {
    font-size: 0.8em;
    margin: var(--meb-space-stack-none);
}

[b-roeuclalgq] .room-stat {
    gap: 10px;
    font-size: 17px;
    padding: 10px;
}

[b-roeuclalgq] .stat-icon {
    width: 23px;
    aspect-ratio: 1;
    object-fit: contain;
}

[b-roeuclalgq] .room-actions {
    gap: 10px;
}

    [b-roeuclalgq] .room-actions button:hover {
        filter: brightness(1.2);
    }
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/GameListFolder/MobileGameList.razor.rz.scp.css */
/* ===================================================================
   MobileGameList.razor.css
   Visual surfaces for the mobile /gamelist body (Figma 341:31 + 341:7772).
   Layout (sections, gaps, the search grid, insets) is owned by the six
   primitives in the markup -- this file paints surfaces, type and leaf
   controls only. Colour, shadow, border, radius and motion route through
   tokens; intrinsic px sizing/spacing on leaf controls follows the
   in-house component-CSS norm.
   =================================================================== */

/* Bingo-Yellow page; white inner panel. Panel inset/section gaps come from the Stack primitive. */
.gl-mroot[b-91j0yhmau1] {
    background: var(--meb-palette-yellow-bingo);
    min-height: 100%;
    /* Mobile tab-toggle text size (inherited into the shared Tabs variant-toggle). */
    --tabs-toggle-font-size: var(--meb-font-size-body-mobile, 16px);
}

/* White card wrapping the search header + the flush row list (Figma 341:31). The title, tabs and
   "More" sit OUTSIDE this card on the yellow page. overflow:hidden clips the row stripes to the radius. */
.gl-mcard[b-91j0yhmau1] {
    background: var(--meb-surface-card);
    border: 1px solid var(--meb-border-default);
    border-radius: var(--meb-radius-pagination);
    box-shadow: var(--meb-shadow-surface-comic);
    overflow: hidden;
}

/* Search field -- stadium pill. The --input-* custom properties are scoped to this wrapper (not the
   whole card) so only the search Input inherits the pill geometry. */
.gl-msearch[b-91j0yhmau1] {
    --input-radius: var(--meb-radius-pagination);
    --input-min-height: 48px;
    --input-padding-y: 12px;
    --input-padding-x: 18px;
    --input-start-icon-inset: 16px;
    --input-start-icon-pad: 44px;
}

/* Hairline between the search header and the first row. */
.gl-mlist[b-91j0yhmau1] {
    border-top: 1px solid var(--meb-border-subtle);
}

/* Native button-chrome reset for the bespoke comic CTAs -- iOS/Safari WKWebView is a primary target
   and otherwise bleeds UA background/focus-halo through the overridden surfaces (cf. MebButton). */
.gl-mscan[b-91j0yhmau1],
.gl-mfunnel[b-91j0yhmau1],
.gl-mmore[b-91j0yhmau1],
.gl-mapply[b-91j0yhmau1] {
    appearance: none;
    -webkit-appearance: none;
}

/* Title -- Outfit Bold (mobile per 341:31), brand navy. */
.gl-mtitle[b-91j0yhmau1] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-h2-mobile, 24px);
    line-height: 1.15;
    color: var(--meb-text-heading-brand);
}

/* Scan QR -- mint pill with icon + label (Figma 341:31). */
.gl-mscan[b-91j0yhmau1] {
    display: inline-flex;
    align-items: center;
    gap: var(--meb-space-inline-sm, 8px);
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: var(--meb-radius-pagination);
    border: 1px solid var(--meb-border-default);
    background: var(--meb-palette-green-mint);
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-body-mobile, 16px);
    cursor: pointer;
    box-shadow: var(--meb-shadow-surface-comic-sm);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

.gl-mscan:focus-visible[b-91j0yhmau1] {
    /* Transparent, not none: forced-colors mode strips the box-shadow ring and repaints this outline in a system colour (ADO 11309). */
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* Funnel -- Bingo-Orange circular action that opens the filter popup (Figma 341:31). */
.gl-mfunnel[b-91j0yhmau1] {
    inline-size: 48px;
    block-size: 48px;
    flex: 0 0 auto;
    border-radius: var(--meb-radius-full);
    border: 1px solid var(--meb-border-default);
    background: var(--meb-palette-orange-bingo);
    color: var(--meb-text-heading-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--meb-shadow-surface-comic-sm);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

.gl-mfunnel:focus-visible[b-91j0yhmau1] {
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* ADO #10563: low-emphasis lobby notice, mobile counterpart of DesktopGameList's
   .gl-blocked-hosts-notice. */
.gl-mblocked-hosts-notice[b-91j0yhmau1] {
    margin: 0;
    font-size: var(--meb-font-size-body-sm-mobile, var(--meb-font-size-body-sm-desktop));
    color: var(--meb-text-muted);
}

.gl-mblocked-hosts-notice a[b-91j0yhmau1] {
    color: inherit;
    text-decoration: underline;
}

/* Loading / empty messaging. */
.gl-mstatus[b-91j0yhmau1] {
    margin: 0;
    padding: 32px 0;
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile, 16px);
    color: var(--meb-text-muted);
}

.gl-mclear[b-91j0yhmau1] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--meb-text-heading-brand);
    font-size: var(--meb-font-size-body-mobile, 16px);
    text-decoration: underline;
    cursor: pointer;
}

/* #9032: guided empty state (genuinely zero public games). Padding/gap/alignment are owned by the
   Stack primitive in markup; this rule only paints type. */
.gl-mempty-title[b-91j0yhmau1] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-h3-mobile, 20px);
    color: var(--meb-text-heading-brand);
    text-align: center;
}

.gl-mempty-body[b-91j0yhmau1] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile, 16px);
    color: var(--meb-text-muted);
    text-align: center;
}

/* "More" load-more -- full width, loading-disabled state. */
.gl-mmore[b-91j0yhmau1] {
    inline-size: 100%;
    padding: 12px 16px;
    border-radius: var(--meb-radius-pagination);
    border: 1px solid var(--meb-border-default);
    background: var(--meb-surface-card);
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-body-mobile, 16px);
    cursor: pointer;
    box-shadow: var(--meb-shadow-surface-comic-sm);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

.gl-mmore:disabled[b-91j0yhmau1] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

.gl-mmore:focus-visible[b-91j0yhmau1] {
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* Filter popup "Apply" -- full width, Bingo Orange. */
.gl-mapply[b-91j0yhmau1] {
    inline-size: 100%;
    padding: 14px 16px;
    border-radius: var(--meb-radius-pagination);
    border: 1px solid var(--meb-border-default);
    background: var(--meb-palette-orange-bingo);
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold, 700);
    font-size: var(--meb-font-size-body-mobile, 16px);
    cursor: pointer;
    box-shadow: var(--meb-shadow-surface-comic-sm);
    transition: transform var(--meb-motion-fast), box-shadow var(--meb-motion-fast);
}

.gl-mapply:focus-visible[b-91j0yhmau1] {
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}