/* Column chooser used by directory grids. */
.vario-column-chooser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.36rem 0.55rem;
}

.vario-column-chooser-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 0.34rem;
    align-items: center;
    padding: 0.18rem;
    background: color-mix(in srgb, var(--vario-surface-alt) 82%, var(--vario-accent) 18%);
    border: 1px solid var(--vario-border-soft);
    border-radius: var(--vario-control-radius);
}

.vario-column-chooser-check {
    width: 100%;
    min-height: var(--vario-compact-control-height);
    margin: 0;
}

.vario-column-width-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.24rem;
    align-items: center;
}

.vario-column-width-field span {
    color: var(--vario-text-muted);
    font-size: 0.64rem;
    font-weight: 800;
}

.vario-column-width-field .form-control {
    min-height: var(--vario-compact-control-height);
    padding: 0.08rem 0.22rem;
    font-size: 0.68rem;
    text-align: right;
}

.vario-list-message {
    margin: 0;
    padding: 0.5rem 0.62rem;
    color: var(--vario-text);
    background: color-mix(in srgb, var(--vario-surface-alt) 86%, var(--vario-accent) 14%);
    border: 1px solid var(--vario-border-soft);
    border-left: 3px solid var(--vario-accent);
    border-radius: var(--vario-control-radius);
    font-size: 0.78rem;
    font-weight: 650;
}

.vario-list-message.danger {
    border-left-color: var(--bs-danger);
}