/*
 * regional-groups.css
 * View-specific overrides for the Regional Groups module.
 * Base table, modal, button, and form styles are handled by the global CSS system
 * (tables.css, modal.css, forms.css, buttons.css).
 */

/* ============================================
   MANAGE ADMINS LIST (inside modal)
   ============================================ */

.admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-body, #f8fafc);
    min-height: 80px;
    max-height: 260px;
    overflow-y: auto;
}

.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.admin-list-item:last-child {
    border-bottom: none;
}

.admin-list-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ============================================
   ADD ADMIN FORM ROW (select + button inline)
   ============================================ */
.add-admin-row {
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
    align-items: flex-end;
}

.add-admin-row .form-input {
    flex: 1;
}

.add-admin-row .btn-primary {
    flex-shrink: 0;
    /* Align height with 48px input */
    min-height: 48px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Mobile: stack add-admin row vertically */
@media (max-width: 480px) {
    .add-admin-row {
        flex-direction: column;
    }

    .add-admin-row .btn-primary {
        width: 100%;
    }
}