/* Custom CSS for Checklistify Admin Interface */

/* Make the overall container appropriately sized to accommodate columns */
.field-items .selector,
.fieldset .selector,
.form-row .selector {
    width: 100% !important;
    max-width: none !important;
    min-width: 750px !important;
}

/* Make filter_horizontal widget columns appropriately sized */
.selector {
    width: 100% !important;
    max-width: none !important;
    min-width: 750px !important;
    display: flex !important;
    justify-content: space-between !important;
}

.selector-available,
.selector-chosen {
    width: 48% !important;
    min-width: 360px !important;
    flex: 1 !important;
}

.selector-available select,
.selector-chosen select {
    width: 100% !important;
    min-width: 345px !important;
    height: 350px !important;
}

/* Ensure the selector container has proper spacing */
.selector .selector-available,
.selector .selector-chosen {
    margin-right: 15px !important;
}

.selector .selector-chosen {
    margin-right: 0 !important;
}

/* Make sure the filter horizontal widget looks good on larger screens */
@media (min-width: 1200px) {
    .field-items .selector,
    .fieldset .selector,
    .form-row .selector {
        min-width: 900px !important;
    }

    .selector {
        min-width: 900px !important;
    }

    .selector-available,
    .selector-chosen {
        width: 49% !important;
        min-width: 435px !important;
    }

    .selector-available select,
    .selector-chosen select {
        min-width: 420px !important;
        height: 400px !important;
    }
}

/* Extra large screens */
@media (min-width: 1600px) {
    .field-items .selector,
    .fieldset .selector,
    .form-row .selector {
        min-width: 1050px !important;
    }

    .selector {
        min-width: 1050px !important;
    }

    .selector-available,
    .selector-chosen {
        width: 49% !important;
        min-width: 510px !important;
    }

    .selector-available select,
    .selector-chosen select {
        min-width: 495px !important;
        height: 450px !important;
    }
}

/* Additional styling for better usability */
.selector select {
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
}

.selector .selector-filter input {
    width: 100% !important;
}

/* Style the selector buttons */
.selector .selector-chooseall,
.selector .selector-add,
.selector .selector-remove,
.selector .selector-clearall {
    width: 120px !important;
    margin: 5px !important;
}