/* XWARES searchable dropdowns — v1.16.0
 *
 * Paired with static/js/xw-select.js. The native <select> stays in the DOM
 * and stays the thing the form submits; these rules hide it and style the
 * button + panel drawn beside it.
 *
 * The `.xw-sel-ready` guard on <html> means that if the script fails to
 * load, nothing here applies and every dropdown renders as a plain, fully
 * working native select.
 */

.xw-sel { position: relative; display: block; width: 100%; }

/* Native control: kept focusable-adjacent but out of sight. Not
   display:none — some browsers skip validation on hidden controls, and we
   still want Django's required/invalid states to behave. */
.xw-sel-ready .xw-sel-native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- the button that replaces the select ---------------------------- */
/* Sized to match the app's other form controls exactly (brand.css's
   `input[type="text"], select, textarea { padding: 11px 12px; font-size:
   13px; border-radius: 6px; min-height: 44px; }`) — this used to inherit
   its own smaller/different metrics (16px font via `font: inherit`, an
   8px radius via var(--radius), a 38px min-height), so any row mixing a
   plain input with an enhanced select rendered visibly misaligned. */
.xw-sel-btn {
  width: 100%;
  text-align: start;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 0.5px solid var(--line-2);
  border-radius: 6px;
  padding: 11px 32px 11px 12px;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .12s ease, background .12s ease;
}
html[dir="rtl"] .xw-sel-btn { padding: 11px 12px 11px 32px; }
@media (pointer: coarse) { .xw-sel-btn { font-size: 16px; } }

/* caret */
.xw-sel-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .15s ease, border-color .12s ease;
}
.xw-sel.is-open .xw-sel-btn::after {
  transform: rotate(-135deg);
  margin-top: -2px;
  border-color: var(--brass-ink);
}

.xw-sel-btn:hover { border-color: var(--line-2); background: var(--surface); }
.xw-sel-btn:focus-visible,
.xw-sel.is-open .xw-sel-btn {
  outline: none;
  border-color: var(--brass-ink);
  background: var(--surface);
}
.xw-sel-btn[disabled] { opacity: .5; cursor: not-allowed; }
.xw-sel-btn.is-placeholder { color: var(--text-3); }

/* ---- panel ----------------------------------------------------------- */
/* The panel is toggled through the `hidden` attribute from JS.
 *
 * `hidden` only works because the UA stylesheet says [hidden]{display:none},
 * and that rule loses to ANY author class rule — including the
 * `display:flex` below. Without this override every panel renders open on
 * page load, so each dropdown shows a stray search box floating under it.
 *
 * It wins on specificity (class + attribute beats class alone), not on
 * source order — but it sits next to the rule it guards so the pairing is
 * obvious to whoever edits this next. */
.xw-sel-panel[hidden] { display: none; }

.xw-sel-panel {
  /* Fixed, not absolute, and reparented onto <body> while open (see
     xw-select.js open()) — top/bottom/left/width are all set inline by JS
     from the trigger button's actual on-screen position. This is what lets
     the panel escape ANY ancestor's overflow clipping (e.g. .tbl-card's
     overflow-x: auto, which also clips overflow-y — a select inside an
     editable table row used to have its dropdown silently cut off). */
  position: fixed;
  /* Above every other layer in the app. This panel is deliberately
     reparented onto <body> (see above), which drops it into the ROOT
     stacking context - so its z-index competes with the app's top-level
     chrome rather than with its own siblings, and anything ranked higher
     covers it completely.

     It was 60, which already lost to the user dropdown (100) and then to
     the chat widget (150): opening a select inside the chat panel showed
     a focus ring and no list. A transient popup the user is actively
     clicking through should outrank everything, toasts (200) included -
     a toast briefly hidden is recoverable, an unclickable option is not.

     Current layers: content 5-60, user dropdown 100, chat widget 150,
     toasts 200, this 250. Anything new goes below 250. */
  z-index: 250;
  min-width: 220px;
  background: var(--surface);
  border: 0.5px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 320px;
}

.xw-sel-search {
  padding: 8px;
  border-bottom: 0.5px solid var(--line);
  background: var(--surface-2);
  flex: none;
}
.xw-sel-input {
  width: 100%;
  font: inherit;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  border: 0.5px solid var(--line-2);
  border-radius: 6px;
  padding: 7px 10px;
}
.xw-sel-input:focus { outline: none; border-color: var(--brass-ink); }
.xw-sel-input::placeholder { color: var(--text-3); }

.xw-sel-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  flex: 1 1 auto;
}

.xw-sel-opt {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}
.xw-sel-opt:hover,
.xw-sel-opt.is-active {
  background: rgba(var(--brass-rgb),.14);
  color: var(--text);
}
.xw-sel-opt.is-selected {
  color: var(--brass-ink);
  font-weight: 500;
}
.xw-sel-opt.is-selected::before {
  content: "✓";
  margin-inline-end: 6px;
  font-size: 11px;
}
.xw-sel-opt.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.xw-sel-none {
  padding: 14px 10px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}


/* Touch: bigger rows, and never let the panel outgrow the viewport. */
@media (max-width: 700px) {
  .xw-sel-opt { padding: 11px 12px; font-size: 14px; }
  .xw-sel-panel { max-height: 60vh; }
}

@media print {
  .xw-sel-btn, .xw-sel-panel { display: none !important; }
  .xw-sel-ready .xw-sel-native {
    position: static; opacity: 1; width: auto; height: auto;
  }
}