/* THE DROPDOWN COMPONENT — the popup static/select.js draws, on its own. IT LIVES HERE RATHER THAN IN app.css BECAUSE OF WHO NEEDS IT. Two pages in this app are not app pages at all: templates/scheduling/print.html and crew_sheet.html are documents. Each is one self-contained file with its own @page rules and its own hand-written toolbar, and neither loads app.css — deliberately, because app.css paints a dark application over the whole viewport and these have to print onto white paper. The crew sheet's own toolbar is where the owner first reported the OS menu (One day / That week, Show / Everything). Fixing it meant either a second dropdown implementation for the documents — two things to keep in agreement, which is how they stop agreeing — or one component file both can read. This is that file. It is the only place .qcsel is styled; app.css keeps the CONTEXT rules (how a seat row or a toolbar sizes one) and nothing else, so there is still exactly one dropdown. EVERY COLOUR IS A TOKEN WITH A FALLBACK. On an app page the tokens are defined at :root in app.css, they follow the light/dark theme, and the fallback is never used. In a print document nothing defines them, so each var() falls back to the dark palette's own value — which is right there, because both toolbars are the same near-black the app is. The fallbacks are copies of app.css's :root and have to be changed with it; the test suite pins them together (tests/test_branded_dropdown.py) so they cannot drift silently. PRINTING IS UNAFFECTED. The popup is fixed-positioned on , outside the toolbar the documents hide at print time, so it gets its own print rule at the bottom of this file. Nothing else here paints anything unless select.js has built it. */ .qcsel { position: relative; display: block; width: 100%; min-width: 0; } /* Invisible, out of the way, and STILL FOCUSABLE. It was display:none, which is fine until the select underneath is `required` and empty: Chrome refuses the submit with "not focusable" and shows the user nothing at all. Laid over its own button instead — no size of its own, no pointer events, and tabindex=-1 from select.js so it is out of the tab order. */ .qcsel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; } /* The face. On the type scale: 12.5px secondary, same as every other cell control. Square corners, --panel-2 ground, gold only on the open edge and the current choice, per the brief's "gold = brand + primary action". */ .qcsel-btn { display: flex; align-items: center; gap: 6px; width: 100%; background: var(--panel-2, #171c26); color: var(--text, #e8e6e1); border: 1px solid var(--line, #232a38); padding: 6px 9px; font: inherit; text-align: left; cursor: pointer; } .qcsel-btn:hover { border-color: var(--line-2, #2c3547); } .qcsel.open .qcsel-btn { border-color: var(--gold-deep, #a87a24); } .qcsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qcsel.qcsel-empty .qcsel-val { color: var(--text-dim, #9aa3af); } .qcsel-caret { color: var(--text-faint, #7b8593); font-size: 12.5px; line-height: 1; } /* Fixed to the viewport so dense scroll panes (seats, the board) can't clip it; select.js keeps it under the button. */ .qcsel-pop { position: fixed; z-index: 60; background: var(--raised, #1d2330); border: 1px solid var(--line-2, #2c3547); box-shadow: var(--shadow, 0 3px 14px rgba(0, 0, 0, .5)); display: flex; flex-direction: column; max-height: 320px; font-family: var(--sans, Inter, "Segoe UI", system-ui, -apple-system, sans-serif); } /* Spelled out rather than left to the app's base input rule: in a print document there is no base input rule, and a filter box with no ground of its own would come out as a white slot in a dark panel. */ .qcsel-qwrap { padding: 6px; border-bottom: 1px solid var(--line, #232a38); background: var(--panel, #11151d); } .qcsel-q { width: 100%; font: inherit; font-size: 12.5px; background: var(--panel-2, #171c26); color: var(--text, #e8e6e1); border: 1px solid var(--line, #232a38); padding: 6px 9px; } .qcsel-q:focus { outline: none; border-color: var(--gold-deep, #a87a24); } .qcsel-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; } .qcsel-opt { padding: 5px 10px; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #e8e6e1); } .qcsel-opt.none { color: var(--text-dim, #9aa3af); font-style: italic; } .qcsel-opt.active { background: var(--panel-2, #171c26); } .qcsel-opt.on { box-shadow: inset 2px 0 0 var(--gold-ink, #e3a93b); font-weight: 600; } .qcsel-opt mark { background: var(--gold-tint, rgba(227, 169, 59, .055)); color: var(--gold-bright, #f6c667); } .qcsel-none { padding: 10px; font-size: 11.5px; color: var(--text-faint, #7b8593); } /* app.css makes [hidden] win globally; a document without it relies on the browser's own rule, which any display: declaration would beat. */ .qcsel-pop [hidden] { display: none; } /* ---- the same control without the filter box (.qcsel.plain) ------------- appearance:none — app.css's root rule — only ever reached the CLOSED select. The OPEN option list is drawn by Windows/Chrome, not by any stylesheet, so a branded field still dropped a grey OS menu (owner, 2026-09-04: the crew sheet's One day / That week and Show / Everything). Short choice lists therefore borrow the popup the searchable picker already draws — nothing new to look at, one control to maintain, and the same Esc / outside-click behaviour. SIZING FOLLOWS THE NATIVE SELECT IT REPLACES, and that differs by where it stands. In a toolbar — Exports, and both document toolbars — a select sizes to its content and a full-width one eats the row. In a form it fills its field. So the default is content-sized and the form case is named, which is the way round that needs no rule per toolbar. */ .qcsel.plain { display: inline-flex; width: auto; vertical-align: middle; } .qcsel.plain > .qcsel-btn { width: auto; flex: 1 1 auto; min-width: 0; } label > .qcsel.plain { display: flex; width: 100%; } /* Shrink-wraps its longest option rather than being pinned to the button: "Pre-lights only" drops from a button reading "Everything". */ .qcsel-pop.plain { max-width: min(360px, calc(100vw - 16px)); } /* THE DOCUMENTS PRINT EXACTLY AS THEY DID. Their toolbars are already display:none at print time, but the popup is not inside one — select.js appends it to so dense scroll panes cannot clip it, so a sheet sent to the printer with a dropdown still open would otherwise carry it. */ @media print { .qcsel-pop { display: none !important; } }