/* ─────────────────────────────────────────────────────────────────────────────
 * Scout — Users management styles
 * ───────────────────────────────────────────────────────────────────────────── */

.users-toolbar {
    margin-bottom: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.search-box svg {
    position: absolute;
    left: var(--space-4);
    color: var(--text-tertiary);
}
.search-box .input {
    padding-left: 44px;
}

.users-table {
    padding: 0;
    overflow: hidden;
}
.users-table__head,
.users-row {
    display: grid;
    grid-template-columns: 56px 1fr 1fr 1.4fr 0.7fr 0.7fr 1.2fr 1.2fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.users-table__head {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-secondary);
    background: var(--surface-secondary);
}
.users-row {
    border-bottom: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: background var(--transition-base);
}
.users-row:hover {
    background: var(--surface-secondary);
}
.users-row:last-child { border-bottom: 0; }

.users-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
.users-row__avatar img { width: 100%; height: 100%; object-fit: cover; }

.users-row__name { font-weight: 500; }
.users-row__username { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.users-row__email   { color: var(--text-secondary); }
.users-row__login   { font-size: 12px; }

.users-row__actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

.users-empty {
    padding: var(--space-8);
    text-align: center;
}

.users-pagination {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 1080px) {
    .users-table__head,
    .users-row {
        grid-template-columns: 48px 1fr 1fr 0.8fr 1fr;
    }
    .users-table__head > div:nth-child(4),
    .users-table__head > div:nth-child(6),
    .users-table__head > div:nth-child(7),
    .users-row > .users-row__email,
    .users-row > div:nth-child(6),
    .users-row > .users-row__login {
        display: none;
    }
}