/*
    Dropdowns — and, at the end of this file, date & time fields. Every single-choice <select> in the app gets the "soft" look: a lavender-grey filled
    field with a violet chevron chip, a violet focus ring, a dashed disabled state, a red error state,
    and (in browsers that allow it) a styled open list.

    WHY IT IS WRITTEN THIS WAY
    * assets/css/site.css forces `select { appearance: auto !important; background-image: none !important }`
      (the operating system's look), and many screens style their own selects (`.cc-filters select`,
      `.qz-select`, `.an-sel`, `.co-profile-form select.co-form-input`, `#co-course-wizard select` …).
      The first version of this file only matched three classes and let page styles win, so half the
      app never changed. Now every select is matched and this file wins.
    * Every rule starts with the same selector — `select` plus two never-matching id tests. The ids lift it to
      (2,0,1), above any page rule (the busiest is #id + class + element), and the exclusions sit in
      :where() so they add nothing. States (:hover, :focus …) are wrapped in :where() too, so they keep
      the same weight and win by coming later.
    * Only the LOOK is set here: border, radius, fill, chevron, text colour, focus ring, right padding.
      Size and spacing (height, width, left padding for an icon, font size, margins) stay with each
      screen, so a compact filter stays compact and an icon field keeps its icon room.

    LEFT ALONE
    * Multi-selects and list boxes ([multiple], [size]).
    * Anything with class "co-native-select" — the opt-out if a screen ever needs the plain look.
    * The teaching board (its layout does not load this file).

    Loaded after site.css / co-modal.css in _AuthenticatedLayout, _Layout, _NonAuthenticatedLayout,
    _InstitutionLayout, _InstitutionLeanLayout and _WebinarPublicLayout.
*/

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    padding-right: 44px !important;
    border: 1.5px solid #e4e1ef !important;
    border-radius: 12px !important;
    background-color: #f7f6fb !important;
    color: #1d1b2f !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;

    /* violet chevron in a soft chip; scales down in short (filter) selects */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23ece8fb'/%3E%3Cpath d='M9.5 12l4.5 4.5 4.5-4.5' fill='none' stroke='%235b3fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    background-size: auto min(26px, calc(100% - 10px)) !important;

    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(:hover) {
    border-color: #cfc6fb !important;
    background-color: #fbfaff !important;
}

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(:focus, :focus-visible) {
    border-color: #6d4aff !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(109, 74, 255, .15) !important;
    outline: none !important;
}

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(:disabled) {
    background-color: #f1f0f5 !important;
    color: #9a97ab !important;
    border-style: dashed !important;
    cursor: not-allowed;
    opacity: 1;
}

/* errors: Bootstrap's .is-invalid, MVC validation, aria-invalid, and the ".bad" field wrappers used by the lead forms */
select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(.is-invalid, .input-validation-error, [aria-invalid="true"], .bad select, .bad > select) {
    border-color: #e5484d !important;
    background-color: #fffafa !important;
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .12) !important;
}

/* nothing chosen yet: the "Select …" placeholder option (value="") reads as a hint, not a value */
select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(:has(option[value=""]:checked)) {
    color: #9a97ab !important;
}

/* the open list, where the browser draws it natively (Firefox, older browsers) */
select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option {
    color: #1d1b2f;
    background-color: #fff;
}

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) optgroup {
    color: #5b3fc4;
    font-weight: 700;
    font-style: normal;
}

/* Bootstrap's small variant */
select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(.form-select-sm) {
    padding-right: 36px !important;
    border-radius: 10px !important;
    background-position: right 5px center !important;
}

/* joined to a button or label in an .input-group: square the joined side, like Bootstrap does */
select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(.input-group > :not(:last-child)) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(.input-group > :not(:first-child)) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Select2 (a few payment filters) — same look for its closed box and list */
.select2-container--default .select2-selection--single {
    height: 40px;
    border: 1.5px solid #e4e1ef;
    border-radius: 12px;
    background-color: #f7f6fb;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 37px;
    padding-left: 12px;
    padding-right: 40px;
    color: #1d1b2f;
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37px;
    width: 34px;
    right: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #6d4aff;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(109, 74, 255, .15);
}

.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #e4e1ef;
    border-radius: 12px;
    background-color: #f7f6fb;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #6d4aff;
}

.select2-dropdown {
    border: 1.5px solid #e4e1ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(28, 22, 70, .12);
}

/* ---------- the open list: customizable select (Chrome / Edge 135+, Safari 27+) ---------- */
/* Elsewhere the native list shows. Behaviour is native either way: same element, same events,
   keyboard and screen-reader support. */
@supports (appearance: base-select) {
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) {
        -webkit-appearance: base-select !important;
        appearance: base-select !important;
    }

    /* our chevron is the background image */
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y)::picker-icon {
        display: none;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y):where(:open) {
        border-color: #6d4aff !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 4px rgba(109, 74, 255, .15) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%236d4aff'/%3E%3Cpath d='M9.5 16l4.5-4.5 4.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y)::picker(select) {
        appearance: base-select;
        margin-block: 6px;
        padding: 6px;
        min-inline-size: anchor-size(width);
        max-inline-size: min(560px, calc(100vw - 24px));
        max-block-size: min(340px, 60vh);
        overflow-y: auto;
        border: 1px solid #e4e1ef;
        border-radius: 14px;
        background: #fff;
        color: #1d1b2f;
        font-family: inherit;
        box-shadow: 0 18px 44px rgba(28, 22, 70, .16), 0 2px 6px rgba(28, 22, 70, .06);
        scrollbar-width: thin;
        scrollbar-color: #d6d0f2 transparent;
        opacity: 1;
        translate: 0 0;
        transition: opacity .14s ease, translate .14s ease, display .14s allow-discrete, overlay .14s allow-discrete;
    }

    @starting-style {
        select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y)::picker(select) {
            opacity: 0;
            translate: 0 -4px;
        }
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 9px;
        min-block-size: 38px;
        /* site.css gives <option> an emoji font (for flag options); in the styled list it spaced words
           oddly, so options take the page font — emoji still fall back to the system emoji font */
        font-family: inherit;
        font-size: 14.5px;
        font-weight: 450;
        line-height: 1.35;
        color: #2a2740;
        background: transparent;
        white-space: normal;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        transition: background-color .1s ease, color .1s ease;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option:hover,
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option:focus-visible {
        background: #f3f0ff;
        color: #3b2a8c;
        outline: none;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option:checked {
        background: #ece8fb;
        color: #4a2fc0;
        font-weight: 600;
    }

    /* the tick sits on the right */
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option::checkmark {
        order: 2;
        margin-inline-start: auto;
        content: "✓";
        color: #6d4aff;
        font-weight: 700;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option:disabled {
        color: #b3b0c2;
        cursor: not-allowed;
        background: transparent;
    }

    /* the "Select …" placeholder row reads as a hint */
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) option[value=""] {
        color: #9a97ab;
        font-weight: 400;
    }

    /* group headings: small uppercase label, a hairline above every group but the first */
    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) optgroup {
        display: block;
        padding: 8px 12px 4px;
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: #8a7fc4;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) optgroup + optgroup {
        border-top: 1px solid #efedf8;
        margin-top: 6px;
        padding-top: 10px;
    }

    select:where(:not([multiple], [size], .co-native-select)):not(#co-sel-x):not(#co-sel-y) optgroup option {
        margin-top: 2px;
    }
}

/* ======================================================================================
   Date & time fields (type=date / time / datetime-local / month / week) — the same soft look as
   the dropdowns above: filled field, violet calendar / clock icon in a chip, violet focus ring,
   dashed locked (disabled or readonly) state, red error state.

   Same rules as the dropdowns: two never-matching ids lift every rule above page styles; states sit
   in :where(); only the look is set, never height / width / padding / font size. Opt out with class
   "co-native-input". The popup calendar / clock is drawn by the browser and stays as it is (the user
   chose field styling only). In Firefox the field is styled and Firefox keeps its own icon.
   ====================================================================================== */
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y) {
    border: 1.5px solid #e4e1ef !important;
    border-radius: 12px !important;
    background-color: #f7f6fb !important;
    color: #1d1b2f !important;
    box-shadow: none !important;
    color-scheme: light;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y):where(:hover) { border-color: #cfc6fb !important; background-color: #fbfaff !important; }
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y):where(:focus, :focus-within) { border-color: #6d4aff !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(109,74,255,.15) !important; outline: none !important; }
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y):where(:disabled, [readonly]) { background-color: #f1f0f5 !important; color: #9a97ab !important; border-style: dashed !important; box-shadow: none !important; cursor: not-allowed; }
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y):where(.is-invalid, .input-validation-error, [aria-invalid="true"]) { border-color: #e5484d !important; background-color: #fffafa !important; box-shadow: 0 0 0 4px rgba(229,72,77,.12) !important; }

/* the icon: a violet calendar / clock in a soft chip, like the dropdown chevron */
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y)::-webkit-calendar-picker-indicator {
    width: 26px; height: 26px; margin: 0 -6px 0 8px; padding: 0; opacity: 1; cursor: pointer; border-radius: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23ece8fb'/%3E%3Crect x='8' y='9.5' width='12' height='10.5' rx='2' fill='none' stroke='%235b3fc4' stroke-width='1.7'/%3E%3Cpath d='M8 13h12M11 7.8v3M17 7.8v3' stroke='%235b3fc4' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
    transition: background-color .15s ease, transform .1s ease;
}
input:where([type="time"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y)::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23ece8fb'/%3E%3Ccircle cx='14' cy='14' r='6.3' fill='none' stroke='%235b3fc4' stroke-width='1.7'/%3E%3Cpath d='M14 10.6V14l2.4 1.6' fill='none' stroke='%235b3fc4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y)::-webkit-calendar-picker-indicator:hover { filter: brightness(.96); }
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y)::-webkit-calendar-picker-indicator:active { transform: scale(.94); }
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y):where(:disabled, [readonly])::-webkit-calendar-picker-indicator { filter: grayscale(1); opacity: .55; cursor: not-allowed; }

/* the separators (/ and :) a touch lighter than the digits */
input:where([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):where(:not(.co-native-input)):not(#co-dt-x):not(#co-dt-y)::-webkit-datetime-edit-text { color: #a7a3bb; padding: 0 2px; }