/* Allineamento celle della riga filtri */
.dataTable thead tr[class$="-filters"] th {
    padding: 4px !important;
    vertical-align: top !important; /* Evita che gli input fluttuino se una select si espande */
}

/* Stile Input di Testo e Filtri DataTables */
.dataTable th input.dt-custom-filter {
    width: 100%;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--main-blue-color);
    background-color: var(--main-blue-100) !important;
    border: 1px solid var(--main-blue-300) !important;
    border-radius: 20px !important;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* Campo Ricerca Globale DataTables */
.dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_filter label {
    text-align: right!important;
}

.dataTables_length select {
    padding: .375rem 1.75rem .375rem .75rem!important;
}

.dataTables_filter input {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 15px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--main-blue-color);
    background-color: var(--main-blue-100) !important;
    border: 1px solid var(--main-blue-300) !important;
    border-radius: 20px !important;
    outline: none;
    transition: all 0.2s;
    margin-left: 0.5rem;
}

.dataTable th input.dt-custom-filter::placeholder,
.dataTables_filter input::placeholder {
    font-style: italic;
    color: var(--main-blue-color) !important;
    opacity: 0.7;
    font-size: 11px;
}

.dataTable th input.dt-custom-filter:focus,
.dataTables_filter input:focus {
    background-color: var(--main-blue-50) !important;
    border-color: var(--main-blue-500) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--main-blue-rgb), 0.1) !important;
}

/* Stile Select2 */
.dataTable th .select2-container .select2-selection--multiple,
.dataTable th .select2-container .select2-selection--single {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 12px;
    color: var(--main-blue-color);
    background-color: var(--main-blue-100) !important;
    border: 1px solid var(--main-blue-300) !important;
    border-radius: 20px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 0 !important; /* Rimuove padding interno per allineamento */
    transition: all 0.2s ease-in-out;
}

/* Background bianco su focus o apertura */
.dataTable th .select2-container.select2-container--focus .select2-selection--multiple,
.dataTable th .select2-container.select2-container--focus .select2-selection--single,
.dataTable th .select2-container.select2-container--open .select2-selection--multiple,
.dataTable th .select2-container.select2-container--open .select2-selection--single {
    background-color: var(--main-blue-50) !important;
    border-color: var(--main-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--main-blue-rgb), 0.1) !important;
}

/* Ridimensionamento tag (choice) per Select2 Multiple nei filtri */
.dataTable th .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 4px !important;
    padding: 0 8px 0 20px !important; /* Spazio per la X a sinistra del tag */
    font-size: 10px !important;
    height: 22px !important;
    line-height: 18px !important;
    display: flex;
    align-items: center;
    border-radius: 15px !important;
    background-color: var(--main-blue-50) !important;
    border: 1px solid var(--main-blue-200) !important;
}

/* Forza il colore del placeholder e del testo renderizzato per Select2 nei filtri */
.dataTable th .select2-container .select2-selection__rendered,
.dataTable th .select2-container .select2-selection__placeholder,
.dataTable th .select2-container .select2-search__field {
    color: var(--main-blue-color) !important;
    font-weight: 600 !important;
    padding-left: 0px !important; /* Allineamento esatto con input */
    padding-right: 35px !important; /* Spazio per freccia + eventuale X */
    margin-top: 0 !important;
    margin-left: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important; /* Reset line-height per affidarsi a flex alignment */
}

/* Allineamento specifico per Select2 Multiple */
.dataTable th .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding-left: 8px !important;
}

/* Sposta la X di cancellazione a destra */
.dataTable th .select2-selection__clear {
    position: absolute !important;
    right: 25px !important;
    top: 45% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--main-red-color) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    z-index: 2;
}

/* Rende l'arrow della Select2 fisso a destra */
.dataTable th .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px !important;
    right: 5px !important;
    top: 1px !important;
}

/* Placeholder specifico per Select2 */
.dataTable th .select2-selection__placeholder,
.dataTable th .select2-search__field::placeholder {
    color: var(--main-blue-color) !important;
    opacity: 0.7 !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* Sistema il placeholder della Select2 Search Field */
.dataTable th .select2-container .select2-search__field::placeholder,
.dataTable th .select2-container .select2-search__field {
    color: var(--main-blue-color) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}