/* Shared page-title style for pages hosted under AccountShell (Profile, Security, …) —
   Figma node 67:537 "Screen / Profile (content)": 26px light, tight tracking. */
.account-page-title {
    margin: 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 26px;
    letter-spacing: -0.52px;
    color: var(--color--semantic--text-strong);
}

/* Overrides reaching into a Lucent (cross-project) component's own internal markup must live
   here, not in a page's scoped .razor.css — Blazor's CSS-isolation scope attribute doesn't
   propagate onto a child component's root when that component is compiled in a different
   project, so a scoped `::deep` selector silently never matches. Global, unscoped CSS has no
   such restriction. Profile's avatar circle is 64px with a bespoke tint — bigger than
   LucentAvatar's built-in Lg (48px). */
.profile-avatar-xl .lucent-avatar__circle {
    width: 64px;
    height: 64px;
    background: var(--color--semantic--accent-subtle);
}

.profile-avatar-xl .lucent-avatar__initials {
    font-size: 22px;
    color: var(--color--semantic--accent-strong);
}

/* Figma node 60:325 "Screen / Workspaces (content)" — also global for the same cross-project
   Lucent-internals reason above (LucentAvatar, LucentStatusTag). */
.workspaces-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.workspaces-subtitle {
    margin: 8px 0 0 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--color--semantic--text-subtle);
}

.workspaces-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.workspace-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--color--semantic--surface-glass-strong);
    border: var(--border-subtle);
}

.workspace-card--current {
    /* No semantic token for the "selected/active accent" state yet — pine-100 wash + pine-80 hairline
       are the validated design's shades; using the primitives directly until Lucent adds the role. */
    background: var(--color--primitive--pine-100);
    border: 1.5px solid var(--color--primitive--pine-80);
}

.workspace-avatar .lucent-avatar__circle {
    width: 44px;
    height: 44px;
    background: var(--color--semantic--accent-subtle);
}

.workspace-avatar .lucent-avatar__initials {
    font-size: 15px;
    color: var(--color--semantic--accent-strong);
}

.workspace-avatar--org .lucent-avatar__circle {
    border-radius: 12px;
}

.workspace-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.workspace-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.workspace-name {
    font-family: var(--font--primitive--sans);
    font-size: 16px;
    color: var(--color--semantic--text-strong);
}

.workspace-meta {
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 12px;
    color: var(--color--semantic--text-subtle);
}

.workspace-current-label {
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--color--semantic--text-subtle);
}

.workspace-active-badge {
    background: var(--color--primitive--pine-80); /* same accent-active gap as .workspace-card--current */
    border-radius: 5px;
    height: 20px;
    padding: 0 9px;
}

.workspace-active-badge span {
    color: var(--color--semantic--accent-strong);
    font-family: var(--font--primitive--sans);
    font-weight: 500;
    font-size: 10px;
}

/* Figma node 73:523 "Screen / Create workspace". */
.new-workspace-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60vh;
}

.new-workspace-title {
    margin: 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 24px;
    letter-spacing: -0.48px;
    color: var(--color--semantic--text-strong);
}

.new-workspace-subtitle {
    margin: 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--color--semantic--text-subtle);
}

.new-workspace-footer {
    display: flex;
    gap: 10px;
    width: 100%;
}

.new-workspace-submit {
    flex: 1;
}

.workspace-availability {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font--primitive--sans);
    font-size: 11px;
}

.workspace-availability--ok {
    color: var(--color--semantic--success); /* mirrors --taken using --error */
}

.workspace-availability--taken {
    color: var(--color--semantic--error);
}

/* Figma node 68:638 "Screen / Members (content)". Global for the same cross-project reason as the
   workspace cards — the .member-avatar override reaches LucentAvatar's own internals. */
.members-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.members-subtitle {
    margin: 8px 0 0 0;
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--color--semantic--text-subtle);
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: var(--color--semantic--surface-glass-strong);
    border: var(--border-subtle);
}

.member-avatar .lucent-avatar__circle {
    width: 40px;
    height: 40px;
    background: var(--color--semantic--accent-subtle);
}

.member-avatar .lucent-avatar__initials {
    font-size: 14px;
    color: var(--color--semantic--accent-strong);
}

.member-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.member-name {
    font-family: var(--font--primitive--sans);
    font-size: 15px;
    color: var(--color--semantic--text-strong);
}

.member-you {
    font-weight: 300;
    color: var(--color--semantic--text-subtle);
}

.member-email {
    font-family: var(--font--primitive--sans);
    font-weight: 300;
    font-size: 12px;
    color: var(--color--semantic--text-subtle);
}

.member-role-static {
    font-family: var(--font--primitive--sans);
    font-size: 13px;
    color: var(--color--semantic--text-subtle);
    min-width: 116px;
    text-align: center;
}

/* A native <select> styled to sit alongside Lucent's controls — kept native (not LucentSelect) so
   its change can auto-submit its form without JS interop (onchange="this.form.submit()"). */
.member-role-select {
    font-family: var(--font--primitive--sans);
    font-size: 13px;
    color: var(--color--semantic--text-strong);
    padding: 7px 10px;
    min-width: 116px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--color--semantic--border-subtle);
    background: var(--color--semantic--surface-base);
    cursor: pointer;
}

.member-action-spacer {
    width: 1px;
}

.members-invite-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}