/* Shared dropdown finish. Native selects keep form values, validation and keyboard behavior. */
:root{
  --dropdown-border:#d8e3f2;
  --dropdown-border-active:#8ab3ee;
  --dropdown-text:#4d6686;
  --dropdown-selected:#eaf2ff;
  --dropdown-selected-text:#2869cf;
  --dropdown-hover:#f3f7fd;
  --dropdown-shadow:0 12px 32px #24446b24;
  --dropdown-focus:0 0 0 3px #2474dc0d;
}

/* Keep each form's existing field height and width, including compact toolbars. */
:root select:not([multiple]),:is(#app,dialog) select:not([multiple]){
  box-sizing:border-box;min-width:0;padding-inline:12px;
  border:1px solid var(--dropdown-border);border-radius:9px;
  background-color:#fff;color:var(--dropdown-text);
  font-family:inherit;font-size:var(--field-font-size,13px);font-weight:500;
  cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s;
}
:root select:not([multiple]):hover:not(:disabled),:is(#app,dialog) select:not([multiple]):hover:not(:disabled){border-color:#b5cbea;background-color:#fbfdff}
:root select:not([multiple]):focus,:is(#app,dialog) select:not([multiple]):focus{
  outline:none;border-color:var(--dropdown-border-active);box-shadow:var(--dropdown-focus);
}
:root select:not([multiple]):disabled,:is(#app,dialog) select:not([multiple]):disabled{cursor:not-allowed;color:#98a8bd;background-color:#f5f7fb;border-color:#e2e9f3;opacity:.75}
:root select:not([multiple])[aria-invalid="true"],:root select:not([multiple]):user-invalid{border-color:#cc7870}

/* Customizable native pickers stay in the top layer, even inside modal dialogs. */
@supports (appearance:base-select){
  :root select:not([multiple]),:root select:not([multiple])::picker(select){appearance:base-select}
  :root select:not([multiple]){display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
  :root select:not([multiple])>button{all:unset;display:block;flex:1;min-width:0;overflow:hidden;color:inherit;font:inherit;cursor:inherit}
  :root select:not([multiple]) selectedcontent{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :root select:not([multiple])::picker-icon{
    content:"";display:block;flex:0 0 12px;width:12px;height:12px;margin-left:auto;
    background:url("assets/icons/courieve-blue-v1/chevronDown.webp") center/contain no-repeat;
    transition:rotate .15s;
  }
  :root select:not([multiple]):open{border-color:var(--dropdown-border-active);box-shadow:var(--dropdown-focus)}
  :root select:not([multiple]):open::picker-icon{rotate:180deg}
  :root select:not([multiple])::picker(select){
    box-sizing:border-box;min-width:max(128px,anchor-size(width));max-width:calc(100vw - 24px);
    inset:auto;top:calc(anchor(bottom) + 8px);left:anchor(left);position-try-fallbacks:flip-block,flip-inline;
    max-height:min(360px,var(--dropdown-available-height,calc(100vh - 24px)));margin:0;padding:6px;overflow:auto;
    border:1px solid #dce5f2;border-radius:12px;background:#fff;
    color:var(--dropdown-text);box-shadow:var(--dropdown-shadow);font-family:inherit;
    scrollbar-width:thin;scrollbar-color:#cddcf0 transparent;overscroll-behavior:contain;
  }
  :root select:not([multiple]) option{
    display:flex;align-items:center;gap:16px;min-height:36px;padding:7px 10px;
    border:0;border-radius:7px;background:transparent;color:#526985;
    font:400 13px/1.5 "Microsoft YaHei","PingFang SC",sans-serif;
    white-space:normal;overflow-wrap:anywhere;cursor:pointer;
  }
  :root select:not([multiple]) option+option{margin-top:2px}
  :root select:not([multiple]) option:hover:not(:disabled),:root select:not([multiple]) option:focus-visible{background:var(--dropdown-hover);outline:none}
  :root select:not([multiple]) option:checked{background:var(--dropdown-selected);color:var(--dropdown-selected-text);font-weight:600}
  :root select:not([multiple]) option:checked:hover{background:#e3eeff}
  :root select:not([multiple]) option::checkmark{
    content:"";order:1;flex:0 0 16px;width:16px;height:16px;margin-left:auto;
    background:url("assets/icons/courieve-blue-v1/check.webp") center/contain no-repeat;
  }
  :root select:not([multiple]) option:not(:checked)::checkmark{visibility:hidden}
  :root select:not([multiple]) option:disabled{color:#a0aec1;background:transparent;cursor:not-allowed}
  :root select:not([multiple]) optgroup{padding:4px 0;font:600 11px/1.5 "Microsoft YaHei","PingFang SC",sans-serif;color:#8292ab}
  :root select:not([multiple]) optgroup::legend{padding:6px 10px}
}

/* University, handbook and planner menus share the same surfaces and row treatment. */
.school-listbox,.library-sort-menu,.monmap-planner #monmap-menu,.monmap-add-panel #unit-panel-popover{
  border:1px solid #dce5f2;border-radius:12px;background:#fff;color:var(--dropdown-text);box-shadow:var(--dropdown-shadow);
}
.school-listbox{padding:6px}
.school-trigger,.library-sort-trigger{border-color:var(--dropdown-border);border-radius:9px;background:#fff;color:var(--dropdown-text)}
.school-trigger:focus-visible,.school-trigger[aria-expanded="true"],.library-sort-trigger:focus-visible,.library-sort-trigger[aria-expanded="true"]{outline:none;border-color:var(--dropdown-border-active);box-shadow:var(--dropdown-focus)}
.school-option{border-radius:7px}
.school-option:hover,.school-option.is-active{background:var(--dropdown-hover)}
.school-option[aria-selected="true"],.school-option[aria-selected="true"].is-active{background:var(--dropdown-selected);color:var(--dropdown-selected-text)}
.library-sort-menu>[role="option"],.monmap-planner #monmap-menu .mm-menu-item,.monmap-add-panel #unit-panel-popover :is([data-action="mmUnitSortSelect"],[data-action="mmUnitPlace"]){
  min-height:36px;padding:7px 10px;border:0;border-radius:7px;font-size:13px;font-weight:400;line-height:1.5;
}
.monmap-planner #monmap-menu{padding:6px}
.monmap-planner #monmap-menu .mm-menu-item{width:100%;background:transparent;color:#526985;text-align:left}
.monmap-planner #monmap-menu .mm-menu-item:hover:not(:disabled),.monmap-planner #monmap-menu .mm-menu-item:focus-visible,
.monmap-add-panel #unit-panel-popover :is([data-action="mmUnitSortSelect"],[data-action="mmUnitPlace"]):hover:not(:disabled){background:var(--dropdown-hover)}
.monmap-add-panel #unit-panel-popover [data-action="mmUnitSortSelect"][aria-selected="true"],.library-sort-menu>[role="option"][aria-selected="true"]{background:var(--dropdown-selected);color:var(--dropdown-selected-text);font-weight:600}
.monmap-planner #monmap-menu .mm-menu-item[data-variant="destructive"]{color:#b4403c}
.monmap-planner #monmap-menu .mm-menu-item[data-variant="destructive"]:is(:hover,:focus-visible){background:#b4403c12;color:#b4403c}
.monmap-add-panel #unit-panel-popover [data-action="mmUnitSortSelect"]>.c-icon{width:16px;height:16px}
.monmap-add-panel #unit-panel-popover :is([data-action="mmUnitSortSelect"],[data-action="mmUnitPlace"]):focus-visible{outline:2px solid #a1c3f3;outline-offset:-2px}
.monmap-planner #monmap-menu :is(hr,[role="separator"]){border-color:#e3ebf6}
.app-header #header-account-menu{border-color:#dce5f2;border-radius:12px;background:#fff;box-shadow:var(--dropdown-shadow)}
.app-header #header-account-menu .account-menu-links a:is(:hover,:focus-visible){background:var(--dropdown-hover)}

@media(prefers-reduced-motion:reduce){:root select:not([multiple]),:root select:not([multiple])::picker-icon{transition:none}}