/* ============================= */
/* Общий контейнер форм          */
/* ============================= */

.dt-filter {
    font-size: .875rem;
}

/* ============================= */
/* Floating label (Bootstrap-friendly) */
/* ============================= */

.dt-floating {
    position: relative;
}

    /* input и select — размеры Bootstrap */
    .dt-floating .form-control,
    .dt-floating .form-select {
        padding-top: 1.1rem;
    }

    /* label по центру */
    .dt-floating label {
        position: absolute;
        top: 50%;
        left: .75rem;
        transform: translateY(-50%);
        font-size: .75rem;
        color: #6c757d;
        background: #fff;
        padding: 0 .25rem;
        pointer-events: none;
        transition: all .15s ease-in-out;
    }

    /* input → label поднимается */
    .dt-floating input:not(:placeholder-shown) + label,
    .dt-floating input:focus + label {
        top: -.35rem;
        font-size: .7rem;
    }

    /* select → label всегда сверху */
    .dt-floating .dt-basic-select + label {
        top: -.35rem;
        font-size: .7rem;
    }

/* ============================= */
/* Basic filters grid            */
/* ============================= */

.dt-filter-basic .col-md-2 {
    min-width: 160px;
}

/* ============================= */
/* Advanced filters layout       */
/* ============================= */

.filter-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 8px;
    border-left: 4px solid #0d6efd;
}

    .filter-row.logic-OR {
        border-left-color: #6c757d;
        background: #f8f9fa;
    }

    .filter-row.logic-AND {
        border-left-color: #0d6efd;
    }

.filter-logic-label {
    font-size: .75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* размеры частей advanced */
.filter-field {
    width: 180px;
    flex-shrink: 0;
}

.filter-operator {
    width: 120px;
    flex-shrink: 0;
}

.filter-value-wrap {
    flex: 1;
    min-width: 0;
}

/* ============================= */
/* Chips (multi-value inputs)    */
/* ============================= */

.dt-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border: 1px solid #ced4da;
    border-radius: .375rem;
}

.dt-chip {
    background: #e7f1ff;
    padding: 2px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
}

.dt-chip button {
    border: none;
    background: none;
    cursor: pointer;
}

.dt-chip-input {
    border: none;
    outline: none;
    min-width: 80px;
    font-size: .75rem;
}