/* 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;
}

/* ── Revealable temporary password (invite form) ───────────────────────────
   The owner types a password they then read aloud to the new staff member.
   Masking it prevents nothing here and causes typos that only surface later,
   when that person cannot sign in. Same affordance as the login screen. */

.team-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.team-password-wrap .ds-input {
    width: 100%;
    /* Room for the button so a long password never runs underneath it. */
    padding-inline-end: 2.5rem;
}

.team-password-reveal {
    position: absolute;
    inset-inline-end: var(--ds-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-text-tertiary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.team-password-reveal svg {
    width: 1rem;
    height: 1rem;
}

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

/* Showing the password is a state worth seeing at a glance, not just a
   momentary hover. */
.team-password-reveal.is-showing {
    color: var(--ds-primary);
}

.team-password-reveal:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}