/* Team page - page-scoped, --ds-* tokens only */

.team-page {
    padding: 0;
    max-width: none;
}

.team-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-5);
    width: 100%;
}

/*
 * Same guard as `.settings-tab-rail`, applied before it can bite. This rail
 * has the identical structure: `design-system.css` sets `align-items: stretch`
 * on `.team-page > .team-shell`, so the rail is stretched to the height of the
 * panel beside it, and with the default `overflow: visible` any surplus
 * content spills out the bottom of the card instead of scrolling. The settings
 * rail hit exactly that once it grew to 15 entries -- its last item rendered
 * off-screen and could not be clicked, because the settings page does not
 * scroll.
 *
 * Team has four tabs today so it does not overflow, but the fix costs two
 * properties and removes the trap for whoever adds a fifth. The stretch is
 * left alone, so the card keeps its full height beside the panel.
 */
.team-tab-rail {
    flex: 0 0 200px;
    position: sticky;
    top: var(--ds-space-4);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    padding: var(--ds-space-3);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
}

/* Tabs never shrink to fit; the rail scrolls instead. */
.team-tab-rail > * {
    flex-shrink: 0;
}

.team-tab-strip {
    display: none;
    gap: var(--ds-space-1);
    overflow-x: auto;
    padding: var(--ds-space-2);
    margin-block-end: var(--ds-space-4);
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    -webkit-overflow-scrolling: touch;
}

.team-tab-btn {
    display: block;
    width: 100%;
    min-height: var(--ds-touch-target);
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    background: transparent;
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-medium);
    text-align: start;
    cursor: pointer;
    white-space: nowrap;
}

.team-tab-strip .team-tab-btn {
    width: auto;
    flex: 0 0 auto;
}

.team-tab-btn:hover {
    background: var(--ds-bg-inset);
    color: var(--ds-text-primary);
}

.team-tab-btn.is-active {
    background: var(--ds-primary-tint);
    color: var(--ds-primary);
    border-color: color-mix(in srgb, var(--ds-primary) 25%, transparent);
}

.team-main {
    flex: 1;
    min-width: 0;
}

.team-panel-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

@media (max-width: 900px) {
    .team-shell {
        flex-direction: column;
    }

    .team-tab-rail {
        display: none;
    }

    .team-tab-strip {
        display: flex;
    }
}

.team-section-title {
    margin: 0 0 var(--ds-space-4) 0;
}

.team-member-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.team-members-card {
    width: 100%;
}

.team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) 0;
    border-block-start: 1px solid var(--ds-border-default);
    flex-wrap: wrap;
}

.team-row:first-child {
    border-block-start: none;
    padding-block-start: 0;
}

.team-row-main {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.team-row-name {
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-primary);
}

.team-row-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.team-role-select {
    width: auto;
    min-width: 120px;
    min-height: var(--ds-touch-target);
}

.team-row-actions .ds-btn {
    min-height: var(--ds-touch-target);
}

.team-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-3);
}

@media (max-width: 640px) {
    .team-form-grid {
        grid-template-columns: 1fr;
    }
}

.team-invite-role {
    max-width: 240px;
}

.team-hint {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
    margin: var(--ds-space-1) 0 0 0;
}

.team-perm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
}

.team-perm-yes {
    color: var(--ds-success);
    font-weight: var(--ds-fw-medium);
}

.team-perm-no {
    color: var(--ds-text-tertiary);
}

.team-account-note {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-secondary);
    margin: 0 0 var(--ds-space-4) 0;
}