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

:where(.can-hover) .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;
}

:where(.can-hover) .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;
}

/* -- Roles & Permissions: switches and custom roles ------------------------
   The matrix is a table of switches for Cashier and Manager; Waiter and Owner
   stay text because they are not editable. The save button sits on the title
   line so it is in view when the last switch is flipped. */

.team-perm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
}

.team-perm-head .team-section-title {
    margin-bottom: 0;
}

/* The title, Save button and note stay at the top while the switch list
   scrolls under them, so Save is in reach after the last switch. It spans
   the card's padding so rows do not show past its edges. */
.team-perm-sticky {
    position: sticky;
    /* -1px: at 0 a sub-pixel sliver of the rows showed above it. */
    top: -1px;
    z-index: 2;
    margin: calc(-1 * var(--ds-pad-card)) calc(-1 * var(--ds-pad-card)) 0;
    padding: calc(var(--ds-pad-card) + 1px) var(--ds-pad-card) var(--ds-space-4);
    background: var(--ds-surface);
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}

/* The note's gap moves into the padding above, so the white covers it. */
.team-perm-sticky .team-account-note {
    margin-bottom: 0;
}

.team-perm-table td,
.team-perm-table th {
    vertical-align: middle;
}

.team-perm-group th {
    padding: var(--ds-space-2) var(--ds-space-4);
    background: var(--ds-bg-inset);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: start;
}

.team-custom-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-4);
}

.team-custom-role {
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-3) var(--ds-space-4);
}

.team-custom-role-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-3);
}

.team-custom-role-head .team-custom-name {
    flex: 1 1 14rem;
    max-width: 22rem;
    font-weight: var(--ds-fw-medium);
}

.team-custom-members {
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

.team-custom-switches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--ds-space-2) var(--ds-space-4);
    margin: var(--ds-space-3) 0;
}

.team-custom-switch {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-sm);
    cursor: pointer;
}

.team-custom-actions {
    display: flex;
    gap: var(--ds-space-2);
    justify-content: flex-end;
}

.team-custom-new {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto;
    align-items: end;
    gap: var(--ds-space-3);
    padding-top: var(--ds-space-3);
    border-top: 1px solid var(--ds-border-default);
}

.team-custom-new .ds-field {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .team-custom-new {
        grid-template-columns: 1fr;
    }
}

/* -- Approval PIN and the three-way Cancel / Void rows (js/pages/team.js) -- */
.team-pin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}

.team-perm-tri {
    min-width: 150px;
}

.team-custom-tri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
}