/* Themed dropdowns (green instead of the browser's default blue) for the filter / month selects.
   Chrome and Edge 135+ can style the open list with appearance:base-select; older browsers keep the
   normal select and only get the green highlight on the chosen option. */
select[data-autosubmit] option:checked, select.period-select option:checked { background:#dcfce7; color:#14532d; }
@supports (appearance: base-select) {
  select[data-autosubmit], select.period-select,
  select[data-autosubmit]::picker(select), select.period-select::picker(select) { appearance: base-select; }
  select[data-autosubmit], select.period-select {
    border:1.5px solid #d1d5db; border-radius:10px; background:#fff; color:#111827; padding:6px 14px; cursor:pointer;
    /* text and arrow on one line */
    display:inline-flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; white-space:nowrap;
  }
  select[data-autosubmit] selectedcontent, select.period-select selectedcontent { display:inline; white-space:nowrap; }
  select[data-autosubmit]:hover, select[data-autosubmit]:focus-visible,
  select.period-select:hover, select.period-select:focus-visible { border-color:#16a34a; outline:none; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
  select[data-autosubmit]::picker-icon, select.period-select::picker-icon { color:#15803d; transition:rotate .15s; margin-left:auto; flex-shrink:0; display:inline-block; }
  select[data-autosubmit]:open::picker-icon, select.period-select:open::picker-icon { rotate:180deg; }
  select[data-autosubmit]::picker(select), select.period-select::picker(select) {
    border:1.5px solid #bbf7d0; border-radius:12px; background:#fff; padding:6px; margin-top:4px;
    box-shadow:0 10px 28px rgba(20,83,45,.18);
  }
  select[data-autosubmit] option, select.period-select option {
    padding:10px 14px; border-radius:8px; font-size:1rem; color:#1f2937; display:flex; align-items:center; gap:8px;
  }
  select[data-autosubmit] option:hover, select[data-autosubmit] option:focus,
  select.period-select option:hover, select.period-select option:focus { background:#f0fdf4; color:#14532d; }
  select[data-autosubmit] option:checked, select.period-select option:checked { background:#16a34a; color:#fff; font-weight:700; }
  select[data-autosubmit] option::checkmark, select.period-select option::checkmark { color:#fff; }
}

/* Full-width form dropdowns on the BHW encode page (same green theme as above). */
select.themed-select option:checked { background:#dcfce7; color:#14532d; }
@supports (appearance: base-select) {
  select.themed-select, select.themed-select::picker(select) { appearance: base-select; }
  select.themed-select {
    display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
    width:100%; height:auto; min-height:52px; cursor:pointer;
  }
  select.themed-select selectedcontent { display:block; white-space:normal; text-align:left; }
  select.themed-select:hover, select.themed-select:focus-visible { border-color:#16a34a; outline:none; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
  select.themed-select::picker-icon { color:#15803d; transition:rotate .15s; margin-left:auto; flex-shrink:0; }
  select.themed-select:open::picker-icon { rotate:180deg; }
  select.themed-select::picker(select) {
    border:1.5px solid #bbf7d0; border-radius:12px; background:#fff; padding:6px; margin-top:4px;
    box-shadow:0 10px 28px rgba(20,83,45,.18);
  }
  select.themed-select option { padding:12px 14px; border-radius:8px; font-size:1rem; color:#1f2937; white-space:normal; display:flex; align-items:center; gap:8px; }
  select.themed-select option:hover, select.themed-select option:focus { background:#f0fdf4; color:#14532d; }
  select.themed-select option:checked { background:#16a34a; color:#fff; font-weight:700; }
  select.themed-select option::checkmark { color:#fff; }
}

/* Fallback for browsers without appearance: base-select: a custom list built by js/themed_select.js */
.ts-wrap { position:relative; width:100%; }
.ts-native { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.ts-btn {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; height:auto;
  text-align:left; cursor:pointer; font:inherit; font-size:1rem; font-weight:500; color:#111827;
  background:#fff; border:2px solid #d1d5db; border-radius:10px; padding:12px 16px;
}
.ts-btn:hover, .ts-btn:focus-visible, .ts-btn[aria-expanded="true"] { border-color:#16a34a; outline:none; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
.ts-btn:disabled { opacity:.6; cursor:not-allowed; }
.ts-label { flex:1; white-space:normal; }
.ts-arrow { width:10px; height:10px; flex-shrink:0; border-right:2.5px solid #15803d; border-bottom:2.5px solid #15803d; transform:rotate(45deg) translateY(-2px); transition:transform .15s; }
.ts-btn[aria-expanded="true"] .ts-arrow { transform:rotate(-135deg) translateY(-2px); }
.ts-list {
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; margin:0; padding:6px; list-style:none;
  max-height:300px; overflow-y:auto; background:#fff; border:1.5px solid #bbf7d0; border-radius:12px;
  box-shadow:0 10px 28px rgba(20,83,45,.18);
}
.ts-list li { padding:12px 14px; border-radius:8px; font-size:1rem; color:#1f2937; cursor:pointer; }
.ts-list li.ts-active, .ts-list li:hover { background:#f0fdf4; color:#14532d; }
.ts-list li[aria-selected="true"] { background:#16a34a; color:#fff; font-weight:700; }
.ts-list li[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }

/* Typeable list (js/combo_input.js): the same green list under a normal text box */
.combo-wrap > input { padding-right:44px; }
.combo-arrow { position:absolute; right:18px; top:50%; margin-top:-7px; cursor:pointer; }