.thesaurus-tagify .tagify__dropdown__item {
    font-size: 0.7rem !important;
    white-space: normal !important;
    height: min-content !important;
}

.tagify__input {
    margin: 1px 5px 5px 5px !important;
    font-size: 0.8rem;
    min-height: 3.8em !important;
}

/* For wrapping tags in new lines and filled tags */
.tagify {
    flex-wrap: wrap;
    --tag-inset-shadow-size: 200em;
    --placeholder-color: rgba(var(--bs-body-color-rgb), .65) !important;
    --placeholder-color-focus: rgba(var(--bs-body-color-rgb), .65) !important;
}

/* Prevents the help button from "growing" when invalid-feedback is displayed */
.input-group .input-group-append .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: calc(3.5rem + calc(var(--bs-border-width) * 2)); /* Same height as class form-floating */
}

.input-right-no-round-corners {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Makes the square corners round */
.input-group-text {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}


.input-right-with-round-corners {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Spacing to all sides */
.card-body {
    padding: 1.0rem;
}

/* Spacing between input fields */
.card-body .row>[class*="col-"] {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Spacing between accordion body */
.accordion-body {
    padding: 0.5rem;
}

/* Spacing between textarea and accordion */
.accordion-body .input-group {
    margin: 0;
}

/* Reset for Tagify container spacing */
/*.tagify {
    margin: 5px;
}*/

/* Adjust padding for special uses (thesaurus input fields) */
.reduce-padding {
    padding: 0.5rem !important;
}

.input-margin-top-bottom {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.round-corners-left {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

/*  ============================================================================
    Affiliation Dropdown Fixes (Issue #686)
    ============================================================================
    Prevents text overlap on slim screens for affiliation dropdowns.
    Ensures dropdown items are readable with proper text truncation.
    ============================================================================ */

/* Affiliation dropdown items - prevent text overlap on slim screens */
.tagify__dropdown.affiliation .tagify__dropdown__item {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
    height: auto !important;
    min-height: 2rem;
    line-height: 1.4;
    padding: 0.5em 0.75em !important;
}

/* Custom template styling for affiliation dropdown items with subtext */
.tagify__dropdown.affiliation .tagify__dropdown__item__text {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagify__dropdown.affiliation .tagify__dropdown__item__subtext {
    display: block;
    font-size: 0.85em;
    margin-top: 0.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* Allow dropdown items with subtext to have more height */
.tagify__dropdown.affiliation .tagify__dropdown__item:has(.tagify__dropdown__item__subtext) {
    height: auto !important;
    min-height: 3rem;
    white-space: normal !important;
}

/* Ensure dropdown has reasonable width across all screen sizes */
.tagify__dropdown.affiliation .tagify__dropdown__wrapper {
    min-width: 250px;
    max-width: 100%;
    width: auto;
}

/* Minimum width for affiliation input fields on all screen sizes */
[id*="affiliation"].tagify {
    min-width: 200px;
}

/* Mobile optimization - improve readability on very small screens */
@media (max-width: 576px) {
    .tagify__dropdown.affiliation .tagify__dropdown__wrapper {
        min-width: 200px;
        max-width: calc(100vw - 20px);
    }
    
    /* Ensure dropdown items remain readable on mobile */
    .tagify__dropdown.affiliation .tagify__dropdown__item {
        font-size: 0.85rem;
        padding: 0.6em 0.75em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/*  ============================================================================
    End of Affiliation Dropdown Fixes (Issue #686)
    ============================================================================ */