/* Ensure the page-level container stacks its children vertically */
.formula-builder,
.formula-builder #formulaForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Each section should take a full row */
.formula-builder .selected-row,
.formula-builder .available-grid,
.formula-builder .table-container,
.formula-builder .actions {
    width: 100%;
}

/* Selected tokens container */
.formula-builder .selected-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Operators stay in a row, but remain their own section */
.formula-builder .operators-row {
    display: flex;        /* not inline-flex */
    align-items: center;
    gap: 10px;
}

/* Attribute chips grid wraps to multiple lines */
.formula-builder .available-grid {
    display: flex;        /* not inline-flex */
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

/* Table container for attributes */
.formula-builder .table-container {
    margin-top: 10px;
}

.formula-builder .table-container .table {
    margin-bottom: 0;
}

.formula-builder .attribute-add-btn {
    transition: all 0.2s ease;
}

.formula-builder .attribute-add-btn.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.formula-builder .attribute-row {
    transition: background-color 0.2s ease;
}

/* Action buttons aligned on their own row */
.formula-builder .actions {
    display: flex;        /* not inline-flex */
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    align-content: center;
    padding-top: 10px;
}

/* Optional: prevent any global inline-flex utility leaking in */
.formula-builder .selected-row,
.formula-builder .operators-row,
.formula-builder .available-grid,
.formula-builder .table-container,
.formula-builder .actions {
    display: flex !important;
}

/* Container */
.formula-builder {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space);
}

/* Selected row (chips and operators) */
.selected-row {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    min-height: 40px;
}

.token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 2px 6px 0 0;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid #E3E3E3;
    background: #F2F2F2;
    font: 700 12px/1 Roboto, Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: #000;
    cursor: pointer;
    user-select: none;
}
.token--attr { background: #C4C4C4; }
.token--op { background: #F2F2F2; }
.token-remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: #6B7280;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.token-remove:hover { color: #111827; }
.token:focus { outline: 2px solid #9CA3AF; outline-offset: 2px; }

/* Operators row */
.operators-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}