/* ──────────────────────────────────────────────────────────────────────────
 * /css/_lib/dropdown.css
 *
 * MANIFEST
 * Purpose: TrustGuard Glass Tier-3 dropdown component (LOCKED C97-B). The
 *          anchored glass popover panel + its two modes' item styling:
 *            • Action mode  — custom button-list: leading icon per item +
 *                             a red destructive item below a hairline divider.
 *            • Select mode  — progressive enhancement over a native <select>:
 *                             checkmark on the selected option, no leading icons,
 *                             plus the trigger surface that fronts the hidden
 *                             native control.
 *          The JS module (/js/_lib/dropdown.js) renders the panel into a
 *          BODY-level layer and positions it to the trigger (fixed), so a
 *          card's overflow:hidden never clips it.
 *
 * Glass:   The 5-layer Tier-3 recipe (LOCKED C97-A) is built ENTIRELY from the
 *          3G.1 Glass tokens in /css/tokens.css (--tier3-tint / --glass-blur /
 *          --glass-saturate / --glass-edge / --glass-shadow / --edge-highlight
 *          / --tier3-tint-opaque). NO hardcoded glass values. Accent = --red /
 *          --danger family (no new reds). @supports not(backdrop-filter) →
 *          solid opaque-tint fallback.
 *
 * Cascade: A /css/_lib/ shared module (LOCKED C82-A). Loaded AFTER the shared
 *          base layer (tokens → … → shared-themes) and BEFORE the page CSS,
 *          right after /css/_lib/cis-form.css. Every component rule that must
 *          win over an adopted page menu's item CSS (e.g. .kebab-item) is
 *          scoped under .tg-dd-panel so it carries higher specificity than the
 *          page's single-class selector — the _lib file loads earlier, so it
 *          relies on specificity, not source order, to win.
 *
 * Dark-only: DARK is the authoritative, shippable value set (launch is
 *          dark-only per LOCKED C99-A). LIGHT values resolve from the
 *          provisional light token set — finalized at the Phase 4 light sprint.
 *
 * Precache: Added to sw.js PRECACHE_URLS (loaded by 2+ portal pages, same
 *          rationale as cis-form.css + the /js/_lib/ shared modules).
 *
 * Consumed by: client-detail.html (#kebabMenu) + purchased-lead.html
 *          (#plKebabMenu) card-header kebabs (Action mode) this sprint;
 *          the list-page filters + the .cis-select family migrate in later
 *          C97-B sprints (see /docs/_audits/dropdown-consolidation-audit-c100.md).
 *
 * Shipped: C100 (C97-B Sprint 1).
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Body-level glass panel ──────────────────────────────────────────────── *
 * Positioned by the JS module via inline top/left (fixed). One open at a time.
 * The 5-layer glass recipe, all from tokens. */
.tg-dd-panel {
  position: fixed;
  z-index: var(--z-modal);              /* above sticky tabs (10) + nav (100) */
  min-width: 208px;
  max-width: min(320px, calc(100vw - 24px));
  /* Cap height + scroll internally so a long list (e.g. the 50-state picker)
   * never runs off the viewport. Short menus (kebabs, 5 items) sit well under
   * the cap, so they render unchanged with no scrollbar. */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: var(--space-1-5);
  list-style: none;

  /* Glass recipe — Tier 3 (LOCKED C97-A), tokens only */
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight);

  /* Open/close micro-motion — subtle ease, NO overshoot (not --ease-spring) */
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.tg-dd-panel.tg-dd-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Opaque-tint fallback where backdrop-filter is unsupported (covers the
 * WebKit-prefix-only case too) — reads nearly identical to the frosted panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tg-dd-panel {
    background: var(--tier3-tint-opaque);
  }
}

/* prefers-reduced-motion — no slide/scale, just an opacity cut-in (LOCKED C97-B). */
@media (prefers-reduced-motion: reduce) {
  .tg-dd-panel {
    transition: opacity 0.001s linear;
    transform: none;
  }
  .tg-dd-panel.tg-dd-open {
    transform: none;
  }
}

/* ── Menu items (shared) ─────────────────────────────────────────────────── *
 * Scoped under .tg-dd-panel + [role] so they win over an adopted page menu's
 * single-class item CSS (e.g. .kebab-item) regardless of stylesheet order. */
.tg-dd-panel [role="menuitem"],
.tg-dd-panel [role="menuitemradio"] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  min-height: 44px;                     /* touch target (LOCKED C97-B) */
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

/* Hover + keyboard focus share one highlight — a translucent glass-friendly
 * wash, not a solid surface tint (keeps the frosted read). */
.tg-dd-panel [role="menuitem"]:hover,
.tg-dd-panel [role="menuitem"]:focus-visible,
.tg-dd-panel [role="menuitem"].tg-dd-active,
.tg-dd-panel [role="menuitemradio"]:hover,
.tg-dd-panel [role="menuitemradio"]:focus-visible,
.tg-dd-panel [role="menuitemradio"].tg-dd-active {
  background: var(--hairline);
  outline: none;
}

.tg-dd-panel [role="menuitem"] svg,
.tg-dd-panel [role="menuitemradio"] svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Select mode — optgroup group headers (M8.4) ─────────────────────────── *
 * Non-interactive labels rendered from the native <select>'s <optgroup>
 * elements (role="presentation"; skipped by keyboard nav, which targets only
 * [role="menuitemradio"]). Typography mirrors the admin sidebar's .ash-grp
 * group labels — first consumer is the admin mobile nav sheet. */
.tg-dd-panel .tg-dd-group {
  font-size: var(--text-xxs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-disabled);
  padding: var(--space-2-5) var(--space-3) var(--space-1);
}

/* Disabled option rows (M8.4) — rendered for disabled <option>s; the JS
 * click handler + visibleItems() already skip item.disabled. */
.tg-dd-panel [role="menuitemradio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Action mode — destructive item + hairline divider ───────────────────── *
 * Red is MEANING only (LOCKED C97-A). The JS module inserts .tg-dd-divider
 * immediately before the first destructive item. */
.tg-dd-divider {
  height: 1px;
  margin: var(--space-1) var(--space-1);
  background: var(--hairline);
  border: none;
}

.tg-dd-panel .tg-dd-item--danger {
  color: var(--danger);
}

.tg-dd-panel .tg-dd-item--danger:hover,
.tg-dd-panel .tg-dd-item--danger:focus-visible,
.tg-dd-panel .tg-dd-item--danger.tg-dd-active {
  background: var(--danger-wash);
  color: var(--danger);
}

/* ── Select mode ─────────────────────────────────────────────────────────── *
 * Progressive enhancement: the native <select> STAYS in the DOM as the source
 * of truth (visually hidden, still form-participating + SR-valid). The module
 * fronts it with .tg-dd-select-trigger and renders options as menuitemradio
 * rows with a leading checkmark on the selected one (no leading icons). */
.tg-dd-select-native {
  /* Visually hidden but kept in the accessibility tree + form. Not display:none
   * (that would drop it from form submission / SR). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tg-dd-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text);
  text-align: left;
  cursor: pointer;

  /* Tier-2 recessed well — the control reads as an input, the panel as glass. */
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--tier2-inset);
}

.tg-dd-select-trigger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.tg-dd-select-trigger .tg-dd-select-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Selected-option checkmark (left). Reserve the gutter on every row so labels
 * align whether or not the row is selected. */
.tg-dd-panel.tg-dd-select [role="menuitemradio"] {
  padding-left: var(--space-2);
}

.tg-dd-panel.tg-dd-select [role="menuitemradio"] .tg-dd-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  stroke: var(--red);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tg-dd-panel.tg-dd-select [role="menuitemradio"][aria-checked="true"] .tg-dd-check {
  opacity: 1;
}

/* ── Select-mode bottom sheet (mobile, < 640px) ──────────────────────────── *
 * SELECT mode below the 640px content-column breakpoint presents as a
 * viewport-anchored bottom sheet instead of a trigger-anchored popover — the
 * iOS/Stripe pattern (LOCKED C97-B, revised C101). Models the proven
 * `.quote-sheet` recipe (safe-area inset + bottom-pinned slide) but rendered in
 * the TrustGuard Glass dark tokens, NOT the page sheet's var(--white). The JS
 * module builds the overlay + sheet chrome and MOVES the option panel into the
 * sheet body (.tg-dd-panel--in-sheet) so one DOM powers both presentations. */
.tg-dd-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);              /* same layer as the popover panel */
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tg-dd-sheet-overlay.tg-dd-sheet-open {
  opacity: 1;
  pointer-events: auto;
}

.tg-dd-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom);

  /* Glass recipe — Tier 3 (LOCKED C97-A), tokens only. The sheet itself carries
   * the tint + blur; the moved-in panel goes transparent (see --in-sheet). */
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-bottom: none;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight);

  transition: transform 0.3s ease;
}

.tg-dd-sheet-overlay.tg-dd-sheet-open .tg-dd-sheet {
  transform: translateX(-50%) translateY(0);
}

/* Opaque-tint fallback where backdrop-filter is unsupported — AA legibility. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tg-dd-sheet {
    background: var(--tier3-tint-opaque);
  }
}

.tg-dd-sheet-handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: var(--space-2) auto var(--space-1);
  border-radius: 2px;
  background: var(--text-muted);
  opacity: 0.4;
}

.tg-dd-sheet-title {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-input);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-align: center;
}

/* The option panel, once moved into the sheet, sheds its popover chrome and
 * becomes the scrollable option list (the sheet provides the glass surface). */
.tg-dd-sheet .tg-dd-panel--in-sheet {
  position: static;
  z-index: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0 var(--space-2) var(--space-2);
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Roomier touch targets in the sheet (>=48px per spec). */
.tg-dd-sheet .tg-dd-panel--in-sheet [role="menuitemradio"] {
  min-height: 48px;
}

/* prefers-reduced-motion — no slide, opacity cut-in only (LOCKED C97-B). */
@media (prefers-reduced-motion: reduce) {
  .tg-dd-sheet-overlay {
    transition: opacity 0.001s linear;
  }
  .tg-dd-sheet,
  .tg-dd-sheet-overlay.tg-dd-sheet-open .tg-dd-sheet {
    transition: none;
    transform: translateX(-50%) translateY(0);
  }
}