.rm-users-search { max-width: 420px; margin-bottom: var(--rm-space-5); }

#rm-users-list { display: flex; flex-direction: column; gap: var(--rm-space-3); }

.rm-user-row {
    display: grid;
    grid-template-areas:
        "main actions"
        "meta meta";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--rm-space-3);
    row-gap: 3px;
    background: var(--rm-white);
    border: 1px solid var(--rm-fog-light);
    border-radius: var(--rm-radius-md);
    padding: 10px 14px;
}

.rm-user-row-main { grid-area: main; min-width: 0; }
.rm-user-row-top { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; }
.rm-user-row-top strong { font-size: 0.92rem; white-space: nowrap; }
.rm-user-row-top .rm-badge { flex-shrink: 0; }
.rm-user-row-meta {
    grid-area: meta;
    color: var(--rm-fog);
    font-size: 0.74rem;
    line-height: 1.35;
    min-width: 0;
}

.rm-user-row-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    grid-area: actions;
}
.rm-user-row-actions .rm-btn {
    font-size: 0.74rem;
    padding: 6px 10px;
    white-space: nowrap;
}

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

.rm-users-pagination[hidden] { display: none; }
.rm-users-pagination-summary { color: var(--rm-fog); font-size: .82rem; }
.rm-users-pagination-buttons { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; }
.rm-users-pagination-gap { color: var(--rm-fog); padding: 0 .2rem; }

.rm-users-page-btn {
    background: var(--rm-white);
    border: 1px solid var(--rm-fog-light);
    border-radius: var(--rm-radius-sm);
    color: var(--rm-forest);
    cursor: pointer;
    min-width: 2.25rem;
    padding: .48rem .68rem;
}

.rm-users-page-btn:hover:not(:disabled),
.rm-users-page-btn.is-active {
    background: var(--rm-moss);
    border-color: var(--rm-moss);
    color: var(--rm-white);
}

.rm-users-page-btn:disabled { cursor: default; opacity: .45; }

@media (max-width: 640px) {
    .rm-users-pagination { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1180px) {
    .rm-user-row {
        grid-template-areas:
            "main"
            "meta"
            "actions";
        grid-template-columns: minmax(0, 1fr);
    }

    .rm-user-row-actions { flex-wrap: wrap; margin-top: 3px; }
}