/* CS Direkt — universal dropdown (combobox) styling. No green, ever.
 * Paired with /combo.js, which turns every native <select> into this styled, type-to-search
 * combobox. The native <select> stays in the DOM (hidden, .combo-native) as the source of truth.
 * Each app provides only LAYOUT/fit (how wide a .combo is in its filter bar / table cell / modal);
 * this file owns the LOOK so every dropdown across the portal is identical. Uses CSS vars with
 * fallbacks so it works in every app's stylesheet (--line/--card/--ink/--muted/--line2).
 *
 * ── ACCENT CONTRACT (2026-08-23 portal re-theme; the combobox left amber with the buttons) ──
 * Four opt-in custom properties. This file DECLARES NONE OF THEM — every use site is
 * `var(--token, <default>)`, so the default paints unless an app declares the token. That is
 * deliberate: /combo.css is linked AFTER each app's own stylesheet, so a `:root{}` default here
 * would out-cascade an app's `:root{}` override. Fallback-only = the app always wins.
 *
 *   --combo-accent        field border when focused/open              default #0F6CBD (Fluent blue)
 *   --combo-accent-hover  caret in the open state (one step deeper)   default #115EA3
 *   --combo-accent-ring   the 3px focus/open glow                     default rgba(15,108,189,.22)
 *   --combo-accent-soft   option hover / highlight / selected fill    default rgba(15,108,189,.12)
 *
 * Consumers of this file: the portal SHELL, /admin, /ai and /mis. Shell + admin + ai take the blue
 * default. **MIS overrides all four to its warm-paper deep teal** in mis-dashboard/styles.css
 * `:root` — MIS is the one app with its own skin, so its dropdowns must not be Fluent blue.
 * To re-skin any app's dropdowns, declare the four on that app's `:root`; never edit this file. */

.combo { position: relative; display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; }

/* The visible field (mirrors the look of a native control + a caret). */
.combo-input {
  width: 100%; min-width: 150px;
  padding: 8px 28px 8px 11px;
  border: 1px solid var(--line, #e3e8ee);
  background: var(--card, #fff);
  border-radius: 9px;
  font: inherit; font-size: 13px;
  color: var(--ink, #14202b);
  cursor: pointer; text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}
.combo-input::placeholder { color: var(--muted, #5b6b7b); opacity: 1; }
.combo-input:focus { outline: none; cursor: text; border-color: var(--combo-accent, #0F6CBD); box-shadow: 0 0 0 3px var(--combo-accent-ring, rgba(15,108,189,.22)); }
.combo.open .combo-input { border-color: var(--combo-accent, #0F6CBD); box-shadow: 0 0 0 3px var(--combo-accent-ring, rgba(15,108,189,.22)); }
.combo-input:disabled { background: var(--line2, #eef2f7); color: var(--muted, #5b6b7b); cursor: not-allowed; }

/* Caret. */
.combo::after { content: '▾'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted, #5b6b7b); pointer-events: none; transition: color .15s, transform .15s; }
.combo.open::after { color: var(--combo-accent-hover, #115EA3); transform: translateY(-50%) rotate(180deg); }

/* The real <select> is hidden but kept for value + the change event. */
select.combo-native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden; border: 0; }

/* The popup. */
.combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  min-width: 220px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e3e8ee);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15,27,45,.22);
  max-height: 264px; overflow-y: auto; padding: 4px;
}
.combo-opt { padding: 8px 11px; font-size: 13px; line-height: 1.35; color: var(--ink, #14202b); border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt:hover, .combo-opt.hi { background: var(--combo-accent-soft, rgba(15,108,189,.12)); }
.combo-opt.sel { font-weight: 700; background: var(--combo-accent-soft, rgba(15,108,189,.12)); }
.combo-empty { padding: 9px 11px; font-size: 12.5px; color: var(--muted, #5b6b7b); }

/* Touch: 16px font avoids iOS zoom; taller field + roomier menu. */
@media (max-width: 640px) {
  .combo-input { min-height: 40px; font-size: 16px; }
  .combo-menu { max-height: 52vh; }
  .combo-opt { padding: 10px 12px; }
}