/* NumericTextBox wrapper */
/* NumericTextBox wrapper */
.custom-telerik-numerictextbox.k-numerictextbox {
    width: 270px !important; /* fixed width */
    height: 48px !important; /* fixed height */
    flex: 0 0 270px !important; /* prevent flex-grow/shrink */
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    display: flex;
    align-items: center;
    padding: 12px 16px;
}


/* Input field inside NumericTextBox */
.custom-telerik-numerictextbox .k-input {
    width: 270px !important; /* Figma text width */
    height: 48px !important; /* Figma text height */
    display: flex;
    flex: 0 0 270px !important;
    align-items: center;
    justify-content: flex-start;
    line-height: 24px;
    color: #333333 !important;
    font: inherit;
    /* overflow handling */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spin buttons (up/down arrows) */
.custom-telerik-numerictextbox .k-select {
    width: 24px !important; /* Figma icon width */
    height: 24px !important; /* Figma icon height */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #727171 !important; /* neutral gray */
}

/* Hover state */
.custom-telerik-numerictextbox.k-numerictextbox:hover {
    background-color: #F0FBFF !important; /* Figma hover background */
}

/* Focus state */
.custom-telerik-numerictextbox.k-numerictextbox.k-state-focused {
    background-color: #fff !important; /* keep white on focus */
    border-color: #007BFF !important; /* optional blue border accent */
}