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

/* ── One-time recovery code ────────────────────────────────────────────────
   Shown once, so it has to be readable across the counter and unambiguous to
   copy by hand: monospace, wide tracking, and big enough that the groups do
   not run together. Crockford base32 already drops I, L, O and U, which is the
   other half of not mis-reading it. */

.team-recovery-result {
    margin-top: var(--ds-space-4);
    padding: var(--ds-space-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-inset);
}

.team-recovery-code {
    display: block;
    margin: 0 0 var(--ds-space-3) 0;
    font-family: var(--ds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--ds-text-lg);
    letter-spacing: 0.12em;
    /* The code is the one thing on this screen worth selecting. */
    user-select: all;
    word-break: break-all;
    /* Latin code, so it reads left-to-right even with the UI in Arabic. */
    direction: ltr;
    text-align: start;
}

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