﻿/* Collapsed dropdown wrapper */
.custom-telerik-dropdown-classes .k-dropdown-wrap,
.k-picker-solid.custom-telerik-dropdown-classes {
    width: 270px; /* Figma width */
    height: 48px; /* Figma height */
    flex: 0 0 auto; /* prevent flex-grow/shrink */
    display: flex;
    justify-content: space-between; /* text left, icon right */
    align-items: center; /* vertical centering */
    padding: 12px 16px;
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important; /* Figma radius */
    background-color: #fff !important; /* default white */
    font: inherit;
}

/* Selected text (collapsed state) */
.custom-telerik-dropdown-classes .k-input {
    width: 214px; /* Figma text width */
    height: 24px; /* Figma text height */
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: flex-start; /* left aligned */
    line-height: 24px;
    color: #333333 !important;
    font: inherit;
    /* overflow handling */
    overflow: hidden;
    text-overflow: ellipsis; /* show … when too long */
    white-space: nowrap; /* keep on one line */
}

/* Collapsed icon (arrow down) */
.custom-telerik-dropdown-classes .k-select {
    width: 24px; /* Figma icon width */
    height: 24px; /* Figma icon height */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #727171 !important; /* neutral gray icon */
}

/* Hover state */
.k-picker-solid.custom-telerik-dropdown-classes:hover {
    background-color: #F0FBFF !important; /* Figma hover background */
}

/* Focus state */
.k-picker-solid.custom-telerik-dropdown-classes.k-state-focused {
    background-color: #fff !important; /* keep white on focus */
    border-color: #007BFF !important; /* optional blue border accent */
}
