/* ==========================================================================
   Every plain <select> drawn like the searchable picker
   ==========================================================================
   Kabous, 2026-11-11, pointing at the Plesk reseller/customer picker on New
   Hosting: "i need this look for all the drop downs on every page".

   That picker is selectize, which draws its own box and list. Most of the
   app's dropdowns are still the browser's native <select>, whose open list
   is the operating system's menu -- a different font, a blue highlight, no
   border, and a different shape on every machine.

   This does it in CSS rather than by turning every select into selectize.
   Selectize copies the options once and never looks at the <select> again,
   so every screen that fills a dropdown from JavaScript, sets one with
   .val(), or enables and disables one would quietly stop working. Hundreds
   of views do one of those. `appearance: base-select` (Chrome and Edge 135+,
   which is what the office runs) keeps the real <select> -- the same
   element, value, events and keyboard -- and only lets the stylesheet draw
   the list.

   Browsers without it ignore the whole block and keep the native list, so
   nothing gets worse anywhere. Multi-selects and list boxes (size > 1) are
   left alone; base-select does not cover them.

   Colours are the ones ic-theme.css gives selectize (input on surface-2,
   list on surface, hovered row on surface-3, all with --t-line borders), so
   the two kinds of dropdown match in both themes.
   ========================================================================== */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }

  /* ---- the closed field ------------------------------------------------- */
  select:not([multiple]):not([size]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    background-color: var(--t-surface, #fff);
    color: var(--t-ink, #2c3340);
    border: 1px solid var(--t-line, #d9e0e9);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  :root[data-theme="dark"] select:not([multiple]):not([size]) {
    background-color: var(--t-surface-2, #121212);
  }
  /* A .form-control keeps its own full width and height; this only stops the
     box shrinking to its text, which a base-select does by default. */
  select.form-control:not([multiple]):not([size]) {
    display: flex;
    width: 100%;
    height: auto;
  }
  select:not([multiple]):not([size]):disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  /* Selectize's caret: a small solid triangle that flips when open. */
  select:not([multiple]):not([size])::picker-icon {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    margin-inline-start: auto;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--t-muted, #6b7789);
    border-bottom: 0;
    transition: none;
    rotate: none;
  }
  select:not([multiple]):not([size]):open::picker-icon {
    border-top: 0;
    border-bottom: 5px solid var(--t-muted, #6b7789);
  }

  /* ---- the open list ---------------------------------------------------- */
  select:not([multiple]):not([size])::picker(select) {
    margin-block: 2px;
    padding: 0;
    max-height: min(320px, 50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--t-surface, #fff);
    color: var(--t-ink, #2c3340);
    border: 1px solid var(--t-line, #d9e0e9);
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }

  /* The rows. Written with the :not()s so they outrank ic-theme.css's dark
     `select option { background-color: surface-2 }`, which predates this and
     would otherwise paint every row and hide the hover. */
  :root select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    min-height: 0;
    font-size: 13px;
    line-height: 20px;
    white-space: normal;
    background-color: transparent;
    color: var(--t-ink, #2c3340);
    cursor: pointer;
  }
  :root select:not([multiple]):not([size]) option:hover,
  :root select:not([multiple]):not([size]) option:focus-visible {
    background-color: var(--t-surface-3, #f1f4f8);
    color: var(--t-ink, #2c3340);
    outline: none;
  }
  :root[data-theme="dark"] select:not([multiple]):not([size]) option:hover,
  :root[data-theme="dark"] select:not([multiple]):not([size]) option:focus-visible {
    background-color: var(--t-surface-3, #1e1e1e);
  }
  /* No tick column -- selectize has none. The chosen row reads as bold. */
  :root select:not([multiple]):not([size]) option::checkmark { display: none; }
  :root select:not([multiple]):not([size]) option:checked { font-weight: 600; }
  :root select:not([multiple]):not([size]) option:disabled {
    color: var(--t-faint, #9aa5b4);
    cursor: default;
  }
  :root select:not([multiple]):not([size]) option:disabled:hover { background-color: transparent; }

  /* Group headings, as selectize draws .optgroup-header. */
  :root select:not([multiple]):not([size]) optgroup {
    padding: 0;
    background-color: transparent;
    color: var(--t-muted, #6b7789);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  :root select:not([multiple]):not([size]) optgroup legend { padding: 6px 12px 2px; }
  :root select:not([multiple]):not([size]) optgroup option {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
}