.citadel-input-container {
    display: flex;
    flex-wrap: wrap; /* Allows the error message to wrap to the next line */
    align-items: center; /* Changed from flex-start to center for vertical alignment */
    /* margin-right: 15px; /* Retained from original, adjust if needed */
    width: auto;
    height: auto;
    /* margin-bottom: 0; /* Form-column gap will handle vertical spacing between components */
}

    .citadel-input-container.label-left {
        /* Default flex direction is row, flex-wrap handles label and wrapper */
    }

    .citadel-input-container.label-right {
        /* For label-right, you might want to adjust order or use flex-direction: row-reverse */
        /* If using row-reverse, ensure error message styling in GetErrorMessageStyle considers this */
    }

.citadel-input-label {
    font-size: var(--main-font-size);
    color: var(--main-font-color);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0; /* Prevent label from shrinking */
}

.label-left .citadel-input-label {
    margin-right: 20px; /* This margin is used in GetErrorMessageStyle calculation */
}

.label-right .citadel-input-label {
    margin-left: 20px;
    /* Consider order for label-right if not using flex-direction: row-reverse on container */
    /* order: 1; */ /* If .citadel-input-wrapper is order: 0 */
}

.citadel-input-wrapper {
    position: relative;
    display: flex; /* For internal alignment of input and icons like password toggle */
    flex-grow: 1; /* Allows wrapper to take available space next to label */
    min-width: 0; /* Prevents overflow issues with flex children like long inputs */
    width: auto;  /* Fallback, InputWidth prop or flex behavior will often dictate final width */
    height: auto;
}

.citadel-input-box {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    box-sizing: border-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: var(--main-font-size);
    background-color: var(--inputSelect-background-color);
    color: var(--input-font-color);
    transition: all 0.2s ease;
    /* width: auto; /* Default, specific width set by style="@InputWidth" or 100% of wrapper */
}

/* Ensure input box takes full width of its wrapper if InputWidth is not 'auto' or specific pixel value */
/* This is important when InputWidth is something like "100%" or not set, relying on wrapper size */
.citadel-input-wrapper > .citadel-input-box {
     width: 100%; /* Makes the input fill the wrapper */
}


.citadel-input-box:not(:disabled):focus { /* MODIFIED: Added :not(:disabled) */
    outline: none;
    border-color: var(--input-border-color-hover);
    box-shadow: 0 2px 4px var(--griditem-boxshadow-color);
    background-color: var(--input-background-color-hover);
}

.citadel-input-box:not(:disabled):hover { /* MODIFIED: Added :not(:disabled) */
    background-color: var(--input-background-color-hover);
    border-color: var(--input-border-color-hover);
}

.citadel-input-box:disabled { /* MODIFIED: Updated styles for "label-like" appearance */
    background-color: transparent !important; /* Transparent background */
    border: 1px solid var(--input-border-color); /* Normal border */
    color: var(--input-font-color);           /* Normal text color */
    cursor: default;                          /* Cursor to indicate static text */
    opacity: 1;                               /* No dimming */
    box-shadow: none !important;              /* Ensure no shadow from other states */
    /* Inherits padding, font-size, border-radius etc. from .citadel-input-box */
}

.citadel-input-box::placeholder {
    color: rgba(0, 0, 0, 0.3); /* Original placeholder color */
    /* For disabled state, placeholder might not be visible if Value is present.
       If you want to style placeholder for your new disabled state, you might need:
       .citadel-input-box:disabled::placeholder { color: transparent; or specific color }
       However, typically a disabled input used as a label would display its Value, not placeholder.
    */
}

.citadel-input-error { /* Class added to citadel-input-box on error */
    border-color: var(--bs-danger) !important; /* Ensure consistent error color */
}

    /* MODIFIED: Added .citadel-input-box and :not(:disabled) to the selector */
    .citadel-input-box.citadel-input-error:not(:disabled):focus {
        border-color: var(--bs-danger) !important;
        /* Note: background-color and box-shadow from general .citadel-input-box:not(:disabled):focus will also apply here.
           If that's not desired for errors, add specific overrides for those properties here. */
    }

.citadel-input-error-message {
    color: var(--bs-danger); /* Consistent error color, e.g., your Bootstrap danger color */
    font-size: 0.75rem; /* Smaller font for error messages */
    margin-top: 4px;    /* Space between the input wrapper and the error message */
    flex-basis: 100%;   /* Ensures it takes the full width of the container, causing it to wrap below */
    /* The 'style' attribute from GetErrorMessageStyle() will handle margin-left and display:block */
}

/* Password toggle button */
.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--button-disabled-font-color); /* Or a more suitable default color */
    padding: 0;
    font-size: var(--main-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .password-toggle:hover { /* This hover will still apply if the button itself isn't disabled with the input */
        color: var(--main-title-color-hover); /* Or your preferred hover color */
    }

/* Date input styling */
.date-input::-webkit-calendar-picker-indicator {
    filter: opacity(0.5);
    cursor: pointer;
}

    .date-input::-webkit-calendar-picker-indicator:hover {
        filter: opacity(0.8);
    }

/* Textarea styling */
.citadel-textarea {
    min-height: 40px;
    height: auto;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    font-size: var(--main-font-size);
}

/* Search styling */
.search-input-container {
    position: relative;
    display: flex; /* Align icon and input */
    align-items: center;
    width: 100%; /* Take full width of its parent wrapper */
}

.search-icon {
    position: absolute;
    left: 10px; /* Adjust as needed */
    color: var(--button-disabled-font-color); /* Or a more suitable color */
}

.search-input {
    padding-left: 32px; /* Space for the icon */
    width: 100%; /* Input takes full width of .search-input-container */
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--button-disabled-font-color);
    padding: 0;
    font-size: var(--main-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .search-clear:hover { /* This hover will still apply if the button itself isn't disabled */
        color: var(--main-title-color-hover);
    }

/* Specific style for number inputs to control their appearance if not using InputWidth prop */
input[type="number"].citadel-input-box {
    /* width: 80px; /* Example fixed width, remove if InputWidth prop is preferred or 100% desired */
    /* If InputWidth is not set, it will take 100% of the wrapper due to .citadel-input-wrapper > .citadel-input-box */
}

    /* Remove spinner buttons from number inputs */
    input[type="number"].citadel-input-box::-webkit-outer-spin-button,
    input[type="number"].citadel-input-box::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

input[type="number"].citadel-input-box {
    -moz-appearance: textfield; /* For Firefox */
}