/* SPEC-32 — shared profile SECTION chrome, as GLOBAL (non-isolated) CSS.

   WHY GLOBAL (S6, #190): these rules were in ProfileRenderer.razor.css under
   `.profile-render ::deep …`, so they only applied to sections that had a <ProfileRenderer>
   ancestor (its scope roots the ::deep). The admin modal + kiosk wrap the sections in
   ProfileRenderer, so they got the styling; the portal /me composes <ProfileRatingSection> /
   <ProfileHistorySection> DIRECTLY (per the OQ1 ruling — /me is multi-club/account-level and
   can't host the single-member orchestrator), so with no `.profile-render` ancestor NONE of the
   `::deep` rules matched and the sections rendered unstyled (ux round-2 Finding 1).

   The section components are meant to be reusable whether or not they're wrapped, so this shared
   card/hero/pill chrome belongs in ONE global stylesheet (a single move — no wrapper `::deep`, no
   per-section duplication, no double-application). ProfileRenderer.razor.css now holds ONLY the
   wrapper's own container layout (the inter-section stacked gap) + its own "Tonight" block. The
   classnames here are unique to SPEC-32 (the legacy modal uses `.member-profile-*`), so plain
   global selectors don't collide; the two genuinely-cross-context classes (`.table-responsive`,
   `.member-settling-chip-icon` from the shared SettlingChip) are scoped under a `.profile-*`
   ancestor so they never leak to other surfaces. Wrapped (admin/kiosk/S7) and composed (/me) both
   pick these up identically. */

/* Overflow guard (Bl165): flex-column items + block section bodies default to min-width:auto (=
   max-content), so a wide child — the session-history table on phones — would force the stack wider
   than its container and scroll horizontally. Re-assert min-width:0 and let the table's own
   `.table-responsive` (overflow-x:auto) scroll INSIDE the section. */
.profile-section,
.profile-section-body {
    min-width: 0;
}

.profile-section .table-responsive {
    overflow-x: auto;
}

/* ---- identity header ---- */
.profile-identity {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.profile-identity-photo,
.profile-identity-photo-fallback {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.profile-identity-photo-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #2f6f9c, #14a0a0);
}

.profile-identity-photo-fallback.male { background: linear-gradient(135deg, #2f6f9c, #3a86c9); }
.profile-identity-photo-fallback.female { background: linear-gradient(135deg, #9c4f8a, #c96fb0); }

.profile-identity-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #253f5b;
    letter-spacing: -0.01em;
}

.profile-identity-meta {
    color: #5c6a7d;
    font-size: 0.85rem;
    margin-top: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
}

.profile-identity-sep { color: #b0bccb; }

/* ---- section cards ---- */
.profile-section {
    border: 1px solid #d6e0ea;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #ffffff;
}

.profile-section-head {
    padding: 0.5rem 0.75rem;
    background: #eef4fa;
    border-bottom: 1px solid #d6e0ea;
}

.profile-section-title {
    margin: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5c6a7d;
    font-weight: 700;
}

.profile-section-body {
    padding: 0.75rem;
}

/* ---- fields grid (contact + account) ---- */
.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.1rem;
    margin: 0;
}

.profile-fields dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8493a6;
    font-weight: 650;
}

.profile-fields dd {
    margin: 0.1rem 0 0;
    font-size: 0.95rem;
    color: #253f5b;
}

.profile-field-muted {
    color: #8493a6;
    font-style: italic;
}

/* ---- rating ---- */
.profile-rating-hero {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.profile-rating-value {
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #253f5b;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.profile-settling {
    font-size: 0.8rem;
}

.profile-settling-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    color: #9a6700;
    background: #f6ecd6;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 650;
    list-style: none;
    width: fit-content;
}

.profile-settling-summary::-webkit-details-marker { display: none; }

/* Scoped under .profile-settling so this NEVER re-sizes the shared SettlingChip glyph on other
   surfaces (organiser Rating tab, etc.) — it only sizes the glyph inside a profile settling pill. */
.profile-settling .member-settling-chip-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.profile-settling-copy {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #5c6a7d;
    max-width: 60ch;
}

.profile-rating-chart {
    margin-top: 0.6rem;
    height: 180px;
    position: relative;
}

/* ---- players ---- */
.profile-players-group { margin-bottom: 0.4rem; }

.profile-players-subhead {
    font-size: 0.8rem;
    font-weight: 650;
    color: #253f5b;
    margin: 0 0 0.4rem;
    cursor: default;
}

.profile-players-opponents > summary {
    cursor: pointer;
    margin-top: 0.6rem;
}

/* ---- players tables (Partners + Opponents) ----
   MOVED here from MemberProfileModal.razor.css (SPEC-32 fix). These were scoped
   (non-::deep) selectors carrying that modal's CSS-isolation attribute, but SPEC-32 S2
   moved the <table class="members-table"> into the child ProfilePlayersSection, which
   never gets that scope attribute — so the rules matched on NO lens and the columns
   collapsed to zero padding. As GLOBAL rules here they reach ProfilePlayersSection on
   every lens (admin modal, kiosk, clubmate static-SSR; /me composes only Rating+History).

   ANCHORED under `.profile-section-players` (ProfilePlayersSection's root <section>) — NOT
   bare `.members-table` — because the class is NOT unique to this section: the shared
   MemberSessionHistoryTable also carries `class="members-table member-session-history-table"`.
   A bare global `.members-table tbody td { white-space: nowrap }` would tie on specificity
   with that table's own scoped `.member-session-history-table tbody td` and (by source order)
   force its Session/Results columns to stop wrapping — a cross-lens regression. Anchoring to
   the players section confines these rules to the Partners/Opponents tables and never touches
   the history table (which is never inside .profile-section-players). Same "scope cross-context
   classes under a .profile-* ancestor" convention as .table-responsive / the settling chip above. */
.profile-section-players .members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.profile-section-players .members-table thead th {
    text-align: left;
    color: #60778f;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #d8e0ea;
    white-space: nowrap;
}

.profile-section-players .members-table tbody td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e6edf4;
    color: #24384f;
    vertical-align: middle;
    /* Data cells (games / W / L / win% / date) stay on one line so adjacent
       columns keep clear separation; the name column below opts back into
       wrapping for long names. */
    white-space: nowrap;
}

/* The first column is the partner / opponent NAME — let it wrap rather than
   force the table wider than the modal (the .table-responsive wrapper still
   scrolls as a last resort on very narrow phones). */
.profile-section-players .members-table tbody td:first-child {
    white-space: normal;
}

.profile-section-players .members-table th.numeric,
.profile-section-players .members-table td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- sortable column headers (SPEC-32 fix, CHANGE 2) ----
   Click-to-sort via vanilla-JS progressive enhancement (sortableTable.js), so it works
   identically on the static-SSR portal lenses that have NO Blazor circuit. The header
   control is a real <button> so it is natively focusable + keyboard-operable (Enter/Space);
   the ▲/▼/↕ indicator is driven purely from aria-sort so JS only toggles that one attribute. */
.profile-section-players .members-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.profile-section-players .members-table th.numeric .members-table-sort {
    justify-content: flex-end;
}

.profile-section-players .members-table-sort:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 2px;
}

.profile-section-players .members-table-sort-ind {
    font-size: 0.7em;
    line-height: 1;
}

.profile-section-players .members-table th[aria-sort="none"] .members-table-sort-ind::after {
    content: "\2195"; /* ↕ neutral: signals the column is sortable */
    opacity: 0.35;
}

.profile-section-players .members-table th[aria-sort="ascending"] .members-table-sort-ind::after {
    content: "\25B2"; /* ▲ */
}

.profile-section-players .members-table th[aria-sort="descending"] .members-table-sort-ind::after {
    content: "\25BC"; /* ▼ */
}

/* ---- account ---- */
/* Member ID spans the FULL account-card width — behaviour-preserved from the old tabbed layout's
   `.member-profile-id-field { grid-column: 1 / -1 }`. */
.profile-member-id-field {
    grid-column: 1 / -1;
}

/* SPEC-32 fix (CHANGE 3, Owner decision): de-emphasize the Member ID. Always shown, at the bottom of
   the (admin-only) Account section, but as QUIET reference data — not a headline. Render label + value
   on one small, muted, single line rather than the prominent dt/dd field the `.profile-fields` grid
   gives by default (0.68rem uppercase label over a 0.95rem #253f5b value). These overrides win on
   specificity over `.profile-fields dt|dd`. No visibility/lens change (this section is admin-only). */
.profile-account-fields .profile-member-id-field {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.profile-account-fields .profile-member-id-field dt,
.profile-account-fields .profile-member-id-field dd {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #60778f; /* muted grey, same low-contrast family as the section subheads / help text */
}

.profile-account-fields .profile-member-id-field dd {
    font-variant-numeric: tabular-nums;
}

/* Section-heading chrome unification (ux-review Major 2): Account + Manage carry the SAME shared
   eyebrow-band header as every other section, so their legacy inner headings are redundant — hide
   them so the title isn't doubled. */
.profile-section-account .member-account-status-caption,
.profile-section-manage .member-manage-title {
    display: none;
}