/* Light theme for the dcc.DatePickerRange (the PnL Report "Period" control), so
   it matches the white "Strategy pair" dropdown next to it.

   This is the modern custom dcc picker (classes `dash-datepicker-*`), driven by
   `--Dash-*` design tokens. Two separate mechanisms set its colours, so we touch
   both:
     1. The calendar cells colour their text via the `--Dash-*` tokens (NOT
        `inherit`), so we redefine the tokens to a light palette — otherwise the
        date numbers stay light and vanish on a white background.
     2. The input fields use `color/background: inherit`, so on the DARKLY page
        they inherit white text. Tokens don't reach them — we force white bg +
        black text explicitly.
   The popup can portal out of `.dash-datepicker`, so the tokens are also set on
   the popup's own roots (`-content`, `-calendar-wrapper`, `-portal`). Class names
   verified against dash/dcc/async-datepicker.js. */

/* 1) Light design-token palette — drives the calendar surfaces, date text,
      selection highlight and shadows. */
.dash-datepicker,
.dash-datepicker-content,
.dash-datepicker-calendar-wrapper,
.dash-datepicker-portal {
    --Dash-Fill-Inverse-Strong: #ffffff;       /* surfaces + selected-day text */
    --Dash-Text-Strong: #1a1a1a;               /* in-month date numbers, headers */
    --Dash-Text-Weak: #6b7280;                 /* weekday + out-of-month labels */
    --Dash-Text-Disabled: #9aa0a6;             /* placeholder */
    --Dash-Stroke-Strong: #cccccc;             /* borders */
    --Dash-Fill-Interactive-Strong: #2684ff;   /* selected day bg / accent */
    --Dash-Fill-Interactive-Weak: #e6f0ff;     /* hover + in-range highlight bg */
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.25);
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.15);
}

/* 2) Input bar + the two date fields (and the month/year boxes in the popup
      header, which are the same input class): white bg, black text. */
.dash-datepicker,
.dash-datepicker-input-wrapper {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}
.dash-datepicker-input {
    background-color: transparent !important;  /* show the white wrapper through */
    color: #000000 !important;
}
.dash-datepicker-input::placeholder {
    color: #9aa0a6 !important;
}

/* Caret (v), range arrow ("→") and clear ("✕") icons — dark on the white bar. */
.dash-datepicker-caret-icon,
.dash-datepicker-range-arrow,
.dash-datepicker-clear {
    color: #555555 !important;
    fill: #555555 !important;
}