/* Shared styling for single-choice controls, with a native picker fallback. */
select:not([multiple]) {
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding-inline-start: 10px;
  padding-inline-end: 34px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%235c606e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px 14px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.select-wrap select { padding-inline-start: 2px; }
select:disabled { cursor: default; }
select:focus-visible { outline-offset: 1px; }

@supports (appearance: base-select) and selector(select::picker(select)) {
  select:not([multiple]), select:not([multiple])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]) {
    background-image: none;
    padding-inline-end: 11px;
    align-items: center;
    gap: 10px;
  }
  select:not([multiple])::picker-icon {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    align-self: center;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    color: #5c606e;
  }
  select:not([multiple])::picker(select) {
    margin-block: 4px;
    max-height: min(320px, 45dvh);
    max-width: calc(100vw - 24px);
    overflow: auto;
    padding: 4px;
    border: 1px solid #dfdfe7;
    border-radius: 8px;
    background: #fff;
    color: #272833;
    box-shadow: 0 8px 24px #22233820;
    font-family: var(--sans);
    font-size: 12px;
  }
  select:not([multiple]) option {
    padding: 7px 9px;
    gap: 8px;
    border-radius: 4px;
    line-height: 1.35;
    white-space: normal;
    cursor: pointer;
  }
  select:not([multiple]) option:is(:hover, :focus-visible) {
    background: #f0f2f6;
  }
  select:not([multiple]) option:checked {
    background: #e9f0ff;
    color: #1746a5;
    font-weight: 600;
  }
  select:not([multiple]) optgroup > legend {
    padding: 7px 9px 3px;
    font-size: 10px;
    font-weight: 650;
    color: #626573;
  }
}
@media (forced-colors: active) {
  select:not([multiple]) { appearance: auto; background-image: none; }
}

/* Keep filter labels above their controls and the chevron beside the value. */
.deal-toolbar label { display: grid; gap: 4px; }
.deal-toolbar #deal-filter { width: 160px; }
.deal-toolbar #deal-sort { width: 245px; }
@supports (appearance: base-select) and selector(select::picker(select)) {
  .deal-toolbar select:not([multiple]) {
    display: inline-flex;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .deal-toolbar label { max-width: 100%; }
}

@supports (appearance: base-select) and selector(select::picker(select)) {
  #stage-filter::picker(select) {
    width: min(260px, calc(100vw - 24px));
    max-height: min(400px, 55dvh);
    position-area: block-end span-inline-start;
    justify-self: end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
  #stage-filter optgroup { padding-inline: 0; }
  #stage-filter optgroup > legend {
    padding: 8px 8px 3px;
    font-size: 10px;
    color: #626573;
  }
  #stage-filter option { padding: 6px 8px; }
}

.calendar-controls .calendar-zone-label{display:flex;align-items:center;margin:0}
.calendar-controls #calendar-timezone{
  display:inline-flex;align-items:center;justify-content:space-between;
  width:170px;max-width:170px;height:32px;
  padding-block:5px;padding-inline-start:9px;padding-inline-end:10px;
  border:1px solid #e1e2e9;border-radius:5px;
  background-color:#fff;color:#535866;font-size:11px;line-height:1.3;
}
@supports not (appearance:base-select){
  .calendar-controls #calendar-timezone{display:block;padding-inline-end:32px}
}
.calendar-controls{align-items:center}