/* /Components/ClubSessionDashboard/AttendeeStatsTab.razor.rz.scp.css */
.attendee-stats-table-wrap[b-mq55dj9eur] {
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

/* BL-076: card-per-player list. Hidden by default (desktop uses the table);
   swap visibility at <= 720px so phones get cards and no horizontal scroll. */
.attendee-stats-card-list[b-mq55dj9eur] {
    display: none;
}

@media (max-width: 720px) {
    .attendee-stats-table-wrap[b-mq55dj9eur] {
        display: none;
    }

    .attendee-stats-card-list[b-mq55dj9eur] {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin-bottom: 0.75rem;
    }
}

.attendee-stats-card[b-mq55dj9eur] {
    background: #ffffff;
    border: 1px solid #d6dde6;
    border-radius: 0.55rem;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 35, 60, 0.04);
}

.attendee-stats-card.selected-card[b-mq55dj9eur] {
    background: #dbeafe;
    border-color: #94b8ea;
}

.attendee-stats-card-head[b-mq55dj9eur] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.attendee-stats-card-rank[b-mq55dj9eur] {
    font-weight: 700;
    color: #5a6b80;
    font-size: 0.85rem;
    min-width: 1.8rem;
}

.attendee-stats-card-name[b-mq55dj9eur] {
    font-weight: 600;
    color: #0d2c55;
    font-size: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.attendee-stats-card-name:hover[b-mq55dj9eur] {
    text-decoration: underline;
}

.attendee-stats-card-status[b-mq55dj9eur] {
    margin-left: auto;
    font-size: 0.78rem;
    color: #5a6b80;
    background: #eef2f7;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.attendee-stats-card-grid[b-mq55dj9eur] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 0.9rem;
    margin: 0;
}

.attendee-stats-card-grid > div[b-mq55dj9eur] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.attendee-stats-card-grid dt[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.attendee-stats-card-grid dd[b-mq55dj9eur] {
    color: #1d2733;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

/* The rating-change row is the headline value on a card — span both columns
   and bump the number size so it's the first thing the eye lands on. */
.attendee-stats-card-rating-change[b-mq55dj9eur],
.attendee-stats-card-delta[b-mq55dj9eur] {
    grid-column: 1 / -1;
    border-top: 1px dashed #e1e6ed;
    padding-top: 0.35rem;
    margin-top: 0.1rem;
}

.attendee-stats-card-rating-change dt[b-mq55dj9eur],
.attendee-stats-card-delta dt[b-mq55dj9eur] {
    font-weight: 600;
    color: #1d2733;
}

.attendee-stats-card-rating-change dd[b-mq55dj9eur],
.attendee-stats-card-delta dd[b-mq55dj9eur] {
    font-size: 1.15rem;
    font-weight: 700;
}

.attendee-stats-card-results[b-mq55dj9eur] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.attendee-stats-card-results-label[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
}

/* Performance / Fairness tabs — these are sub-views within Attendee Stats,
   switching them changes columns + sort logic, so they need to read as tabs
   (level-2 navigation), not buttons. */
.attendee-stats-tabs[b-mq55dj9eur] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #d3dce4;
    margin-bottom: 0.4rem;
}

.attendee-stats-tab[b-mq55dj9eur] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.55rem 1.1rem;
    margin-bottom: -1px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #5e748a;
    cursor: pointer;
    transition: color 100ms ease, border-color 100ms ease;
}

.attendee-stats-tab:hover[b-mq55dj9eur] {
    color: #1f3f5e;
}

.attendee-stats-tab.active[b-mq55dj9eur] {
    color: #1f3f5e;
    border-bottom-color: #1b6ec2;
    font-weight: 600;
}

.attendee-stats-tab-subtitle[b-mq55dj9eur] {
    margin: 0 0 0.85rem 0;
    color: #5e748a;
    font-size: 0.875rem;
    font-style: italic;
}

/* Rank-by sits inside the table area (Performance only), left-aligned above
   the headers. It's a setting, not a view-switch, so it's visually subordinate
   to the tabs above. */
.attendee-stats-rank-by[b-mq55dj9eur] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.attendee-stats-rank-by-label[b-mq55dj9eur] {
    color: #5e748a;
    margin-right: 0.15rem;
}

.attendee-stats-rank-by-option[b-mq55dj9eur] {
    background: transparent;
    border: 1px solid #c8d4e0;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    color: #3a4a59;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.attendee-stats-rank-by-option:hover:not(:disabled):not(.active)[b-mq55dj9eur] {
    background: #f3f6f9;
    border-color: #a4b4c4;
}

.attendee-stats-rank-by-option.active[b-mq55dj9eur] {
    background: #1b6ec2;
    border-color: #1561a8;
    color: #fff;
    font-weight: 500;
}

.attendee-stats-rank-by-option:disabled[b-mq55dj9eur] {
    opacity: 0.55;
    cursor: not-allowed;
}

.attendee-stats-table[b-mq55dj9eur] {
    min-width: 1200px;
}

.attendee-stats-table thead th.sortable-header[b-mq55dj9eur] {
    cursor: pointer;
    user-select: none;
}

.attendee-stats-table thead th.sortable-header:hover[b-mq55dj9eur] {
    background-color: #eef3f8;
}

.attendee-stats-table tbody tr[b-mq55dj9eur] {
    cursor: pointer;
}

.attendee-stats-table tbody tr:nth-child(odd):not(.selected-row) td[b-mq55dj9eur] {
    background-color: #ffffff;
}

.attendee-stats-table tbody tr:nth-child(even):not(.selected-row) td[b-mq55dj9eur] {
    background-color: #f8fafc;
}

.attendee-stats-table tbody tr:not(.selected-row):hover td[b-mq55dj9eur] {
    background-color: #eef2f7;
}

.attendee-stats-table tbody tr.selected-row[b-mq55dj9eur] {
    background-color: #dbeafe !important;
}

.attendee-stats-table tbody tr.selected-row td[b-mq55dj9eur] {
    background-color: #dbeafe !important;
    font-weight: 600;
}

.attendee-stats-table tbody tr.selected-row:hover td[b-mq55dj9eur] {
    background-color: #bfdbfe !important;
}

.result-squares[b-mq55dj9eur] {
    display: flex;
    gap: 0.2rem;
    min-height: 1.35rem;
}

.result-square[b-mq55dj9eur] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}

.result-win[b-mq55dj9eur] {
    background: #248c3b;
}

.result-loss[b-mq55dj9eur] {
    background: #bd2f2f;
}

.rating-positive[b-mq55dj9eur] {
    color: #1c7a33;
    font-weight: 600;
}

.rating-negative[b-mq55dj9eur] {
    color: #b52d2d;
    font-weight: 600;
}

.leader-badge[b-mq55dj9eur] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.badge-gold[b-mq55dj9eur] {
    background-color: #ffe08a;
    color: #7a5400;
    border: 1px solid #d9b857;
}

.badge-silver[b-mq55dj9eur] {
    background-color: #e2e8f0;
    color: #475569;
    border: 1px solid #b6c2d0;
}

.badge-bronze[b-mq55dj9eur] {
    background-color: #f2d1b0;
    color: #6f3f1f;
    border: 1px solid #cc9a73;
}

/* Inline expansion: detail panel rendered immediately under the selected
   table row (via colspan=9) or inside the selected card. Both wrappers
   give the detail a softer, recessed look so it reads as a child of the
   selected row, not as a sibling. */
.attendee-stats-table tbody tr.attendee-detail-row[b-mq55dj9eur] {
    cursor: default;
    background-color: transparent !important;
}

.attendee-stats-table tbody tr.attendee-detail-row:hover td[b-mq55dj9eur] {
    background-color: transparent !important;
}

.attendee-stats-table tbody tr.attendee-detail-row > td.attendee-detail-cell[b-mq55dj9eur] {
    background-color: #f1f6ff !important;
    border-left: 3px solid #94b8ea;
    padding: 0.75rem 1rem;
    font-weight: normal;
}

.attendee-stats-card.selected-card .attendee-stats-card-detail[b-mq55dj9eur] {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #94b8ea;
}

/* The detail block heading is now subordinate to the selected row, not a
   top-level section heading. Tone it down slightly so the eye stays on the
   row above. */
.attendee-detail-cell .attendee-game-details > h3[b-mq55dj9eur],
.attendee-stats-card-detail .attendee-game-details > h3[b-mq55dj9eur] {
    margin-top: 0;
    font-size: 0.95rem;
    color: #1f3f5e;
}

/* The Game Details table inside the detail panel can be wider than the
   viewport on tablet portrait — give it its own horizontal scroll so the
   wider parent table layout doesn't squeeze it weirdly. */
.attendee-game-details-table-wrap[b-mq55dj9eur] {
    overflow-x: auto;
}

.attendee-game-details h3[b-mq55dj9eur] {
    margin-bottom: 0.7rem;
    font-size: 1rem;
}

.attendee-unavailable-summary[b-mq55dj9eur] {
    margin-bottom: 0.9rem;
}

.attendee-time-summary[b-mq55dj9eur] {
    margin-bottom: 0.8rem;
}

.attendee-time-summary h4[b-mq55dj9eur] {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Single horizontal strip of stat tiles. 6-across on wide landscape
   viewports, 3-across at portrait tablet, 2-across at phone card view.
   Saves ~2 line-heights vs the previous 3x2 table layout.

   The detail cell sits inside a `<td colspan="9">` of a table with
   `min-width: 1200px`, so at portrait-tablet viewports the natural
   containing block is wider than the screen. We set `width` directly
   (not `width: 100%; max-width: ...`) so the grid sizes itself rather
   than inheriting the inflated parent. */
.attendee-time-summary-grid[b-mq55dj9eur] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
    margin: 0 0 0.65rem 0;
    width: min(60rem, calc(100vw - 2rem));
}

/* Portrait tablet, landscape phone: 3 across × 2 rows. The threshold is
   1100px so portrait 10-11" tablets (820px) cleanly get 3-across. */
@media (max-width: 1100px) {
    .attendee-time-summary-grid[b-mq55dj9eur] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phone (card view triggers at <= 720px). At this width 2 across fits
   the typical card width comfortably. */
@media (max-width: 480px) {
    .attendee-time-summary-grid[b-mq55dj9eur] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.attendee-time-summary-grid > div[b-mq55dj9eur] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.attendee-time-summary-grid dt[b-mq55dj9eur] {
    color: #5a6b80;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.attendee-time-summary-grid dd[b-mq55dj9eur] {
    color: #1d2733;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.attendee-unavailable-summary h4[b-mq55dj9eur] {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.attendee-unavailable-table[b-mq55dj9eur] {
    max-width: 42rem;
}
/* /Components/ClubSessionDashboard/ClubSessionSettingsTab.razor.rz.scp.css */
.settings-actions[b-nz9rmuh1yc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.settings-message[b-nz9rmuh1yc] {
    color: #4f6177;
    font-size: 0.92rem;
}
/* /Components/ClubSessionDashboard/CompletedGamesTab.razor.rz.scp.css */
.completed-game-edited-badge[b-fena95e2pi] {
    color: #c2410c;
    font-size: 0.78rem;
    font-style: italic;
    text-decoration: none;
}

.completed-game-edited-badge:hover[b-fena95e2pi],
.completed-game-edited-badge:focus-visible[b-fena95e2pi] {
    text-decoration: underline;
    color: #9a3412;
}

.completed-game-history-row > td[b-fena95e2pi] {
    background: #fff8f0;
    border-top: none;
}

.completed-game-history[b-fena95e2pi] {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.completed-game-history ul[b-fena95e2pi] {
    padding-left: 1.2rem;
    margin-top: 0.25rem;
}

.completed-game-edit-modal[b-fena95e2pi] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completed-game-edit-backdrop[b-fena95e2pi] {
    position: absolute;
    inset: 0;
    background: rgba(13, 44, 85, 0.45);
}

.completed-game-edit-dialog[b-fena95e2pi] {
    position: relative;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 1.25rem 1.4rem;
    max-width: 36rem;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
}

.completed-game-edit-dialog h3[b-fena95e2pi] {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: #0d2c55;
}

.completed-game-edit-legend[b-fena95e2pi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.3rem;
}
/* /Components/ClubSessionDashboard/GameSuggestionExplainerDialog.razor.rz.scp.css */
/* ── Backdrop & Modal Shell ───────────────────────── */
.explainer-backdrop[b-lz7qf7hzti] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.explainer-modal[b-lz7qf7hzti] {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 56rem;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* BL-058: on narrow viewports the modal was opening with awkward whitespace
   above and below — the 2rem-from-top padding on the backdrop combined with
   the 90vh modal cap left ~5–10% of vertical space empty top and bottom.
   On mobile, fill the viewport edge-to-edge (bottom-sheet pattern). */
@media (max-width: 600px) {
    .explainer-backdrop[b-lz7qf7hzti] {
        padding: 0;
        align-items: stretch;
    }

    .explainer-modal[b-lz7qf7hzti] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ── Header ──────────────────────────────────────── */
.explainer-header[b-lz7qf7hzti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.explainer-header h3[b-lz7qf7hzti] {
    margin: 0;
    font-size: 1.1rem;
}

/* ── Loading / Empty ─────────────────────────────── */
.explainer-loading[b-lz7qf7hzti],
.explainer-empty[b-lz7qf7hzti] {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.spinner[b-lz7qf7hzti] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-lz7qf7hzti 0.75s linear infinite;
}

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

/* ── Body ────────────────────────────────────────── */
.explainer-body[b-lz7qf7hzti] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Version Warning ─────────────────────────────── */
.explainer-version-warning[b-lz7qf7hzti] {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* ── Summary ─────────────────────────────────────── */
.explainer-summary[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.explainer-summary-teams[b-lz7qf7hzti] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.vs-label[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 400;
    font-size: 0.85rem;
}

.explainer-summary-stats[b-lz7qf7hzti] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.version-tag[b-lz7qf7hzti] {
    font-family: monospace;
    font-size: 0.75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}

/* ── Locked / Rationale ──────────────────────────── */
.explainer-locked-context[b-lz7qf7hzti] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.explainer-rationale[b-lz7qf7hzti] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Factor Table (Level 1) ──────────────────────── */
.explainer-factor-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.explainer-factor-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.35rem 0.5rem;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-factor-table td[b-lz7qf7hzti] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-factor-table .interpretation[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
}

/* ── Contribution colours ────────────────────────── */
.contribution-positive[b-lz7qf7hzti] { color: #198754; font-weight: 600; }
.contribution-mild[b-lz7qf7hzti]     { color: #6c757d; }
.contribution-moderate[b-lz7qf7hzti] { color: #fd7e14; }
.contribution-severe[b-lz7qf7hzti]   { color: #dc3545; font-weight: 600; }

/* ── Actions Row ─────────────────────────────────── */
.explainer-actions-row[b-lz7qf7hzti] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.explainer-flag-form[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f8f9fa;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.explainer-flag-label[b-lz7qf7hzti] {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
}

.explainer-flag-error[b-lz7qf7hzti] {
    color: #b02a37;
    font-size: 0.85rem;
    margin: 0;
}

.explainer-flag-actions[b-lz7qf7hzti] {
    display: flex;
    justify-content: flex-end;
}

.explainer-flag-ack[b-lz7qf7hzti] {
    background: #d1e7dd;
    color: #0a3622;
    border: 1px solid #a3cfbb;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* ── Candidates Section (Level 2) ────────────────── */
.explainer-candidates-section[b-lz7qf7hzti] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.explainer-search-bar[b-lz7qf7hzti] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.explainer-search-bar input[b-lz7qf7hzti] {
    flex: 1;
}

.explainer-candidates-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-candidates-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.3rem 0.4rem;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
    white-space: nowrap;
}

.explainer-candidates-table td[b-lz7qf7hzti] {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-candidates-table tbody tr[b-lz7qf7hzti] {
    cursor: pointer;
}

.explainer-candidates-table tbody tr:hover[b-lz7qf7hzti] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.row-winner[b-lz7qf7hzti] {
    background: #d1e7dd !important;
}

.row-pinned[b-lz7qf7hzti] {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 2px solid #198754 !important;
}

.row-separator td[b-lz7qf7hzti] {
    height: 3px;
    padding: 0 !important;
    background: var(--bs-border-color, #dee2e6);
    border: none !important;
}

.row-expanded[b-lz7qf7hzti] {
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
}

.col-rank[b-lz7qf7hzti]   { width: 2.5rem; text-align: center; }
.col-vs[b-lz7qf7hzti]     { width: 1.5rem; text-align: center; color: var(--bs-secondary-color, #6c757d); }
.col-score[b-lz7qf7hzti]  { width: 4rem; text-align: right; font-family: monospace; }
.col-delta[b-lz7qf7hzti]  { width: 5.5rem; text-align: right; font-family: monospace; }
.col-issues[b-lz7qf7hzti] { width: 3rem; text-align: center; }

.issue-badge[b-lz7qf7hzti] {
    background: #dc3545;
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.explainer-no-results[b-lz7qf7hzti] {
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.75rem;
    font-size: 0.85rem;
}

/* ── Detail Row (Level 3) ────────────────────────── */
.detail-row td[b-lz7qf7hzti] {
    padding: 0 !important;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6) !important;
}

.explainer-detail[b-lz7qf7hzti] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.explainer-detail h4[b-lz7qf7hzti] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.explainer-detail-factors[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-detail-factors th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-detail-factors td[b-lz7qf7hzti] {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-detail-factors .interpretation[b-lz7qf7hzti] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
}

/* ── Player Detail (Level 3) ─────────────────────── */
.player-detail[b-lz7qf7hzti] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
}

.player-detail summary[b-lz7qf7hzti] {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.player-detail summary:hover[b-lz7qf7hzti] {
    background: var(--bs-secondary-bg, #e9ecef);
}

.player-metrics[b-lz7qf7hzti] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.25rem 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    margin: 0;
}

.player-metrics div[b-lz7qf7hzti] {
    display: flex;
    gap: 0.35rem;
}

.player-metrics dt[b-lz7qf7hzti] {
    font-weight: 500;
    white-space: nowrap;
}

.player-metrics dd[b-lz7qf7hzti] {
    margin: 0;
    color: var(--bs-secondary-color, #6c757d);
}

.player-relationships[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.player-relationships th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
    font-size: 0.75rem;
}

.player-relationships td[b-lz7qf7hzti] {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

/* ── Excluded Section ────────────────────────────── */
.explainer-excluded-section[b-lz7qf7hzti] {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
    margin-top: 0.5rem;
}

.explainer-excluded-section summary[b-lz7qf7hzti] {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    background: #f8d7da;
    color: #842029;
}

.excluded-group[b-lz7qf7hzti] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.explainer-excluded-table[b-lz7qf7hzti] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.explainer-excluded-table th[b-lz7qf7hzti] {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 600;
}

.explainer-excluded-table td[b-lz7qf7hzti] {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, #dee2e622);
}

.excluded-reason[b-lz7qf7hzti] {
    color: #842029;
    font-size: 0.75rem;
}
/* /Components/ClubSessionDashboard/PaymentsTab.razor.rz.scp.css */
.payments-summary[b-ucin70hwvb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.25rem 1rem;
    font-size: 0.9rem;
    color: #2e4f6d;
}

.payments-table td[b-ucin70hwvb] {
    vertical-align: middle;
}

.payment-balance-due[b-ucin70hwvb] {
    color: #8b1f1f;
    font-weight: 700;
}

.payment-balance-ok[b-ucin70hwvb] {
    color: #1f6e3b;
    font-weight: 700;
}

@media (max-width: 900px) {
    .payments-summary[b-ucin70hwvb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/DemoSpotlights.razor.rz.scp.css */
.demo-spotlights-card[b-xb7o3vkr4w] {
    position: fixed;
    /* bottom matches the QuickFeedback FAB (right: 1rem; bottom: 1rem)
       so the pill and FAB sit on the same baseline. */
    bottom: 1rem;
    /* Anchored on the right edge so the open card pops up in the same
       column as the collapsed pill (right: 7.5rem). Bottom-left would
       overlap the Game Prep panel, which is the most important part of
       the dashboard. */
    right: 7.5rem;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    background: #ffffff;
    border: 1px solid #d6e0ee;
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 1.75rem rgba(13, 44, 85, 0.18);
    padding: 0.9rem 1rem 1rem 1rem;
    z-index: 980; /* below modal-backdrop ~1040 but above QuickFeedback FAB */
    font-size: 0.95rem;
    line-height: 1.35;
    color: #1d2733;
    /* Card body must not intercept clicks meant for the underlying dashboard
       (e.g. waiting-chip column on bottom-left). Buttons re-opt-in below. */
    pointer-events: none;
}

.demo-spotlights-card button[b-xb7o3vkr4w],
.demo-spotlights-card a[b-xb7o3vkr4w] {
    pointer-events: auto;
}

.demo-spotlights-head[b-xb7o3vkr4w] {
    margin-bottom: 0.35rem;
}

.demo-spotlights-step[b-xb7o3vkr4w] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #5a6b80;
}

.demo-spotlights-title[b-xb7o3vkr4w] {
    font-weight: 600;
    color: #0d2c55;
    margin-bottom: 0.35rem;
}

.demo-spotlights-body[b-xb7o3vkr4w] {
    margin-bottom: 0.75rem;
}

.demo-spotlights-actions[b-xb7o3vkr4w] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.demo-spotlights-back[b-xb7o3vkr4w],
.demo-spotlights-show-me[b-xb7o3vkr4w],
.demo-spotlights-next[b-xb7o3vkr4w] {
    min-width: 5rem;
}

/* Make the primary action obviously the primary action — bigger and bolder
   than the default btn-sm so the eye lands on it before anything else. */
.demo-spotlights-actions .btn-primary[b-xb7o3vkr4w] {
    padding: 0.4rem 1rem;
    font-weight: 600;
}

.demo-spotlights-hide-link[b-xb7o3vkr4w] {
    display: block;
    margin: 0.6rem 0 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: #5a6b80;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    width: 100%;
    text-align: right;
}

.demo-spotlights-hide-link:hover[b-xb7o3vkr4w] {
    color: #0d2c55;
}

.demo-spotlights-reopen[b-xb7o3vkr4w] {
    position: fixed;
    /* bottom matches the QuickFeedback FAB (bottom: 1rem) so the two
       pills sit on the same baseline. */
    bottom: 1rem;
    /* Sits just left of the QuickFeedback FAB (right: 1rem, ~6rem wide).
       Bottom-left would overlap the Game Prep panel, which is the most
       important part of the dashboard. */
    right: 7.5rem;
    background: #ffffff;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    box-shadow: 0 0.5rem 1rem rgba(13, 44, 85, 0.14);
    /* Vertical metrics match the QuickFeedback FAB (font 0.85rem,
       padding-y 0.45rem, line-height 1.5, border 1px) so the two pills
       are the same height and their top edges line up. The left padding
       is tighter than the right to make room for the "?" badge. */
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #0d2c55;
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 970;
}

.demo-spotlights-reopen:hover[b-xb7o3vkr4w] {
    background: #f3f7fc;
}

.demo-spotlights-reopen span[aria-hidden="true"][b-xb7o3vkr4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #0d2c55;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    /* BL-077: card stretches edge-to-edge so the guide content is readable
       on narrow screens. Bottom margin clears the corner-pinned FABs below
       (Feedback FAB at bottom: 0.6rem; this pill sits beside it). */
    .demo-spotlights-card[b-xb7o3vkr4w] {
        bottom: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
    }

    /* Hide the "Demo guide" label on mobile and keep only the round "?"
       badge as a tiny corner pill. Same rationale as the QuickFeedback FAB
       shrink — the wide text pill was overlapping the Score Entry / picker
       controls. */
    .demo-spotlights-reopen[b-xb7o3vkr4w] {
        bottom: 0.6rem;
        right: 3rem;
        padding: 0;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        font-size: 0;
        opacity: 0.65;
        gap: 0;
        justify-content: center;
    }

    .demo-spotlights-reopen-label[b-xb7o3vkr4w] {
        display: none;
    }

    .demo-spotlights-reopen span[aria-hidden="true"][b-xb7o3vkr4w] {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.78rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-10ve630zyd] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

main[b-10ve630zyd] {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.layout-top-actions[b-10ve630zyd] {
    display: flex;
    justify-content: flex-end;
    padding: 0.8rem 1rem 0;
}

.layout-user-menu[b-10ve630zyd] {
    position: relative;
}

.layout-user-menu-trigger[b-10ve630zyd] {
    min-width: 7.2rem;
    font-weight: 600;
}

.layout-user-menu-panel[b-10ve630zyd] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1200;
    width: min(19rem, 92vw);
    border: 1px solid #b8c9da;
    border-radius: 0.55rem;
    background: #f6f9fd;
    box-shadow: 0 10px 24px rgba(20, 41, 62, 0.22);
    padding: 0.45rem;
    display: grid;
    gap: 0.25rem;
}

.layout-user-menu-header[b-10ve630zyd] {
    padding: 0.25rem 0.3rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.layout-user-menu-display-name[b-10ve630zyd] {
    color: #1d3856;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-user-menu-email[b-10ve630zyd] {
    color: #5e748a;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-user-menu-group-title[b-10ve630zyd] {
    color: #4e6f8e;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.2rem;
}

.layout-user-menu-item[b-10ve630zyd] {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: #234765;
    text-align: left;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.4rem 0.5rem;
}

.layout-user-menu-item:hover:not(:disabled)[b-10ve630zyd] {
    background: #e7f0fa;
    border-color: #b4c9de;
}

.layout-user-menu-item:disabled[b-10ve630zyd],
.layout-user-menu-item.current[b-10ve630zyd] {
    color: #5f7f9c;
    background: #e8f0f8;
    border-color: #cad9e8;
}

.layout-user-menu-item.danger[b-10ve630zyd] {
    color: #8b2331;
}

.layout-user-menu-check[b-10ve630zyd] {
    display: inline-block;
    width: 1rem;
    color: #2f6fa6;
    font-weight: 800;
}

.layout-user-menu-divider[b-10ve630zyd] {
    height: 1px;
    background: #cfdae6;
    margin: 0.2rem 0;
}

/* Logout is rendered as a form-POST so the auth cookie is cleared on the server.
   `display: contents` keeps the form transparent in the menu's flex/stack layout. */
.layout-user-menu-logout-form[b-10ve630zyd] {
    display: contents;
}

.demo-session-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border: 1px solid #e3b14a;
    background: #fff4d6;
    color: #6a4a08;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.demo-session-banner-text[b-10ve630zyd] {
    flex: 1 1 auto;
    min-width: 0;
}

.demo-session-banner a[b-10ve630zyd],
.demo-session-banner-cta[b-10ve630zyd] {
    margin-left: 0.25rem;
    color: #7b4f00;
    font-weight: 600;
}

/* BL-080: "Copy link" button — visually distinct from the prose CTA so the
   share path is obvious. On mobile (sticky banner below) it's a thumb-friendly
   tap target alongside the now button-styled "Sign up properly" link. */
.demo-session-banner-copy[b-10ve630zyd] {
    flex: 0 0 auto;
    border: 1px solid #c4933b;
    background: #fff;
    color: #7b4f00;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.demo-session-banner-copy:hover[b-10ve630zyd] {
    background: #fbeac5;
}

/* BL-080: on mobile the banner becomes sticky-top so the convert CTA stays
   reachable as the user scrolls through the demo, and the "Sign up properly"
   link gets button styling for a clearer tap target. */
@media (max-width: 720px) {
    .demo-session-banner[b-10ve630zyd] {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        font-size: 0.88rem;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    /* Selector includes the `a` element so it beats `.demo-session-banner a`
       (0,1,1) — without that, the parent rule's brown color wins and the
       label disappears against the brown button background. */
    .demo-session-banner a.demo-session-banner-cta[b-10ve630zyd] {
        display: inline-block;
        background: #7b4f00;
        color: #fff;
        border-radius: 999px;
        padding: 0.15rem 0.7rem;
        text-decoration: none;
        margin-left: 0.3rem;
    }
}

.email-verification-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border: 1px solid #4f86c6;
    background: #e8f1fb;
    color: #1f3d6a;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-verification-banner-body[b-10ve630zyd] {
    flex: 1;
    min-width: 0;
}

.email-verification-banner a[b-10ve630zyd] {
    margin-left: 0.5rem;
    color: #134a90;
    font-weight: 600;
}

.email-verification-banner-dismiss[b-10ve630zyd] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #1f3d6a;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    opacity: 0.6;
}

.email-verification-banner-dismiss:hover[b-10ve630zyd],
.email-verification-banner-dismiss:focus-visible[b-10ve630zyd] {
    opacity: 1;
    outline: none;
}

.superuser-write-banner[b-10ve630zyd] {
    margin: 0.9rem 1rem 0;
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.superuser-write-banner-off[b-10ve630zyd] {
    border: 1px solid #c7921b;
    background: #fff4d8;
    color: #5c440a;
}

.superuser-write-banner-on[b-10ve630zyd] {
    border: 1px solid #b13b3b;
    background: #fde5e5;
    color: #5f1818;
}

.sidebar[b-10ve630zyd] {
    background: linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    border-right: 1px solid #5b7694;
    width: 250px;
    height: 100vh;
}

.content[b-10ve630zyd] {
    padding-top: 1rem;
}

/* Hamburger toggle: hidden by default, shown only when the sidebar is in
   overlay mode (below the persistent-sidebar breakpoint). Lives inside
   .layout-top-actions but pushed left via margin-right:auto so the existing
   right-aligned user menu stays where it is. */
.nav-hamburger[b-10ve630zyd] {
    display: none;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.4rem;
    border: 1px solid #5b7694;
    border-radius: 0.45rem;
    background: #294f76;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.nav-hamburger:hover[b-10ve630zyd],
.nav-hamburger:focus-visible[b-10ve630zyd] {
    background: #1f3d5b;
    outline: none;
}

.sidebar-backdrop[b-10ve630zyd] {
    display: none;
}

/* Overlay mode: viewport below the persistent-sidebar threshold.
   Sidebar slides in from the left; backdrop receives tap-outside-to-close. */
@media (max-width: 1279.98px) {
    .nav-hamburger[b-10ve630zyd] {
        display: inline-flex;
    }

    .sidebar[b-10ve630zyd] {
        position: fixed;
        top: 0;
        left: 0;
        max-width: 88vw;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        z-index: 1700;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    .sidebar.sidebar-open[b-10ve630zyd] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-10ve630zyd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1650;
    }
}

/* Persistent sidebar mode: enough horizontal real estate to keep nav alongside content. */
@media (min-width: 1280px) {
    .page:not(.page--kiosk)[b-10ve630zyd] {
        flex-direction: row;
    }

    .page:not(.page--kiosk) .sidebar[b-10ve630zyd] {
        position: sticky;
        top: 0;
    }

    .page:not(.page--kiosk) .content[b-10ve630zyd] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* Kiosk mode (session dashboard route): keep sidebar in overlay form even at
       wide viewports — the dashboard wants the full width for courts and queues,
       and admin nav stays one tap away behind the hamburger. */
    .page--kiosk .nav-hamburger[b-10ve630zyd] {
        display: inline-flex;
    }

    .page--kiosk .sidebar[b-10ve630zyd] {
        position: fixed;
        top: 0;
        left: 0;
        max-width: 88vw;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        z-index: 1700;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
    }

    .page--kiosk .sidebar.sidebar-open[b-10ve630zyd] {
        transform: translateX(0);
    }

    .page--kiosk .sidebar-backdrop[b-10ve630zyd] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1650;
    }
}

#blazor-error-ui[b-10ve630zyd] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-10ve630zyd] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-row[b-m4nfq2b2u0],
.nav-scrollable[b-m4nfq2b2u0] {
    --nav-header-height: 4.4rem;
}

.top-row[b-m4nfq2b2u0] {
    min-height: var(--nav-header-height);
    background-color: rgba(17, 35, 53, 0.7);
    border-bottom: 1px solid rgba(164, 193, 223, 0.55);
    box-shadow: inset 0 -1px 0 rgba(203, 222, 242, 0.25);
}

.nav-top-brand[b-m4nfq2b2u0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.nav-top-app[b-m4nfq2b2u0] {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.nav-top-user[b-m4nfq2b2u0] {
    color: rgba(220, 236, 252, 0.95);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.menu-icon[b-m4nfq2b2u0] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    color: #7ab6e4;
}

.nav-item[b-m4nfq2b2u0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-session[b-m4nfq2b2u0] {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.nav-club-switcher[b-m4nfq2b2u0] {
    display: grid;
    gap: 0.25rem;
}

.nav-current-club-caption[b-m4nfq2b2u0] {
    color: #98b9d7;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.nav-current-club-label[b-m4nfq2b2u0] {
    color: #cfe0f1;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    padding: 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item:first-of-type[b-m4nfq2b2u0] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-m4nfq2b2u0] {
    padding-bottom: 1rem;
}

.nav-section-label[b-m4nfq2b2u0] {
    color: #98b9d7;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0.35rem 0 0.15rem;
}

.nav-live-panel[b-m4nfq2b2u0] {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
}

.nav-live-card[b-m4nfq2b2u0] {
    border: 1px solid rgba(164, 193, 223, 0.48);
    border-radius: 0.55rem;
    background: rgba(21, 42, 64, 0.42);
    padding: 0.45rem 0.5rem 0.5rem;
}

.nav-live-card-head[b-m4nfq2b2u0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-live-card-name[b-m4nfq2b2u0] {
    min-width: 0;
    flex: 1 1 auto;
    color: #e6f0fb;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-live-card-meta[b-m4nfq2b2u0] {
    margin-top: 0.2rem;
    color: #bcd2e8;
    font-size: 0.7rem;
    line-height: 1.2;
}

.nav-live-open-link[b-m4nfq2b2u0] {
    margin-top: 0.35rem;
    width: 100%;
    font-size: 0.74rem;
    font-weight: 700;
}

.nav-item[b-m4nfq2b2u0]  .nav-link {
    color: #dce6f2;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 3rem;
    border: 1px solid transparent;
    width: 100%;
    background: transparent;
    text-align: left;
    padding: 0 1rem;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.active {
    background: linear-gradient(180deg, #6a88aa 0%, #4c6f95 100%);
    color: #fff;
    border-color: rgba(190, 213, 236, 0.7);
}

.nav-item[b-m4nfq2b2u0]  .nav-link.active .menu-icon {
    color: #fff;
}

.nav-item[b-m4nfq2b2u0]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.nav-item[b-m4nfq2b2u0]  .nav-link:hover .menu-icon {
    color: #fff;
}

.live-pill[b-m4nfq2b2u0] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(180deg, #f45858 0%, #d73c3c 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    padding: 0.1rem 0.46rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
    box-shadow: 0 1px 6px rgba(13, 16, 20, 0.3);
}

.live-clubSession-label[b-m4nfq2b2u0] {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-dot[b-m4nfq2b2u0] {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #fff;
    animation: live-dot-pulse-b-m4nfq2b2u0 1.3s ease-in-out infinite;
}

@keyframes live-dot-pulse-b-m4nfq2b2u0 {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.72; }
    100% { transform: scale(1); opacity: 1; }
}

.nav-help-toggle[b-m4nfq2b2u0] {
    justify-content: space-between;
}

.nav-help-caret[b-m4nfq2b2u0] {
    margin-left: auto;
    color: #b9d3ea;
    font-size: 0.8rem;
}

.nav-help-links[b-m4nfq2b2u0] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.25rem;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.nav-link-sub {
    height: 2.3rem;
    line-height: 2.3rem;
    padding-left: 2.6rem;
    color: #cfe0f1;
}

.nav-item[b-m4nfq2b2u0]  .nav-link.nav-link-sub.active {
    background: rgba(96, 132, 168, 0.45);
    border-color: rgba(190, 213, 236, 0.35);
}

@media (min-width: 768px) {
    .nav-scrollable[b-m4nfq2b2u0] {
        display: block;
        height: calc(100vh - var(--nav-header-height));
        overflow-y: auto;
    }
}
/* /Components/Layout/QuickFeedbackButton.razor.rz.scp.css */
.quick-feedback-fab[b-kgnei38zq1] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1900;
    border: 1px solid #1f3f5e;
    background: #1f3f5e;
    color: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.55;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    cursor: pointer;
}

.quick-feedback-fab:hover[b-kgnei38zq1],
.quick-feedback-fab:focus-visible[b-kgnei38zq1] {
    opacity: 1;
    transform: translateY(-1px);
}

.quick-feedback-fab.is-busy[b-kgnei38zq1] {
    opacity: 0.85;
    cursor: progress;
}

.quick-feedback-backdrop[b-kgnei38zq1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1950;
}

.quick-feedback-drawer[b-kgnei38zq1] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    z-index: 1960;
    background: #f6f9fc;
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    padding: 1rem 1.1rem 1.1rem;
}

.quick-feedback-title[b-kgnei38zq1] {
    margin: 0 0 0.5rem;
    color: #1f3f5e;
    font-size: 1.05rem;
}

.quick-feedback-help[b-kgnei38zq1] {
    color: #5e748a;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.quick-feedback-screenshot[b-kgnei38zq1] {
    margin-top: 0.85rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid #c4d1de;
    border-radius: 0.45rem;
    background: #ffffff;
}

.quick-feedback-toggle[b-kgnei38zq1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #1f3f5e;
    margin: 0;
}

.quick-feedback-thumb[b-kgnei38zq1] {
    display: block;
    margin-top: 0.5rem;
    max-width: 100%;
    max-height: 9rem;
    border: 1px solid #c4d1de;
    border-radius: 0.3rem;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

/* BL-063: when "Include screenshot" is unchecked, dim (don't hide) the
   thumbnail so the drawer stays the same height. */
.quick-feedback-thumb-dimmed[b-kgnei38zq1] {
    opacity: 0.35;
    filter: grayscale(0.7);
}

.quick-feedback-privacy[b-kgnei38zq1] {
    color: #5e748a;
    font-size: 0.78rem;
    margin: 0.4rem 0 0;
}

.quick-feedback-context[b-kgnei38zq1] {
    margin-top: 0.85rem;
    padding: 0.5rem 0.6rem;
    border: 1px dashed #c4d1de;
    border-radius: 0.45rem;
    background: #fbfdfe;
    color: #5e748a;
    font-size: 0.82rem;
    line-height: 1.45;
}

.quick-feedback-context strong[b-kgnei38zq1] {
    color: #1f3f5e;
    font-weight: 600;
}

.quick-feedback-error[b-kgnei38zq1] {
    margin-top: 0.6rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.45rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.quick-feedback-actions[b-kgnei38zq1] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

/* BL-077: on phones the FAB sat at bottom-right over the picker's Auto-pick
   / Start buttons. Shrink to a compact icon-only pill in the bottom-right
   corner with low opacity so it stops eating the primary action area but
   remains tappable when the user actually wants to send feedback.
   Desktop unchanged. */
@media (max-width: 720px) {
    .quick-feedback-fab[b-kgnei38zq1] {
        bottom: 0.6rem;
        right: 0.6rem;
        padding: 0;
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0;
        border-radius: 50%;
        opacity: 0.45;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Render a small speech-bubble glyph in place of the now-hidden text.
       Keeps the button recognisable as feedback without occupying a wide
       text pill that overlaps the picker controls. */
    .quick-feedback-fab[b-kgnei38zq1]::before {
        content: "\1F4AC"; /* 💬 */
        font-size: 1rem;
        line-height: 1;
    }

    /* While capturing, briefly restore the "..." text so the user gets
       visual confirmation the tap registered. */
    .quick-feedback-fab.is-busy[b-kgnei38zq1] {
        font-size: 0.85rem;
    }
    .quick-feedback-fab.is-busy[b-kgnei38zq1]::before {
        content: "";
    }

    /* Drawer sits well above the corner FAB so the FAB doesn't peek through. */
    .quick-feedback-drawer[b-kgnei38zq1] {
        bottom: 3.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-u69v80gs08],
.components-reconnect-repeated-attempt-visible[b-u69v80gs08],
.components-reconnect-failed-visible[b-u69v80gs08],
.components-pause-visible[b-u69v80gs08],
.components-resume-failed-visible[b-u69v80gs08],
.components-rejoining-animation[b-u69v80gs08] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-retrying[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-failed[b-u69v80gs08],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-u69v80gs08] {
    display: block;
}


#components-reconnect-modal[b-u69v80gs08] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-u69v80gs08 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-u69v80gs08 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-u69v80gs08 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-u69v80gs08]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-u69v80gs08 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-u69v80gs08 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-u69v80gs08 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-u69v80gs08 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-u69v80gs08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-u69v80gs08] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-u69v80gs08] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-u69v80gs08] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-u69v80gs08] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-u69v80gs08] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-u69v80gs08] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-u69v80gs08 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-u69v80gs08] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-u69v80gs08 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AttendanceTrendsReport.razor.rz.scp.css */
.reports-crumb[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-vvhz5dyekm] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-vvhz5dyekm],
.reports-crumb-link:focus-visible[b-vvhz5dyekm] {
    text-decoration: underline;
    outline: none;
}

.attendance-trends-filters[b-vvhz5dyekm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.attendance-trends-filter[b-vvhz5dyekm] {
    display: flex;
    flex-direction: column;
}

.attendance-trends-filter .form-label[b-vvhz5dyekm] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.attendance-trends-filter-actions[b-vvhz5dyekm] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.attendance-trends-count-hint[b-vvhz5dyekm] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.attendance-trends-table thead th[b-vvhz5dyekm] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.attendance-trends-table th.sortable-header[b-vvhz5dyekm] {
    cursor: pointer;
    user-select: none;
}

.attendance-trends-table th.sortable-header:hover[b-vvhz5dyekm] {
    color: #0d2c55;
}

.attendance-trends-table td[b-vvhz5dyekm],
.attendance-trends-table th[b-vvhz5dyekm] {
    vertical-align: middle;
}

.attendance-trends-table .numeric[b-vvhz5dyekm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .attendance-trends-filter-actions[b-vvhz5dyekm] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Clubs.razor.rz.scp.css */
.clubs-shell[b-s4llzf7qxg] {
    padding: 0;
}

.clubs-shell h1[b-s4llzf7qxg] {
    margin: 0 0 0.25rem;
    color: #1f3f5e;
}

.clubs-subtitle[b-s4llzf7qxg] {
    margin: 0 0 1rem;
    color: #5f7489;
}

.clubs-card[b-s4llzf7qxg] {
    background: #f6f8fb;
    border: 1px solid rgba(13, 44, 85, 0.08);
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.clubs-card h2[b-s4llzf7qxg] {
    margin: 0 0 0.65rem;
    color: #24384f;
}

.clubs-header[b-s4llzf7qxg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

.clubs-show-demo-toggle[b-s4llzf7qxg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #4e6f8e;
    font-size: 0.88rem;
    margin: 0;
}

.clubs-demo-badge[b-s4llzf7qxg] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: #fff4d6;
    color: #6a4a08;
    border: 1px solid #e3b14a;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}

.clubs-toolbar[b-s4llzf7qxg] {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.clubs-form-grid[b-s4llzf7qxg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    align-items: end;
}

.clubs-form-field[b-s4llzf7qxg] {
    display: flex;
    flex-direction: column;
}

.clubs-form-field-wide[b-s4llzf7qxg] {
    grid-column: span 2;
}

.clubs-form-actions[b-s4llzf7qxg] {
    display: flex;
    align-items: flex-end;
}

.clubs-form-field .form-label[b-s4llzf7qxg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.25rem;
}


.clubs-import-details > summary[b-s4llzf7qxg] {
    cursor: pointer;
    list-style: revert;
    padding: 0.1rem 0;
}

.clubs-import-details > summary[b-s4llzf7qxg]::-webkit-details-marker {
    display: inline-block;
}

.clubs-import-summary-heading[b-s4llzf7qxg] {
    display: inline;
    margin: 0;
    color: #24384f;
    font-size: 1.05rem;
}

.clubs-import-hint[b-s4llzf7qxg] {
    display: block;
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-left: 1.4rem;
    margin-top: 0.2rem;
}

.clubs-help[b-s4llzf7qxg] {
    color: #5f6f80;
}

.clubs-table thead th[b-s4llzf7qxg] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
}

/* Wraps the action buttons (Use Club / Edit / Delete) so that they
   keep a visible gap on both axes when they reflow onto a second
   line on narrow viewports -- the previous me-2 utility only added
   horizontal spacing, leaving rows touching vertically. */
.clubs-actions[b-s4llzf7qxg] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.clubs-message[b-s4llzf7qxg] {
    margin-bottom: 0.6rem;
    border: 1px solid #b7cadf;
    border-radius: 0.45rem;
    background: #ecf4fc;
    color: #244a6f;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .clubs-toolbar[b-s4llzf7qxg] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/ClubSessionDashboard.razor.rz.scp.css */
.clubSession-dashboard-shell[b-l9cvewerkd] {
    background: #d2dbe7;
    padding: 0.35rem 0 0.8rem;
}

/* QuickFeedback FAB is position:fixed bottom-right and overlaps any
   bottom-of-page content at phone widths — most visibly the Save button
   in score entry and the bottom-most chips in the waiting queue. Extra
   shell padding at the bottom gives the user scroll room to push that
   content above the FAB's footprint. */
@media (max-width: 599.98px) {
    .clubSession-dashboard-shell[b-l9cvewerkd] {
        padding-bottom: 4rem;
    }
}

.clubSession-kiosk-top[b-l9cvewerkd] {
    min-height: 2.55rem;
    border: 1px solid #bccadb;
    background: #e7edf5;
    border-radius: 0.7rem;
    padding: 0.3rem 0.45rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.clubSession-kiosk-left[b-l9cvewerkd] {
    display: flex;
    align-items: center;
}

.clubSession-kiosk-note[b-l9cvewerkd] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #2e4f6d;
}

.clubSession-kiosk-sub[b-l9cvewerkd] {
    color: #557693;
    font-size: 0.82rem;
}

.clubSession-kiosk-actions[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.top-icon-btn[b-l9cvewerkd] {
    width: 2.5rem;
}

.settings-cog-btn[b-l9cvewerkd] {
    font-size: 1.25rem;
    line-height: 1;
}

.fullscreen-toggle-btn[b-l9cvewerkd] {
    font-size: 1rem;
    line-height: 1;
}

.kiosk-menu-popover[b-l9cvewerkd] {
    position: relative;
    z-index: 10;
    width: min(280px, 92vw);
    margin: 0 0 0.45rem;
    border: 1px solid #c0ccd9;
    border-radius: 0.65rem;
    background: #eef3f9;
    box-shadow: 0 6px 16px rgba(21, 48, 75, 0.2);
    padding: 0.4rem;
    display: grid;
    gap: 0.3rem;
}

.kiosk-menu-link[b-l9cvewerkd] {
    text-align: left;
}

.kiosk-menu-link-sub[b-l9cvewerkd] {
    margin-left: 0.4rem;
}

.kiosk-help-group[b-l9cvewerkd] {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.15rem;
}

.kiosk-help-group summary[b-l9cvewerkd] {
    list-style: none;
    cursor: pointer;
    color: #3a5976;
    font-weight: 700;
    padding: 0.2rem 0.15rem;
}

.kiosk-help-group summary[b-l9cvewerkd]::-webkit-details-marker {
    display: none;
}

.clubSession-settings-modal-backdrop[b-l9cvewerkd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Capping the modal at 90svh wasn't enough on iOS Safari: the backdrop
       still filled the LAYOUT viewport (extends behind the dynamic bottom
       URL bar), and `align-items: center` placed the modal's bottom edge
       (with its sticky Save button) past the visible safe area. Sizing the
       backdrop itself to 100svh keeps flex-centering within the always-
       visible viewport, so the Save button is reachable without scrolling
       past the URL bar. iOS 15.4+ uses svh; older browsers fall back to vh
       (same as the prior behaviour, no regression). */
    height: 100vh;
    height: 100svh;
    background: rgba(24, 35, 52, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2000;
}

.clubSession-settings-modal[b-l9cvewerkd] {
    width: min(980px, 94vw);
    /* iOS Safari: 90vh refers to the LAYOUT viewport (includes the URL-bar
       zone), so a 90vh modal can extend behind the bottom browser chrome
       and hide the Save button. svh = small viewport height (URL bar
       always counted as visible) keeps the modal inside the safe area on
       iOS 15.4+. Older browsers ignore svh and fall back to vh. */
    max-height: 90vh;
    max-height: 90svh;
    overflow-y: auto;
    background: #f8fbff;
    border: 1px solid #b6c8da;
    border-radius: 0.85rem;
    box-shadow: 0 14px 34px rgba(21, 48, 75, 0.24);
    padding: 0.8rem;
}

.clubSession-settings-modal-header[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    /* Pin to the top of the modal's scroll area so the Close (X) button
       stays reachable on mobile when the editor scrolls past the
       viewport. Negative horizontal margin + matching padding lets the
       header background span the full modal width inside its padding. */
    position: sticky;
    top: 0;
    background: #f8fbff;
    margin: -0.8rem -0.8rem 0.6rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #c4d2e0;
    z-index: 1;
}

.clubSession-settings-modal-header h2[b-l9cvewerkd] {
    margin: 0;
    font-size: 1.1rem;
    color: #345674;
}

.clubSession-settings-modal-body[b-l9cvewerkd] {
    padding: 0.7rem 0;
}

.clubSession-settings-modal-actions[b-l9cvewerkd] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    /* Pin Save/Reset to the bottom of the modal's scroll area so the
       buttons stay visible while a user scrolls a long settings editor.
       A customer reported on iOS Safari that Save was hidden behind the
       browser bar; sticky-within-the-modal is the belt-and-braces fix
       (the svh-capped modal height above is the primary fix). */
    position: sticky;
    bottom: 0;
    background: #f8fbff;
    border-top: 1px solid #c4d2e0;
    margin-top: 0.7rem;
    padding: 0.6rem 0.2rem max(0.6rem, env(safe-area-inset-bottom));
    z-index: 1;
}

.clubSession-toolbar-tabs[b-l9cvewerkd] {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #9fb6cc;
    margin-bottom: 0.45rem;
    padding-left: 0.15rem;
    /* BL-077: position context for the scroll-cue gradient overlay below. */
    position: relative;
}

/* BL-077: fading right-edge gradient that signals horizontal scroll on
   mobile where the tab row doesn't fit (Completed Games / Payments etc.
   were getting cut off with no visual indication more tabs existed).
   Only renders on narrow screens; desktop tab row already fits in full. */
@media (max-width: 720px) {
    .clubSession-toolbar-tabs[b-l9cvewerkd]::after {
        content: "";
        position: sticky;
        right: 0;
        top: 0;
        flex: 0 0 1.4rem;
        height: 100%;
        margin-left: -1.4rem;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(232, 238, 245, 0.9) 65%, rgba(232, 238, 245, 1) 100%);
        pointer-events: none;
    }
}

.clubSession-toolbar-tabs[b-l9cvewerkd]::-webkit-scrollbar {
    height: 6px;
}

.clubSession-toolbar-tabs[b-l9cvewerkd]::-webkit-scrollbar-thumb {
    background: rgba(159, 182, 204, 0.55);
    border-radius: 3px;
}

.clubSession-toolbar-tabs .nav-item[b-l9cvewerkd] {
    margin-bottom: -1px;
    flex: 0 0 auto;
}

.clubSession-toolbar-tabs .nav-link[b-l9cvewerkd] {
    border: 1px solid #b3c6da;
    border-bottom-color: #a9bfd3;
    border-radius: 0.45rem 0.45rem 0 0;
    color: #5a7691;
    background: #e8eef5;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    padding: 0.35rem 0.7rem;
    margin-right: 0.28rem;
}

.clubSession-toolbar-tabs .nav-link .tab-label[b-l9cvewerkd] {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.clubSession-toolbar-tabs .nav-link .tab-icon[b-l9cvewerkd] {
    width: 0.92rem;
    height: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-pegboard[b-l9cvewerkd] {
    color: #2d83cf;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-attendees[b-l9cvewerkd] {
    color: #2eaf74;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-games[b-l9cvewerkd] {
    color: #8c5bd4;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-payments[b-l9cvewerkd] {
    color: #c98a1a;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-insights[b-l9cvewerkd] {
    color: #d15a88;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-settings[b-l9cvewerkd] {
    color: #4d8b97;
}

.clubSession-toolbar-tabs .nav-link .tab-icon-diagnostics[b-l9cvewerkd] {
    color: #cc5a44;
}

.clubSession-toolbar-tabs .nav-link.active[b-l9cvewerkd] {
    background: linear-gradient(180deg, #5f85ad 0%, #4f749a 100%);
    color: #f4f8fc;
    border-color: #436a90;
    border-bottom-color: #d2dbe7;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.clubSession-toolbar-tabs .nav-link.active .tab-icon[b-l9cvewerkd] {
    filter: brightness(1.12);
}

[b-l9cvewerkd] .courts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(13rem, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

[b-l9cvewerkd] .court-card {
    background: linear-gradient(180deg, #5db061 0%, #4b9a50 100%);
    color: #fff;
    border-radius: 0.85rem;
    border: 1px solid #75b978;
    padding: 0.45rem;
    min-height: 14.5rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

[b-l9cvewerkd] .court-card-empty {
    min-height: 14.5rem;
}

/* On phones the courts stack vertically, so four full-height empty courts
   eat ~900px before the user reaches Next Game Prep / Auto-pick. Drop empty
   courts to a compact height that still comfortably holds the "Pick and
   Start" button. In-progress courts keep their full size — the actual game
   state is what's worth seeing.
   The .court-empty-actions inner wrapper has its own 11.8rem min-height
   (used to vertically centre the button on desktop's tall cards). That
   wins over .court-card-empty's min-height because the inner element's
   intrinsic size pushes the parent. So we have to flatten BOTH on mobile. */
@media (max-width: 720px) {
    [b-l9cvewerkd] .court-card-empty {
        min-height: 0;
    }

    [b-l9cvewerkd] .court-card-empty .court-empty-actions {
        min-height: 0;
        padding: 0.2rem 0;
    }
}

[b-l9cvewerkd] .court-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

[b-l9cvewerkd] .court-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .court-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f1fbf3;
}

[b-l9cvewerkd] .game-pick-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #cf2029;
    border: 1px solid #b3161e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    flex: 0 0 auto;
}

[b-l9cvewerkd] .game-pick-indicator-inline {
    margin-left: 0.3rem;
    vertical-align: middle;
}

[b-l9cvewerkd] .court-actions {
    display: flex;
    gap: 0.3rem;
}

[b-l9cvewerkd] .court-team-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.2rem 0.35rem;
    margin-bottom: 0.25rem;
}

[b-l9cvewerkd] .court-team-name {
    font-weight: 600;
    font-size: 0.88rem;
}

[b-l9cvewerkd] .court-member-link {
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

[b-l9cvewerkd] .court-member-link:hover {
    text-decoration: underline;
}

[b-l9cvewerkd] .court-score-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.4rem;
    margin: 0.35rem 0;
    font-weight: 700;
    font-size: 0.82rem;
    color: #ecfaee;
}

[b-l9cvewerkd] .court-score-row > span:first-child {
    justify-self: start;
}

[b-l9cvewerkd] .court-score-row > span:last-child {
    justify-self: end;
}

[b-l9cvewerkd] .court-end-btn {
    min-width: 3.4rem;
}

[b-l9cvewerkd] .court-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11.8rem;
}

[b-l9cvewerkd] .clubSession-lower-grid {
    display: grid;
    /* BL-081: Sitting Out narrowed to a single-avatar column (~9rem). The
       freed width goes to Waiting (the busier panel) via its 1.1fr.
       2026-05-25 regression fix: DOM order is Prep / Waiting / Sitting Out /
       Score Entry, so Sitting Out is the THIRD column (9rem) and Score Entry
       is the FOURTH (15.5rem). Previous template had these swapped, which
       squeezed Score Entry into 144px and hid the Save button behind the
       parent's overflow-x: hidden — reported live PROD by Mike. */
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr) minmax(9rem, 9rem) minmax(15.5rem, 15.5rem);
    gap: 0.45rem;
}

[b-l9cvewerkd] .clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.2fr) minmax(17rem, 17rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-no-score {
    /* BL-081: same Sitting Out narrowing as the default grid above. */
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr) minmax(9rem, 9rem);
}

[b-l9cvewerkd] .clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
    grid-template-columns: minmax(16.5rem, 16.5rem) minmax(15rem, 1.1fr);
}

[b-l9cvewerkd] .clubSession-panel {
    background: #edf3fa;
    border: 1px solid #b9c9da;
    border-radius: 0.75rem;
    padding: 0.6rem;
    min-width: 0;
}

[b-l9cvewerkd] .clubSession-panel h2 {
    margin: 0 0 0.45rem;
    color: #355775;
    font-size: 0.98rem;
    font-weight: 700;
}

/* Prep panels: soft amber wash so "next game being assembled" reads as
   in-progress (traffic-light amber), visually distinct from the pale-blue
   Waiting Members / Sitting Out panels. */
[b-l9cvewerkd] .clubSession-panel.clubSession-panel-prep {
    background: #fff8e1;
    border-color: #e9c46a;
}

[b-l9cvewerkd] .clubSession-panel.clubSession-panel-prep h2 {
    color: #7a5a1f;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-slot {
    background: #fffbeb;
    border-color: #e6cf90;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-slot-empty {
    background: #fff3c4;
}

[b-l9cvewerkd] .clubSession-panel-prep .prep-par-score {
    color: #7a5a1f;
}

[b-l9cvewerkd] .prep-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

[b-l9cvewerkd] .prep-panel-title {
    margin: 0;
}

[b-l9cvewerkd] .prep-title-info-btn {
    margin-left: auto;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #9fb3c7;
    border-radius: 999px;
    background: #f7fbff;
    color: #4a6a88;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

[b-l9cvewerkd] .prep-title-info-btn:hover:not(:disabled) {
    background: #e7f1fb;
    border-color: #7f9fbe;
    color: #2f5170;
}

[b-l9cvewerkd] .prep-title-info-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.18rem rgba(74, 106, 136, 0.2);
}

[b-l9cvewerkd] .prep-title-info-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

[b-l9cvewerkd] .prep-title-info-btn.no-suggestion {
    opacity: 0.25;
    border-color: transparent;
    background: transparent;
    color: #9fb3c7;
}

[b-l9cvewerkd] .prep-title-info-btn.has-suggestion {
    background: #e7f1fb;
    border-color: #5b8db8;
    color: #2f5170;
    box-shadow: 0 0 0 0.12rem rgba(91, 141, 184, 0.25);
}

[b-l9cvewerkd] .clubSession-panel-wide {
    min-width: 0;
}

[b-l9cvewerkd] .prep-panel-stack {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-width: 0;
}

[b-l9cvewerkd] .prep-layout {
    display: grid;
    gap: 0.35rem;
}

[b-l9cvewerkd] .prep-slot {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 2.3rem;
    border-radius: 1.2rem;
    border: 1px solid #b8c9db;
    background: #f7fbff;
    padding: 0.18rem 0.32rem;
    overflow: hidden;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

[b-l9cvewerkd] .prep-slot-empty {
    border-style: dashed;
    background: #eff5fb;
}

[b-l9cvewerkd] .prep-slot-interactive {
    cursor: pointer;
}

[b-l9cvewerkd] .prep-slot .prep-chip {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.12rem 0.2rem;
}

[b-l9cvewerkd] .prep-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .prep-divider-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

[b-l9cvewerkd] .prep-divider-actions-left {
    justify-self: start;
}

[b-l9cvewerkd] .prep-divider-actions-right {
    justify-self: end;
}

[b-l9cvewerkd] .prep-par-score {
    justify-self: center;
    color: #355775;
    font-size: 0.8rem;
    font-weight: 700;
}

[b-l9cvewerkd] .prep-btn {
    min-width: 6.5rem;
}

[b-l9cvewerkd] .prep-discipline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

[b-l9cvewerkd] .prep-discipline-chip {
    padding: 0.15rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.1;
}

[b-l9cvewerkd] .prep-discipline-chip.is-active {
    box-shadow: 0 0 0 1px rgba(53, 87, 117, 0.35) inset;
}

[b-l9cvewerkd] .prep-discipline-infeasible {
    margin: 0.15rem 0 0.25rem;
    color: #b32d2e;
    font-size: 0.78rem;
    line-height: 1.2;
}

[b-l9cvewerkd] .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

[b-l9cvewerkd] .waiting-member-list {
    min-height: 4.25rem;
    border-radius: 0.6rem;
    padding: 0.2rem;
}

[b-l9cvewerkd] .sittingout-panel-compact {
    padding: 0.45rem;
    align-content: center;
    width: 100%;
    max-width: 6.75rem;
    justify-self: end;
}

[b-l9cvewerkd] .sittingout-empty-state {
    min-height: 4.1rem;
    border: 1px dashed #9cb6ce;
    border-radius: 0.6rem;
    background: #f3f8fd;
    color: #4c6781;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.3rem;
}

[b-l9cvewerkd] .prep-chip,
[b-l9cvewerkd] .waiting-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    border: 1px solid #a8bcd0;
    background: #f7fbff;
    color: #32516d;
    font-size: 0.82rem;
    font-weight: 600;
}

[b-l9cvewerkd] .prep-chip-empty {
    color: #67839d;
    background: transparent;
    border: none;
    font-weight: 600;
}

[b-l9cvewerkd] .prep-player-name.locked {
    font-style: normal;
    font-weight: 700;
}

[b-l9cvewerkd] .prep-player-name.unlocked {
    font-style: italic;
    font-weight: 500;
}

[b-l9cvewerkd] .prep-player-link {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-l9cvewerkd] .prep-player-link:hover {
    text-decoration: underline;
}

[b-l9cvewerkd] .prep-lock-indicator {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    min-height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    color: #1f3f5b;
    border: 1px solid #7fa5c5;
    border-radius: 999px;
    padding: 0;
    background: #eef5fc;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

[b-l9cvewerkd] .prep-lock-indicator:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(16, 48, 74, 0.18);
}

[b-l9cvewerkd] .prep-lock-indicator:focus-visible {
    outline: 2px solid #2f7cc1;
    outline-offset: 1px;
}

[b-l9cvewerkd] .prep-lock-indicator.is-locked {
    background: #c9def2;
    border-color: #567da2;
    color: #103450;
}

[b-l9cvewerkd] .prep-lock-indicator.is-unlocked {
    background: #ffffff;
    border-color: #8db0cf;
    color: #456a8c;
}

[b-l9cvewerkd] .prep-lock-indicator:disabled {
    opacity: 0.45;
    cursor: default;
}

[b-l9cvewerkd] .prep-slot-remove-btn {
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    min-height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: #6c2828;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

[b-l9cvewerkd] .prep-slot-remove-btn:hover:not(:disabled),
[b-l9cvewerkd] .prep-slot-remove-btn:focus-visible {
    background: #fbe4e4;
    border-color: #e0a3a3;
    outline: none;
}

[b-l9cvewerkd] .prep-slot-remove-btn:disabled {
    opacity: 0.35;
    cursor: default;
}


[b-l9cvewerkd] .waiting-chip.gender-male,
[b-l9cvewerkd] .prep-chip.gender-male,
[b-l9cvewerkd] .court-team-row.gender-male {
    background: #dfeeff;
    border-color: #8fb6e0;
    color: #1f4b76;
}

[b-l9cvewerkd] .waiting-chip.gender-female,
[b-l9cvewerkd] .prep-chip.gender-female,
[b-l9cvewerkd] .court-team-row.gender-female {
    background: #ffe4f3;
    border-color: #e3a4c7;
    color: #6f2950;
}

[b-l9cvewerkd] .player-avatar.gender-male {
    background: #2f78c5;
}

[b-l9cvewerkd] .player-avatar.gender-female {
    background: #cc5b98;
}

[b-l9cvewerkd] .waiting-chip-btn {
    cursor: pointer;
}

[b-l9cvewerkd] .waiting-chip-btn.selected {
    border-color: #355775;
    color: #18344e;
    box-shadow: inset 0 0 0 2px rgba(24, 52, 78, 0.28), 0 0 0 3px rgba(79, 116, 154, 0.18);
}

[b-l9cvewerkd] .waiting-chip-btn.gender-male.selected {
    background: #cfe5ff;
    border-color: #2f6eaa;
    color: #173c61;
}

[b-l9cvewerkd] .waiting-chip-btn.gender-female.selected {
    background: #ffd7eb;
    border-color: #b85f8f;
    color: #5d2344;
}

[b-l9cvewerkd] .waiting-chip-muted {
    opacity: 0.62;
    filter: saturate(0.6);
}

[b-l9cvewerkd] .waiting-status-tag {
    margin-left: 0.1rem;
    border: 1px solid #b3c1cf;
    border-radius: 999px;
    background: #eef3f8;
    color: #587088;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0.13rem 0.35rem;
    font-weight: 700;
}

[b-l9cvewerkd] .waiting-toolbar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    align-items: flex-start;
}

[b-l9cvewerkd] .waiting-toolbar input {
    min-width: 0;
}

[b-l9cvewerkd] .waiting-checkin-search {
    flex: 1 1 16rem;
    max-width: 20rem;
}

[b-l9cvewerkd] .checkin-autocomplete {
    position: relative;
    flex: 1 1 16rem;
    max-width: 20rem;
    min-width: 0;
}

[b-l9cvewerkd] .checkin-autocomplete .waiting-checkin-search {
    flex: none;
    max-width: none;
    width: 100%;
}

[b-l9cvewerkd] .checkin-autocomplete-list {
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 0;
    right: 0;
    z-index: 1400;
    margin: 0;
    padding: 0.15rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid #b3c6da;
    border-radius: 0.4rem;
    box-shadow: 0 6px 14px rgba(17, 35, 53, 0.18);
    max-height: 20rem;
    overflow-y: auto;
}

[b-l9cvewerkd] .checkin-autocomplete-item {
    padding: 0.55rem 0.7rem;
    border-radius: 0.3rem;
    color: #24384f;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

[b-l9cvewerkd] .checkin-autocomplete-item:hover,
[b-l9cvewerkd] .checkin-autocomplete-item.highlighted {
    background: #e7f0fa;
    color: #0d2c55;
}

[b-l9cvewerkd] .checkin-autocomplete-match {
    font-weight: 700;
    color: inherit;
}

[b-l9cvewerkd] .checkin-autocomplete-empty {
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 0;
    right: 0;
    z-index: 1400;
    padding: 0.5rem 0.7rem;
    background: #fff8e6;
    border: 1px solid #e8d79b;
    border-radius: 0.4rem;
    color: #6d5920;
    font-size: 0.88rem;
    box-shadow: 0 6px 14px rgba(17, 35, 53, 0.1);
}

[b-l9cvewerkd] .checkin-autocomplete-empty em {
    font-style: normal;
    font-weight: 700;
}

[b-l9cvewerkd] .quick-guest-name-input {
    max-width: 20rem;
}

[b-l9cvewerkd] .quick-guest-rating-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

[b-l9cvewerkd] .attendee-name-link {
    border: none;
    background: transparent;
    color: #274a68;
    padding: 0;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

[b-l9cvewerkd] .attendee-name-link:hover {
    text-decoration: underline;
}

[b-l9cvewerkd] .player-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: rgba(34, 72, 103, 0.85);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
[b-l9cvewerkd] .player-avatar-image {
    object-fit: cover;
    border: 1px solid rgba(31, 43, 56, 0.16);
    background: #fff;
}

/* Waiting-queue chips show meaningfully-sized photos so members are
   recognisable at a glance. Prep slots and court tiles keep the
   smaller default for now. Phone viewports shrink slightly so the
   waiting list stays compact when vertical space matters. */
[b-l9cvewerkd] .waiting-chip .player-avatar,
[b-l9cvewerkd] .waiting-chip .player-avatar-image {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    [b-l9cvewerkd] .waiting-chip .player-avatar,
    [b-l9cvewerkd] .waiting-chip .player-avatar-image {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.72rem;
    }
}

[b-l9cvewerkd] .pending-score-card {
    border: 1px solid #c0cfdd;
    border-radius: 0.6rem;
    padding: 0.5rem;
    background: #f8fbff;
}

[b-l9cvewerkd] .pending-score-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-l9cvewerkd] .pending-score-list {
    display: grid;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.2rem;
}

[b-l9cvewerkd] .pending-score-head {
    color: #355775;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

[b-l9cvewerkd] .pending-score-row {
    display: grid;
    grid-template-columns: 1fr 4rem;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.84rem;
}

[b-l9cvewerkd] .pending-score-input {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 2rem;
    border: 2px solid #9fb7cf;
    background: #f2f8ff;
    color: #2d4f6d;
    font-weight: 700;
}

[b-l9cvewerkd] .pending-score-input-auto {
    background: #fff0bd;
    border-color: #e3c56f;
    color: #664b00;
}

[b-l9cvewerkd] .pending-score-input-empty {
    border-style: dashed;
    border-color: #6f93b8;
    background: #eaf3fc;
    color: #4d7093;
    font-weight: 600;
}

[b-l9cvewerkd] .quick-score-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
}

/* BL-002 v4 score-entry combo: lifted popover (position:fixed, JS-positioned
   via clubSessionDashboard.positionPopover) so it escapes the
   pending-score-list overflow:auto clip. Single scrollable column of
   chips 0-30; 16-21 visible by default (JS scrolls to "16" on open). */
[b-l9cvewerkd] .score-combo-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1100;
}

[b-l9cvewerkd] .score-combo-popover {
    position: fixed;
    /* JS positionPopover sets top/left + flips visibility:visible on open.
       Hidden by default to avoid a one-frame flash at the wrong coordinates. */
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 6.5rem;
    background: #ffffff;
    border: 1px solid #b7c8da;
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(8, 24, 50, 0.28);
    padding: 0.4rem;
}

[b-l9cvewerkd] .score-combo-scrollist {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* 6 chips visible (16-21 by default; JS scrolls to "16" on open).
       Container is the scroll viewport; popover itself doesn't scroll. */
    max-height: 14.5rem;
    overflow-y: auto;
    padding: 0.05rem;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

[b-l9cvewerkd] .score-combo-chip {
    min-height: 2.1rem;
    width: 100%;
    border: 1px solid #9fb7cf;
    border-radius: 0.4rem;
    background: #f2f8ff;
    color: #1f3f5e;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
    scroll-snap-align: start;
    flex: 0 0 auto;
}

[b-l9cvewerkd] .score-combo-chip:hover,
[b-l9cvewerkd] .score-combo-chip:focus-visible {
    background: #d9e7f5;
    border-color: #6f93b8;
    outline: none;
}

[b-l9cvewerkd] .panel-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
    /* Wrap when the action row's content exceeds the panel width. Without
       wrap, the Save button (which has margin-left: auto to pin it to the
       right edge of the pending-score card) gets clipped silently by the
       parent .pending-score-list overflow-x: hidden. Reported live PROD
       2026-05-25 by Mike: Reactivate visible + half of Void + Save missing
       → couldn't save the score until browser-zoom workaround. */
    flex-wrap: wrap;
}

[b-l9cvewerkd] .prep-panel-actions {
    justify-content: center;
}

/* Save sits at the right edge of the pending-score card, aligned under
   the score buttons, so finger travel from "just tapped a score" to
   "tap Save" is minimal. Reactivate + Void stay grouped on the left. */
[b-l9cvewerkd] .pending-score-save {
    margin-left: auto;
}

/* Was max-width: 1250px before the sidebar became a hamburger overlay below
   1280px. Now that overlay-mode reclaims ~250px of content width, 4-in-a-row
   fits comfortably down to ~920px viewport. Below that the courts grid still
   falls back to 2x2 because four 13rem cards (~853px) don't fit. */
@media (max-width: 919.98px) {
    [b-l9cvewerkd] .courts-grid {
        grid-template-columns: repeat(2, minmax(13rem, 1fr));
    }

    /* BL-059 (re-opened 2026-04-26 v2): below 920px, stack the lower section
       to a single column for ALL variants — INCLUDING the combined
       no-score+sittingout-collapsed class which has higher specificity than
       the single-class rules and was winning the cascade. Stacking puts
       prep first, waiting second, sitting third, score fourth — no
       horizontal scroll, waiting members visible on first paint. */
    [b-l9cvewerkd] .clubSession-lower-grid,
    [b-l9cvewerkd] .clubSession-lower-grid-no-score,
    [b-l9cvewerkd] .clubSession-lower-grid-sittingout-collapsed,
    [b-l9cvewerkd] .clubSession-lower-grid-no-score.clubSession-lower-grid-sittingout-collapsed {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .clubSession-kiosk-top[b-l9cvewerkd] {
        flex-wrap: wrap;
    }

    [b-l9cvewerkd] .courts-grid,
    [b-l9cvewerkd] .clubSession-lower-grid {
        grid-template-columns: 1fr;
    }

    [b-l9cvewerkd] .waiting-toolbar {
        flex-wrap: wrap;
    }

    /* BL-059: belt-and-braces guard against horizontal scroll on the
       waiting-members panel at narrow viewports — chips wrap, anything that
       still overflows is clipped within the panel rather than pushing the
       page wider. */
    [b-l9cvewerkd] .clubSession-panel,
    [b-l9cvewerkd] .clubSession-panel-wide {
        max-width: 100%;
        overflow-x: hidden;
    }

    [b-l9cvewerkd] .waiting-member-list,
    [b-l9cvewerkd] .chip-list {
        max-width: 100%;
    }

    [b-l9cvewerkd] .waiting-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.end-session-trigger[b-l9cvewerkd] {
    margin-left: 0.25rem;
}

.end-session-modal-backdrop[b-l9cvewerkd] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2200;
}

.end-session-modal[b-l9cvewerkd] {
    width: min(480px, 94vw);
    background: #ffffff;
    border: 1px solid #c8d4e2;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 1.1rem 1.2rem 1rem;
}

.end-session-modal h2[b-l9cvewerkd] {
    margin: 0 0 0.6rem;
    color: #0d2c55;
    font-size: 1.15rem;
}

.end-session-actions[b-l9cvewerkd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}


/* /Components/Pages/ClubSessions.razor.rz.scp.css */
.clubSessions-shell[b-2b62izoy7u] {
    max-width: 70rem;
}

.clubSessions-card[b-2b62izoy7u] {
    border: 1px solid rgba(92, 119, 145, 0.3);
    border-radius: 0.65rem;
    background: #ffffff;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.15rem 0.35rem rgba(17, 35, 53, 0.06);
}

.clubSessions-card-header[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

.clubSessions-count-hint[b-2b62izoy7u] {
    color: #6c7a8c;
    font-size: 0.88rem;
}

.clubSessions-show-more[b-2b62izoy7u] {
    margin-top: 0.75rem;
    text-align: center;
}

.clubSessions-toolbar[b-2b62izoy7u] {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.clubSessions-help[b-2b62izoy7u] {
    color: #4b5f75;
    font-size: 0.9rem;
}

.clubSession-time-part[b-2b62izoy7u] {
    width: 5.25rem;
}

.clubSession-time-group[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.clubSession-time-sep[b-2b62izoy7u] {
    color: #5a6d80;
    font-weight: 600;
}

.clubSession-row[b-2b62izoy7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(92, 119, 145, 0.2);
}

.clubSession-row:first-of-type[b-2b62izoy7u] {
    border-top: 0;
}

.clubSession-title[b-2b62izoy7u] {
    font-weight: 600;
    color: #1f3d5b;
}

.clubSession-profile[b-2b62izoy7u] {
    color: #38556f;
    font-size: 0.85rem;
}

.clubSession-meta[b-2b62izoy7u] {
    color: #5a6d80;
    font-size: 0.86rem;
}

.clubSession-actions[b-2b62izoy7u] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    /* BL-062 (2026-04-26): keep Live Session action buttons in a single
       horizontal row on mobile rather than stacking. Allow wrap as a fallback
       if they really don't fit. Extra left margin on the destructive Delete
       keeps it thumb-distance from Open. */
    .clubSession-actions[b-2b62izoy7u] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .clubSession-actions > .btn-outline-danger[b-2b62izoy7u] {
        margin-left: 0.4rem;
    }
}

.settings-message[b-2b62izoy7u] {
    color: #38556f;
    font-size: 0.86rem;
    margin-left: 0.5rem;
}

.clubSession-settings-modal-backdrop[b-2b62izoy7u] {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 36, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1100;
}

.clubSession-settings-modal[b-2b62izoy7u] {
    width: min(68rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: #ffffff;
    border: 1px solid rgba(92, 119, 145, 0.35);
    border-radius: 0.75rem;
    box-shadow: 0 1.2rem 2.8rem rgba(14, 24, 36, 0.28);
    padding: 1rem;
}

.clubSession-settings-modal-header[b-2b62izoy7u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.clubSession-settings-modal-header h2[b-2b62izoy7u] {
    margin: 0;
}

.clubSession-settings-modal-subtitle[b-2b62izoy7u] {
    margin-bottom: 0.75rem;
}

.clubSession-settings-modal-body[b-2b62izoy7u] {
    border-top: 1px solid rgba(92, 119, 145, 0.2);
    border-bottom: 1px solid rgba(92, 119, 145, 0.2);
    padding: 0.8rem 0;
}

.clubSession-details-grid[b-2b62izoy7u] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.clubSession-settings-modal-actions[b-2b62izoy7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.8rem;
}

.clubSession-delete-modal-backdrop[b-2b62izoy7u] {
    position: fixed;
    inset: 0;
    background: rgba(14, 24, 36, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1200;
}

.clubSession-delete-modal[b-2b62izoy7u] {
    width: min(28rem, 100%);
    background: #fff;
    border: 1px solid rgba(92, 119, 145, 0.35);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2.2rem rgba(14, 24, 36, 0.28);
    padding: 1rem;
}

.clubSession-delete-modal h2[b-2b62izoy7u] {
    margin: 0 0 0.6rem;
    color: #5a1223;
    font-size: 1.2rem;
}

.clubSession-delete-actions[b-2b62izoy7u] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 640.98px) {
    .clubSessions-toolbar[b-2b62izoy7u] {
        grid-template-columns: 1fr;
    }

    .clubSession-row[b-2b62izoy7u] {
        flex-direction: column;
        align-items: flex-start;
    }

    .clubSession-settings-modal-actions[b-2b62izoy7u] {
        flex-wrap: wrap;
    }

    .clubSession-details-grid[b-2b62izoy7u] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
.feedback-shell[b-ao8wbvv6f5] {
    min-height: calc(100vh - 5rem);
    display: grid;
    place-items: start center;
    padding: 1.5rem 0;
}

.feedback-card[b-ao8wbvv6f5] {
    width: min(40rem, 94vw);
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1.1rem;
}

.feedback-card h1[b-ao8wbvv6f5] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.feedback-help[b-ao8wbvv6f5] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.feedback-actions[b-ao8wbvv6f5] {
    margin-top: 0.9rem;
}

.feedback-error[b-ao8wbvv6f5] {
    margin-top: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.feedback-success[b-ao8wbvv6f5] {
    margin-top: 0.5rem;
    border: 1px solid #9ac29a;
    background: #e4f3e4;
    color: #2d5b2d;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.92rem;
}
/* /Components/Pages/Members.razor.rz.scp.css */
.club-management-shell[b-wg5lf94s9y] {
    padding: 0;
}

.club-management-shell h1[b-wg5lf94s9y] {
    color: #0d2c55;
    font-size: 2.5rem;
    margin: 0 0 1rem;
}

.membership-tabs .nav-link[b-wg5lf94s9y] {
    color: #1f4267;
    font-weight: 700;
}

.membership-tabs .nav-link.active[b-wg5lf94s9y] {
    color: #0d2c55;
}

.club-card[b-wg5lf94s9y] {
    background: #f6f8fb;
    border-radius: 0.2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.club-card h2[b-wg5lf94s9y] {
    color: #24384f;
    font-size: 2rem;
    margin: 0 0 0.65rem;
}

.member-section-header[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.member-header-actions[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.member-show-deactivated-toggle[b-wg5lf94s9y] {
    margin: 0;
    color: #3e5873;
    font-size: 0.9rem;
}

.member-editor-panel[b-wg5lf94s9y] {
    border: 1px solid rgba(13, 44, 85, 0.12);
    border-radius: 0.4rem;
    background: #ffffff;
    padding: 0.75rem;
    margin: 0 0 0.85rem;
}

.member-editor-title[b-wg5lf94s9y] {
    margin: 0 0 0.6rem;
    color: #2c4560;
    font-size: 1.15rem;
    font-weight: 700;
}

.club-inline-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-tools-panel summary[b-wg5lf94s9y] {
    cursor: pointer;
    color: #3a5168;
    font-weight: 700;
    font-size: 0.96rem;
    list-style: none;
}

.admin-tools-panel summary[b-wg5lf94s9y]::-webkit-details-marker {
    display: none;
}

.admin-tools-panel summary[b-wg5lf94s9y]::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 0.45rem;
    color: #5d7389;
    transform: translateY(-0.02rem);
}

.admin-tools-panel[open] summary[b-wg5lf94s9y]::before {
    content: "\25BC";
}

.admin-tools-actions[b-wg5lf94s9y] {
    margin-top: 0.65rem;
}

.club-add-grid[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.65fr) minmax(10rem, 0.65fr) minmax(12rem, 1fr) auto;
    gap: 0.55rem;
    align-items: end;
}

.club-add-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.member-add-grid[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) auto;
    gap: 0.55rem;
    align-items: end;
    margin: 0 0 0.85rem;
}

.club-help-text[b-wg5lf94s9y] {
    margin: 0.75rem 0 0;
    color: #5f6f80;
}

.club-help-text code[b-wg5lf94s9y] {
    color: #c72576;
    background: transparent;
    padding: 0;
}

.club-members-table[b-wg5lf94s9y] {
    margin-bottom: 0;
}

.club-members-table thead th[b-wg5lf94s9y] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 1.02rem;
}

.club-members-table thead th.sortable-header[b-wg5lf94s9y] {
    cursor: pointer;
    user-select: none;
}

.club-members-table thead th.sortable-header:hover[b-wg5lf94s9y] {
    color: #0d2c55;
}

.club-members-table tbody td[b-wg5lf94s9y] {
    vertical-align: middle;
}

.club-members-table tbody tr.member-row-inactive td[b-wg5lf94s9y] {
    color: #7a8897;
}

/* BL-096: colour-code the member-name cell by gender for at-a-glance scan.
   Reuses the same palette as the photo-fallback circle so the visual cue is
   consistent across the row. Active members only - the .member-row-inactive
   parent rule above has higher specificity so deactivated rows stay grey.
   Gender column remains visible so the signal isn't colour-only (WCAG). */
.member-name-cell.male[b-wg5lf94s9y] {
    color: #2e6fa9;
    font-weight: 600;
}

.member-name-cell.female[b-wg5lf94s9y] {
    color: #a85283;
    font-weight: 600;
}

/* .member-name-cell.unspecified inherits default text colour — no rule needed. */

/* BL-100: inline MembershipType dropdown on the Members row. Keep it
   compact so the row height doesn't bloat. */
.member-membership-select[b-wg5lf94s9y] {
    min-width: 5.5rem;
    width: auto;
    padding: 0.15rem 1.6rem 0.15rem 0.4rem;
    font-size: 0.85rem;
}

/* BL-104: click-toggle help marker. v1 was a hover tooltip (title attr)
   which is no good on tablet/phone where there's no hover — so the "?"
   is now a real <button> that toggles an inline popover below. */
.form-label-with-help[b-wg5lf94s9y] {
    /* container so the popover can sit immediately below the label. */
}

.form-label-with-help-text[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.form-label-help-button[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #e7eff8;
    color: #1f5a8a;
    border: 1px solid #b9c9db;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.form-label-help-button:hover[b-wg5lf94s9y] {
    background: #d6e4f3;
    border-color: #94afca;
}

.form-label-help-button:focus[b-wg5lf94s9y] {
    outline: 2px solid #1b6ec2;
    outline-offset: 1px;
}

.form-help-popover[b-wg5lf94s9y] {
    margin: 0.4rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background: #f3f7fb;
    border: 1px solid #c4d2e0;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #2a4361;
    line-height: 1.4;
}

.form-help-popover-list[b-wg5lf94s9y] {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.2rem;
    list-style: disc;
}

.form-help-popover-list li[b-wg5lf94s9y] {
    margin-bottom: 0.15rem;
}

.form-help-popover-close[b-wg5lf94s9y] {
    padding: 0;
    margin-top: 0.25rem;
    text-decoration: none;
    color: #1b6ec2;
    font-weight: 500;
}

/* BL-097: Members-table filter bar. Compact horizontal strip; wraps on
   narrow viewports. Name input takes flex space, chip groups stay
   inline with their labels. */
.member-filter-bar[b-wg5lf94s9y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.55rem;
    background: #f3f7fb;
    border: 1px solid #d3dde7;
    border-radius: 0.5rem;
}

.member-filter-name[b-wg5lf94s9y] {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.member-filter-field[b-wg5lf94s9y] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.member-filter-label[b-wg5lf94s9y] {
    color: #5a6b80;
    font-size: 0.82rem;
    font-weight: 500;
}

.member-filter-select[b-wg5lf94s9y] {
    width: auto;
    min-width: 7rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.member-filter-clear[b-wg5lf94s9y] {
    margin-left: auto;
    color: #5e748a;
    text-decoration: none;
    padding: 0.15rem 0.4rem;
}

.member-filter-clear:hover[b-wg5lf94s9y] {
    color: #1f3f5e;
    text-decoration: underline;
}


.club-members-table .btn-sm[b-wg5lf94s9y] {
    min-width: 4.6rem;
}

.member-photo-table[b-wg5lf94s9y] {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 43, 56, 0.16);
    object-fit: cover;
    background: #fff;
}

.member-photo-field[b-wg5lf94s9y] {
    margin: 0 0 0.9rem;
}

.member-photo-editor[b-wg5lf94s9y] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.member-photo-editor-preview[b-wg5lf94s9y] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    border: 2px solid rgba(31, 43, 56, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-photo-editor-fallback[b-wg5lf94s9y] {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(38, 66, 97, 0.22);
    background: #ffffff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.member-photo-editor-controls[b-wg5lf94s9y] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 16rem;
}

.member-photo-error[b-wg5lf94s9y] {
    color: #a11b2f;
    font-size: 0.85rem;
    font-weight: 600;
}

.member-rating-readonly[b-wg5lf94s9y] {
    border: 1px solid #c5d4e2;
    border-radius: 0.35rem;
    background: #f4f8fc;
    padding: 0.45rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.member-rating-value[b-wg5lf94s9y] {
    color: #213a54;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.member-rating-hint[b-wg5lf94s9y] {
    color: #5d748a;
    font-size: 0.78rem;
}

.member-photo-fallback[b-wg5lf94s9y] {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(38, 66, 97, 0.22);
    background: #ffffff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.member-photo-fallback.male[b-wg5lf94s9y] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: #2e6fa9;
}

.member-photo-fallback.female[b-wg5lf94s9y] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: #a85283;
}

.member-photo-fallback.unspecified[b-wg5lf94s9y] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-photo-initials[b-wg5lf94s9y] {
    display: block;
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.member-profile-modal-backdrop[b-wg5lf94s9y] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2100;
}

.member-profile-modal[b-wg5lf94s9y] {
    width: min(820px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #f8fbff;
    border: 1px solid #b8c8d8;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 0.85rem;
}

.member-profile-modal-header[b-wg5lf94s9y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.member-profile-modal-header-actions[b-wg5lf94s9y] {
    display: flex;
    gap: 0.4rem;
}

.member-profile-modal-header h3[b-wg5lf94s9y] {
    margin: 0;
    color: #253f5b;
    font-size: 1.35rem;
    font-weight: 700;
}

.member-profile-modal-body[b-wg5lf94s9y] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.9rem;
    align-items: start;
}

.member-profile-photo[b-wg5lf94s9y] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-profile-photo-fallback[b-wg5lf94s9y] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f6fa;
    color: #4e657d;
}

.member-profile-photo-fallback.male[b-wg5lf94s9y] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: #2e6fa9;
}

.member-profile-photo-fallback.female[b-wg5lf94s9y] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: #a85283;
}

.member-profile-photo-fallback.unspecified[b-wg5lf94s9y] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-profile-photo-initials[b-wg5lf94s9y] {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.member-profile-fields[b-wg5lf94s9y] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    grid-column: 1 / -1;
}

.member-profile-fields > div[b-wg5lf94s9y] {
    border: 1px solid #ccdae8;
    border-radius: 0.45rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem;
}

.member-profile-id-field[b-wg5lf94s9y] {
    grid-column: 1 / -1;
}

.member-profile-id-field .member-profile-id[b-wg5lf94s9y] {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.member-profile-fields dt[b-wg5lf94s9y] {
    margin: 0;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-profile-fields dd[b-wg5lf94s9y] {
    margin: 0.2rem 0 0;
    color: #24384f;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.member-profile-id[b-wg5lf94s9y] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
}

.member-profile-tabs[b-wg5lf94s9y] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #d8e0ea;
    grid-column: 1 / -1;
}

.member-profile-tab[b-wg5lf94s9y] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60778f;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.member-profile-tab:hover[b-wg5lf94s9y] {
    color: #24384f;
}

.member-profile-tab.active[b-wg5lf94s9y] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.member-profile-sessions[b-wg5lf94s9y] {
    grid-column: 1 / -1;
    max-height: 22rem;
    overflow-y: auto;
}

/* BL-046 (re-opened 2026-04-26x2): the previous min-width of 6.25rem still
   wrapped on Mike's viewport. Bump to 7.5rem and force the action cell to
   nowrap so the cluster of action buttons stays on one line. */
.member-toggle-active-btn[b-wg5lf94s9y] {
    min-width: 7.5rem;
}

.club-members-table tbody td.text-end[b-wg5lf94s9y] {
    white-space: nowrap;
}

.member-profile-sessions-table th[b-wg5lf94s9y],
.member-profile-sessions-table td[b-wg5lf94s9y] {
    padding: 0.55rem 0.65rem;
    white-space: nowrap;
}

.member-profile-sessions-table .numeric[b-wg5lf94s9y] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.member-profile-rating[b-wg5lf94s9y] {
    grid-column: 1 / -1;
}

.member-profile-rating-chart[b-wg5lf94s9y] {
    position: relative;
    width: 100%;
    height: 18rem;
    padding: 0.5rem 0;
}

.member-profile-rating-chart canvas[b-wg5lf94s9y] {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1100px) {
    .club-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr 1fr;
    }

    .member-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr 1fr;
    }

    .member-photo-editor[b-wg5lf94s9y] {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-photo-editor-controls[b-wg5lf94s9y] {
        min-width: 0;
        width: 100%;
    }

    .member-profile-modal-body[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .member-profile-photo[b-wg5lf94s9y],
    .member-profile-photo-fallback[b-wg5lf94s9y] {
        width: 9rem;
        height: 9rem;
    }

    .member-profile-fields[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
        width: 100%;
        justify-self: stretch;
    }

    .member-profile-tabs[b-wg5lf94s9y],
    .member-profile-sessions[b-wg5lf94s9y],
    .member-profile-rating[b-wg5lf94s9y] {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 700px) {
    .club-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
    }

    .member-add-grid[b-wg5lf94s9y] {
        grid-template-columns: 1fr;
    }

    .member-section-header[b-wg5lf94s9y] {
        align-items: stretch;
        flex-direction: column;
    }

    .member-header-actions[b-wg5lf94s9y] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Mobile / narrow-tablet: hide lower-priority Members table columns so the
   Actions column stays reachable without horizontal scrolling. Column order:
   1=Photo 2=Name 3=Membership 4=Gender 5=Status 6=Rating 7=LastPlayed
   8=Win% 9=LinkedLogin 10=Role 11=Actions. We keep Name, Status, Rating, Actions. */
@media (max-width: 700px) {
    .member-directory-table th:nth-child(1)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(1)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(3)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(3)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(4)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(4)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(7)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(7)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(8)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(8)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(9)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(9)[b-wg5lf94s9y],
    .member-directory-table th:nth-child(10)[b-wg5lf94s9y],
    .member-directory-table td:nth-child(10)[b-wg5lf94s9y] {
        display: none;
    }

    .member-directory-table .btn-sm[b-wg5lf94s9y] {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0.25rem;
    }

    .member-directory-table .btn-sm:last-child[b-wg5lf94s9y] {
        margin-bottom: 0;
    }

    /* User Access tab tables share the club-members-table style — stack their
       action buttons vertically too so they don't get clipped at narrow widths. */
    .pending-invites-table .btn-sm[b-wg5lf94s9y],
    .club-members-table .user-remove-btn[b-wg5lf94s9y] {
        display: block;
        width: 100%;
    }
}
/* /Components/Pages/MyClubs.razor.rz.scp.css */
.clubs-shell[b-xjss3qv8d1] {
    max-width: 64rem;
    margin: 1rem auto 2rem;
}

.clubs-subtitle[b-xjss3qv8d1] {
    color: #5c7085;
    margin-bottom: 0.9rem;
}

.clubs-card[b-xjss3qv8d1] {
    border: 1px solid #c7d3df;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1rem;
    margin-bottom: 0.9rem;
}

.clubs-card h2[b-xjss3qv8d1] {
    font-size: 1.1rem;
    margin: 0 0 0.8rem;
    color: #1f3f5e;
}

.clubs-toolbar[b-xjss3qv8d1] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto;
}

.clubs-message[b-xjss3qv8d1] {
    margin-bottom: 0.75rem;
    border: 1px solid;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}

.clubs-message--error[b-xjss3qv8d1] {
    border-color: #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
}

.clubs-message--success[b-xjss3qv8d1] {
    border-color: #b6dab8;
    background: #e7f4e8;
    color: #2c6b30;
}
/* /Components/Pages/Onboarding.razor.rz.scp.css */
.onboarding-shell[b-m34mvkuwx3] {
    min-height: calc(100vh - 5rem);
    display: grid;
    place-items: center;
    padding: 1.5rem 0;
}

.onboarding-card[b-m34mvkuwx3] {
    width: min(34rem, 92vw);
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    background: #f6f9fc;
    padding: 1.1rem;
}

.onboarding-card h1[b-m34mvkuwx3] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.onboarding-help[b-m34mvkuwx3] {
    color: #5e748a;
    margin: 0 0 1rem;
}

.onboarding-actions[b-m34mvkuwx3] {
    margin-bottom: 1rem;
}

.onboarding-create[b-m34mvkuwx3] {
    border-top: 1px solid #cfdae6;
    padding-top: 1rem;
}

.onboarding-create-row[b-m34mvkuwx3] {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 1fr auto;
}

.onboarding-error[b-m34mvkuwx3] {
    margin-bottom: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
}
/* /Components/Pages/PaymentSummaryReport.razor.rz.scp.css */
.reports-shell[b-6txgho68mg] {
    max-width: 1280px;
    padding-bottom: 2rem;
}

.reports-crumb[b-6txgho68mg] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-6txgho68mg] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-6txgho68mg],
.reports-crumb-link:focus-visible[b-6txgho68mg] {
    text-decoration: underline;
    outline: none;
}

.reports-subtitle[b-6txgho68mg] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 70ch;
}

.reports-available-now-card[b-6txgho68mg] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

/* BL-009: quick-range buttons (1m, 3m, 6m, YTD, 1y). */
.payment-summary-quick-ranges[b-6txgho68mg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.payment-summary-filters[b-6txgho68mg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.payment-summary-filter[b-6txgho68mg] {
    display: flex;
    flex-direction: column;
}

.payment-summary-filter .form-label[b-6txgho68mg] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.payment-summary-filter-actions[b-6txgho68mg] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.payment-summary-tabs .nav-link[b-6txgho68mg] {
    font-size: 0.88rem;
    padding: 0.3rem 0.8rem;
}

.payment-summary-count-hint[b-6txgho68mg] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.payment-summary-table thead th[b-6txgho68mg] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.payment-summary-table th.sortable-header[b-6txgho68mg] {
    cursor: pointer;
    user-select: none;
}

.payment-summary-table th.sortable-header:hover[b-6txgho68mg] {
    color: #0d2c55;
}

.payment-summary-table td[b-6txgho68mg],
.payment-summary-table th[b-6txgho68mg] {
    vertical-align: middle;
}

.payment-summary-table .numeric[b-6txgho68mg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.payment-summary-row-outstanding td[b-6txgho68mg] {
    background: #fff8f0;
}

.payment-summary-totals-row td[b-6txgho68mg] {
    border-top: 2px solid #1f2b38;
    background: #f3f6fa;
}

@media (max-width: 768px) {
    .payment-summary-filter-actions[b-6txgho68mg] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
.pricing-body[b-bno3qganak] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 0.5rem 2rem;
}

.pricing-body h1[b-bno3qganak] {
    margin-top: 0.5rem;
}

.pricing-body h2[b-bno3qganak] {
    margin-top: 1.5rem;
    color: #1f3f5e;
    font-size: 1.25rem;
}

.pricing-body p[b-bno3qganak],
.pricing-body li[b-bno3qganak] {
    line-height: 1.55;
}

.pricing-body ul[b-bno3qganak] {
    padding-left: 1.25rem;
}

.pricing-cta[b-bno3qganak] {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid #c4d1de;
    border-radius: 0.75rem;
    background: #f7faff;
    text-align: center;
}

.pricing-cta-btn[b-bno3qganak] {
    width: min(28rem, 100%);
}

.pricing-cta-note[b-bno3qganak] {
    margin: 0.6rem 0 0;
    color: #5e748a;
    font-size: 0.9rem;
}

.pricing-cta-note a[b-bno3qganak] {
    color: #0f4f8b;
    font-weight: 600;
}

.pricing-footnote[b-bno3qganak] {
    margin-top: 1.25rem;
    color: #6c757d;
}

@media (max-width: 700px) {
    .pricing-cta[b-bno3qganak] {
        padding: 1rem 0.75rem;
    }

    .pricing-cta-btn[b-bno3qganak] {
        width: 100%;
    }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
.reports-shell[b-zoeczp8t7b] {
    max-width: 980px;
    padding-bottom: 2rem;
}

.reports-subtitle[b-zoeczp8t7b] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 62ch;
}

.reports-coming-soon-card[b-zoeczp8t7b],
.reports-available-now-card[b-zoeczp8t7b] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.reports-coming-soon-card h2[b-zoeczp8t7b],
.reports-available-now-card h2[b-zoeczp8t7b] {
    color: #0d2c55;
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.reports-coming-soon-list[b-zoeczp8t7b],
.reports-available-now-list[b-zoeczp8t7b] {
    margin: 0;
    padding-left: 1.2rem;
}

.reports-link-button[b-zoeczp8t7b] {
    background: none;
    border: none;
    padding: 0;
    color: #0d6efd;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.reports-link-button:hover[b-zoeczp8t7b],
.reports-link-button:focus-visible[b-zoeczp8t7b] {
    color: #0b5ed7;
    outline: none;
}

.reports-coming-soon-list li[b-zoeczp8t7b],
.reports-available-now-list li[b-zoeczp8t7b] {
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.reports-coming-soon-list li:last-child[b-zoeczp8t7b],
.reports-available-now-list li:last-child[b-zoeczp8t7b] {
    margin-bottom: 0;
}
/* /Components/Pages/SelectClub.razor.rz.scp.css */
.club-select-shell[b-yg368new96] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem 2rem;
    background:
        radial-gradient(circle at 28% 18%, rgba(140, 190, 240, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 78% 88%, rgba(93, 176, 97, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    margin: -1rem -1.5rem -1rem;
}

/* Match MainLayout's asymmetric .content padding-left at desktop. */
@media (min-width: 1280px) {
    .club-select-shell[b-yg368new96] {
        margin-left: -2rem;
    }
}

.club-select-card[b-yg368new96] {
    width: min(34rem, 92vw);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 1.5rem 1.5rem 1.3rem;
    box-shadow: 0 14px 32px rgba(8, 24, 50, 0.34);
}

.club-select-card h1[b-yg368new96] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.club-select-help[b-yg368new96] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.club-list[b-yg368new96] {
    display: grid;
    gap: 0.55rem;
}

.club-option[b-yg368new96] {
    text-align: left;
    padding: 0.6rem 0.75rem;
}

.club-select-actions[b-yg368new96] {
    margin-top: 0.8rem;
}
/* /Components/Pages/SessionSummaryReport.razor.rz.scp.css */
.reports-shell[b-ikaamvmuyr] {
    max-width: 1280px;
    padding-bottom: 2rem;
}

.reports-crumb[b-ikaamvmuyr] {
    color: #6c7a8c;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.reports-crumb-link[b-ikaamvmuyr] {
    background: none;
    border: none;
    padding: 0;
    color: #0d2c55;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reports-crumb-link:hover[b-ikaamvmuyr],
.reports-crumb-link:focus-visible[b-ikaamvmuyr] {
    text-decoration: underline;
    outline: none;
}

.reports-subtitle[b-ikaamvmuyr] {
    color: #4e6f8e;
    margin: -0.25rem 0 1.25rem;
    max-width: 70ch;
}

.reports-available-now-card[b-ikaamvmuyr] {
    background: #ffffff;
    border: 1px solid #d7e0ec;
    border-radius: 0.55rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.session-summary-filters[b-ikaamvmuyr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto)) 1fr;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.session-summary-filter[b-ikaamvmuyr] {
    display: flex;
    flex-direction: column;
}

.session-summary-filter .form-label[b-ikaamvmuyr] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.session-summary-filter-actions[b-ikaamvmuyr] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.session-summary-count-hint[b-ikaamvmuyr] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.session-summary-table thead th[b-ikaamvmuyr] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.session-summary-table th.sortable-header[b-ikaamvmuyr] {
    cursor: pointer;
    user-select: none;
}

.session-summary-table th.sortable-header:hover[b-ikaamvmuyr] {
    color: #0d2c55;
}

.session-summary-table td[b-ikaamvmuyr],
.session-summary-table th[b-ikaamvmuyr] {
    vertical-align: middle;
}

.session-summary-table .numeric[b-ikaamvmuyr] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .session-summary-filter-actions[b-ikaamvmuyr] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-shell[b-6sm8tliamm] {
    padding: 0;
}

.settings-shell h1[b-6sm8tliamm] {
    color: #0d2c55;
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}

.settings-card[b-6sm8tliamm] {
    background: #f6f8fb;
    border-radius: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.settings-card h2[b-6sm8tliamm] {
    color: #24384f;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

/* KioskPinSettingsCard is a child component that uses `.club-card` styles
   defined in Members.razor.css — those don't reach across scope, so the card
   was rendering chrome-less with a Bootstrap-default 2rem h2. ::deep applies
   matching settings-card chrome and h2 sizing inside the child component. */
.settings-shell[b-6sm8tliamm]  .kiosk-pin-card {
    background: #f6f8fb;
    border-radius: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(13, 44, 85, 0.08);
}

.settings-shell[b-6sm8tliamm]  .kiosk-pin-card h2 {
    color: #24384f;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

.settings-shell[b-6sm8tliamm]  .kiosk-pin-card .club-help-text {
    color: #5f6f80;
    font-size: 0.88rem;
    margin: 0 0 0.6rem;
}

.settings-card-help[b-6sm8tliamm] {
    margin: 0 0 0.65rem;
    color: #5f6f80;
}

.settings-profile-toolbar[b-6sm8tliamm] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.65rem;
}

.settings-profile-picker[b-6sm8tliamm] {
    min-width: min(22rem, 100%);
}

.settings-profile-actions[b-6sm8tliamm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-actions[b-6sm8tliamm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #d5e2ef;
    padding: 0.6rem 0.75rem;
    margin-top: 0.8rem;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(13, 44, 85, 0.08);
}

.settings-dirty-indicator[b-6sm8tliamm] {
    color: #b54708;
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-message[b-6sm8tliamm] {
    color: #4f6177;
    font-size: 0.92rem;
}

.settings-delete-confirm[b-6sm8tliamm] {
    border: 1px solid #f0b5b5;
    background: #fff5f5;
    border-radius: 8px;
    padding: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-section[b-6sm8tliamm] {
    border: 1px solid #d5e2ef;
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
}

.settings-section-title[b-6sm8tliamm] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0d2c55;
    margin-bottom: 0.4rem;
}

.settings-grid[b-6sm8tliamm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem 0.6rem;
}

.settings-grid-wide[b-6sm8tliamm] {
    grid-template-columns: 1fr;
}

.settings-field[b-6sm8tliamm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #4d5f72;
}

.settings-toggle[b-6sm8tliamm] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #1f2d3d;
}

.settings-toggle-inline[b-6sm8tliamm] {
    flex-wrap: wrap;
}

.settings-control[b-6sm8tliamm] {
    width: auto;
}

.settings-control-courts[b-6sm8tliamm] {
    max-width: 5.5rem;
}

.settings-control-award[b-6sm8tliamm] {
    max-width: 10rem;
}

.settings-control-score[b-6sm8tliamm] {
    max-width: 6rem;
}

.settings-control-money[b-6sm8tliamm] {
    max-width: 7.5rem;
}

.settings-control-depth[b-6sm8tliamm] {
    max-width: 6rem;
}

.settings-control-name[b-6sm8tliamm] {
    max-width: 18rem;
}

@media (max-width: 760px) {
    .settings-grid[b-6sm8tliamm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Signup.razor.rz.scp.css */
.signup-shell[b-xlusw96nc4] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 2rem;
    background:
        radial-gradient(circle at 28% 18%, rgba(140, 190, 240, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 78% 88%, rgba(93, 176, 97, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #294f76 0%, #1f3d5b 100%);
    margin: -1rem -1.5rem -1rem;
}

/* Match MainLayout's asymmetric .content padding-left at desktop. */
@media (min-width: 1280px) {
    .signup-shell[b-xlusw96nc4] {
        margin-left: -2rem;
    }
}

.signup-brand[b-xlusw96nc4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
}

.signup-brand-mark[b-xlusw96nc4] {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.6px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* BL-057 (2026-04-26 v6): split assets — figures + wordmark sized
   independently to match the .login-brand-logo treatment. */
.signup-brand-logo[b-xlusw96nc4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.signup-brand-logo .signup-brand-figures[b-xlusw96nc4] {
    display: block;
    height: 3.5rem;
    width: auto;
}

.signup-brand-logo .signup-brand-wordmark[b-xlusw96nc4] {
    display: block;
    height: 3.5rem;
    width: auto;
    max-width: 100%;
}

.signup-brand-tagline[b-xlusw96nc4] {
    color: #cfe1f3;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.signup-card[b-xlusw96nc4] {
    width: min(34rem, 92vw);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.85rem;
    background: #ffffff;
    padding: 1.5rem 1.5rem 1.3rem;
    box-shadow: 0 14px 32px rgba(8, 24, 50, 0.34);
}

.signup-card h1[b-xlusw96nc4] {
    margin: 0 0 0.35rem;
    color: #1f3f5e;
}

.signup-help[b-xlusw96nc4] {
    color: #5e748a;
    margin: 0 0 0.8rem;
}

.signup-password-hint[b-xlusw96nc4] {
    font-size: 0.82rem;
    margin-bottom: 0;
}

.signup-password-hint-neutral[b-xlusw96nc4] {
    color: #6c757d;
}

.signup-password-hint-short[b-xlusw96nc4] {
    color: #8a5a00;
}

.signup-password-hint-ok[b-xlusw96nc4] {
    color: #1e7e34;
}

.signup-field-error[b-xlusw96nc4] {
    color: #8a2d2d;
    font-size: 0.82rem;
    margin-bottom: 0;
}

.signup-actions[b-xlusw96nc4] {
    margin-top: 0.8rem;
}

.signup-login-link[b-xlusw96nc4] {
    margin-top: 0.75rem;
    color: #4d6177;
    font-size: 0.92rem;
}

.signup-login-link a[b-xlusw96nc4] {
    color: #0f4f8b;
    font-weight: 600;
}

.signup-error[b-xlusw96nc4] {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #d88f8f;
    background: #f7e3e3;
    color: #8a2d2d;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
}

.signup-error-actions[b-xlusw96nc4] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.signup-error-actions a[b-xlusw96nc4] {
    color: #0f4f8b;
    font-weight: 600;
}

.signup-pilot-footnote[b-xlusw96nc4] {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.5;
}

.signup-pilot-footnote a[b-xlusw96nc4] {
    color: #0f4f8b;
}
/* /Components/Pages/SystemUsers.razor.rz.scp.css */
.system-users-filters[b-bos17xn4ou] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.system-users-filter[b-bos17xn4ou] {
    display: flex;
    flex-direction: column;
}

.system-users-filter .form-label[b-bos17xn4ou] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #24384f;
    margin-bottom: 0.2rem;
}

.system-users-filter-actions[b-bos17xn4ou] {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: flex-end;
}

.system-users-count-hint[b-bos17xn4ou] {
    color: #6c7a8c;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}

.system-users-table thead th[b-bos17xn4ou] {
    color: #2a2f36;
    border-bottom: 1px solid #1f2b38;
    font-size: 0.95rem;
    white-space: nowrap;
}

.system-users-table th.sortable-header[b-bos17xn4ou] {
    cursor: pointer;
    user-select: none;
}

.system-users-table th.sortable-header:hover[b-bos17xn4ou] {
    color: #0d2c55;
}

.system-users-table td[b-bos17xn4ou],
.system-users-table th[b-bos17xn4ou] {
    vertical-align: middle;
}

.system-users-clubs[b-bos17xn4ou] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.system-users-club-chip[b-bos17xn4ou] {
    background: #eef2f7;
    border: 1px solid #d7e0ec;
    border-radius: 0.35rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.system-users-club-role[b-bos17xn4ou] {
    color: #4e6f8e;
    font-size: 0.78rem;
    font-style: normal;
    margin-left: 0.25rem;
}

@media (max-width: 768px) {
    .system-users-filter-actions[b-bos17xn4ou] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/ClubSessionSettingsEditor.razor.rz.scp.css */
.settings-section[b-gcdp38x259] {
    border: 1px solid #d5e2ef;
    border-radius: 10px;
    padding: 0.55rem 0.6rem;
    background: rgba(255, 255, 255, 0.7);
    margin-top: 0.6rem;
}

.settings-section-title[b-gcdp38x259] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0d2c55;
    margin-bottom: 0.4rem;
}

.settings-grid[b-gcdp38x259] {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.45rem 0.6rem;
}

.settings-grid-wide[b-gcdp38x259] {
    grid-template-columns: 1fr;
}

.settings-field[b-gcdp38x259] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: #4d5f72;
}

.settings-toggle[b-gcdp38x259] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #1f2d3d;
}

.settings-toggle-inline[b-gcdp38x259] {
    flex-wrap: wrap;
}

.settings-control[b-gcdp38x259] {
    width: auto;
}

.settings-control-courts[b-gcdp38x259] {
    max-width: 5.5rem;
}

.settings-control-award[b-gcdp38x259] {
    max-width: 10rem;
}

.settings-control-score[b-gcdp38x259] {
    max-width: 6rem;
}

.settings-control-money[b-gcdp38x259] {
    max-width: 7.5rem;
}

.settings-control-depth[b-gcdp38x259] {
    max-width: 6rem;
}

@media (max-width: 760px) {
    .settings-grid[b-gcdp38x259] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/MemberProfileModal.razor.rz.scp.css */
.member-profile-modal-backdrop[b-vmu2rhjtmw] {
    position: fixed;
    inset: 0;
    background: rgba(18, 30, 44, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 2100;
}

.member-profile-modal[b-vmu2rhjtmw] {
    width: min(820px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    background: #f8fbff;
    border: 1px solid #b8c8d8;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(21, 43, 68, 0.3);
    padding: 0.85rem;
}

.member-profile-modal-header[b-vmu2rhjtmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.member-profile-modal-header-actions[b-vmu2rhjtmw] {
    display: flex;
    gap: 0.4rem;
}

.member-profile-modal-header h3[b-vmu2rhjtmw] {
    margin: 0;
    color: #253f5b;
    font-size: 1.35rem;
    font-weight: 700;
}

.member-profile-modal-body[b-vmu2rhjtmw] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.9rem;
    align-items: start;
}

.member-profile-photo[b-vmu2rhjtmw] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    object-fit: cover;
    background: #fff;
}

.member-profile-photo-fallback[b-vmu2rhjtmw] {
    width: 11rem;
    height: 11rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(37, 63, 91, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f6fa;
    color: #4e657d;
}

.member-profile-photo-fallback.male[b-vmu2rhjtmw] {
    border-color: #3d88c8;
    background: #eef6ff;
    color: #2e6fa9;
}

.member-profile-photo-fallback.female[b-vmu2rhjtmw] {
    border-color: #cf75a4;
    background: #fff0f7;
    color: #a85283;
}

.member-profile-photo-fallback.unspecified[b-vmu2rhjtmw] {
    border-color: #8fa1b4;
    background: #f2f6fa;
    color: #5a6d80;
}

.member-profile-photo-initials[b-vmu2rhjtmw] {
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.member-profile-fields[b-vmu2rhjtmw] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    grid-column: 1 / -1;
}

.member-profile-fields > div[b-vmu2rhjtmw] {
    border: 1px solid #ccdae8;
    border-radius: 0.45rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem;
}

.member-profile-id-field[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
}

.member-profile-id-field .member-profile-id[b-vmu2rhjtmw] {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.member-profile-fields dt[b-vmu2rhjtmw] {
    margin: 0;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-profile-fields dd[b-vmu2rhjtmw] {
    margin: 0.2rem 0 0;
    color: #24384f;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
}

.member-profile-id[b-vmu2rhjtmw] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8rem;
}

.member-profile-tabs[b-vmu2rhjtmw] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #d8e0ea;
    grid-column: 1 / -1;
}

.member-profile-tab[b-vmu2rhjtmw] {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60778f;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.member-profile-tab:hover[b-vmu2rhjtmw] {
    color: #24384f;
}

.member-profile-tab.active[b-vmu2rhjtmw] {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.member-profile-sessions[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
    max-height: 22rem;
    overflow-y: auto;
}

.member-profile-rating[b-vmu2rhjtmw] {
    grid-column: 1 / -1;
}

.member-profile-rating-chart[b-vmu2rhjtmw] {
    position: relative;
    width: 100%;
    height: 18rem;
    padding: 0.5rem 0;
}

.member-profile-rating-chart canvas[b-vmu2rhjtmw] {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1100px) {
    .member-profile-modal-body[b-vmu2rhjtmw] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .member-profile-photo[b-vmu2rhjtmw],
    .member-profile-photo-fallback[b-vmu2rhjtmw] {
        width: 9rem;
        height: 9rem;
    }

    .member-profile-fields[b-vmu2rhjtmw] {
        grid-template-columns: 1fr;
        width: 100%;
        justify-self: stretch;
    }

    .member-profile-tabs[b-vmu2rhjtmw],
    .member-profile-sessions[b-vmu2rhjtmw],
    .member-profile-rating[b-vmu2rhjtmw] {
        width: 100%;
        justify-self: stretch;
    }
}