/*
 * SELECT_MENU.css - one look for the open list of every dropdown (<select>) in the school
 * system: a white card with soft corners and shadow, roomy rows, a lilac hover, the chosen
 * row tinted with a tick, a short fade, and the arrow turning when the list is open.
 * Linked by admin/, teacher/, developer/, student/ index.php and the home page (sign-up form).
 *
 * It uses the browser's own customizable select (appearance: base-select; Chrome / Edge 135+,
 * desktop and Android). The <select> stays a real <select>: every screen keeps filling it,
 * reading .val() and listening to change exactly as before, keyboard and screen readers work,
 * and the list opens above everything (top layer), so a modal or a scrolling box never cuts it.
 * Browsers without it (Safari, Firefox today) keep their own list: everything sits in @supports.
 *
 * Arrows: a screen that draws its own arrow keeps it - Bootstrap .form-select (background
 * image), .sca-select, .qz-select, and boxes with an <i class="...chev..."> next to the select
 * (Enter Assessment, Attendance, Teacher Remarks: that icon now turns when the list opens, and
 * the list opens under the whole box, as wide as the box). Every other select gets an arrow
 * painted in its padding. A long choice stays on one line in the closed box. The list opens on
 * the side of the box with more room. Lists with several rows (multiple / size) are left alone.
 */
@supports (appearance: base-select) {
  select:not([multiple], [size]),
  select:not([multiple], [size])::picker(select) {
    appearance: base-select !important;
  }

  /* the closed box: defaults only for selects no stylesheet styles (zero specificity) */
  :where(select:not([multiple], [size])) {
    border-color: #d3d7e3;
    border-radius: 0.55rem;
    background-color: #fff;
    color: #2f2f45;
    padding-block: 0.4rem;
    padding-inline: 0.7rem 0.6rem;
    min-block-size: 2.35rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  :where(select:not([multiple], [size])):hover { border-color: #b9bdd0; }
  :where(select:not([multiple], [size])):open { border-color: #8f84ff; }
  /* a long choice stays on one line and stops before the arrow (which sits in the padding);
     the browser draws the text in an inner box, so "..." cannot be added - it is cut cleanly,
     as the old list did */
  select:not([multiple], [size]) {
    white-space: nowrap;
    overflow: clip;
    overflow-clip-margin: content-box;
  }

  /* the open list */
  select:not([multiple], [size])::picker(select) {
    box-sizing: border-box;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid #e3e5ef;
    border-radius: 14px;
    background: #fff;
    color: #2f2f45;
    box-shadow: 0 20px 48px rgba(28, 27, 58, 0.18), 0 3px 8px rgba(28, 27, 58, 0.06);
    max-inline-size: min(36rem, calc(100vw - 16px));
    /* opens on the side with more room; 45% of the screen always fits that side */
    max-block-size: min(22rem, 45dvh);
    position-try-order: most-block-size;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfd2e0 transparent;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.16s ease, translate 0.16s ease, display 0.16s allow-discrete, overlay 0.16s allow-discrete;
  }
  select:not([multiple], [size])::picker(select):not(:popover-open) {
    opacity: 0;
    translate: 0 -4px;
  }
  @starting-style {
    select:not([multiple], [size])::picker(select):popover-open {
      opacity: 0;
      translate: 0 -4px;
    }
  }
  /* a screen that draws the field as a box (icon + select + its own arrow) gets the list under
     the whole box, as wide as the box, not just under the select inside it */
  :has(> select:not([multiple], [size])):has(> [class*="chev"]) {
    anchor-name: --ae-select-box;
    anchor-scope: --ae-select-box;
  }
  :has(> [class*="chev"]) > select:not([multiple], [size])::picker(select) {
    position-anchor: --ae-select-box;
    inline-size: anchor-size(width);
  }

  /* the rows */
  select:not([multiple], [size]) option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-block-size: 2.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    color: #2f2f45;
    background: transparent;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  select:not([multiple], [size]) option + option { margin-block-start: 2px; }
  select:not([multiple], [size]) option:hover,
  select:not([multiple], [size]) option:focus-visible {
    background: #f3f1ff;
    color: #2b2190;
    outline: none;
  }
  select:not([multiple], [size]) option:checked {
    background: #eeebff;
    color: #4535e0;
    font-weight: 600;
  }
  select:not([multiple], [size]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: #6f62ff;
    font-weight: 700;
  }
  /* "Select Subject", "Choose the term": a quiet heading, not a choice */
  select:not([multiple], [size]) option:disabled {
    color: #a6abc0;
    background: transparent;
    cursor: default;
  }
  select:not([multiple], [size]) option[value=""]:disabled {
    min-block-size: 0;
    padding-block: 0.35rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  select:not([multiple], [size]) option:disabled::checkmark { display: none; }

  /* the arrow: never the browser's own (it would sit after the text and be pushed out by a long
     choice); a screen's own arrow stays, every other select gets one painted in its padding,
     pointing up while the list is open. !important: screens set "background: #fff" and their own
     padding on plain selects, which would hide it or put the text under it. */
  select:not([multiple], [size])::picker-icon { display: none; }
  select:not([multiple], [size], .form-select, .sca-select, .qz-select):not(:has(~ [class*="chev"])) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%238f94ad' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 0.75rem 0.5rem !important;
    padding-inline-end: 2.25rem !important;
  }
  select:not([multiple], [size], .form-select, .sca-select, .qz-select):not(:has(~ [class*="chev"])):open {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 6.5l5-5 5 5' fill='none' stroke='%236f62ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  }
  /* a screen's own arrow icon next to the select turns while the list is open */
  :has(> select) > [class*="chev"] { transition: rotate 0.2s ease, color 0.2s ease; }
  :has(> select:open) > [class*="chev"] {
    rotate: 180deg;
    color: #6f62ff;
  }

  @media (prefers-reduced-motion: reduce) {
    select:not([multiple], [size])::picker(select),
    :has(> select) > [class*="chev"] { transition: none; }
  }
}