/* ==========================================================================
   tbz-select.css: single source of truth for <select> dropdown appearance.

   Why this file exists
   --------------------
   tbz-theme.css sets `background: ... !important` on .tbz-soft-input and the
   `.tbz-main form select` shorthand. Both wipe Bootstrap's chevron
   (background-image), so dropdowns rendered as plain boxes with no affordance.

   This file re-applies the chevron, right padding, and the interaction states
   for EVERY single-value <select> in the app (Django widgets, hand-written
   template selects, filter bars). No per-form class is needed.

   Load order: after tbz-theme.css.

   Opt out:     add `.tbz-select-custom` to a <select> that draws its own chevron.
   Placeholder: an empty-value <option> that is selected renders muted.
   Multi-select (`multiple` or `size`) is left native on purpose.
   ========================================================================== */

:root {
    --tbz-select-pad-end: 2.5rem;
}

/* The chevron is a data URI (CSS variables are not readable inside one), so its
   colours are literal: #6b7280 idle (readable on light and dark surfaces),
   #0f8a5f hover/focus (brand), #b4bcc6 disabled. */
select:not([multiple]):not([size]):not(.tbz-select-custom) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
    padding-right: var(--tbz-select-pad-end);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 14px 14px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Hover and focus: chevron picks up the brand colour */
select:not([multiple]):not([size]):not(.tbz-select-custom):hover:not(:disabled),
select:not([multiple]):not([size]):not(.tbz-select-custom):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f8a5f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

select:not([multiple]):not([size]):not(.tbz-select-custom):hover:not(:disabled):not(:focus) {
    border-color: var(--tbz-primary) !important;
}

/* Disabled */
select:not([multiple]):not([size]):not(.tbz-select-custom):disabled {
    cursor: not-allowed;
    opacity: .7;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b4bcc6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Validation: keep the chevron, add the state border (Bootstrap swaps the
   icon for a status glyph; we keep one consistent icon and colour the border) */
select.is-invalid:not([multiple]):not([size]):not(.tbz-select-custom) {
    border-color: var(--bs-form-invalid-border-color, #dc3545) !important;
    padding-right: var(--tbz-select-pad-end);
}

select.is-valid:not([multiple]):not([size]):not(.tbz-select-custom) {
    border-color: var(--bs-form-valid-border-color, #198754) !important;
    padding-right: var(--tbz-select-pad-end);
}

/* Placeholder state: empty-value option selected => muted text.
   Options themselves stay in the normal colour inside the open list. */
select:not([multiple]):not([size]):has(> option[value=""]:checked) {
    color: var(--tbz-placeholder);
}

select:not([multiple]):not([size]) > option {
    color: var(--tbz-text-dark);
}

select:not([multiple]):not([size]) > option[value=""] {
    color: var(--tbz-placeholder);
}

/* Small size keeps a tighter chevron gutter */
select.form-select-sm:not([multiple]):not([size]):not(.tbz-select-custom) {
    --tbz-select-pad-end: 2.1rem;
    background-position: right .65rem center !important;
    background-size: 12px 12px !important;
}

/* Auth pages put an icon on the left; the right gutter stays for the chevron */
.tbz-auth-input-wrap select:not([multiple]):not([size]):not(.tbz-select-custom) {
    padding-right: var(--tbz-select-pad-end);
}

/* Windows/Chromium renders the option list with the OS palette; force the
   theme surface so the dark theme does not show white-on-white. */
html.dark select option,
[data-bs-theme="dark"] select option {
    background-color: var(--tbz-input-bg);
}

@media (prefers-reduced-motion: reduce) {
    select:not([multiple]):not([size]):not(.tbz-select-custom) {
        transition: none;
    }
}