/* The styled menu that stands in for a native <select> (see fancy-select.js). Sized like the toolbar controls
   it replaces; the native select stays in the document for its value but is taken out of sight and out of
   the tab order. */
.fancy-select { position: relative; display: block; min-width: 0; }
/* !important: a page's own select:disabled { opacity } rule would otherwise show the native control through the trigger. */
.fancy-select-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0 !important; pointer-events: none; }
.fancy-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box;
  height: var(--fancy-select-height, 39px); min-width: 0; padding: 0 12px; border: 1px solid var(--control-border, #868d97); border-radius: var(--control-radius, 12px);
  background: var(--control-fill, #f9f9fb); box-shadow: var(--control-shadow, none); color: var(--ink, #18202b);
  font: inherit; font-size: var(--fancy-select-font, 13px); font-weight: 700; text-transform: none; text-align: start; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.fancy-select-trigger:hover { border-color: var(--control-border-hover, #5f6670); background-color: #fff; }
.fancy-select-trigger:focus-visible { outline: none; border-color: var(--blue, #0057ff); box-shadow: 0 0 0 3px var(--control-focus, #4f7cff80); }
.fancy-select-trigger:disabled { opacity: .55; cursor: default; }
/* Two classes, so a shell that hides its own caption spans (.sort-control span) cannot hide the value. */
.fancy-select .fancy-select-label { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.fancy-select-chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted, #5e686b); transition: transform .18s ease; }
.fancy-select.is-open .fancy-select-chevron { transform: rotate(180deg); }
.fancy-select-menu {
  position: fixed; z-index: 90; inset: auto; min-width: 100%; max-height: 360px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line, #d9dfe8); border-radius: var(--control-radius, 12px);
  box-shadow: 0 1px 2px #0f213d14, 0 14px 36px #0f213d24; outline: none;
  font-weight: 500; text-transform: none; letter-spacing: normal;
  animation: fancy-select-in .14s ease;
}
/* The active row is the focus indicator; a ring around the whole menu would only shout. */
:root .fancy-select .fancy-select-menu:is(:focus, :focus-visible) { outline: none; box-shadow: 0 1px 2px #0f213d14, 0 14px 36px #0f213d24; }
.fancy-select-option {
  display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink, #18202b); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.fancy-select-option[aria-selected="true"] { font-weight: 700; color: var(--blue, #0057ff); }
.fancy-select-option.is-active { background: #eef3ff; }
.fancy-select-option[aria-disabled="true"] { color: var(--muted, #5e686b); opacity: .6; cursor: default; }
@keyframes fancy-select-in { from { opacity: 0; transform: translateY(-4px); } }
.fancy-select-up .fancy-select-menu { animation-name: fancy-select-in-up; }
@keyframes fancy-select-in-up { from { opacity: 0; transform: translateY(4px); } }

/* Each context keeps the size its native select had, so replacing it moves nothing around it. */
.section-toolbar .fancy-select { min-width: 150px; }
.form-grid .fancy-select { --fancy-select-height: 41px; --fancy-select-font: 12px; }
.auth-panel .fancy-select { --fancy-select-height: 48px; }
.assignment-select .fancy-select { --fancy-select-height: 44px; }
.fancy-select:has(> .inline-select) { --fancy-select-height: 31px; }
.reservation-card-total .fancy-select { margin-top: 5px; }
.reservation-card-total .fancy-select:has(> .inline-select) { --fancy-select-height: 44px; }
.admin-phone-row .fancy-select-trigger { direction: ltr; text-align: left; }
/* The booking status control wears its stage colour, as the native select did (stage-styles.css). */
:root .fancy-select:has(> .inline-select option[value="pending"]:checked) > .fancy-select-trigger { border-color: transparent; background-color: var(--stage-pending-soft); color: var(--stage-pending); }
:root .fancy-select:has(> .inline-select option[value="confirmed"]:checked) > .fancy-select-trigger { border-color: transparent; background-color: var(--stage-confirmed-soft); color: var(--stage-confirmed); }
:root .fancy-select:has(> .inline-select option[value="active"]:checked) > .fancy-select-trigger { border-color: transparent; background-color: var(--stage-active-soft); color: var(--stage-active); }
:root .fancy-select:has(> .inline-select option[value="completed"]:checked) > .fancy-select-trigger { border-color: transparent; background-color: var(--stage-completed-soft); color: var(--stage-completed); }
:root .fancy-select:has(> .inline-select option[value="cancelled"]:checked) > .fancy-select-trigger { border-color: transparent; background-color: var(--stage-cancelled-soft); color: var(--stage-cancelled); }
:root .fancy-select:has(> .inline-select) > .fancy-select-trigger .fancy-select-chevron { color: currentColor; }
@media (prefers-reduced-motion: reduce) { .fancy-select-menu { animation: none; } .fancy-select-chevron { transition: none; } }
@media print { .fancy-select-menu { display: none; } }

/* Customer-page shells (styles.css) draw the frame themselves and restyle the trigger through the same selectors
   as the native select. What is left here: the wrapper fills the shell, the trigger stays flat on hover and
   focus (the shell shows focus with :focus-within), and the sort control keeps its own arrow. */
:is(.filter-control, .reservation-input-shell, .sort-control) .fancy-select { flex: 1 1 auto; min-width: 0; height: 100%; }
:is(.filter-control, .reservation-input-shell) .fancy-select-trigger { height: 100%; box-shadow: none; border-radius: 0; }
:root :is(.filter-control, .reservation-input-shell, .sort-control) .fancy-select-trigger:is(:hover, :focus-visible) { border-color: transparent; background-color: transparent; box-shadow: none; }
.filter-control .fancy-select-trigger { padding-inline-end: 0; }
.sort-control .fancy-select-trigger { height: 100%; padding: 0; box-shadow: none; }
.sort-control .fancy-select-chevron { display: none; }
.sort-control .fancy-select-trigger:is(:hover, :focus-visible) { color: #fff; }
.reservation-input-shell .fancy-select-trigger:disabled { opacity: .7; }