/* DriveLens — unified inputs & selects (filters, forms) */

:root {
    --dl-control-bg: rgba(8, 10, 14, 0.92);
    --dl-control-bg-hover: rgba(12, 14, 18, 0.98);
    --dl-control-border: rgba(255, 255, 255, 0.1);
    --dl-control-border-focus: rgba(225, 29, 46, 0.55);
    --dl-control-shadow-focus: 0 0 0 3px rgba(225, 29, 46, 0.14);
    --dl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa3b2' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}

html {
    color-scheme: dark;
}

select,
textarea,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"] {
    width: 100%;
    padding: 11px 14px;
    background: var(--dl-control-bg);
    border: 1px solid var(--dl-control-border);
    border-radius: var(--radius-md, 12px);
    color: var(--color-text, #f0f2f5);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color var(--transition, 0.22s ease), box-shadow var(--transition, 0.22s ease), background var(--transition, 0.22s ease);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: var(--dl-chevron);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

select:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
    border-color: var(--color-border-strong, rgba(255, 255, 255, 0.14));
    background-color: var(--dl-control-bg-hover);
}

select:focus,
textarea:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    outline: none;
    border-color: var(--dl-control-border-focus);
    box-shadow: var(--dl-control-shadow-focus);
}

select option,
select optgroup {
    background: var(--color-bg-elevated, #0e1014);
    color: var(--color-text, #f0f2f5);
}

select option:checked {
    background: linear-gradient(0deg, rgba(225, 29, 46, 0.22), rgba(225, 29, 46, 0.22));
    color: #fff;
}

select option[disabled],
select option[value=""] {
    color: var(--color-text-muted, #6b7380);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted, #6b7380);
    opacity: 1;
}

.dl-field-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-text-muted, #6b7380);
}

.dl-field-wrap {
    position: relative;
}

.dl-field-wrap--datalist input {
    padding-right: 14px;
}