/* =====================================================================
   Dropdowns (<select>) – one look everywhere (app, admin, public map).
   Stays a native <select>: keyboard, phones, screen readers keep working.
   1) closed state: own chevron in the design colours (all browsers)
   2) open list: styled where the browser supports customizable selects
      (appearance: base-select – Chrome/Edge 135+); others keep the native list
   ===================================================================== */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6779' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  transition: border-color .15s, box-shadow .15s;
}
[data-mode="dark"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b0c0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]):hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
select:disabled { cursor: not-allowed; opacity: .6; }
.pm-filters select { padding-right: 32px; background-position: right 10px center; background-size: 14px 14px; }   /* compact pills on the public map */

/* open list: same look as our other menus (rounded, shadow, soft hover, accent tick) */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  /* our SVG chevron (background) stays – the browser's own picker icon is hidden; one arrow in every mode */
  select:not([multiple]):not([size]) { display: flex; align-items: center; }
  select:not([multiple]):not([size])::picker-icon { display: none; }
  select:not([multiple]):not([size]):open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
  select::picker(select) {
    margin-top: 6px; padding: 6px; min-width: anchor-size(width); max-height: min(320px, 60vh); overflow-y: auto;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s, display .12s allow-discrete, overlay .12s allow-discrete; }
  select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { select:open::picker(select) { opacity: 0; transform: translateY(-4px); } }
  select option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font: var(--fs)/1.3 var(--font); color: var(--text); cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--surface-3); outline: none; }
  select option:checked { background: var(--accent-50); color: var(--accent-text); font-weight: 600; }
  select option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--accent-text); font-weight: 700; }
  select option:disabled { opacity: .5; cursor: default; }
  select optgroup { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px 2px; }
  .pm-filters select::picker(select) { border-radius: 12px; }
}