/* _content/LiveEventBingo.Shared/Pages/Common/Pages/Profile/DesktopUserProfile.razor.rz.scp.css */
/* DesktopUserProfile.razor.css
   Scoped styles for the user-profile shell (C4). Selectors target this component's
   OWN elements (.up-*). Classes handed to CHILD components (MebIcon, InputText,
   ActionButton) land on elements those components render -- outside this component's
   CSS scope -- so they use ::deep. Colors are governed palette tokens only (no raw
   hex, AGENTS.md). Figma: 293:6981 / 293:7126 / 293:7266. */

.up-page[b-0ioviln9kb] {
    display: flex;
    justify-content: center;
    padding: var(--meb-space-stack-lg);
    background: var(--meb-surface-page);
}

/* Yellow main panel (Bingo Yellow == surface.section.howtoplay) */
.up-panel[b-0ioviln9kb] {
    width: 100%;
    max-width: 1440px;
    background: var(--meb-surface-section-howtoplay);
    border-radius: var(--meb-border-radius-xl);
    padding: var(--meb-space-stack-lg);
}

/* ---------- Header ---------- */
.up-header[b-0ioviln9kb] {
    display: flex;
    align-items: center;
    gap: var(--meb-space-stack-lg);
    margin-bottom: var(--meb-space-stack-lg);
}

/* Wrapper provides the relative context for the edit badge overlay */
.up-avatar-wrap[b-0ioviln9kb] {
    position: relative;
    width: 240px;
    height: 240px;
    flex: 0 0 auto;
}

.up-avatar[b-0ioviln9kb] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--meb-surface-card);
    border: var(--meb-border-width-md) solid var(--meb-text-heading-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.up-avatar__img[b-0ioviln9kb] {
    width: 80%;
    height: 80%;
}

/* Edit badge: overlays bottom-left of the circle, outside overflow:hidden */
.up-avatar__edit[b-0ioviln9kb] {
    position: absolute;
    left: 12px;
    bottom: 8px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--meb-palette-orange-bingo, #ffc31c);
    border: 2px solid var(--meb-text-heading-brand);
    color: var(--meb-text-heading-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.up-avatar__edit:hover[b-0ioviln9kb],
.up-avatar__edit:focus-visible[b-0ioviln9kb] {
    outline: 2px solid var(--meb-text-heading-brand);
    outline-offset: 2px;
}

.up-identity[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-sm);
}

/* Name == Display role (Poppins ExtraBold 48). Governed token path per Bingo-Template
   §23.6.9 -- mirrors .gl-title (game-list display title), no raw family/size literals. */
.up-name[b-0ioviln9kb] {
    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: var(--meb-font-lineheight-display);
    margin: 0;
    color: var(--meb-text-heading-brand);
}

/* Subtitle / login prompt == Body role (Outfit 16), semibold for prompt emphasis. */
.up-subtitle[b-0ioviln9kb] {
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-semibold);
    font-size: var(--meb-font-size-body-desktop);
    line-height: var(--meb-font-lineheight-body);
    margin: 0;
    color: var(--meb-text-heading-brand);
}

/* Folder-style tab overrides (Figma 293-7126 / 293-7266).
   Each tab is a rounded-top bordered box; the active tab connects flush to the white body.
   Background must be white (--meb-surface-card); default theme token is #f4f4f4.
   Specificity war with tabs.css (0,3,x) is resolved with !important, scoped to .up-tabs. */
[b-0ioviln9kb] .up-tabs .ui-tabs-body,
[b-0ioviln9kb] .up-tabs .ui-tab,
[b-0ioviln9kb] .up-tabs .ui-tab.active {
    background: var(--meb-surface-card) !important;
}

/* Active tab's ::after covers the bottom border seam — must match the body background */
[b-0ioviln9kb] .up-tabs .ui-tab.active::after {
    background: var(--meb-surface-card) !important;
}

/* Inactive tabs: muted; active tab: brand navy — matching Figma active/inactive contrast */
[b-0ioviln9kb] .up-tabs .ui-tab {
    color: var(--meb-text-muted) !important;
}

[b-0ioviln9kb] .up-tabs .ui-tab.active {
    color: var(--meb-text-heading-brand) !important;
    font-weight: var(--meb-font-weight-semibold) !important;
}

/* Tab panel body: flex column so action buttons can be pushed to the bottom */
[b-0ioviln9kb] .up-tabs .ui-tabpanel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 420px;
}

/* ---------- Personal Information ---------- */
.up-info-banner[b-0ioviln9kb] {
    display: flex;
    gap: var(--meb-space-stack-sm);
    align-items: flex-start;
    background: var(--meb-surface-page);
    border-radius: var(--meb-radius-lg);
    padding: var(--meb-space-stack-md);
    margin-bottom: var(--meb-space-stack-md);
}

/* Helper copy == Body.Small (Outfit 14). */
.up-info-banner p[b-0ioviln9kb] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    line-height: var(--meb-font-lineheight-body);
    color: var(--meb-text-default);
}

.up-form[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
}

.up-field-row[b-0ioviln9kb] {
    display: flex;
    gap: var(--meb-space-stack-md);
}

.up-field[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-sm);
    flex: 1;
}

/* Field labels == Body.Small (Outfit 14), semibold. */
.up-field__label[b-0ioviln9kb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-default);
}

/* ---------- Personal Info: read-only view (locked until Edit Info clicked) ---------- */
.up-info-view[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
}

.up-info-view__fields[b-0ioviln9kb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--meb-space-stack-md) var(--meb-space-inline-lg);
    margin: 0;
    padding: 0;
}

.up-info-view__row[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-xs, 4px);
}

.up-info-view__value[b-0ioviln9kb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    color: var(--meb-text-default);
    font-weight: var(--meb-font-weight-semibold);
    padding: 0.75rem 1rem;
    background: var(--meb-surface-page);
    border-radius: var(--meb-radius-lg);
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.up-form__actions[b-0ioviln9kb] {
    display: flex;
    justify-content: center;
    gap: var(--meb-space-stack-md);
    margin-top: auto;
    padding-top: var(--meb-space-stack-md);
}

/* Edit mode footer: Cancel on left, Save on right */
.up-form__actions--split[b-0ioviln9kb] {
    justify-content: space-between;
}

/* ---------- Settings ---------- */
.up-settings[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
}

.up-settings__title[b-0ioviln9kb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-bold);
    margin: 0;
    color: var(--meb-text-default);
}

.up-settings__actions[b-0ioviln9kb] {
    display: flex;
    justify-content: space-between;
    gap: var(--meb-space-stack-md);
    margin-top: auto;
    padding-top: var(--meb-space-stack-md);
}

/* ---------- Save error banner (D3) ---------- */
.up-save-error[b-0ioviln9kb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--meb-space-inline-sm);
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    border-radius: var(--meb-border-radius-sm);
    background: var(--meb-surface-error-subtle, #fee2e2);
    color: var(--meb-text-error, #b91c1c);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
}

.up-save-error__dismiss[b-0ioviln9kb] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ---------- My Games (Figma 293:8003) ---------- */
.up-mygames[b-0ioviln9kb] {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--meb-space-stack-sm) 0;
}

.up-mygames__empty[b-0ioviln9kb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    color: var(--meb-text-muted);
    text-align: center;
    margin: auto;
}

.up-mygames__empty-block[b-0ioviln9kb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--meb-space-stack-sm);
    flex: 1;
    min-height: 180px;
    text-align: center;
}

.up-mygames__empty-heading[b-0ioviln9kb] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-default);
}

.up-mygames__empty-body[b-0ioviln9kb] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

.up-mygames__empty-cta[b-0ioviln9kb] {
    display: inline-block;
    margin-top: var(--meb-space-stack-xs, 4px);
    padding: 0.5rem 1.25rem;
    border-radius: var(--meb-border-radius-sm);
    background: var(--meb-text-heading-brand);
    color: var(--meb-surface-card);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    text-decoration: none;
}

.up-mygames__empty-cta:hover[b-0ioviln9kb],
.up-mygames__empty-cta:focus-visible[b-0ioviln9kb] {
    opacity: 0.85;
    outline-offset: 2px;
}

/* Inner Expired/Upcoming tabs — compact folder tabs inside the My Games panel */
[b-0ioviln9kb] .up-mygames__inner-tabs .ui-tabs-body {
    padding: var(--meb-space-stack-sm) 0 0 !important;
}
[b-0ioviln9kb] .up-mygames__inner-tabs .ui-tab {
    font-size: var(--meb-font-size-body-sm-desktop) !important;
    padding: 0.35rem 1.25rem !important;
}

.up-mygames__list[b-0ioviln9kb] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Load-more button */
.up-mygames__load-more[b-0ioviln9kb] {
    align-self: center;
    margin: var(--meb-space-stack-md) auto 0;
    padding: 0.5rem 2rem;
    border-radius: var(--meb-border-radius-pill, 40px);
    border: var(--meb-border-width-sm) solid var(--meb-text-heading-brand);
    background: transparent;
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    cursor: pointer;
    width: auto;
    min-width: 160px;
    text-align: center;
}

.up-mygames__load-more:hover:not(:disabled)[b-0ioviln9kb],
.up-mygames__load-more:focus-visible[b-0ioviln9kb] {
    background: var(--meb-surface-neutral-subtle, #f9fafb);
    outline-offset: 2px;
}

.up-mygames__load-more:disabled[b-0ioviln9kb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* The .up-mygames-guest* block (guest locked state, Figma 293:7881) was DELETED here.
   The markup it styled came out with the 2026-06-02 "all users are full value" decision:
   guests now get the real games list, so there is no lock to paint. Scoped CSS with no
   matching element is dead weight -- it still ships in the bundle and it lies about what
   the component renders. */

/* ---------- Cross-boundary: elements rendered by child components ---------- */
[b-0ioviln9kb] .up-avatar__placeholder {
    width: 55%;
    height: 55%;
    color: var(--meb-text-heading-brand);
    fill: var(--meb-text-heading-brand);
}

/* Edit button icon (rendered by child MebIcon — needs ::deep) */
[b-0ioviln9kb] .up-avatar__edit .meb-icon,
[b-0ioviln9kb] .up-avatar__edit svg {
    pointer-events: none;
}

[b-0ioviln9kb] .up-info-banner__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--meb-text-default);
    fill: var(--meb-text-default);
}

[b-0ioviln9kb] .up-auth-btn {
    align-self: flex-start;
}

[b-0ioviln9kb] .up-field__input {
    border: var(--meb-border-width-sm) solid var(--meb-text-muted);
    border-radius: var(--meb-radius-lg);
    padding: 0.75rem 1rem;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    background: var(--meb-surface-card);
    color: var(--meb-text-default);
    width: 100%;
}

[b-0ioviln9kb] .up-field__input:focus {
    /* 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);
    border-color: var(--meb-accent-primary);
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/Profile/MobileUserProfile.razor.rz.scp.css */
/* MobileUserProfile.razor.css
   Scoped styles for the mobile user-profile shell. Mirrors DesktopUserProfile.razor.css
   token conventions. mup-* prefix avoids collision with up-* desktop classes.
   Figma layout: avatar on yellow bg → name + auth button → white rounded panel with tabs.
   Colors: palette tokens only (no raw hex). Figma: 293:7881 / 293:8003. */

/* ---------- Page shell (yellow background) ---------- */
.mup-page[b-vu0xex76v4] {
    padding: var(--meb-space-stack-md);
    min-height: 100vh;
    background: var(--meb-surface-section-howtoplay);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ---------- Avatar — on yellow bg, centered, above the white panel ---------- */
.mup-avatar-section[b-vu0xex76v4] {
    display: flex;
    justify-content: center;
    padding-top: var(--meb-space-stack-lg);
    padding-bottom: var(--meb-space-stack-md);
}

.mup-avatar-wrap[b-vu0xex76v4] {
    position: relative;
    width: 180px;
    height: 180px;
    flex: 0 0 auto;
}

.mup-avatar[b-vu0xex76v4] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--meb-surface-card);
    border: 3px solid var(--meb-text-heading-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.mup-avatar__img[b-vu0xex76v4] {
    width: 80%;
    height: 80%;
}

/* Edit badge: bottom-RIGHT of circle, outside overflow:hidden (Figma position) */
.mup-avatar__edit[b-vu0xex76v4] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--meb-surface-card);
    border: 2px solid var(--meb-text-heading-brand);
    color: var(--meb-text-heading-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.mup-avatar__edit:hover[b-vu0xex76v4],
.mup-avatar__edit:focus-visible[b-vu0xex76v4] {
    outline: 2px solid var(--meb-text-heading-brand);
    outline-offset: 2px;
}

/* ---------- Header: name + auth button, centered on yellow bg ---------- */
.mup-header[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--meb-space-stack-sm);
    margin-bottom: var(--meb-space-stack-lg);
    text-align: center;
}

.mup-name[b-vu0xex76v4] {
    font-family: var(--meb-font-family-heading-display);
    font-weight: var(--meb-font-weight-extrabold, 800);
    font-size: var(--meb-font-size-display-mobile, 1.75rem);
    line-height: var(--meb-font-lineheight-display);
    margin: 0;
    color: var(--meb-text-heading-brand);
}

.mup-subtitle[b-vu0xex76v4] {
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-semibold);
    font-size: var(--meb-font-size-body-sm-desktop);
    line-height: var(--meb-font-lineheight-body);
    margin: 0;
    color: var(--meb-text-heading-brand);
}

/* ---------- White panel: starts at the tab bar ----------
   min-height ensures the tab body stays tall enough that switching
   from Personal Info (tallest content) to Settings/My Games doesn't
   shrink the container. Tabs share the panel's fixed height. */
.mup-panel[b-vu0xex76v4] {
    background: var(--meb-surface-card);
    border-radius: var(--meb-border-radius-xl) var(--meb-border-radius-xl) 0 0;
    overflow: hidden;
    flex: 1 1 0%;
    min-height: 520px;
    padding: var(--meb-space-stack-md);
    display: flex;
    flex-direction: column;
}

/* Tab shell — fills the white panel so all tabs share the same height */
.mup-tabs[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Surface fills the tabs wrapper */
[b-vu0xex76v4] .mup-tabs > .ui-tabs-surface {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Tab list row — lock height so word-wrap on tab labels doesn't
   shift panel content. The min-height covers a two-line wrapped tab
   (14px × 1.3 line-height ≈ 18.2px × 2 lines + 16px padding). */
[b-vu0xex76v4] .mup-tabs .ui-tablist {
    flex-shrink: 0;
    min-height: 54px;
    align-items: stretch;
}

/* Tab item — fill the locked tablist height so all tabs align */
[b-vu0xex76v4] .mup-tabs.variant-folder .ui-tab {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.35rem !important;
    font-size: var(--meb-font-size-body-sm-desktop, 14px) !important;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-vu0xex76v4] .mup-tabs.variant-folder .ui-tablist {
    flex-wrap: nowrap;
}

/* Active tab body — fills remaining space so all tabs have identical height */
[b-vu0xex76v4] .mup-tabs .ui-tabs-body:not([hidden]) {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tab panel — fills the body, scrolls when content overflows */
[b-vu0xex76v4] .mup-tabs .ui-tabpanel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    overflow-y: auto;
    padding: var(--meb-space-stack-lg) var(--meb-space-stack-md) var(--meb-space-stack-md) !important;
}

/* ---------- Personal Info banner ---------- */
.mup-info-banner[b-vu0xex76v4] {
    background: var(--meb-surface-page);
    border-radius: var(--meb-radius-lg);
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    margin-bottom: var(--meb-space-stack-md);
}

.mup-info-banner p[b-vu0xex76v4] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    line-height: var(--meb-font-lineheight-body);
    color: var(--meb-text-default);
}

/* ---------- Personal Info view mode ---------- */
.mup-info-view[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
}

.mup-info-view__fields[b-vu0xex76v4] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-sm);
}

.mup-info-view__row[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-xs, 4px);
}

.mup-info-view__value[b-vu0xex76v4] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    color: var(--meb-text-default);
    font-weight: var(--meb-font-weight-semibold);
    padding: 0.75rem 1rem;
    background: var(--meb-surface-page);
    border-radius: var(--meb-radius-lg);
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    margin: 0;
}

/* ---------- Edit form ---------- */
.mup-form[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
}

.mup-field[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-xs, 4px);
}

.mup-field__label[b-vu0xex76v4] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-heading-brand);
}

/* Action rows — pin to bottom when wrapped in flex-column tab panel */
.mup-form__actions[b-vu0xex76v4] {
    display: flex;
    justify-content: center;
    gap: var(--meb-space-stack-md);
    margin-top: auto;
    padding-top: var(--meb-space-stack-md);
}

.mup-form__actions--split[b-vu0xex76v4] {
    justify-content: space-between;
    gap: var(--meb-space-inline-sm);
}

/* Prevent Cancel / Save ActionButtons from overflowing on narrow phones */
.mup-form__actions--split[b-vu0xex76v4]  > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Compact button inner content on narrow screens */
.mup-form__actions--split[b-vu0xex76v4]  .action-btn {
    padding: 0.5rem 0.6rem !important;
    font-size: var(--meb-font-size-body-sm-desktop, 13px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Settings actions row — same overflow protection */
.mup-settings__actions[b-vu0xex76v4]  > * {
    flex: 1 1 0;
    min-width: 0;
}

.mup-settings__actions[b-vu0xex76v4]  .action-btn {
    padding: 0.5rem 0.6rem !important;
    font-size: var(--meb-font-size-body-sm-desktop, 13px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Below 400px: text-only buttons, compact padding */
@media (max-width: 400px) {
    .mup-form__actions--split[b-vu0xex76v4]  .action-btn .largeIconSvg {
        display: none !important;
    }

    .mup-settings__actions[b-vu0xex76v4]  .action-btn .largeIconSvg {
        display: none !important;
    }

    .mup-form__actions--split[b-vu0xex76v4]  .action-btn {
        padding: 0.4rem 0.5rem !important;
        font-size: var(--meb-font-size-body-sm-desktop, 12px) !important;
        justify-content: center;
    }

    .mup-settings__actions[b-vu0xex76v4]  .action-btn {
        padding: 0.4rem 0.5rem !important;
        font-size: var(--meb-font-size-body-sm-desktop, 12px) !important;
        justify-content: center;
    }

    .mup-form__actions--split[b-vu0xex76v4] {
        gap: var(--meb-space-inline-xs, 6px);
    }

    .mup-settings__actions[b-vu0xex76v4] {
        gap: var(--meb-space-inline-xs, 6px);
    }
}

/* Below 340px: icons only — hide text, show X/✓ centered in circles */
@media (max-width: 340px) {
    .mup-form__actions--split[b-vu0xex76v4]  .action-btn .largeIconSvg {
        display: block !important;
    }

    .mup-settings__actions[b-vu0xex76v4]  .action-btn .largeIconSvg {
        display: block !important;
    }

    .mup-form__actions--split[b-vu0xex76v4]  .action-btn > span {
        display: none !important;
    }

    .mup-settings__actions[b-vu0xex76v4]  .action-btn > span {
        display: none !important;
    }

    .mup-form__actions--split[b-vu0xex76v4]  .action-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        justify-content: center;
    }

    .mup-settings__actions[b-vu0xex76v4]  .action-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        justify-content: center;
    }

    .mup-form__actions--split[b-vu0xex76v4] {
        justify-content: center;
        gap: var(--meb-space-inline-md, 16px);
    }

    .mup-settings__actions[b-vu0xex76v4] {
        justify-content: center;
        gap: var(--meb-space-inline-md, 16px);
    }
}

/* ---------- Button colour overrides (Figma) ---------- */

/* "Log Out" / "Login" header auth button — outline pill: white bg, black border+shadow */
[b-vu0xex76v4] .mup-auth-btn {
    background: var(--meb-surface-card) !important;
    color: var(--meb-text-heading-brand) !important;
    border: 2px solid var(--meb-text-heading-brand) !important;
    box-shadow: 4px 4px 0 var(--meb-text-heading-brand) !important;
    border-radius: var(--meb-border-radius-pill, 40px) !important;
    min-width: 140px;
}

/* "Edit info" — orange/yellow pill, full width */
[b-vu0xex76v4] .mup-btn-edit-info {
    width: 100%;
    background: var(--meb-palette-orange-bingo, #ffc31c) !important;
    color: var(--meb-text-heading-brand) !important;
    border: 2px solid var(--meb-text-heading-brand) !important;
    box-shadow: 4px 4px 0 var(--meb-text-heading-brand) !important;
    border-radius: var(--meb-border-radius-pill, 40px) !important;
}

/* "Cancel" — coral/orange-red pill */
[b-vu0xex76v4] .mup-btn-cancel {
    background: var(--meb-palette-coral, #ff6b6b) !important;
    color: var(--meb-surface-card) !important;
    border: 2px solid var(--meb-text-heading-brand) !important;
    box-shadow: 3px 3px 0 var(--meb-text-heading-brand) !important;
    border-radius: var(--meb-border-radius-pill, 40px) !important;
    flex: 1;
}

/* "Save" — green pill */
[b-vu0xex76v4] .mup-btn-save {
    background: var(--meb-palette-green-success, #3bff93) !important;
    color: var(--meb-text-heading-brand) !important;
    border: 2px solid var(--meb-text-heading-brand) !important;
    box-shadow: 3px 3px 0 var(--meb-text-heading-brand) !important;
    border-radius: var(--meb-border-radius-pill, 40px) !important;
    flex: 1;
}

/* ---------- Settings ---------- */
.mup-settings[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--meb-space-stack-md);
    align-items: center;
    text-align: center;
}

.mup-settings__title[b-vu0xex76v4] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-bold);
    margin: 0;
    color: var(--meb-text-heading-brand);
    width: 100%;
    text-align: center;
}

.mup-settings__desc[b-vu0xex76v4] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
    line-height: var(--meb-font-lineheight-body);
    text-align: center;
}

.mup-settings__actions[b-vu0xex76v4] {
    display: flex;
    justify-content: space-between;
    gap: var(--meb-space-stack-md);
    margin-top: auto;
    padding-top: var(--meb-space-stack-md);
    width: 100%;
}

/* Make the settings-extra sections also fill width when centered */
[b-vu0xex76v4] .mup-settings .settings-extra {
    width: 100%;
    text-align: left;
}

/* Center the settings-extra title text */
[b-vu0xex76v4] .mup-settings .settings-extra__title {
    text-align: center;
    color: var(--meb-text-heading-brand);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
}

/* Center the swatches */
[b-vu0xex76v4] .mup-settings .settings-extra__swatches {
    justify-content: center;
}

/* Center the toggle row */
[b-vu0xex76v4] .mup-settings .settings-extra__toggle {
    justify-content: center;
}

/* ---------- Save error banner ---------- */
.mup-save-error[b-vu0xex76v4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--meb-space-inline-sm);
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    border-radius: var(--meb-border-radius-sm);
    background: var(--meb-surface-error-subtle, #fee2e2);
    color: var(--meb-text-error, #b91c1c);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
}

.mup-save-error__dismiss[b-vu0xex76v4] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ---------- My Games ---------- */
.mup-mygames[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

.mup-mygames__empty[b-vu0xex76v4] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    color: var(--meb-text-muted);
    text-align: center;
    margin: auto;
}

.mup-mygames__empty-block[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--meb-space-stack-sm);
    min-height: 160px;
    text-align: center;
}

.mup-mygames__empty-heading[b-vu0xex76v4] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-default);
}

.mup-mygames__empty-body[b-vu0xex76v4] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

/* Inner folder tabs (Expired/Upcoming) — flex column to fill available height */
.mup-mygames__inner-tabs[b-vu0xex76v4] {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: var(--meb-space-stack-sm);
}

/* Inner tab panels: flex column so game list + load-more fill remaining space */
[b-vu0xex76v4] .mup-mygames__inner-tabs .ui-tabpanel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 120px !important;
    padding: var(--meb-space-stack-sm) 0 0 !important;
}

.mup-mygames__list[b-vu0xex76v4] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    flex: 1;
    overflow-x: hidden;
}

.mup-mygames__load-more[b-vu0xex76v4] {
    display: block;
    margin: var(--meb-space-stack-sm) auto 0;
    padding: 0.75rem 2rem;
    border-radius: var(--meb-border-radius-pill, 40px);
    border: var(--meb-border-width-sm) solid var(--meb-text-heading-brand);
    background: transparent;
    color: var(--meb-text-heading-brand);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    cursor: pointer;
    width: auto;
    min-width: 160px;
    text-align: center;
}

.mup-mygames__load-more:disabled[b-vu0xex76v4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* The .mup-mygames-guest* block (guest locked state, Figma 293:7881) was DELETED here.
   The markup it styled came out with the 2026-06-02 "all users are full value" decision:
   guests now get the real games list, so there is no lock to paint. Scoped CSS with no
   matching element is dead weight -- it still ships in the bundle and it lies about what
   the component renders. Desktop's sibling .up-mygames-guest* block went the same way. */

/* ---------- Cross-boundary: elements rendered by child components ---------- */
[b-vu0xex76v4] .mup-avatar__placeholder {
    width: 55%;
    height: 55%;
    color: var(--meb-text-heading-brand);
    fill: var(--meb-text-heading-brand);
}

[b-vu0xex76v4] .mup-avatar__edit .meb-icon,
[b-vu0xex76v4] .mup-avatar__edit svg {
    pointer-events: none;
}

[b-vu0xex76v4] .mup-auth-btn {
    min-width: 160px;
}

[b-vu0xex76v4] .mup-field__input {
    border: var(--meb-border-width-sm) solid var(--meb-text-muted);
    border-radius: var(--meb-border-radius-pill, 40px);
    padding: 0.85rem 1.25rem;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    background: var(--meb-surface-page);
    color: var(--meb-text-default);
    width: 100%;
}

[b-vu0xex76v4] .mup-field__input:focus {
    /* 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);
    border-color: var(--meb-text-heading-brand);
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/Profile/UserProfile.razor.rz.scp.css */
/* UserProfile.razor.css
   Scoped styles for the user profile page shell.
   Raw hex replaced with governed tokens. Layout owned by child components. */

/* Telerik/Bootstrap popover override � targets child-rendered elements */
[b-di6ruzybnt] .thepopover {
    background: var(--meb-surface-card) !important;
    color: var(--meb-text-default) !important;
}

/* Form validation invalid state */
[b-di6ruzybnt] .invalid {
    border: var(--meb-border-width-sm) solid var(--meb-border-danger) !important;
}

/* ── Profile button colours (ActionButton theme-service fallback = #FFF; pin to Figma spec) ──
   Figma 293:7126 / 293:7693:
     Edit Info  → amber   #ffc31c  (same token as avatar edit overlay + library-btn)
     Cancel     → coral   #FF7051  (same token as mygames expired date block)
     Save       → green   #1BE777  (Figma: #00dc5f; close match within theme palette) */
[b-di6ruzybnt] .up-btn-edit-info,
[b-di6ruzybnt] .up-btn-edit-info:hover {
    background: var(--meb-palette-orange-bingo, #ffc31c) !important;
    color: var(--meb-text-default, #000) !important;
    box-shadow: 5px 5px 0 #000 !important;
}
[b-di6ruzybnt] .up-btn-cancel,
[b-di6ruzybnt] .up-btn-cancel:hover {
    background: var(--meb-bingo-red, #FF7051) !important;
    color: var(--meb-text-default, #000) !important;
    box-shadow: 5px 5px 0 #000 !important;
}
[b-di6ruzybnt] .up-btn-save,
[b-di6ruzybnt] .up-btn-save:hover {
    background: var(--meb-palette-green, #1BE777) !important;
    color: var(--meb-text-default, #000) !important;
    box-shadow: 5px 5px 0 #000 !important;
}

/* Screen-reader-only utility */
[b-di6ruzybnt] .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);
}
/* _content/LiveEventBingo.Shared/Shared/Components/ProfileSettingsExtras.razor.rz.scp.css */
/* ProfileSettingsExtras.razor.css
   "Your Default Color in game" + "Screen settings by default" sections of the
   Settings tab (Figma 293:7266 / 293:7456). Own elements only; governed tokens,
   no raw hex. The selected-swatch ring and the toggle accent use palette tokens;
   the swatch fill itself is a data-driven inline style (the mark colour value). */

.settings-extra[b-cxll5wjob8] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-md);
}

.settings-extra__block[b-cxll5wjob8] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-sm);
}

/* Guest state: dimmed + non-interactive, mirroring the frame's opacity-20 lock. */
.settings-extra__block--locked[b-cxll5wjob8] {
    opacity: 0.4;
    pointer-events: none;
}

.settings-extra__title[b-cxll5wjob8] {
    margin: 0;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-muted);
}

/* ThemePicker inside ProfileSettingsExtras — full styles since theme-picker.css
   is loaded lazily (media="print") and may not apply when this component renders.
   Mirrors wwwroot/css/components/theme-picker.css. */
[b-cxll5wjob8] .settings-extra .ui-themepicker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
}

[b-cxll5wjob8] .settings-extra .ui-themepicker-swatch {
    appearance: none;
    border: none;
    background: transparent;
    padding: 4px;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

[b-cxll5wjob8] .settings-extra .ui-themepicker-swatch:focus-visible {
    outline: 2px solid var(--meb-state-focus-ring, var(--meb-accent-info, #2879E9));
    outline-offset: 2px;
}

[b-cxll5wjob8] .settings-extra .ui-themepicker-swatch-disc {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--meb-border-default, rgba(0, 0, 0, 0.12));
    box-sizing: border-box;
    background: linear-gradient(
        135deg,
        var(--swatch-bg) 0 50%,
        var(--swatch-accent) 50% 100%
    );
    transition: transform 150ms ease-out, border-color 150ms ease-out;
}

[b-cxll5wjob8] .settings-extra .ui-themepicker-swatch--selected .ui-themepicker-swatch-disc {
    transform: scale(1.08);
    border-color: var(--meb-state-focus-ring, var(--meb-accent-info, #2879E9));
}

[b-cxll5wjob8] .settings-extra .ui-themepicker-swatch-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swatch-on-accent, #FFFFFF);
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.settings-extra__toggle[b-cxll5wjob8] {
    display: flex;
    align-items: center;
    gap: var(--meb-space-inline-sm);
    cursor: pointer;
}

.settings-extra__toggle-label[b-cxll5wjob8] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

/* ---- Pill toggle switch — replaces native checkbox appearance ---- */
.settings-extra__toggle input[type="checkbox"][b-cxll5wjob8] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--meb-border-subtle, #ccc);
    border: 2px solid var(--meb-border-subtle, #ccc);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
    outline: none;
}

.settings-extra__toggle input[type="checkbox"][b-cxll5wjob8]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--meb-surface-card, #fff);
    transition: transform 0.2s;
}

.settings-extra__toggle input[type="checkbox"]:checked[b-cxll5wjob8] {
    background: var(--meb-palette-green-success, #3bff93);
    border-color: var(--meb-palette-green-success, #3bff93);
}

.settings-extra__toggle input[type="checkbox"]:checked[b-cxll5wjob8]::after {
    transform: translateX(24px);
}

.settings-extra__toggle input[type="checkbox"]:disabled[b-cxll5wjob8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-extra__toggle input[type="checkbox"]:focus-visible[b-cxll5wjob8] {
    outline: 2px solid var(--meb-accent-primary);
    outline-offset: 2px;
}
/* _content/LiveEventBingo.Shared/Shared/Components/ThemeSelector.razor.rz.scp.css */
/* ThemeSelector.razor.css (C2)
   Scoped styles for the theme pill-swatch picker. Governed --meb-* tokens only -- no raw
   hex / shadow / border literals, no ThemeColorsList. The per-theme chip colour is the only
   colour set outside this file: it is DB-sourced theme data applied as an inline style, not
   an authored CSS literal. Figma: 293:7266 (2x4 grid) / 293:7456 (single row). */

.theme-swatch[b-2xtwhozawb] {
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-md);
    width: 100%;
}

.theme-swatch__status[b-2xtwhozawb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

.theme-swatch__status--error[b-2xtwhozawb] {
    color: var(--meb-accent-danger);
}

/* 2x4 swatch grid; collapses fluidly on narrow surfaces (mobile profile reuse). */
.theme-swatch__grid[b-2xtwhozawb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--meb-space-stack-md);
}

@media (max-width: 768px) {
    .theme-swatch__grid[b-2xtwhozawb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A single pill: colour chip + theme name, selectable like a radio. */
.theme-swatch__pill[b-2xtwhozawb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--meb-space-stack-sm);
    padding: var(--meb-space-stack-md);
    border-radius: var(--meb-radius-lg);
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    background: var(--meb-surface-card);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.theme-swatch__pill:hover[b-2xtwhozawb] {
    border-color: var(--meb-accent-primary);
}

.theme-swatch__pill:focus-visible[b-2xtwhozawb] {
    outline: var(--meb-border-width-md) solid var(--meb-accent-primary);
    outline-offset: 2px;
}

.theme-swatch__pill--selected[b-2xtwhozawb] {
    border-color: var(--meb-accent-primary);
    border-width: var(--meb-border-width-md);
}

/* Colour chip -- background colour is supplied inline from theme data. */
.theme-swatch__chip[b-2xtwhozawb] {
    width: 100%;
    height: 48px;
    border-radius: var(--meb-radius-md);
    border: var(--meb-border-width-sm) solid var(--meb-border-subtle);
}

.theme-swatch__name[b-2xtwhozawb] {
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    color: var(--meb-text-default);
    text-align: center;
}

/* Selected-state check, top-right of the pill. */
[b-2xtwhozawb] .theme-swatch__check {
    position: absolute;
    top: var(--meb-space-stack-sm);
    right: var(--meb-space-stack-sm);
    width: 18px;
    height: 18px;
    color: var(--meb-accent-primary);
    fill: var(--meb-accent-primary);
}

/* Guest "log in to save" badge (A1) and the logged-in unsaved-changes hint. */
.theme-swatch__badge[b-2xtwhozawb],
.theme-swatch__unsaved[b-2xtwhozawb] {
    display: flex;
    align-items: center;
    gap: var(--meb-space-stack-sm);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-muted);
}

.theme-swatch__badge[b-2xtwhozawb] {
    padding: var(--meb-space-stack-md);
    border-radius: var(--meb-radius-lg);
    background: var(--meb-surface-page);
}

[b-2xtwhozawb] .theme-swatch__badge-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--meb-accent-primary);
    fill: var(--meb-accent-primary);
}