/* Dark theme for Dash 4.x's built-in component styling.
   Two layers, deliberately redundant:
   1) Override the --Dash-* variables Dash's own CSS reads from
      (the "proper" mechanism -- covers Dropdown, DatePicker, Slider
      consistently wherever they read these variables).
   2) Direct !important overrides on the actual rendered properties,
      as a guaranteed fallback in case variable indirection doesn't
      resolve the way the bundle's source suggests it should (e.g. if
      Dash sets some of these inline per-instance in a way the variable
      override alone doesn't reach). If part 1 turns out to be doing
      all the work once this is confirmed working, part 2 is harmless
      and can be trimmed later -- for now it's the safety net. */

:root {
    --Dash-Fill-Inverse-Strong: #1e1e28 !important;
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.06) !important;
    --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.06) !important;
    --Dash-Fill-Interactive-Strong: #1d9e75 !important;
    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.06) !important;
    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.1) !important;
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.3) !important;
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.12) !important;
    --Dash-Text-Primary: rgba(255, 255, 255, 0.9) !important;
    --Dash-Text-Strong: rgba(255, 255, 255, 0.92) !important;
    --Dash-Text-Weak: rgba(255, 255, 255, 0.65) !important;
    --Dash-Text-Disabled: rgba(255, 255, 255, 0.45) !important;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.5) !important;
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3) !important;
}

/* --- Direct fallback overrides (guaranteed regardless of variable resolution) --- */

.dash-dropdown,
.dash-dropdown-content {
    background: #1e1e28 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.dash-dropdown-trigger,
.dash-dropdown-value,
.dash-dropdown-option {
    color: rgba(255, 255, 255, 0.92) !important;
}

.dash-dropdown-placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.dash-dropdown-trigger-icon,
.dash-dropdown-value-count {
    color: rgba(255, 255, 255, 0.85) !important;
    fill: rgba(255, 255, 255, 0.85) !important;
}

.dash-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Multi-select: Dash's default is plain comma-joined text, not chips --
   this turns each value into its own pill. */
.dash-dropdown-value-item {
    background: #2c2c38 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
}

.dash-dropdown-value-item:not(:first-child)::before {
    content: none !important;
}

/* DatePickerSingle -- same rewritten component family as Dropdown,
   using its own dash-datepicker-* classes (not the older react-dates
   .DateInput/.SingleDatePickerInput classes some docs still reference). */
.dash-datepicker,
.dash-datepicker-content {
    background: #1e1e28 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.dash-datepicker-input {
    color: rgba(255, 255, 255, 0.92) !important;
}

.dash-datepicker-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

.dash-datepicker-caret-icon,
.dash-datepicker-range-arrow {
    color: rgba(255, 255, 255, 0.85) !important;
    fill: rgba(255, 255, 255, 0.85) !important;
}

.dash-datepicker-calendar-date-selected {
    background: #1d9e75 !important;
    color: #06251b !important;
}

.dash-datepicker-calendar-date-inside:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure the date picker's box-sizing includes its own border/padding,
   so the caret icon can't render past the box's right edge. (Width
   matching itself is handled by the combined rules further below.) */
.dash-datepicker,
.dash-datepicker-input-wrapper {
    box-sizing: border-box;
}

/* Nav arrows (prev/next date, prev/next year) -- plain html.Button
   now (not dbc.Button), so there's no Bootstrap .btn/.btn-primary
   background fighting these rules anymore -- but that also means the
   browser's own default button chrome needs resetting explicitly. */
.nav-arrow-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #1d9e75 !important;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif !important;
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 0.6px currentColor;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-arrow-btn:hover:not(:disabled) {
    color: #26c98d !important;
}

.nav-arrow-btn:disabled {
    color: rgba(255, 255, 255, 0.18) !important;
    cursor: not-allowed;
}

/* Year (Daily mode) and Date boxes -- both stretch to fill their
   column (matching how Parameter's dropdown already reaches its own
   column's right edge), with explicit matching box-sizing so "100%"
   means the same thing for both component types. */
#year-select-daily,
#year-select-daily .dash-dropdown,
.dash-datepicker-input-wrapper,
.dash-datepicker {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
}

/* Belt and suspenders: force BOTH top-level wrapper divs (Year's
   .dash-dropdown-wrapper and Date's .dash-datepicker, whatever their
   own internal default sizing would otherwise be) to identically
   fill their shared parent, rather than relying on each component's
   own default block-fill behavior lining up by coincidence. */
#daily-year-date-box > div {
    width: 100% !important;
    box-sizing: border-box !important;
}