/* ==========================================================================
   sbl-select.css — "UI Action Menu" dropdown with instant search.
   Used for every <select> on the admin panel and the public site (sbl-select.js).
   Colours come from the theme variables (--bg, --text, --accent), so the menu
   follows dark and light themes automatically.
   ========================================================================== */

.sbl-field {
  --sbl-accent:   var(--accent, #3b82f6);
  --sbl-text:     var(--text, #1f2937);
  --sbl-bg:       var(--bg, #ffffff);
  position: relative;
  min-width: 0;
}

.sbl-field > select.sbl-native {
  /* stays in the form (value, required, onchange) but is replaced visually */
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.sbl-field .sbl-toggle {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: 2.75em;
  padding: 0.62em 2.6em 0.62em 0.9em;
  margin: 0;
  font: inherit;
  font-size: 0.92rem;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sbl-text);
  background-color: color-mix(in srgb, var(--sbl-text) 5%, var(--sbl-bg));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' fill-rule='evenodd' d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z'/%3E%3C/svg%3E");
  background-size: 1.5em;
  background-position: calc(100% - 0.7em) 50%;
  background-repeat: no-repeat;
  border: 1px solid color-mix(in srgb, var(--sbl-text) 13%, transparent);
  border-radius: 10px;
  box-shadow: 0 1px 1px -0.5px rgba(0,0,0,.08), 0 3px 3px -1.5px rgba(0,0,0,.08), 0 5px 5px -2.5px rgba(0,0,0,.06);
  cursor: pointer;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sbl-field .sbl-toggle:hover  { border-color: color-mix(in srgb, var(--sbl-accent) 45%, transparent); }
.sbl-field .sbl-toggle:focus-visible,
.sbl-field.open .sbl-toggle {
  border-color: var(--sbl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbl-accent) 16%, transparent);
}
.sbl-field.open .sbl-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' fill-rule='evenodd' d='M17 15a1 1 0 0 0 .707-1.707l-5-5a1 1 0 0 0-1.414 0l-5 5A1 1 0 0 0 7 15z'/%3E%3C/svg%3E");
}
.sbl-field.disabled .sbl-toggle { opacity: .5; cursor: not-allowed; }
.sbl-field .sbl-toggle .sbl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbl-field .sbl-toggle .sbl-label.placeholder { color: color-mix(in srgb, var(--sbl-text) 45%, transparent); }
.sbl-field .sbl-toggle .sbl-icon { flex: none; width: 1.15em; height: 1.15em; opacity: .7; text-align: center; }

/* ── Menu (portaled to <body>, so overflow:auto cards and modals never clip it) ─────────────── */
.sbl-menu {
  --sbl-accent:   var(--accent, #3b82f6);
  --sbl-text:     var(--text, #1f2937);
  --sbl-bg:       var(--bg, #ffffff);
  --sbl-spring:   linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1);
  position: fixed;
  z-index: 10050;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  padding: 6px;
  gap: 4px;
  font-family: var(--font-primary, system-ui, sans-serif);
  font-size: 0.92rem;
  color: var(--sbl-text);
  background: color-mix(in srgb, var(--sbl-text) 7%, var(--sbl-bg));
  border: 1px solid color-mix(in srgb, var(--sbl-text) 10%, transparent);
  border-radius: 15px;
  box-shadow: 0 1px 1px -0.5px rgba(0,0,0,.12), 0 3px 3px -1.5px rgba(0,0,0,.12), 0 10px 10px -5px rgba(0,0,0,.14), 0 24px 24px -8px rgba(0,0,0,.18);
  transform-origin: center top;
  opacity: 0;
  scale: 1 .25;
  translate: 0 -12px;
  transition: scale .66s cubic-bezier(.33,1,.68,1), translate .66s cubic-bezier(.33,1,.68,1), opacity .25s ease;
  transition-timing-function: var(--sbl-spring), var(--sbl-spring), ease;
}
.sbl-menu.up    { transform-origin: center bottom; translate: 0 12px; }
.sbl-menu.shown { display: flex; }
.sbl-menu.open  { opacity: 1; scale: 1 1; translate: 0 0; }

.sbl-menu .sbl-search {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: .55em .8em .55em 2.1em;
  font: inherit;
  color: var(--sbl-text);
  background: color-mix(in srgb, var(--sbl-text) 4%, var(--sbl-bg)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7em 50% / 1em;
  border: 1px solid color-mix(in srgb, var(--sbl-text) 12%, transparent);
  border-radius: 10px;
  outline: none;
  box-shadow: none;
}
.sbl-menu .sbl-search:focus { border-color: var(--sbl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbl-accent) 14%, transparent); }
.sbl-menu .sbl-search::placeholder { color: color-mix(in srgb, var(--sbl-text) 40%, transparent); }

.sbl-menu .sbl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}

.sbl-menu .sbl-item {
  display: grid;
  grid-template: "icon name" auto "icon desc" auto / min-content 1fr;
  column-gap: .65em;
  row-gap: .15em;
  padding: .55em 1.6em .55em .65em;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  translate: 0 20%;
  transition: translate .75s, opacity .4s, background-color .15s;
  transition-timing-function: var(--sbl-spring), ease, ease;
}
.sbl-menu.open .sbl-item { opacity: 1; translate: 0 0; }
.sbl-menu.open .sbl-item:nth-child(2) { transition-delay: .03s; }
.sbl-menu.open .sbl-item:nth-child(3) { transition-delay: .06s; }
.sbl-menu.open .sbl-item:nth-child(4) { transition-delay: .09s; }
.sbl-menu.open .sbl-item:nth-child(5) { transition-delay: .12s; }
.sbl-menu.open .sbl-item:nth-child(n+6) { transition-delay: .15s; }
.sbl-menu.open.settled .sbl-item { transition-delay: 0s; }

.sbl-menu .sbl-item > .sbl-icon { grid-area: icon; width: 1.15em; height: 1.15em; margin-top: .1em; color: color-mix(in srgb, var(--sbl-text) 55%, transparent); text-align: center; }
.sbl-menu .sbl-item > .sbl-name { grid-area: name; margin: 0; font-size: 1em; font-weight: 500; line-height: 1.35; color: color-mix(in srgb, var(--sbl-text) 88%, transparent); overflow-wrap: anywhere; }
.sbl-menu .sbl-item > .sbl-desc { grid-area: desc; margin: 0; font-size: .82em; line-height: 1.35; color: color-mix(in srgb, var(--sbl-text) 52%, transparent); overflow-wrap: anywhere; }
.sbl-menu .sbl-item mark { background: color-mix(in srgb, var(--sbl-accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.sbl-menu .sbl-item.active { background: color-mix(in srgb, var(--sbl-accent) 10%, transparent); }
.sbl-menu .sbl-item.active > .sbl-name,
.sbl-menu .sbl-item.active > .sbl-icon { color: var(--sbl-accent); }
.sbl-menu .sbl-item.selected { background: color-mix(in srgb, var(--sbl-accent) 15%, transparent); }
.sbl-menu .sbl-item.selected > .sbl-name { color: var(--sbl-accent); font-weight: 600; }
.sbl-menu .sbl-item.selected::after { content: ""; grid-area: name; justify-self: end; align-self: center; width: .9em; height: .9em; margin-right: -1.1em; background: var(--sbl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.sbl-menu .sbl-item.disabled { opacity: .4 !important; cursor: not-allowed; }
.sbl-menu .sbl-group { padding: .6em .7em .2em; font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sbl-text) 45%, transparent); }
.sbl-menu .sbl-empty,
.sbl-menu .sbl-status { padding: .7em; font-size: .85em; text-align: center; color: color-mix(in srgb, var(--sbl-text) 50%, transparent); }

.sbl-menu .sbl-create { border-top: 1px solid color-mix(in srgb, var(--sbl-text) 9%, transparent); margin-top: 2px; padding-top: 4px; }
.sbl-menu .sbl-create .sbl-item { opacity: 1; translate: 0 0; }
.sbl-menu .sbl-create .sbl-name { color: var(--sbl-accent); font-weight: 600; }

.sbl-menu .sbl-form { display: flex; flex-direction: column; gap: .5em; padding: .4em; }
.sbl-menu .sbl-form label { font-size: .78em; font-weight: 600; color: color-mix(in srgb, var(--sbl-text) 60%, transparent); }
.sbl-menu .sbl-form input { padding-left: .8em; background-image: none; }
.sbl-menu .sbl-form .sbl-hint { font-size: .75em; color: color-mix(in srgb, var(--sbl-text) 45%, transparent); }
.sbl-menu .sbl-form .sbl-error { font-size: .8em; color: #ef4444; }
.sbl-menu .sbl-form .sbl-actions { display: flex; gap: .5em; justify-content: flex-end; }
.sbl-menu .sbl-form button {
  font: inherit; font-size: .85em; font-weight: 600; padding: .5em 1em; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--sbl-text) 15%, transparent); background: transparent; color: var(--sbl-text);
}
.sbl-menu .sbl-form button.primary { background: var(--sbl-accent); border-color: var(--sbl-accent); color: #fff; }
.sbl-menu .sbl-form button:disabled { opacity: .5; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .sbl-menu, .sbl-menu .sbl-item { transition: none; }
}