@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* =========================================================
   THEME TOKENS + FRAMEWORK OVERRIDES (single source of truth)
   ========================================================= */
:root{
  /* Brand */
  --brand: #00205b;          /* corporate blue */

  /* Neutrals */
  --text: #0f172a;
  --muted: #475569;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e2e8f0;

  /* Common framework vars that often drive purple */
  --primary: #00205b;
  --bs-primary: #00205b;
  --bs-link-color: #00205b;
  --bs-link-hover-color: #00205b;
}

/* -----------------------
   App base + sizing
------------------------ */
html, body, #react-entry-point, #_dash-app-content{
  height: 100%;
}

body{
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--surface-alt);
  margin: 0;

  /* native controls / some components */
  accent-color: var(--brand);
}

/* Labels */
label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Links + common "primary" helpers */
a, a:visited, a:hover, a:active, a:focus,
.text-primary, .text-primary:hover,
.btn-link, .btn-link:hover{
  color: var(--brand) !important;
}

/* -----------------------
   Buttons
------------------------ */
button{
  cursor: pointer;
  user-select: none;
}
button:disabled{
  cursor: not-allowed;
  opacity: 0.6;
}
button:hover{
  filter: brightness(0.97);
}
button:active{
  transform: translateY(1px);
}

/* -----------------------
   Plotly full-height graph support
------------------------ */
.full-height-graph,
.full-height-graph .js-plotly-plot,
.full-height-graph .plot-container,
.full-height-graph .svg-container{
  height: 100% !important;
}

/* -----------------------
   Focus ring (accessible, corporate)
   (remove browser outline; provide our own)
------------------------ */
*:focus{ outline: none; }

*:focus-visible{
  outline: 2px solid rgba(0,32,91,.35) !important;
  outline-offset: 2px;
}

/* -----------------------
   details/summary: prevent "mystery purple hover"
------------------------ */
summary{ color: inherit; }
summary:hover{ color: var(--brand); }

.ds-chevron{
  transition: transform 120ms ease;
}
details[open] .ds-chevron{
  transform: rotate(180deg);
}

/* =========================================================
   Dropdown – Dash dcc.Dropdown / react-select
   Keep BOTH sections only if you support both DOM patterns.
   ========================================================= */

/* --- A) Older Dash/react-select classnames (.Select-*) --- */
.Select-control,
.Select-menu-outer{
  border-radius: 10px !important;
  border-color: var(--border) !important;
}

.Select-option.is-focused,
.Select-option:hover{
  background-color: rgba(0,32,91,.08) !important;
  color: var(--text) !important;
}

.Select-option.is-selected{
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* --- B) Newer hashed classnames (Requires className="dd") --- */
/* Control border + background */
.dd [class*="-control"]{
  border-color: var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Focus state (react-select uses :focus-within inside the control) */
.dd:focus-within [class*="-control"]{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(0,32,91,.18) !important;
}

/* Menu */
.dd [class*="-menu"]{
  border-radius: 10px !important;
  overflow: hidden;
}

/* Option hover / focus */
.dd [class*="-option"]:hover,
.dd [class*="-option"][class*="--is-focused"]{
  background-color: rgba(0,32,91,.10) !important;
  color: var(--text) !important;
}

/* Option selected */
.dd [class*="-option"][class*="--is-selected"]{
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Multi-value pills */
.dd [class*="-multiValue"]{
  background-color: rgba(0,32,91,.10) !important;
}
.dd [class*="-multiValueLabel"]{
  color: var(--text) !important;
}
.dd [class*="-multiValueRemove"]:hover{
  background-color: rgba(0,32,91,.18) !important;
  color: var(--text) !important;
}

/* =========================================================
   rc-slider – single consolidated override (scoped to Dash root)
   ========================================================= */

/* Rail + track */
#_dash-app-content .rc-slider-rail{
  background: #d8dee9 !important;
}
#_dash-app-content .rc-slider-track{
  background: var(--brand) !important;
}
#_dash-app-content .rc-slider-dot-active{
  border-color: var(--brand) !important;
}

/* Handle (all states) */
#_dash-app-content .rc-slider-handle,
#_dash-app-content .rc-slider-handle:focus,
#_dash-app-content .rc-slider-handle:active,
#_dash-app-content .rc-slider-handle:hover,
#_dash-app-content .rc-slider-handle-click-focused{
  border: 2px solid var(--brand) !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(0,32,91,.22) !important;
}

/* Some versions draw extra visuals with pseudo elements */
#_dash-app-content .rc-slider-handle::before,
#_dash-app-content .rc-slider-handle::after{
  border-color: var(--brand) !important;
  box-shadow: none !important;
}

/* Remove any tooltip/bubble UI from the slider */
#_dash-app-content .rc-slider-tooltip,
#_dash-app-content .rc-slider-tooltip-inner,
#_dash-app-content .rc-slider-tooltip-arrow{
  display: none !important;
}

/* =========================================================
   Native radios (explicit, even though body has accent-color)
   ========================================================= */
input[type="radio"]{
  accent-color: var(--brand);
}