/*!
 * jQuery QueryBuilder 2.5.2
 * Copyright 2014-2018 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (https://opensource.org/licenses/MIT)
 */
.query-builder .rules-group-container, .query-builder .rule-container, .query-builder .rule-placeholder {
    position: relative;
    margin: 4px 0;
    border-radius: 5px;
    padding: 5px;
    border: var(--border);
    background: var(--white);
}

.query-builder .rule-container .rule-filter-container,
.query-builder .rule-container .rule-operator-container,
.query-builder .rule-container .rule-value-container, .query-builder .error-container, .query-builder .drag-handle {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    flex: 1;
    min-width: 200px;
    flex-wrap: wrap;
    align-self: center;
}

.query-builder .rule-container .select-picker.btn-group .dropdown-toggle div {
    white-space: break-spaces;
}

.query-builder .rule-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--border);
}

.query-builder .rule-container .rule-header {
    order: 99;
    margin-left: auto;
}

.rule-operator-container:not([style*="display: none"]),
.rule-value-container:not([style*="display: none"]) {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}


.rule-operator-container > span + select + .btn-group {
    display: none !important;
}

.query-builder .rules-group-container {
    padding: 10px;
    padding-bottom: 6px;
    border: 1px solid #DCC896;
    background: rgba(250, 240, 210, 0.5);
}

.query-builder .rules-group-header {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.query-builder .rules-group-header .group-conditions {
    margin-left: auto;
    justify-content: flex-end;
    height: 30px;
}


.query-builder .rules-group-header .btn-group {
    flex: initial;
}

.query-builder .rules-group-header .group-conditions .btn.readonly:not(.active),
.query-builder .rules-group-header .group-conditions input[name$='_cond'] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.query-builder .rules-group-header .group-conditions .btn.readonly {
    border-radius: 3px;
}
.query-builder .rules-group-header .btn-group > .btn.active {
    color: var(--success);
}
.query-builder .rules-group-header .btn-group > .btn.active:before {
    background: var(--success);
    border: 1px solid var(--success);
    border-radius: 10px;
}

.query-builder .rules-list {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
}

.query-builder .rule-value-container {
    /* border-left: 1px solid #DDD; */
}

.query-builder .rule-value-container label {
    margin-bottom: 0;
    font-weight: normal;
}

.query-builder .rule-value-container label.block {
    display: block;
}

.query-builder .error-container {
    display: none;
    cursor: help;
    color: #F00;
}

.query-builder .has-error {
    background-color: #FDD;
    border-color: #F99;
}

.query-builder .has-error .error-container {
    /*display: inline-block !important;*/

}

.query-builder .rules-list > *::before, .query-builder .rules-list > *::after {
    content: '';
    position: absolute;
    left: -10px;
    width: 10px;
    height: calc(50% + 4px);
    border-color: #CCC;
    border-style: solid;
}

.query-builder .rules-list > *::before {
    top: -4px;
    border-width: 0 0 2px 2px;
}

.query-builder .rules-list > *::after {
    top: 50%;
    border-width: 0 0 0 2px;
}

.query-builder .rules-list > *:first-child::before {
    top: -12px;
    height: calc(50% + 14px);
}

.query-builder .rules-list > *:last-child::before {
    border-radius: 0 0 0 4px;
}

.query-builder .rules-list > *:last-child::after {
    display: none;
}

.query-builder.bt-checkbox-glyphicons .checkbox input[type='checkbox']:checked + label::after {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
}

.query-builder.bt-checkbox-glyphicons .checkbox label::after {
    padding-left: 4px;
    padding-top: 2px;
    font-size: 9px;
}

.query-builder .error-container + .tooltip .tooltip-inner {
    color: #F99 !important;
}

.query-builder p.filter-description {
    margin: 5px 0 0 0;
    background: #D9EDF7;
    border: 1px solid #BCE8F1;
    color: #31708F;
    border-radius: 5px;
    padding: 2.5px 5px;
    font-size: .8em;
}

.query-builder .rules-group-header [data-invert] {
    margin-left: 5px;
}

.query-builder .drag-handle {
    cursor: move;
    vertical-align: middle;
    margin-left: 5px;
}

.query-builder .dragging {
    position: fixed;
    opacity: .5;
    z-index: 100;
}

.query-builder .dragging::before, .query-builder .dragging::after {
    display: none;
}

.query-builder .rule-placeholder {
    border: 1px dashed #BBB;
    opacity: .7;
}

/* ============================================================
 * Responsive / mobile (<= 767px)
 * Lo strumento "regole" è denso e in orizzontale: su schermi
 * stretti impiliamo le tre zone dell'header (azioni, E/O, AI) e
 * portiamo a tutta larghezza i campi della singola regola, con
 * tasti più ampi e tappabili.
 * ============================================================ */
@media (max-width: 767px) {
    /* Recupera spazio orizzontale: meno padding e meno rientro
       della lista annidata. */
    .query-builder .rules-group-container {
        padding: 8px;
    }
    .query-builder .rules-list {
        padding-left: 8px;
    }

    /* Header in colonna: azioni / condizioni E-O / AI ciascuna su
       una propria riga a piena larghezza. */
    .query-builder .rules-group-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Annulla i "margin-left:auto" che spingono a destra: una volta
       impilati non servono più, e ogni gruppo prende tutta la riga. */
    .query-builder .rules-group-header .group-actions,
    .query-builder .rules-group-header .group-conditions,
    .query-builder .rules-group-header .aiwizard-group-container {
        margin-left: 0;
        width: 100%;
    }

    /* La toggle E/O diventa un segmented control a tutta larghezza
       con i due segmenti di pari dimensione. */
    .query-builder .rules-group-header .group-conditions {
        display: flex;
        height: auto;
    }
    .query-builder .rules-group-header .group-conditions > .btn {
        flex: 1;
    }

    /* Ogni zona della regola (filtro / operatore / valore) va a
       tutta larghezza così i select non si schiacciano. */
    .query-builder .rule-container .rule-filter-container,
    .query-builder .rule-container .rule-operator-container,
    .query-builder .rule-container .rule-value-container {
        min-width: 100%;
        flex-basis: 100%;
    }
    .query-builder .rule-container .rule-filter-container .form-control,
    .query-builder .rule-container .rule-operator-container .form-control,
    .query-builder .rule-container .rule-value-container .form-control {
        width: 100%;
    }

    /* Il tasto "Elimina" della regola: invece di galleggiare da solo
       a destra come bersaglio minuscolo, diventa una riga piena sotto
       i campi, ben tappabile. */
    .query-builder .rule-container .rule-header {
        order: 99;
        margin-left: 0;
        width: 100%;
    }
    .query-builder .rule-container .rule-actions,
    .query-builder .rule-container .rule-actions > .btn {
        width: 100%;
    }
}

/* ============================================================
 * Etichette lunghe e simili nei select delle regole (filtro / operatore /
 * valore). Quando il testo dell'opzione selezionata eccede la larghezza del
 * controllo il browser lo taglia: mostriamo i puntini di sospensione così il
 * troncamento è pulito, mentre il nome completo resta leggibile come tooltip
 * (attributo title impostato via JS) al passaggio del mouse.
 * ============================================================ */
.query-builder .rule-filter-container select.form-control,
.query-builder .rule-operator-container select.form-control,
.query-builder .rule-value-container select.form-control {
    max-width: 100%;
    text-overflow: ellipsis;
}