/* Shared chrome for NewLayout sections embedded in the still-MudBlazor User Profile page.
   Global, not scoped: these rules are shared by several components, and a scoped stylesheet
   only reaches the component that owns it. Temporary bridge — when User Profile itself moves
   to NewLayout the sections inherit the global page styles and this file is deleted. */
.sm-profile-section {
    /* Mud's elevation/radius vars are injected at runtime by its ThemeProvider, so the card
       matches the surrounding MudPaper sections exactly. The IDE can't resolve them statically. */
    margin-top: var(--sm-space-4);
    padding: var(--sm-space-4);
    background-color: var(--sm-color-surface);
    border-radius: var(--mud-default-borderradius);
}

.sm-profile-section__header {
    display: flex;
    align-items: center;
    gap: var(--sm-space-3);
    margin-bottom: var(--sm-space-3);
}

/* The header owns the spacing below the title, so the heading itself carries no margin. */
.sm-profile-section__heading {
    margin: 0;
    font-size: var(--sm-font-size-lg);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-color-text);
}

.sm-profile-section__subheading {
    margin: var(--sm-space-6) 0 var(--sm-space-2);
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-color-text-muted);
}

/* Lets a badge sit inline with a subheading. The row takes over the subheading's margins —
   otherwise the heading's margin box makes align-items:center park the badge too high. */
.sm-profile-section__subheading-row {
    display: flex;
    align-items: center;
    gap: var(--sm-space-3);
    margin: var(--sm-space-6) 0 var(--sm-space-2);
}

.sm-profile-section__subheading-row .sm-profile-section__subheading {
    margin: 0;
}

/* Chrome and typography deliberately track SmTable (border, radius-md, size-sm, muted 600 headers)
   so a field panel and a table read as the same surface when both sit on the User Profile page. */
.sm-profile-section__fields {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sm-space-4);
    padding: var(--sm-space-3) var(--sm-space-4);
    background-color: var(--sm-color-surface);
    border: 1px solid var(--sm-color-border);
    border-radius: var(--sm-radius-md);
}

.sm-profile-section__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sm-space-2);
    min-width: 0;
}

/* Spans the whole grid row — for a value too long to sit in a single column. */
.sm-profile-section__label {
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-600);
    color: var(--sm-color-text-muted);
}

.sm-profile-section__value {
    font-size: var(--sm-font-size-sm);
    color: var(--sm-color-text);
}

@media (max-width: 1100px) {
    .sm-profile-section__fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sm-profile-section__link {
    font-size: var(--sm-font-size-sm);
    color: var(--sm-color-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.sm-profile-section__link:hover {
    text-decoration: underline;
}