/* =====================================================================
   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-sm); font-weight: 600; color: var(--text-3); padding: 6px 10px 2px; }
  .pm-filters select::picker(select) { border-radius: 12px; }
}

/* busy buttons (sign in, register, demo …): spinner + not clickable twice */
.btn.is-busy { position: relative; cursor: progress; opacity: .9; }
.btn.is-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin .7s linear infinite; flex: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation-duration: 2s; } }


/* ===== date range picker (public/js/daterange.js): one calendar for start + end ===== */
.drp { position: absolute; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg); color: var(--text); }
.drp-in { display: flex; }
.drp-pre { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--border); min-width: 150px; }
.drp-pre button { text-align: left; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.drp-pre button:hover { background: var(--surface-2); color: var(--text); }
.drp-pre button.on { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
[data-mode="dark"] .drp-pre button.on { color: var(--text); }
.drp-cal { position: relative; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.drp-nav { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.drp-nav .btn { pointer-events: auto; }
.drp-ms { display: flex; gap: 22px; }
.drp-m { width: 252px; }
.drp-mt { text-align: center; font-weight: 650; font-size: var(--fs-sm); height: 28px; line-height: 28px; margin-bottom: 6px; text-transform: capitalize; }
.drp-wd, .drp-g { display: grid; grid-template-columns: repeat(7, 36px); }
.drp-wd span { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 4px 0; }
.drp-d { height: 36px; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--text); cursor: pointer; border-radius: 0; position: relative; }
.drp-d:hover:not(:disabled) { background: var(--surface-2); border-radius: 8px; }
.drp-d:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.drp-d.today { font-weight: 700; color: var(--accent-text, var(--accent)); }
.drp-d.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.drp-d.in { background: var(--accent-50); border-radius: 0; }
.drp-d.start, .drp-d.end { background: var(--accent) !important; color: #fff !important; border-radius: 8px; font-weight: 650; }
.drp-d.start.today::after, .drp-d.end.today::after { background: #fff; }
.drp-d:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.drp-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.drp-sel { flex: 1; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.drp.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 18px 18px 0 0; max-height: 90vh; overflow-y: auto; }
.drp.sheet .drp-in { flex-direction: column; }
.drp.sheet .drp-pre { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; min-width: 0; }
.drp.sheet .drp-pre button { flex: none; border: 1px solid var(--border); border-radius: 99px; padding: 6px 12px; }
.drp.sheet .drp-ms { justify-content: center; }
.drp.sheet .drp-m { width: min(100%, 322px); } .drp.sheet .drp-wd, .drp.sheet .drp-g { grid-template-columns: repeat(7, minmax(0, 1fr)); } .drp.sheet .drp-d { height: 42px; }
.drp.sheet .drp-foot { flex-wrap: wrap; } .drp.sheet .drp-sel { flex-basis: 100%; }
.c-filter [data-d="custom"] { display: inline-flex; align-items: center; gap: 6px; }
.c-filter [data-d="custom"] .ico { width: 15px; height: 15px; }
/* webhooks: delivery history + signing secret in the edit dialog */
.wh-extra { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.wh-secret { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); }
.wh-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.wh-list > .xs { padding: 10px 12px; }
.wh-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wh-row:last-child { border-bottom: 0; }