/* ---------- Select (Django: a <select data-select> in a .sig-select, enhanced by select.js) ----------
 * One look and behaviour for every choice of a value (sort, source, section ...): a label, a
 * button with the chosen value and a list in the popover style of the header menus. The native
 * select stays in the form (it sends the value, and works without JavaScript, styled alike);
 * select.js hides it and builds the button and the list. Options may carry an icon (data-icon).
 * Shown in components/frame.html. */

.sig-select { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sig-select > label, .sig-select-label { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; white-space: nowrap; }

/* Without JavaScript: the native select, styled like the button */
.sig-select > select { appearance: none; min-width: 150px; max-width: 100%; padding: 7px 30px 7px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23889aab'%3E%3Cpath d='M12 13.2 16.9 8.3l1.4 1.4L12 16 5.7 9.7l1.4-1.4z'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; color: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.sig-select > select:hover { border-color: var(--color-primary); }
.sig-select.is-enhanced > select { position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* The button: the chosen value and a chevron */
.sig-select-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 150px; max-width: 100%; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); color: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-align: left; transition: background-color .18s ease, border-color .18s ease; }
.sig-select-button:hover, .sig-select.is-open .sig-select-button { border-color: var(--color-primary); background: var(--panel-hover); }
.sig-select-value { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sig-select-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-select-value .icon, .sig-select-option .icon:first-child { flex: none; color: var(--color-primary); font-size: 14px; }
.sig-select-chevron { flex: none; color: var(--muted); font-size: 16px; transition: transform .16s ease; }
.sig-select.is-open .sig-select-chevron { transform: rotate(180deg); color: var(--color-primary); }

/* The list: the popover of the header menus */
.sig-select-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: none; min-width: 100%; max-height: 300px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid var(--color-border); border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)), var(--color-surface) 90px); box-shadow: 0 18px 48px rgb(3 10 16 / .32), 0 2px 6px rgb(3 10 16 / .12); }
.sig-select-list::before { content: ""; position: sticky; top: -6px; display: block; height: 2px; margin: -6px 10px 4px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--color-primary), var(--hud-transmission), transparent); }
.sig-select-list:focus { outline: none; }
.sig-select-list:focus-visible { border-color: var(--color-primary); }
.sig-select.is-open .sig-select-list { display: block; animation: sig-select-in .14s ease-out; }
.sig-select.is-up .sig-select-list { top: auto; bottom: calc(100% + 8px); }
.sig-select.is-start .sig-select-list { right: auto; left: 0; }
@keyframes sig-select-in { from { opacity: 0; transform: translateY(-4px); } }

.sig-select-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 3px; color: var(--text); font-size: 13px; white-space: nowrap; cursor: pointer; }
.sig-select-option.is-active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.sig-select-option[aria-selected="true"] { color: var(--color-primary); font-weight: 600; }
.sig-select-option .sig-select-check { margin-left: auto; padding-left: 14px; color: var(--color-primary); font-size: 15px; visibility: hidden; }
.sig-select-option[aria-selected="true"] .sig-select-check { visibility: visible; }
.sig-select-option[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .sig-select.is-open .sig-select-list { animation: none; }
  .sig-select-chevron { transition: none; }
}