/* 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;
  /* Unified control height (36px) shared with .seg-control and .number-field-box,
     so a toggle, a dropdown, and a number field line up perfectly in a control row. */
  min-height: 36px;
  height: 36px;
  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: 3px;
  width: fit-content;
  height: 36px;                  /* unified control height (see .dash-dropdown) */
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid #e6e9ee;
  border-radius: 0.5rem;
  /* A clearly cooler track (slate-100) so the raised white pill reads against it —
     the old near-white track let the pill float with no visible groove. */
  background: #f1f5f9;
}

.seg-control .dash-options-list-option {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* Vertical centering is handled by the flex stretch to the 36px track; only
     horizontal padding sets the segment width. */
  padding: 0 0.78rem;
  border-radius: 0.375rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: #64748b;                /* slate-500 */
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 0 0 0 rgba(197, 160, 70, 0);
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s 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;
}

/* Active segment: a crisp WHITE raised pill (high-contrast ink text) with a thin
   gold underline accent — the same "gold line = active" language as the sidebar,
   and lighter than a solid-gold fill, so a view toggle no longer carries the same
   visual weight as the primary gold CTA (Build). */
.seg-control .dash-options-list-option.selected,
.seg-control .dash-options-list-option[aria-selected="true"] {
  background: #ffffff;
  color: #0b1c2d;
  font-weight: 700;
  box-shadow:
    0 1px 2px rgba(11, 28, 45, 0.08),
    0 1px 3px rgba(11, 28, 45, 0.05),
    inset 0 -2px 0 #c5a046;
}

/* ── Data-preview search box (a dcc.Input styled as a flat search field) ─────────
 *  The /data trust table replaced Dash's cryptic native filter row (the "Aa" query
 *  cells) with one plain search box. Dash 4 wraps the <input> in a .dash-input-container
 *  that defaults to white with its own border — flatten it so the field reads as a
 *  single search control. (Plain CSS, not Tailwind: the runtime .dash-input-container
 *  class gets tree-shaken from @layer components.) */
.data-search-box .dash-input-container,
.data-search-box .dash-input {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.data-search-box input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #0b1c2d;
  font-size: 0.8125rem;
  font-weight: 500;
}
.data-search-box input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

/* ── 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;
}

/* ── Sheet picker: compact + quiet ──────────────────────────────────────────────
 *  A small utility control on the confirm panel — the 40px default trigger read
 *  as a hero input and visually outweighed the roles grid. Hairline border,
 *  transparent fill, small type; the trigger hugs its content (the anchor is
 *  w-auto in mapping_review.py). */
#mapping-sheet-picker .dash-dropdown {
  min-height: 26px !important;
  padding: 0 0.5rem !important;
  border-radius: 0.25rem !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  font-size: 11px;
  font-weight: 500;
}

/* Dash's bundled CSS pins the trigger's inner grid to min-height:32px — undo it
 * here or the compact trigger above can never get below ~34px. */
#mapping-sheet-picker .dash-dropdown-grid-container {
  min-height: 24px !important;
}

#mapping-sheet-picker .dash-dropdown:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

#mapping-sheet-picker .dash-dropdown[data-state="open"] {
  border-color: rgba(197, 160, 70, 0.45) !important;
  box-shadow: none !important;
}

#mapping-sheet-picker .dash-dropdown-value,
#mapping-sheet-picker .dash-dropdown-value-item {
  color: #94a3b8 !important;                 /* slate-400 — meta, not content */
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mapping-sheet-picker .dash-dropdown-trigger-icon {
  width: 12px;
  height: 12px;
  color: #64748b;
}