#btn-columns { white-space: nowrap; }
@media (max-width: 900px) {
    .br-columns-btn { display: none !important; }
}

/* The picker itself is the shared component (assets_ui/components/ui/col_picker/).
   Everything below is only the modal that hosts it — chrome, not list styling. */
#columnsModal .cols-modal-content { width: 620px; max-width: 95%; height: 78vh; }
.cols-modal-body {
    padding: 0 !important; overflow: hidden;
    display: flex; flex-direction: column; min-height: 0;
}
.cols-picker { flex: 1; min-height: 0; }

.cols-modal-footer {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.1rem; border-top: 1px solid var(--border-color); background: var(--bg-body);
}
.cols-footer-spacer { flex: 1; }
.cols-btn-ok {
    background: var(--primary-color); color: #fff; border: 1px solid var(--primary-color);
}
.cols-btn-ok:hover { filter: brightness(0.95); }

@media (max-width: 768px) {
    #columnsModal .cols-modal-content { width: 100%; height: 88vh; }
}