/* ══ QC Select — a designed dropdown that keeps the native <select> ══════════
   A native <select>'s option list is painted by the OPERATING SYSTEM. It cannot
   be styled with CSS — not its font, background, spacing or corners. That is a
   browser limitation, not a missing rule, so the only way to get a designed
   dropdown is to draw one.

   The native <select> is NOT removed. It stays in the DOM as the source of
   truth, so `.value`, `.options`, `.selectedIndex`, `innerHTML +=` population,
   `change` listeners and form serialisation all keep working untouched. This
   file styles a button + panel that mirror it.

   Colours are tokens (npm run brand-doctor); greys are neutral chrome.
   Every rule on a button sets colour AND background together, never one alone
   (npm run contrast-doctor). */

.qcs { position: relative; width: 100%; }

/* The real control. Kept focusable and in the layout flow but invisible, so
   nothing that measures or focuses it breaks; it must not be display:none,
   which would drop it from form submission and from :focus. */
.qcs > select.qcs-native {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; pointer-events: none !important;
  z-index: -1 !important; margin: 0 !important;
}

.qcs-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff !important; color: #111 !important;
  border: 1px solid #767676 !important; border-radius: 8px !important;
  padding: 10px 12px !important; margin: 0 !important;
  font-family: inherit; font-size: 16px; line-height: normal;
  text-align: left; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.qcs-btn:hover {
  background: #fff !important; color: #111 !important;
  border-color: var(--brand) !important; filter: none;
}
.qcs-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.qcs.qcs-open > .qcs-btn {
  background: #fff !important; color: #111 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-a15);
}
.qcs-btn[disabled] {
  background: #f4f5f4 !important; color: #8a8a8a !important;
  cursor: not-allowed; border-color: #cfcfcf !important;
}
.qcs-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
/* the placeholder option reads as a prompt, not as a chosen value */
.qcs-btn.qcs-empty .qcs-label { color: #6b7280; }
.qcs-caret { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor;
             border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
             transition: transform .15s; }
.qcs.qcs-open .qcs-caret { transform: rotate(225deg) translate(-3px,-3px); }

/* ── the panel ───────────────────────────────────────────────────────────
   While open the panel is MOVED TO <body> by the script. index.html sets
   `input, select, textarea { position: relative !important; z-index: 9999
   !important }`, so every field sits high in its own stacking context, and a
   panel left nested in the form is confined to whatever stacking context an
   ancestor creates — its z-index cannot escape that context however large it
   is. That is why the sheet rendered UNDER the fields below it, and why taps
   landed on the backdrop instead of an option. As a child of <body> it is in
   the root stacking context, so it is above the page everywhere.

   Being portaled, it is `fixed` in both forms; the anchored one is placed by
   the script from the button's rect. */
.qcs-panel {
  position: fixed;
  background: #fff; border: 1px solid #e0eadb; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  z-index: 100000;              /* app header is 9999 and its sidebar 10001 */
  padding: 4px; margin: 0; list-style: none;
  display: flex; flex-direction: column; max-height: 320px;
}
/* while it still sits inside the wrapper (closed) it must not be a fixed box */
.qcs > .qcs-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); }

/* THE OPTIONS scroll, not the whole panel — so the title and the search box
   stay put and a 20-item list scrolls under them instead of pushing them away. */
.qcs-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.qcs-panel[hidden] { display: none !important; }
.qcs-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 10px; border-radius: 7px; cursor: pointer;
  font-size: 15px; color: #1a1a1a; background: #fff;
  min-height: 44px; box-sizing: border-box;
}
.qcs-opt:hover, .qcs-opt.qcs-active { background: var(--brand-a08); color: #0b100b; }
.qcs-opt[aria-selected="true"] { background: var(--brand-a15); color: #0b100b; font-weight: 700; }
.qcs-opt[aria-disabled="true"] { color: #9aa39a; background: #fff; cursor: not-allowed; }
.qcs-tick { flex: 0 0 auto; width: 14px; color: var(--brand); font-weight: 800; }
.qcs-opt[aria-selected="true"] .qcs-tick::before { content: '✓'; }
.qcs-opt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qcs-search {
  position: sticky; top: 0; background: #fff; padding: 4px 4px 6px;
  border-bottom: 1px solid #eef2ed; margin-bottom: 4px;
}
.qcs-search input {
  width: 100% !important; height: 40px !important; font-size: 16px !important;
  padding: 8px 10px !important; line-height: normal !important;
  border: 1px solid #dcdcdc !important; border-radius: 7px !important; box-sizing: border-box;
}
.qcs-empty-msg { padding: 14px 10px; color: #7a8f78; font-size: 14px; text-align: center; }

/* ── on a phone the panel becomes a bottom sheet ──────────────────────────
     A panel anchored under the control is unreachable when the control sits low
     on a short screen and the keyboard is up. A sheet is always in the same
     place and its rows are proper thumb targets. */
@media (max-width: 720px) {
  .qcs-panel.qcs-sheet {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    width: auto !important; max-height: 62vh; border-radius: 16px 16px 0 0;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 34px rgba(0,0,0,.28);
    border: none; border-top: 1px solid #e0eadb;
  }
  .qcs-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 4px 8px; font-size: 13px; font-weight: 700; color: #0b100b;
    position: sticky; top: 0; background: #fff;
  }
  .qcs-sheet-head::before {
    content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: #d8ded7;
  }
  .qcs-close {
    background: #f0f4ef !important; color: #3a4a38 !important;
    border: 1px solid #dde8db !important; border-radius: 8px !important;
    padding: 6px 12px !important; margin: 0 !important;
    font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .qcs-close:hover {
    background: #e6ede4 !important; color: #0b100b !important;
    border-color: var(--brand) !important; filter: none;
  }
  .qcs-opt { padding: 13px 10px; font-size: 16px; min-height: 48px; }
  /* strictly BELOW the panel's 100000. Both are children of <body>, so this
     comparison is now meaningful — before the portal they were in different
     stacking contexts and the backdrop could swallow every tap. */
  .qcs-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99999;
  }
}
.qcs-sheet-head, .qcs-close { display: none; }
@media (max-width: 720px) { .qcs-sheet-head { display: flex; } .qcs-close { display: inline-block; } }
