/**
 * EchoTeamUsers Component Styles
 * Uses v2-* portal design tokens. Shared across client app and admin shell.
 */

/* --- User initials avatar --- */
.users-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v2-accent-subtle, rgba(99, 102, 241, 0.12));
    color: var(--v2-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--v2-text-xs);
    font-weight: 600;
    flex-shrink: 0;
}

/* --- Status badges --- */
.users-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--v2-text-xs);
    font-weight: 500;
    border-radius: var(--v2-radius-full);
    letter-spacing: var(--v2-tracking-wide);
}

.users-badge-active {
    background: var(--v2-success-bg);
    color: var(--v2-success);
}

.users-badge-invited {
    background: var(--v2-warning-bg);
    color: var(--v2-warning, #f59e0b);
}

.users-badge-pending {
    background: var(--v2-surface-hover);
    color: var(--v2-fg-muted);
}

/* --- Admin action icons row --- */
.users-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.users-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--v2-radius-sm);
    background: transparent;
    color: var(--v2-fg-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.users-action-btn:hover {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

.users-action-btn.danger:hover {
    background: var(--v2-error-bg);
    color: var(--v2-error);
}

.users-action-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Email pill input --- */
.users-pill-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 40px;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    cursor: text;
    transition: border-color 0.15s;
}

.users-pill-wrap:focus-within {
    border-color: var(--v2-accent);
}

.users-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--v2-accent-subtle, rgba(99, 102, 241, 0.12));
    border-radius: var(--v2-radius-full);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
}

.users-pill-close {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--v2-fg-muted);
    transition: color 0.15s;
}

.users-pill-close:hover {
    color: var(--v2-error);
}

.users-pill-close svg {
    width: 12px;
    height: 12px;
}

.users-pill-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
}

.users-pill-input::placeholder {
    color: var(--v2-fg-muted);
}

/* --- Password requirements checklist (admin) --- */
.users-pw-reqs {
    margin-top: 8px;
}

.users-pw-req {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
    margin-top: 3px;
}

.users-pw-req-icon {
    /* D04: 13px = check/x glyph icon, not readable text — keep raw */
    font-size: 13px;
    width: 16px;
    text-align: center;
}

/* --- Admin compact table (9 columns) --- */
.users-admin-table.ln-table th,
.users-admin-table.ln-table td {
    padding: 10px 12px;
}

.users-admin-table .users-date-cell {
    white-space: nowrap;
}

/* --- Skeleton --- */
.users-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    padding: var(--v2-space-3) 0;
}