/* Dash 4.x dropdown (Radix UI) theming — flat "Palantir" look.
 *
 * These class names (dash-dropdown, dash-dropdown-content, …) are injected by
 * Dash's JavaScript at RUNTIME, so Tailwind never sees them in the Python source
 * and PURGES any rules for them from tailwind.css on every build. This plain CSS
 * file lives in /assets (auto-loaded by Dash, never processed by Tailwind), so the
 * theme always survives. Radix owns positioning — we only theme. !important beats
 * Dash's bundled default component CSS.
 *
 * Design language: matches the flat content cards (hairline slate-200 border,
 * rounded-md, no shadow). Gold (#c5a046) is the only accent — a focus ring on the
 * trigger and a subtle tint on the selected option (mirrors the sidebar's active
 * gold accent). Hover states are crisp neutral slate, not soft amber. */

/* ── Trigger ──────────────────────────────────────────────────────────────── */
.dash-dropdown {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 0.75rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid #e2e8f0 !important;     /* slate-200 hairline, matches cards */
  background: #ffffff !important;
  color: #0b1c2d !important;
  font-weight: 600;
  box-shadow: none !important;              /* flat — no drop shadow */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-dropdown:hover {
  border-color: #cbd5e1 !important;         /* slate-300 */
}

.dash-dropdown[data-state="open"] {
  border-color: #c5a046 !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 70, 0.12) !important;
}

.dash-dropdown-trigger {
  width: 100%;
}

.dash-dropdown-value,
.dash-dropdown-value-item {
  color: #0b1c2d !important;
}

/* ── Portaled menu — Radix sets position/transform/z-index inline; theme only ── */
.dash-dropdown-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  padding: 0.25rem !important;
  min-width: var(--radix-popover-trigger-width) !important;
  z-index: 1300 !important;
}

/* No search box — these option lists are short and curated. Hide the whole search
   row (the input's own container), not just the <input>. */
.dash-dropdown-search-container,
.dash-dropdown-search {
  display: none !important;
}

/* ── Options ──────────────────────────────────────────────────────────────── */
.dash-dropdown-option {
  padding: 0.45rem 0.6rem !important;
  border-radius: 0.3rem !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155 !important;                /* slate-700 */
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.dash-dropdown-option:hover,
.dash-dropdown-option[data-highlighted] {
  background: #f1f5f9 !important;           /* slate-100 — crisp neutral hover */
  color: #0f172a !important;
}

.dash-dropdown-option[aria-selected="true"],
.dash-dropdown-option[data-state="checked"] {
  background: rgba(197, 160, 70, 0.10) !important;   /* subtle gold tint */
  color: #7a5e1a !important;
  font-weight: 600;
}

/* ── Dark-surface text inputs ───────────────────────────────────────────────
 *  Dash 4 wraps each dcc.Input in a .dash-input-container that defaults to a WHITE
 *  background. On our dark drawer/modal surfaces that white leaks around the input's
 *  own (semi-transparent) dark field, so light text ends up sitting on white and
 *  reads as faint/invisible. Transparentize the container there so the dark field
 *  (and its bright text) shows through. (Lives here, not in Tailwind, because the
 *  runtime .dash-input-container class gets tree-shaken from @layer components.) */
#glaukos-chat-panel .dash-input-container,
#mapping-help-panel .dash-input-container,
#upload-modal-root .dash-input-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Segmented control (dcc.RadioItems styled as flat gold pills) ───────────────
 *  Used by the Window time-range picker. Dash renders each option as a
 *  <label class="dash-options-list-option"> (with `.selected` on the active one)
 *  wrapping a hidden radio + a text span. */
.seg-control {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  width: fit-content;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
}

.seg-control .dash-options-list-option {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.34rem 0.72rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: #64748b;                /* slate-500 */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.seg-control .dash-options-list-option-wrapper {
  display: none;                 /* hide the radio dot — the pill is the control */
}

.seg-control .dash-options-list-option:hover {
  color: #0f172a;
}

.seg-control .dash-options-list-option.selected,
.seg-control .dash-options-list-option[aria-selected="true"] {
  background: #c5a046;           /* gold fill on the active segment */
  color: #0b1c2d;
  box-shadow: 0 1px 2px rgba(11, 28, 45, 0.15);
}

/* ── Scenario lever direction cues ──────────────────────────────────────────────
 *  A what-if lever is tinted green when its current value HELPS the business and
 *  red when it HURTS (callbacks.scenarios_callbacks.update_lever_cues sets the
 *  .lever-up / .lever-down tone). Lives here (plain CSS) because it styles the
 *  runtime .number-field-box / .dash-dropdown classes, which Tailwind would purge
 *  from @layer components. */
.lever-cue.lever-up .number-field-box {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.05);
}
.lever-cue.lever-down .number-field-box {
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.05);
}
.lever-cue.lever-up .number-field-box input {
  color: #047857;
}
.lever-cue.lever-down .number-field-box input {
  color: #be123c;
}
.lever-cue.lever-down .dash-dropdown {
  border-color: rgba(244, 63, 94, 0.55) !important;
  background: rgba(244, 63, 94, 0.05) !important;
}

/* ── Dark dropdown triggers inside the flat-dark mapping modal (the portaled menu,
 *    which Radix mounts on <body>, keeps the light theme above). ─────────────── */
#mapping-review-panel .dash-dropdown {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

#mapping-review-panel .dash-dropdown:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#mapping-review-panel .dash-dropdown-value,
#mapping-review-panel .dash-dropdown-value-item {
  color: #e2e8f0 !important;
}