/*  ============================================================
    iru-dash4.css — IRU Newsroom styling for Dash 4 controls
    ============================================================

    Purpose
    -------
    Style Dash 4's new Radix-based dropdown / date-picker primitives to
    match the iru.org Newsroom filter look: 80px-tall grey pill controls
    with bold dark-blue text, square corners, no border. Targets the
    `.dash-dropdown-*` and `.dash-datepicker-*` class hierarchy that
    Dash 4.0+ renders (NOT the Dash 2.x `.Select-*` react-select v1
    classes — those are in upply_v4.css and remain as a fallback for
    any production container still on Dash 2.x).

    Visual reference: iru.org/news-resources/newsroom filter strip.

    Class hierarchy (inspected 2026-05-12 via Playwright on local
    Dash 4.0.0):

      button.dash-dropdown
        span.dash-dropdown-grid-container.dash-dropdown-trigger
          span.dash-dropdown-value
            span.dash-dropdown-value-item   ← one per selected option
              span                          ← option label text
          span.dash-dropdown-value-count    ← "N selected" badge (multi only)
          a.dash-dropdown-clear             ← clear × icon
          svg                               ← chevron icon

      [Radix-portaled to body when open:]
      div.dash-dropdown-content (role=dialog)
        div.dash-dropdown-search-container
          svg + input.dash-dropdown-search
        div.dash-dropdown-actions
          button.dash-dropdown-action-button  ← Select All / Deselect All
        div.dash-options-list
          div.dash-options-list-option-wrapper
            div.dash-options-list-option
              input.dash-options-list-option-checkbox  ← styled by macOS accent-color
              span.dash-options-list-option-text

    DatePicker hierarchy:
      div.dash-datepicker
        div.dash-datepicker-input-wrapper
          input.dash-datepicker-input
          input.dash-datepicker-start-date / .dash-datepicker-end-date
          a.dash-datepicker-clear

    Naming note
    -----------
    User requested `iru-mantine.css`. Dash 4 actually uses Radix UI, not
    Mantine — same idea (modern accessible primitives), different
    library. Kept the more accurate filename `iru-dash4.css` and noted
    here for future readers.

    Usage
    -----
    Copy (don't symlink) into each datalab's `assets/` folder. Loads
    alphabetically BEFORE `story-iframe.css` / `style.css` /
    `upply_v4.css`, so per-datalab overrides in `*.css` will win
    cleanly. The bespoke shapes use `!important` where they need to
    beat react-select-v1 defaults the rest of the Dash bundle ships.
    ============================================================ */

/* ============================================================
   0. GLOBAL ARIAL — IRU brand typeface decision (CLAUDE.md 2026-04-17).
   Cascade Arial to every Dash 4 Radix child so portaled menus, search
   boxes, options lists, and date-pickers all inherit the brand face.
   Univers (the original brand directive) remains deferred; Arial is
   the live brand decision.
   ============================================================ */
div#react-entry-point .dash-dropdown,
div#react-entry-point .dash-dropdown *,
.dash-dropdown-content,
.dash-dropdown-content *,
div#react-entry-point .dash-datepicker,
div#react-entry-point .dash-datepicker *,
div#react-entry-point .dash-options-list,
div#react-entry-point .dash-options-list * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* ============================================================
   1. TRIGGER BUTTON — 80px tall grey pill, square, no border.
   Matches the iru.org Newsroom filter pill recipe verbatim.
   ============================================================ */
div#react-entry-point .dash-dropdown {
  min-height: 80px !important;
  background-color: #f2f2f2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  width: 100% !important;
  cursor: pointer;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif !important;
}
div#react-entry-point .dash-dropdown[data-state="open"] {
  outline: 2px solid #0052a4 !important;
  outline-offset: -2px;
}
div#react-entry-point .dash-dropdown:focus-visible {
  outline: 2px solid #0052a4 !important;
  outline-offset: 2px;
}

/* Internal grid that lays out value / count / clear-X / chevron horizontally */
div#react-entry-point .dash-dropdown-grid-container.dash-dropdown-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
}

/* ============================================================
   2. SELECTED VALUE — filled-blue pill per selected item.
   Matches Image #11 / boss screenshot reference.
   Works for both single-select (1 pill) and multi-select (N pills).
   ============================================================ */
div#react-entry-point .dash-dropdown-value {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0; /* let flex children shrink/wrap inside */
  /* Round-17 (user feedback Image #17): Dash 4 renders comma+space text
     nodes BETWEEN .dash-dropdown-value-item pills. When the row wraps,
     those commas wander onto the next line and visually appear inside
     the next pill. font-size:0 here kills every stray text node; the
     pill spans below restore font-size:15px so labels stay readable. */
  font-size: 0 !important;
}
div#react-entry-point .dash-dropdown-value-item {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background-color: #0052a4 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: 0 !important;
  white-space: nowrap;
}
/* Round-18b (user Image #19): Dash 4 adds a comma via
   `.dash-dropdown-value-item:not(:first-child)::before { content: ", " }`
   in its own stylesheet — that's why pills #2 onwards looked like
   ",Asia - Europe · Sea". The round-17 `font-size: 0` trick on the
   parent couldn't suppress ::before content because pseudo-elements
   inherit the child's font-size. Override the ::before content here. */
div#react-entry-point .dash-dropdown-value-item::before,
div#react-entry-point .dash-dropdown-value-item::after {
  content: "" !important;
  display: none !important;
}
div#react-entry-point .dash-dropdown-value-item span,
div#react-entry-point .dash-dropdown-value-item * {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* "N selected" count badge — small, muted, bold-blue on transparent */
div#react-entry-point .dash-dropdown-value-count {
  font-size: 13px !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
  white-space: nowrap;
  margin-left: auto; /* push to the right next to the clear-X */
}

/* Round-18d: clear-X consolidated for dropdown AND datepicker.
   Same colour, size, hover, cursor — was declared twice. */
div#react-entry-point .dash-dropdown-clear,
div#react-entry-point .dash-datepicker-clear {
  color: #0052a4 !important;
  fill: #0052a4 !important;
  cursor: pointer;
}
div#react-entry-point .dash-dropdown-clear svg,
div#react-entry-point .dash-datepicker-clear svg {
  width: 14px;
  height: 14px;
}
div#react-entry-point .dash-dropdown-clear:hover,
div#react-entry-point .dash-datepicker-clear:hover {
  color: #003875 !important;
  fill: #003875 !important;
}

/* Round-17 + Round-18b — Big grey square arrow on EVERY selector.
   Boss reference Image #16: an 80x80 #d7d7d7 square with a white
   downward chevron on the right of each pill control. Applies
   uniformly to all Dash 4 trigger surfaces (`.dash-dropdown` AND
   `.dash-datepicker-input-wrapper`) via a single consolidated rule.

   Round-18d (CSS dedupe — 2026-05-12 user direction "apply same
   styles whenever possible"): the `::after` block used to be
   declared twice (once for dropdown, once for date picker). Merged
   into a single comma-separated selector so the rule is the single
   source of truth.

   The inline chevron Dash 4 renders inside `.dash-dropdown` is
   hidden first; DatePicker has no built-in chevron so no hide rule
   is needed there. */
div#react-entry-point .dash-dropdown > svg,
div#react-entry-point .dash-dropdown-trigger > svg {
  display: none !important;
}
div#react-entry-point .dash-dropdown,
div#react-entry-point .dash-datepicker-input-wrapper {
  position: relative;
  padding-right: 80px !important; /* reserve space for the ::after square */
}
div#react-entry-point .dash-dropdown::after,
div#react-entry-point .dash-datepicker-input-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background-color: #d7d7d7;
  /* White downward-chevron SVG, inlined as data URI so no extra HTTP. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  pointer-events: none; /* clicks fall through to the button */
}
div#react-entry-point .dash-dropdown[data-state="open"]::after {
  background-color: #c0c0c0; /* slightly darker on open */
}

/* When no value is selected — render placeholder text bold-blue
   (matches boss bullet #16 "labels inside as bold blue placeholder") */
div#react-entry-point .dash-dropdown-value:empty + *::before,
div#react-entry-point
  .dash-dropdown[aria-label]:has(.dash-dropdown-value:empty)::before {
  /* placeholder text is the button's aria-label when no value selected */
  content: attr(aria-label);
  color: #0052a4 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* ============================================================
   3. OPEN MENU — portaled by Radix to <body>. Square, white,
   subtle border + shadow. Above any sibling z-index.
   ============================================================ */
.dash-dropdown-content {
  background-color: #ffffff !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  z-index: 1000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Search container inside the open menu */
.dash-dropdown-content .dash-dropdown-search-container {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #d7d7d7 !important;
  gap: 8px;
}
.dash-dropdown-content .dash-dropdown-search-container svg {
  color: #0052a4 !important;
  fill: #0052a4 !important;
  width: 14px;
  height: 14px;
}
.dash-dropdown-content input.dash-dropdown-search {
  flex: 1 1 auto !important;
  font-size: 15px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #323232 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 4px 0 !important;
}
.dash-dropdown-content input.dash-dropdown-search::placeholder {
  color: #888 !important;
  font-weight: 400 !important;
}

/* Select All / Deselect All action buttons (multi-select only) */
.dash-dropdown-content .dash-dropdown-actions {
  display: flex !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #d7d7d7 !important;
}
.dash-dropdown-content .dash-dropdown-action-button {
  background: transparent !important;
  border: 0 !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
  padding: 4px 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.dash-dropdown-content .dash-dropdown-action-button:hover {
  text-decoration: underline;
}

/* Options list */
.dash-dropdown-content .dash-options-list {
  max-height: 320px;
  overflow-y: auto;
}
.dash-dropdown-content .dash-options-list-option-wrapper {
  padding: 0 !important;
}
.dash-dropdown-content .dash-options-list-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  cursor: pointer;
  font-size: 15px !important;
  color: #323232 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.dash-dropdown-content .dash-options-list-option:hover,
.dash-dropdown-content .dash-options-list-option[data-highlighted="true"],
.dash-dropdown-content .dash-options-list-option:focus {
  background-color: rgba(0, 82, 164, 0.1) !important;
  color: #0052a4 !important;
}
.dash-dropdown-content .dash-options-list-option[data-selected="true"],
.dash-dropdown-content .dash-options-list-option[aria-selected="true"] {
  background-color: rgba(0, 82, 164, 0.15) !important;
  color: #0052a4 !important;
  font-weight: 600 !important;
}

/* Checkbox (the macOS purple-accent culprit) — force IRU blue accent */
.dash-dropdown-content .dash-options-list-option-checkbox,
.dash-dropdown-content input[type="checkbox"] {
  accent-color: #0052a4 !important;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Option text */
.dash-dropdown-content .dash-options-list-option-text {
  flex: 1 1 auto;
  font-size: 15px !important;
  color: inherit !important;
}

/* ============================================================
   4. DATEPICKER — same surface treatment as the dropdown trigger.
   ============================================================ */
div#react-entry-point .dash-datepicker {
  width: 100%;
}
div#react-entry-point .dash-datepicker-input-wrapper {
  display: flex !important;
  align-items: center !important;
  min-height: 80px !important;
  background-color: #f2f2f2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Left padding only — the 80px right padding for the ::after arrow
     is set in the consolidated dropdown+datepicker rule (~line 198). */
  padding-left: 12px !important;
}
/* Round-18d: the big grey arrow ::after rule for the DatePicker
   wrapper now lives in the consolidated dropdown+datepicker block
   at line ~205. This section only handles the input-wrapper surface
   treatment (bg, padding, border). */
div#react-entry-point .dash-datepicker-input,
div#react-entry-point input.dash-datepicker-start-date,
div#react-entry-point input.dash-datepicker-end-date {
  flex: 1 1 auto !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0052a4 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  padding: 4px 0 !important;
}
div#react-entry-point .dash-datepicker-input::placeholder,
div#react-entry-point input.dash-datepicker-start-date::placeholder,
div#react-entry-point input.dash-datepicker-end-date::placeholder {
  color: #0052a4 !important;
  font-weight: 700 !important;
  opacity: 1;
}
div#react-entry-point .dash-datepicker-input-wrapper:focus-within {
  outline: 2px solid #0052a4 !important;
  outline-offset: -2px;
}
/* Round-18d: .dash-datepicker-clear color/size/hover now in the
   consolidated clear-X block (~line 173). Only the datepicker-specific
   margin-left stays here. */
div#react-entry-point .dash-datepicker-clear {
  margin-left: 8px;
}

/* ============================================================
   ROUND-20.8 PROMOTED PATTERNS (2026-05-18)
   ----------------------------------------------------------------
   These blocks were proven in Upply v4's overlay CSS across 8
   sub-rounds of boss feedback. Promoted here so EVERY Dash 4
   datalab inherits the same look automatically.

   If you change anything here:
   1. Update pipelines/Datalabs/STYLEGUIDE.md in the same commit
   2. Update pipelines/Datalabs/Upply_v4/assets/upply_v4.css
   3. Run pipelines/Datalabs/_shared/refresh_css.sh
   4. Run pipelines/Datalabs/tests/test_styleguide_compliance.py

   Reference: pipelines/Datalabs/Upply_v4/assets/upply_v4.css
   Doc:       pipelines/Datalabs/STYLEGUIDE.md
   Enforced:  pipelines/Datalabs/tests/test_styleguide_compliance.py
   ============================================================ */

/* R1 — caret arrow PNG, 80×80, right-top */
div#react-entry-point .dash-dropdown,
div#react-entry-point .dash-datepicker-input-wrapper {
  padding-right: 80px !important;
  padding-left: 0 !important;
}
div#react-entry-point
  .dash-dropdown
  .dash-dropdown-grid-container.dash-dropdown-trigger,
div#react-entry-point .dash-dropdown .dash-dropdown-trigger {
  padding-left: 0 !important;
}
div#react-entry-point .dash-dropdown::after,
div#react-entry-point .dash-datepicker-input-wrapper::after {
  width: 80px !important;
  height: 80px !important;
  top: 0 !important;
  transform: none !important;
  background-color: transparent !important;
  background-image: url("img/icons/arrow_down_gray.png") !important;
  background-repeat: no-repeat !important;
  background-position: right top !important;
  background-size: 80px 80px !important;
}
div#react-entry-point .dash-dropdown[data-state="open"]::after {
  background-color: transparent !important;
}

/* R2 — open menu flat (no border, no shadow), flush to selector */
.dash-options-list,
.dash-dropdown-options,
.dash-dropdown-content {
  background: #f2f2f2 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: -4px !important;
}

/* R3 — option rows: no inset 1 px shadow (Dash 4 default that
   produces the hairline divider lines), no border, asymmetric
   padding so text flushes 6 px from menu left, no flex gap so
   the hidden checkbox wrapper doesn't reserve space */
.dash-dropdown-content,
.dash-dropdown-content .dash-dropdown-search-container,
.dash-dropdown-content .dash-dropdown-actions,
.dash-dropdown-content .dash-options-list-option-wrapper,
.dash-dropdown-content .dash-options-list-option {
  border: 0 !important;
  box-shadow: none !important;
}
.dash-dropdown-content .dash-options-list-option {
  background: #f2f2f2 !important;
  color: #0052a4 !important;
  padding: 8px 12px 8px 6px !important;
  gap: 0 !important;
}

/* R4 — selected / hover option: pale-blue TINT, not solid */
.dash-dropdown-content .dash-options-list-option:hover,
.dash-dropdown-content .dash-options-list-option[data-highlighted="true"],
.dash-dropdown-content .dash-options-list-option:focus {
  background: rgba(0, 82, 164, 0.06) !important;
  color: #0052a4 !important;
}
.dash-dropdown-content .dash-options-list-option[aria-selected="true"],
.dash-dropdown-content .dash-options-list-option[data-selected="true"],
.dash-dropdown-content .dash-options-list-option[data-state="checked"] {
  background: rgba(0, 82, 164, 0.1) !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
}
.dash-dropdown-content .dash-options-list-option-text {
  color: inherit !important;
}

/* R5 — no outline on closed trigger when menu is open */
div#react-entry-point .dash-dropdown:focus,
div#react-entry-point .dash-dropdown:focus-visible,
div#react-entry-point .dash-dropdown:focus-within,
div#react-entry-point .dash-dropdown[data-state="open"],
div#react-entry-point .dash-datepicker:focus,
div#react-entry-point .dash-datepicker:focus-visible,
div#react-entry-point .dash-datepicker:focus-within,
div#react-entry-point .dash-datepicker-input-wrapper:focus,
div#react-entry-point .dash-datepicker-input-wrapper:focus-visible,
div#react-entry-point .dash-datepicker-input-wrapper:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* R6 — search input: kill the purple/violet focus border. The
   shared rules above set `outline: 0` on the input itself but
   macOS Safari + the focus-within ring on the parent container
   still paint a coloured edge. Belt-and-braces. */
.dash-dropdown-content .dash-dropdown-search-container,
.dash-dropdown-content .dash-dropdown-search-container:focus,
.dash-dropdown-content .dash-dropdown-search-container:focus-within,
.dash-dropdown-content .dash-dropdown-search-container:focus-visible,
.dash-dropdown-content input.dash-dropdown-search,
.dash-dropdown-content input.dash-dropdown-search:focus,
.dash-dropdown-content input.dash-dropdown-search:focus-visible,
.dash-dropdown-content input.dash-dropdown-search:active {
  outline: 0 !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* R6.b — hide Select All / Deselect All actions + per-option
   checkboxes so the multi-select menu reads as a clean text list
   (search bar stays visible). */
.dash-dropdown-content .dash-dropdown-actions,
.dash-dropdown-content .dash-options-list-option-checkbox {
  display: none !important;
}

/* R7 — hide the "N selected" badge; pills already carry the count */
div#react-entry-point .dash-dropdown-value-count {
  display: none !important;
}

/* R7.b — closed selector content owns the 20px horizontal inset.
   Prevents the root + trigger padding from stacking into uneven
   selected-pill geometry across datalabs. */
div#react-entry-point .dash-dropdown-value {
  padding: 5px 20px !important;
  box-sizing: border-box !important;
}

/* R8 — master clear-X: plain dark-blue glyph on transparent.
   No yellow square. */
.dash-dropdown-clear,
.dash-datepicker-clear {
  background: transparent !important;
  color: #0052a4 !important;
  width: auto;
  height: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  text-decoration: none;
}
.dash-dropdown-clear svg,
.dash-datepicker-clear svg {
  width: 14px;
  height: 14px;
  color: #0052a4;
  stroke: #0052a4;
  fill: #0052a4;
}
.dash-dropdown-clear:hover,
.dash-datepicker-clear:hover {
  opacity: 0.7;
}

/* ============================================================
   ROUND-20.9 (2026-05-19) — DatePicker calendar restyle
   ----------------------------------------------------------------
   Three deltas:
   - P3: hide the small inline `v` chevron next to the DatePicker
     value (only the 80×80 PNG caret should show, not both).
   - P2a: calendar surface grey (#F2F2F2) + IRU palette throughout.
   - P2b: lift the popper / month-list container so neither column
     needs an inner scrollbar at the standard 12-row month list +
     6-row date grid.
   - P2c: replace the left/right month-chevron arrows with `−` /
     `+` buttons matching the year picker's idiom.
   ============================================================ */

/* P3 — hide the inline datepicker caret SVG so only the 80×80 PNG
   `::after` caret shows. Round-18d's note explicitly flagged Dash 4
   renders an inline `.dash-datepicker-caret-icon`; round-20.3
   hid the dropdown variant but not this one. */
div#react-entry-point .dash-datepicker-caret-icon,
div#react-entry-point .dash-datepicker > svg,
div#react-entry-point .dash-datepicker-input-wrapper > svg,
div#react-entry-point .dash-datepicker-trigger > svg {
  display: none !important;
}

/* P2a — open calendar surface: grey paper, no border, no shadow,
   sticks flush to the trigger (same treatment as the dropdown
   open menu in the round-20.8 promoted block above). */
.dash-datepicker-panel,
.dash-datepicker-content,
.dash-datepicker-popover,
[data-radix-popper-content-wrapper] .dash-datepicker-month,
[data-radix-popper-content-wrapper] .dash-datepicker-year,
[data-radix-popper-content-wrapper] .dash-datepicker-month-grid,
[data-radix-popper-content-wrapper] .dash-datepicker-grid {
  background: #f2f2f2 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: -4px !important;
}

/* P2a — day cells + week-day headers in IRU palette */
.dash-datepicker-day,
.dash-datepicker-cell,
.dash-datepicker-weekday {
  color: #0052a4 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}
.dash-datepicker-day[aria-disabled="true"],
.dash-datepicker-cell[aria-disabled="true"],
.dash-datepicker-day.dash-datepicker-day-outside {
  color: #999 !important;
  opacity: 0.6;
}
.dash-datepicker-day:hover,
.dash-datepicker-cell:hover,
.dash-datepicker-day[data-highlighted="true"] {
  background: rgba(0, 82, 164, 0.06) !important;
  color: #0052a4 !important;
}
.dash-datepicker-day[aria-selected="true"],
.dash-datepicker-cell[aria-selected="true"],
.dash-datepicker-day[data-state="checked"] {
  background: rgba(0, 82, 164, 0.1) !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
}

/* P2a — month-name list (Jan, Feb, …) also in grey + blue */
.dash-datepicker-month-item,
.dash-datepicker-month-name {
  background: transparent !important;
  color: #0052a4 !important;
  font-weight: 400 !important;
}
.dash-datepicker-month-item:hover,
.dash-datepicker-month-name:hover {
  background: rgba(0, 82, 164, 0.06) !important;
}
.dash-datepicker-month-item[aria-selected="true"],
.dash-datepicker-month-name[aria-selected="true"],
.dash-datepicker-month-item[data-state="checked"] {
  background: rgba(0, 82, 164, 0.1) !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
}

/* P2b — lift the popper height so the 12-row month list + 6-row
   date grid both fit without inner scrollbars. The internal
   scrollbar was the symptom: cap was too low. Hide scrollbars on
   the columns + give the popper enough height for the longer
   column to fit fully. */
[data-radix-popper-content-wrapper] {
  max-height: none !important;
}
.dash-datepicker-panel,
.dash-datepicker-month-grid,
.dash-datepicker-month-list,
.dash-datepicker-day-grid {
  max-height: none !important;
  overflow: visible !important;
}
/* Defensive: if a UA still renders scrollbars somewhere, neutralise. */
.dash-datepicker-panel::-webkit-scrollbar,
.dash-datepicker-month-grid::-webkit-scrollbar,
.dash-datepicker-month-list::-webkit-scrollbar {
  display: none !important;
}
.dash-datepicker-panel,
.dash-datepicker-month-grid,
.dash-datepicker-month-list {
  scrollbar-width: none !important;
}

/* P2c — replace the left/right month-chevron arrows with `−` / `+`
   buttons matching the year picker's idiom. The `prev` / `next`
   buttons are still Radix-controlled — we just restyle them so
   the visible glyph is a thick minus/plus character instead of
   an arrow chevron, and hide the actual SVG inside.

   Selectors target both common Radix-datepicker shapes:
   `.dash-datepicker-prev-month` / `.dash-datepicker-next-month`
   AND `.dash-datepicker-nav-prev` / `.dash-datepicker-nav-next`. */
.dash-datepicker-prev-month,
.dash-datepicker-next-month,
.dash-datepicker-nav-prev,
.dash-datepicker-nav-next,
[aria-label="Previous month"],
[aria-label="Next month"] {
  background: #f2f2f2 !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0052a4 !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.dash-datepicker-prev-month > *,
.dash-datepicker-next-month > *,
.dash-datepicker-nav-prev > *,
.dash-datepicker-nav-next > *,
[aria-label="Previous month"] > *,
[aria-label="Next month"] > * {
  /* hide the actual SVG arrow */
  display: none !important;
}
.dash-datepicker-prev-month::before,
.dash-datepicker-nav-prev::before,
[aria-label="Previous month"]::before {
  content: "−";
  line-height: 1;
}
.dash-datepicker-next-month::before,
.dash-datepicker-nav-next::before,
[aria-label="Next month"]::before {
  content: "+";
  line-height: 1;
}
.dash-datepicker-prev-month:hover,
.dash-datepicker-next-month:hover,
.dash-datepicker-nav-prev:hover,
.dash-datepicker-nav-next:hover,
[aria-label="Previous month"]:hover,
[aria-label="Next month"]:hover {
  background: rgba(0, 82, 164, 0.06) !important;
}

/* ============================================================
   ROUND-20.10 (2026-05-19) — calendar header polish

   DOM probe at this point (via Playwright on the live Rate-watch
   anchor picker) revealed the actual calendar header has FIVE
   buttons, not the prev/next + dropdown layout the round-20.9
   rules assumed:

     [.dash-datepicker-month-nav aria=Previous month]
     [.dash-dropdown showing month name e.g. "May"]
     [.dash-input-stepper.dash-stepper-decrement (−)]
     [year value 2026]
     [.dash-input-stepper.dash-stepper-increment (+)]
     [.dash-datepicker-month-nav aria=Next month]

   Round-20.10 fixes:
   1. Hide the giant 80×80 PNG caret on `.dash-dropdown::after`
      when it sits INSIDE the datepicker popper — the round-20.8
      rule was painting a square the size of the month-name pill,
      visually breaking the header.
   2. Style the `.dash-datepicker-month-nav` buttons (prev/next)
      AND the `.dash-input-stepper` buttons (year −/+) identically
      so they look like a uniform ±-button row.
   3. Compact the month-name `.dash-dropdown` so it doesn't reserve
      80px right padding for a now-hidden caret.
   ============================================================ */

/* P1 — kill the trigger-level PNG caret when nested in datepicker */
[data-radix-popper-content-wrapper] .dash-dropdown::after,
div#react-entry-point .dash-datepicker-panel .dash-dropdown::after,
div#react-entry-point .dash-datepicker-content .dash-dropdown::after {
  content: none !important;
  background-image: none !important;
  background-color: transparent !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
[data-radix-popper-content-wrapper] .dash-dropdown,
div#react-entry-point .dash-datepicker-panel .dash-dropdown {
  padding-right: 24px !important;
  padding-left: 8px !important;
  min-height: 32px !important;
  height: auto !important;
}
/* Restore a tiny inline chevron on the nested month dropdown so
   the user knows it's clickable. */
[data-radix-popper-content-wrapper] .dash-dropdown .dash-dropdown-trigger-icon {
  display: inline-block !important;
  opacity: 0.65;
  width: 12px !important;
  height: 12px !important;
}

/* P2 — unified ± button styling across all 4 nav controls
   (month-prev, year-dec, year-inc, month-next). Apply to both
   the `.dash-datepicker-month-nav` and `.dash-input-stepper`
   class shapes so they look identical. */
button.dash-datepicker-month-nav,
button.dash-input-stepper {
  background: #f2f2f2 !important;
  border: 1px solid #d7d7d7 !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0052a4 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 4px !important;
}
button.dash-datepicker-month-nav > *,
button.dash-input-stepper > * {
  display: none !important;
}
button.dash-datepicker-month-nav[aria-label="Previous month"]::before {
  content: "−";
  line-height: 1;
}
button.dash-datepicker-month-nav[aria-label="Next month"]::before {
  content: "+";
  line-height: 1;
}
button.dash-input-stepper.dash-stepper-decrement::before {
  content: "−";
  line-height: 1;
}
button.dash-input-stepper.dash-stepper-increment::before {
  content: "+";
  line-height: 1;
}
button.dash-datepicker-month-nav:hover,
button.dash-input-stepper:hover {
  background: rgba(0, 82, 164, 0.08) !important;
}

/* P3 — keep the calendar header row compact + centred.
   `.dash-datepicker-header` is a fallback selector; the live DOM
   (per the round-20.11 Codex probe 2026-05-19) uses
   `.dash-datepicker-controls`. Both kept for cross-version safety. */
.dash-datepicker-header,
[data-radix-popper-content-wrapper] .dash-datepicker-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
}

/* ============================================================
   ROUND-20.11 (2026-05-19) — calendar header bug fixes

   Codex GPT-5.5h DOM probe of live datalab at
   http://localhost:8063/ found three corrections to round-20.10
   assumptions:

   1. Header flex parent is `.dash-datepicker-controls`, NOT
      `.dash-datepicker-header`. Four direct children:
        [prev-month button]
        [unclassed month-name wrapper <div>]
        [.dash-input-container.dash-input — year stepper triplet]
        [next-month button]
   2. The year stepper has its OWN inner flex with 3 children:
        [.dash-stepper-decrement button] [<input>] [.dash-stepper-increment button]
      The `.dash-input-container.dash-input` wrapper carries the
      visible 1px box border.
   3. The `−−` / `++` doubled glyphs are NOT from native HTML5
      number spinners — they're the buttons' own text content
      ("−" / "+") rendering on top of the round-20.10 `::before`
      glyph. Solution: `font-size: 0` to hide button text, then
      explicit font-size on `::before`.
   ============================================================ */

/* WHY: live DOM uses `.dash-datepicker-controls`; mirror the P3
   header rule onto the real class. */
.dash-datepicker-controls,
[data-radix-popper-content-wrapper] .dash-datepicker-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
}

/* WHY: reorder outer children to Option A — `[−] May [+]  [−] 2026 [+]`
   — instead of leaving month-next orphaned past the year stepper. */
.dash-datepicker-controls
  > button.dash-datepicker-month-nav[aria-label="Previous month"] {
  order: 1 !important;
}
.dash-datepicker-controls
  > button.dash-datepicker-month-nav[aria-label="Previous month"]
  + div {
  order: 2 !important;
}
.dash-datepicker-controls
  > button.dash-datepicker-month-nav[aria-label="Next month"] {
  order: 3 !important;
}
.dash-datepicker-controls > .dash-input-container.dash-input {
  order: 4 !important;
}

/* WHY: the year wrapper owns the visible 1px box border that
   makes the year unit read as an input field. Strip it here.
   Pin to a fixed 120px width because Dash 4 ships `overflow: hidden`
   on `.dash-input-container.dash-input` — without a fixed flex-basis
   the wrapper computes to width: 0 (Playwright probe round-20.11
   2026-05-19) and clips both stepper buttons to ~11px wide. */
.dash-datepicker-controls > .dash-input-container.dash-input {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 120px !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  gap: 4px !important;
}

/* WHY: stepper buttons carry literal "−" / "+" TEXT content; our
   `::before` glyph from round-20.10 paints on top, producing
   `−−` / `++` doubling. Kill the button text via font-size: 0
   then re-establish the ::before glyph at 16px. Also lock
   flex-shrink to 0 because Dash 4 defaults steppers to
   `flex: 0 1 auto` which squeezed them to ~11px in tight space. */
button.dash-datepicker-month-nav,
button.dash-input-stepper {
  font-size: 0 !important;
  flex: 0 0 28px !important;
}
button.dash-datepicker-month-nav::before,
button.dash-input-stepper::before {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* WHY: preserve `[−] 2026 [+]` order inside the year wrapper after
   outer reorder — DOM is already in this order, but we pin it
   defensively in case Dash reorders. */
.dash-datepicker-controls
  > .dash-input-container.dash-input
  > button.dash-stepper-decrement {
  order: 1 !important;
}
.dash-datepicker-controls
  > .dash-input-container.dash-input
  > input[type="number"].dash-input-element {
  order: 2 !important;
}
.dash-datepicker-controls
  > .dash-input-container.dash-input
  > button.dash-stepper-increment {
  order: 3 !important;
}

/* WHY: live year input is 28px wide → "2026" clips to "2". Pin a
   54px centred slot fitting all 4 digits in Arial weight 700. */
.dash-datepicker-controls
  > .dash-input-container.dash-input
  > input[type="number"].dash-input-element {
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0052a4 !important;
  font-weight: 700 !important;
  text-align: center !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

/* WHY: belt-and-braces — also kill any native WebKit number
   spinners that might paint over the custom ± buttons on Safari. */
.dash-datepicker-controls input[type="number"]::-webkit-inner-spin-button,
.dash-datepicker-controls input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ============================================================
   ROUND-20.11c (2026-05-19) — calendar header gap + clip fix

   Playwright probe found the unclassed month-wrapper (child idx 1
   of .dash-datepicker-controls) is 149px wide because it carries
   12 hidden `.dash-datepicker-month-sizer` siblings reserving the
   max-month-name width. Only the visible "May" pill (~50px) is
   needed in the inline row; the sizers exist for the click-to-open
   month popup which is portaled by Radix into
   `[data-radix-popper-content-wrapper]` (separate DOM tree).

   Cap the wrapper to 72px (fits "September" at Arial 14px bold)
   and clip overflow. Sizers stay in DOM for popup measurement;
   they just stop inflating the row visually.
   ============================================================ */
.dash-datepicker-controls
  > button.dash-datepicker-month-nav[aria-label="Previous month"]
  + div {
  flex: 0 0 72px !important;
  width: 72px !important;
  max-width: 72px !important;
  overflow: hidden !important;
}

/* ============================================================
   ROUND-20.11d (2026-05-19) — disable month-name click-to-open

   User decision: month dropdown popup had double-scrollbar issues
   and overlapped the date grid. Simpler UX: keep the visible "May"
   pill (informational — shows current month) but disable the click
   that opens the month picker. Users navigate months via the
   adjacent `[−]` / `[+]` buttons only, matching the year stepper's
   button-only idiom.
   ============================================================ */
.dash-datepicker-controls .dash-dropdown,
.dash-datepicker-controls .dash-dropdown-wrapper,
.dash-datepicker-controls .dash-dropdown-trigger {
  pointer-events: none !important;
  cursor: default !important;
}
/* NOTE: do NOT try to hide `.dash-dropdown-content` via the Radix
   popper portal — that selector matches EVERY dropdown menu app-wide
   (because Radix portals popups into a shared wrapper outside the
   source DOM). The `pointer-events: none` on the trigger above is
   sufficient to prevent the month popup from ever opening. */

/* ============================================================
   ROUND-20.11e (2026-05-19) — kill stacked scrollbars

   Playwright probe found two double-scrollbar regressions:

   1. Calendar panel `.dash-datepicker-content` has `overflow: auto`.
      Year `[+]` button right edge sits 2px past the panel's right
      edge (controls inner row 282px + button margin pushes the
      stepper increment past the 298px panel). The 2px overflow
      triggers a horizontal scrollbar across the bottom.
   2. Multi-select dropdown has BOTH `.dash-dropdown-content`
      (scrollHeight 316 / clientHeight 250) AND `.dash-options-list`
      (scrollHeight 396 / clientHeight 320) with `overflow-y: auto`.
      Two stacked scrollable elements = two scrollbars visible.

   Fix: kill outer overflow on both, keep inner overflow where
   needed. Calendar panel doesn't need any scroll (content fits
   vertically; the 2px year overhang is now visually invisible).
   Dropdown keeps the options-list scroll so the search bar at the
   top stays fixed while options scroll.
   ============================================================ */

/* Calendar panel — no scrollbars at all */
.dash-datepicker-content,
.dash-datepicker-panel {
  overflow: visible !important;
}

/* Multi-select dropdown — outer popup scroll OFF, inner options
   list scroll ON (search bar stays sticky at top). */
.dash-dropdown-content {
  overflow: visible !important;
}
.dash-dropdown-content .dash-options-list,
.dash-dropdown-content .dash-dropdown-options {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* WHY: round-20.10 added `margin: 0 4px` to all ±-style buttons
   for inter-button breathing room. But round-20.11c+ pins the year
   wrapper to 120px with its own internal `gap: 4px`, so the extra
   button margin pushed year `[+]` 2px past the panel right edge.
   Zero out button margins; the parent flex `gap: 6px` provides
   the visible separation between control groups. */
button.dash-datepicker-month-nav,
button.dash-input-stepper {
  margin: 0 !important;
}

/* ============================================================
   ROUND-20.21 PROMOTED PATTERNS (2026-05-20)
   ----------------------------------------------------------------
   Generic Dash 4 / Radix DatePicker + dropdown fixes proven in
   Upply v4's Comparison + Rate watch custom-range work. Promoted
   here so every datalab inherits them automatically.

   Three blocks:
   F2 — override Dash 4's purple `--Dash-Fill-Interactive-Strong`
        Radix token to IRU blue inside datepicker popovers.
   F3 — surgical selected-day override using the actual Dash 4
        day-cell class `.dash-datepicker-calendar-date-inside`
        (NOT the non-existent `.dash-datepicker-day` selector
        round-20.9 incorrectly assumed).
   F5 — pill label word-wrap policy: `overflow-wrap: break-word`
        + `word-break: keep-all` so "Last 4 weeks" stays whole
        and never char-splits to "La st 4 we eks".

   NOT promoted here (out of scope for shared CSS):
   - F1 (two `dcc.DatePickerSingle` vs `dcc.DatePickerRange`) —
     layout decision, lives in /create-datalab guidance.
   - F4 (per-picker input-width override) — must be scoped to
     the datalab's local picker ID; document in template README
     and create-datalab command.

   Reference: pipelines/Datalabs/Upply_v4/tabs/comparison.py:999+
   ============================================================ */

/* F2 — datepicker popover Radix token swap.
   Dash 4 ships `--Dash-Fill-Interactive-Strong: #7f4bc4` (a
   purple) as the default selected/interactive accent for Radix
   primitives. Override to IRU dark-blue inside any datepicker
   popover so selected day cells, range highlight, and hover
   accents all render in brand palette. Scoped via `:has()` so
   only popovers that contain a datepicker calendar are touched
   (dropdown popovers stay untouched — their colours are handled
   elsewhere in this file). */
[data-radix-popper-content-wrapper]:has(.dash-datepicker-content),
[data-radix-popper-content-wrapper]:has(.dash-datepicker-panel),
[data-radix-popper-content-wrapper]:has(.dash-datepicker-popover),
[data-radix-popper-content-wrapper]:has(.dash-datepicker-calendar-wrapper) {
  --Dash-Fill-Interactive-Strong: #0052a4 !important;
  --Dash-Fill-Interactive-Weak: rgba(0, 82, 164, 0.06) !important;
  --Dash-Fill-Inverse-Strong: #ffffff !important;
}

/* F3 — selected day cell IRU blue.
   The live Dash 4 day-cell class is
   `.dash-datepicker-calendar-date-inside`, NOT the
   `.dash-datepicker-day` selector round-20.9 assumed. Target all
   three "selected" attribute shapes Radix may emit
   (aria-selected, data-state=checked, data-selected) and paint
   them solid IRU blue with white text + bold weight. Sits AFTER
   the round-20.9 pale-tint rule so this wins for the selected
   cell specifically (the pale tint stays for hover / range). */
div#react-entry-point
  .dash-datepicker-calendar-date-inside[aria-selected="true"],
div#react-entry-point
  .dash-datepicker-calendar-date-inside[data-state="checked"],
div#react-entry-point
  .dash-datepicker-calendar-date-inside[data-selected="true"] {
  background: #0052a4 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* F5 — multi-select pill label wrap policy.
   `overflow-wrap: anywhere` (a tempting default) char-splits
   labels mid-word: "Last 4 weeks" became "La st 4 we eks" in
   tight pill widths during round-20.21 testing. Use
   `break-word` (wrap only at word boundaries) plus
   `word-break: keep-all` (do not break inside CJK/Latin words).
   The pill stays nowrap by default per the round-2 rule
   higher up; this block governs the wrap behaviour only when
   the pill is allowed to break across lines. */
div#react-entry-point .dash-dropdown-value-item {
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
}

/* ============================================================
   END iru-dash4.css
   ============================================================ */