/* Align Dash, Bootstrap (SANDSTONE), and React-Select with app palette */
/* Palette: core/config/app_base.py THEME (forest green + warm neutrals) */
:root {
  --ad-primary: #1f6f5f !important;
  --ad-primary-light: #3e8e7e !important;
  --ad-primary-dark: #155447 !important;
  --ad-border: #d6d0c4 !important;
  --ad-bg: #f5f1e8 !important;
  /* Bootstrap 5 theme bridge */
  --bs-primary: #1f6f5f !important;
  --bs-primary-rgb: 31, 111, 95 !important;
  --bs-link-color: #1f6f5f !important;
  --bs-link-hover-color: #155447 !important;
  --bs-focus-ring-color: rgba(31, 111, 95, 0.35) !important;
  --bs-btn-hover-bg: #155447 !important;
  --bs-btn-active-bg: #155447 !important;
  --bs-btn-hover-border-color: #155447 !important;

  /* Dash design tokens (Dash 3+ core components) — override default purple/blue */
  --Dash-Spacing: 4px !important;
  --Dash-Stroke-Strong: rgba(30, 45, 42, 0.45) !important;
  --Dash-Stroke-Weak: rgba(30, 45, 42, 0.12) !important;
  --Dash-Fill-Interactive-Strong: #1f6f5f !important;
  --Dash-Fill-Interactive-Weak: rgba(31, 111, 95, 0.08) !important;
  --Dash-Fill-Inverse-Strong: #fff !important;
  --Dash-Text-Primary: rgba(30, 45, 42, 0.87) !important;
  --Dash-Text-Strong: rgba(30, 45, 42, 0.92) !important;
  --Dash-Text-Weak: rgba(92, 111, 107, 0.8) !important;
  --Dash-Text-Disabled: rgba(92, 111, 107, 0.55) !important;
  --Dash-Fill-Primary-Hover: rgba(31, 111, 95, 0.06) !important;
  --Dash-Fill-Primary-Active: rgba(31, 111, 95, 0.12) !important;
  --Dash-Fill-Disabled: rgba(214, 208, 196, 0.55) !important;
  --Dash-Shading-Strong: rgba(30, 45, 42, 0.32) !important;
  --Dash-Shading-Weak: rgba(30, 45, 42, 0.18) !important;
}

/* ----- dcc.Loading / Dash callback spinners ----- */
._dash-loading,
._dash-loading-callback,
[class*="_dash-loading"] {
  color: var(--ad-primary) !important;
}

._dash-loading::after,
._dash-loading-callback::after,
._dash-loading-callback .dash-spinner::before,
._dash-loading-callback .dash-spinner::after {
  border-color: rgba(31, 111, 95, 0.2) rgba(31, 111, 95, 0.2) rgba(31, 111, 95, 0.2) var(--ad-primary) !important;
}

/* Dash 2+ cube / default spinner host */
.tab-loading-fixed-host .dash-default-spinner,
.dash-default-spinner,
div[class*="dash-default-spinner"] {
  color: var(--ad-primary) !important;
  border-color: var(--ad-primary) !important;
}

/* SVG spinners inside Loading */
#_dash-app-content svg circle[stroke],
#_dash-app-content .dash-spinner svg circle {
  stroke: var(--ad-primary) !important;
}

/* ----- Native controls ----- */
input[type="radio"] {
  accent-color: var(--ad-primary);
}

input[type="checkbox"] {
  accent-color: var(--ad-primary);
}

/* ----- React-Select (Dash dropdown) v2 + v5-ish ----- */
.Select-control,
div[class*="control"] .css-13cymwt-control,
div[class*="control"] .css-t3ipsp-control {
  border-color: var(--ad-border) !important;
}

.Select--is-focused > .Select-control,
div[class*="control"]:focus-within .css-13cymwt-control,
div[class*="control"]:focus-within .css-t3ipsp-control {
  border-color: var(--ad-primary) !important;
  box-shadow: 0 0 0 1px var(--ad-primary) !important;
}

.Select-menu-outer {
  border-color: var(--ad-border) !important;
}

.Select-option.is-focused {
  background-color: rgba(31, 111, 95, 0.12) !important;
  color: #1e2d2a !important;
}

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

/* Generic dropdown menu (emotion class names change between versions) */
#_dash-app-content [role="listbox"],
#_dash-app-content [class*="menu"] {
  border-color: var(--ad-border);
}

/* ----- dcc.Tabs (top tabs) ----- */
#_dash-app-content .tab--selected {
  border-bottom-color: var(--ad-primary) !important;
  color: var(--ad-primary-dark) !important;
}

/* ----- Links ----- */
#_dash-app-content a:not(.btn):not(.nav-link) {
  color: var(--ad-primary);
}

#_dash-app-content a:not(.btn):not(.nav-link):hover {
  color: var(--ad-primary-light);
}

/* ----- Bootstrap btn-primary (dbc + form) ----- */
.btn-primary,
#_dash-app-content .btn-primary {
  background-color: var(--ad-primary) !important;
  border-color: var(--ad-primary) !important;
}

.btn-primary:hover,
#_dash-app-content .btn-primary:hover {
  background-color: var(--ad-primary-dark) !important;
  border-color: var(--ad-primary-dark) !important;
}

.btn-primary:focus,
.btn-primary:active,
#_dash-app-content .btn-primary:focus,
#_dash-app-content .btn-primary:active {
  background-color: var(--ad-primary-dark) !important;
  border-color: var(--ad-primary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(31, 111, 95, 0.35) !important;
}

/* Form controls focus ring */
.form-control:focus,
.form-select:focus {
  border-color: var(--ad-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(31, 111, 95, 0.2) !important;
}