.form-control[type="color"] {
    height: 3rem;
    width: 5rem;
    padding: 0.5rem 0.75rem;
}

.form-control {
    height: 2.5rem;
    color: var(--bs-gray-800);
    border: 1px solid var(--bs-gray-300);
    background-color: #fcfcfc;
    padding: 0.625rem 0.75rem;

    &:not(.disabled):hover:not(:focus-within) {
        border-color: var(--bs-gray-400);
    }

    &:not(.disabled):not(.invalid):focus-within {
        border-color: var(--bs-primary);
        color: var(--bs-gray-800);
    }

    &:not(.disabled):active {
        border-color: var(--bs-primary-active);
    }

    &.disabled {
        color: var(--bs-gray-400);
        background-color: var(--bs-gray-100);
        cursor: not-allowed;
        pointer-events: none;
    }

    &.invalid {
        border-color: var(--bs-danger);
    }

}

.input-group.input-group-solid.input-group-sm {
    border-radius: var(--radius-8);
}

/* ===========================================
   HOVER STATES
   =========================================== */

/* When form-control is hovered, apply same styles to sibling input-group-text (after) */
.form-control:not(.disabled):hover:not(:focus-within)+.input-group-text,
.form-control:not(.disabled):hover:not(:focus-within)~.input-group-text {
    border-color: var(--bs-gray-400);
}

/* When form-control is hovered, apply same styles to sibling input-group-text (before) */
.input-group:has(.form-control:not(.disabled):hover:not(:focus-within)) .input-group-text {
    border-color: var(--bs-gray-400);
}

/* When input-group-text or button inside is hovered, apply styles to ALL form-controls and current element */
.input-group:has(.input-group-text:hover) .form-control:not(.disabled):not(:focus-within),
.input-group:has(.input-group-text .btn:hover) .form-control:not(.disabled):not(:focus-within) {
    border-color: var(--bs-gray-400);
}

.input-group .input-group-text:hover,
.input-group .input-group-text:has(.btn:hover) {
    border-color: var(--bs-gray-400);
}

/* ===========================================
   FOCUS STATES
   =========================================== */

/* Fallback for browsers that don't support :has() - target elements after input */
.form-control:not(.disabled):not(.invalid):focus+.input-group-text,
.form-control:not(.disabled):not(.invalid):focus~.input-group-text {
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

/* When form-control is focused, apply same styles to ALL input-group-text elements */
.input-group:has(.form-control:not(.disabled):not(.invalid):focus) .input-group-text {
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

/* When input-group-text or button inside is focused, apply styles to ALL form-controls and input-group-text */
.input-group:has(.input-group-text:focus-within) .form-control:not(.disabled):not(.invalid),
.input-group:has(.input-group-text .btn:focus) .form-control:not(.disabled):not(.invalid) {
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

.input-group .input-group-text:focus-within,
.input-group .input-group-text:has(.btn:focus) {
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

/* Override theme bundle form-control focus to use primary color */
.form-control:focus {
    border-color: var(--bs-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

/* Add transition to input-group-text to match form-control transitions */
.input-group .input-group-text {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* ===========================================
   ACTIVE STATES
   =========================================== */

/* When form-control is active, apply same styles to sibling input-group-text (after) */
.form-control:not(.disabled):active+.input-group-text,
.form-control:not(.disabled):active~.input-group-text {
    border-color: var(--bs-primary-active);
}

/* When form-control is active, apply same styles to sibling input-group-text (before) */
.input-group:has(.form-control:not(.disabled):active) .input-group-text {
    border-color: var(--bs-primary-active);
}

/* When input-group-text or button inside is active, apply styles to ALL form-controls and input-group-text */
.input-group:has(.input-group-text:active) .form-control:not(.disabled),
.input-group:has(.input-group-text .btn:active) .form-control:not(.disabled) {
    border-color: var(--bs-primary-active);
}

.input-group .input-group-text:active,
.input-group .input-group-text:has(.btn:active) {
    border-color: var(--bs-primary-active);
}

/* ===========================================
   INVALID STATE
   =========================================== */

/* Handle invalid state - check if parent input-group has invalid class */
.input-group.invalid .form-control,
.input-group.invalid .input-group-text {
    border-color: var(--bs-danger);
}

/* ===========================================
   DISABLED STATE
   =========================================== */

/* Handle disabled state - check if parent input-group has disabled class */
.input-group.disabled .form-control,
.input-group.disabled .input-group-text {
    color: var(--bs-gray-400);
    background-color: var(--bs-gray-100) !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================================
   BUTTON-SPECIFIC STYLES IN INPUT GROUPS
   =========================================== */

/* Ensure buttons with input-group-text class inherit proper border styling */
/* Override the border-*-0 classes from ButtonType.InputOutline */
/* Using very specific selectors to override Bootstrap utilities */
.input-group button.input-group-text.btn.btn-outline,
.input-group .btn.btn-outline.input-group-text {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--bs-gray-300) !important;
    background-color: var(--bs-gray-50);
}

/* Button hover state - when form-control is hovered */
.input-group:has(.form-control:not(.disabled):hover:not(:focus-within)) button.input-group-text.btn.btn-outline,
.input-group:has(.form-control:not(.disabled):hover:not(:focus-within)) .btn.btn-outline.input-group-text {
    border-color: var(--bs-gray-400) !important;
}

/* Form-control hover state - when button is hovered */
.input-group:has(button.input-group-text.btn:hover) .form-control:not(.disabled):not(:focus-within),
.input-group:has(.btn.input-group-text:hover) .form-control:not(.disabled):not(:focus-within) {
    border-color: var(--bs-gray-400);
}

/* Button focus state - when form-control is focused */
.input-group:has(.form-control:not(.disabled):not(.invalid):focus) button.input-group-text.btn.btn-outline,
.input-group:has(.form-control:not(.disabled):not(.invalid):focus) .btn.btn-outline.input-group-text {
    border-color: var(--bs-primary) !important;
    color: var(--bs-gray-800);
}

/* Form-control focus state - when button is focused */
.input-group:has(button.input-group-text.btn:focus) .form-control:not(.disabled):not(.invalid),
.input-group:has(.btn.input-group-text:focus) .form-control:not(.disabled):not(.invalid) {
    border-color: var(--bs-primary);
    color: var(--bs-gray-800);
}

/* Button active state - when form-control is active */
.input-group:has(.form-control:not(.disabled):active) button.input-group-text.btn.btn-outline,
.input-group:has(.form-control:not(.disabled):active) .btn.btn-outline.input-group-text {
    border-color: var(--bs-primary-active) !important;
}

/* Form-control active state - when button is active */
.input-group:has(button.input-group-text.btn:active) .form-control:not(.disabled),
.input-group:has(.btn.input-group-text:active) .form-control:not(.disabled) {
    border-color: var(--bs-primary-active);
}

/* Button itself when being pressed/clicked - ensure border stays primary */
.input-group:has(.form-control:not(.disabled):not(.invalid):focus) button.input-group-text.btn.btn-outline:active,
.input-group:has(.form-control:not(.disabled):not(.invalid):focus) .btn.btn-outline.input-group-text:active {
    border-color: var(--bs-primary-active) !important;
}

/* Button active state when input is focused */
.input-group button.input-group-text.btn.btn-outline:active,
.input-group .btn.btn-outline.input-group-text:active {
    border-color: var(--bs-primary) !important;
}

/* Button disabled state */
.input-group.disabled button.input-group-text.btn.btn-outline,
.input-group.disabled .btn.btn-outline.input-group-text,
.input-group button.input-group-text.btn[disabled],
.input-group .btn.input-group-text[disabled] {
    color: var(--bs-gray-400);
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-300) !important;
    border-width: 1px !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button invalid state */
.input-group.invalid button.input-group-text.btn.btn-outline,
.input-group.invalid .btn.btn-outline.input-group-text {
    border-color: var(--bs-danger) !important;
}

/* Invalid state hover behavior - change to gray (only when not focused) */
.input-group.invalid:has(.form-control:hover:not(:focus)) button.input-group-text.btn.btn-outline,
.input-group.invalid:has(.form-control:hover:not(:focus)) .btn.btn-outline.input-group-text {
    border-color: var(--bs-gray-400) !important;
}

.text-addon {
    color: var(--bs-gray-600) !important;

    &.disabled {
        color: var(--bs-gray-500) !important;
    }
}

.tagify {
    --placeholder-color: var(--bs-gray-500);
}

.form-select.invalid {
    border-color: var(--bs-danger);
}

/* Select2 invalid state */
.form-select.invalid+.select2-container--bootstrap5 .select2-selection--single,
.form-select.invalid+.select2-container--bootstrap5 .select2-selection--multiple {
    border-color: var(--bs-danger) !important;
}

/* Select2 invalid state hover behavior - change to gray (only when not focused/open) */
.form-select.invalid+.select2-container--bootstrap5:not(.select2-container--disabled):not(.select2-container--focus):not(.select2-container--open) .select2-selection--single:hover,
.form-select.invalid+.select2-container--bootstrap5:not(.select2-container--disabled):not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple:hover {
    border-color: var(--bs-gray-400) !important;
}

/* Input invalid state hover behavior - change to gray (only when not focused) */
.form-control.invalid:hover:not(:focus),
.input-group .form-control.invalid:hover:not(:focus),
.form-control.invalid:hover:not(:focus),
.input-group .form-control.invalid:hover:not(:focus) {
    border-color: var(--bs-gray-400) !important;
}

/* Ensure original select stays hidden when Select2 is active, regardless of validation state */
.form-select[data-control="select2"] {
    display: none !important;
}

.input-group.input-group-solid .input-group-text {
    border-color: transparent;
}

.input-group-sm .form-control,
.input-group-sm .input-group-text,
.input-group-sm .message-text {
    font-size: var(--size-14);
    height: 2.5rem;
}

input.input-number {
    background-color: #fcfcfc;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.425rem;
    height: 2.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    display: block;
    /* not flex */
    width: 100%;
    /* important: scale with container */
    line-height: 1.5;
    /* match form-select */
    color: var(--bs-gray-700);
}

.input-number:focus-visible,
input.input-number:focus-visible {
    border-color: var(--bs-primary);
    opacity: 1;
    outline: none;
    outline-offset: 0;
}

input.input-date {
    background-color: #fcfcfc !important;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.425rem;
    height: 2.5rem;
}

textarea.form-control {
    min-height: 9.375rem;
}

.input-group.input-group-sm tags.form-control.tagify {
    height: unset;
    min-height: 2.5rem;
}

.daterangepicker {
    .ranges ul {
        padding: var(--spacing-10) var(--spacing-12);
        min-width: fit-content;
        white-space: nowrap;
        color: var(--bs-gray-700);
        transition: color .2s ease;
    }

    .ranges li {
        font-weight: 400;
        font-size: var(--size-12);
        line-height: var(--size-16);
        border-radius: var(--radius-8);
    }

    .calendar-table th,
    .calendar-table td {
        font-weight: 400;
        font-size: var(--size-14);
        line-height: var(--size-20);
    }

    .drp-buttons .drp-selected,
    .drp-buttons .btn {
        font-weight: 400;
        font-size: var(--size-14);
        line-height: var(--size-16);
    }
}

/* ===========================================
   SELECT MULTIPLE LOADING STATE
   =========================================== */

/* Position the select-container for absolute positioning of loading overlay */
.select-container {
    position: relative;
}

/* Prevent all interactions when loading */
.select-container.loading {
    pointer-events: none;
}

/* Loading overlay positioned absolutely over the select2 */
.select-loading-overlay {
    background-color: #fcfcfc;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.475rem;
    height: 2.5rem;
    z-index: 10;
    cursor: not-allowed;
}

/* Fade the select2 container when loading */
.select-container.loading .select2-container {
    opacity: 0.5;
}
.form-control:disabled::placeholder {
  color: var(--bs-gray-400);
}