/* =============================================================
   Rabies Surveillance - Interactive Chart
   Organized single-file stylesheet
   Update: detection number and animal text both 1.8rem
   Source: October 9, 2026 stylesheet
   Sections: base, filters, summary, chart, tooltip, notes,
   table, motion, responsive overrides, reduced motion.
   ============================================================= */

/* ==========================================================
   01 Base, variables and accessibility
   ========================================================== */

.rb-wrap {
  width: 100%;
  min-width: 0;
}

#rabid-graph>.card-body {
  padding: 1rem;
  min-width: 0;
}

#rabid-graph .rb-header {
  margin: 0 0 0.75rem !important;
  padding: 0;
  border: 0;
}

#rabid-graph .rb-subtitle {
  margin: 0;
  color: var(--rb-muted);
  line-height: 1.5;
}

.axis-title-underline {
  color: var(--rb-blue-deep);
  text-decoration-line: underline;
  text-decoration-color: #c58b24;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

#rabid-graph .rb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#rabid-graph {
  --rb-blue: #005a9c;
  --rb-raccoon: #a24f12;
  --rb-blue-deep: #103e65;
  --rb-teal: #007c8a;
  --rb-ink: #18364a;
  --rb-muted: #465d70;
  --rb-line: #d5e3eb;
  --rb-focus: #000000;
  --rb-animal-0: #005a9c;
  --rb-animal-1: #a24f12;
  --rb-animal-2: #6c4c9c;
  --rb-animal-3: #14725b;
  overflow: hidden;
  --rb-detail-bg: #fff3d9;
  --rb-detail-border: #e5c27e;
  --rb-detail-accent: #a66a12;
  --rb-detail-text: #69400b;
  --rb-median: #c2185b;
  --rb-median-deep: #88103f;
  --rb-median-soft: #fff0f5;
  --rb-note-blue: #005a9c;
  --rb-note-blue-bg: #e8f3fb;
  --rb-note-blue-border: #b7d4e9;
  --rb-note-raccoon: #a24f12;
  --rb-note-raccoon-bg: #fff1e5;
  --rb-note-raccoon-border: #e9c39b;
  --rb-motion-fast: 180ms;
  --rb-motion-medium: 420ms;
  --rb-motion-slow: 560ms;
  --rb-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

#rabid-graph,
#rabid-graph * {
  box-sizing: border-box;
}

/* ==========================================================
   02 Filters and controls
   ========================================================== */

#rabid-graph .rb-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(130px, 0.7fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.9rem;
  background: #f7fafc;
  border: 1px solid var(--rb-line);
  border-radius: 6px;
}

#rabid-graph .rb-control-group {
  display: grid;
  grid-template-rows: 22px 44px auto;
  align-content: start;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

#rabid-graph .rb-control-group label,
#rabid-graph .rb-field-label {
  float: none;
  width: auto;
  max-width: 100%;
  min-height: 22px;
  margin: 0;
  padding: 0;
  color: var(--rb-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 22px;
  text-transform: capitalize;
  text-align: center;
}

#rabid-graph .rb-control-group small {
  margin: 0;
  padding: 0;
  color: var(--rb-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

#rabid-graph .rb-period #rb-month-help {
  position: static;
  max-width: none;
  text-transform: capitalize;
  text-align: center;
}

#rabid-graph .rb-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 44px;
  padding: 3px;
  background: #e4edf3;
  border: 1px solid #b8ccd9;
  border-radius: 6px;
}

#rabid-graph .rb-segment button {
  height: 36px;
  min-width: 0;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--rb-blue-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#rabid-graph .rb-segment button.is-active,
#rabid-graph .rb-segment button[aria-pressed="true"] {
  background: var(--rb-blue);
  color: #fff;
}

#rabid-graph .rb-segment button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#rabid-graph .rb-toolbar select {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid #829baa;
  border-radius: 6px;
  background: #fff;
  color: var(--rb-ink);
  font: inherit;
  font-size: 0.875rem;
}

#rabid-graph .rb-reset,
#rabid-graph .rb-actions button {
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rb-blue);
  border-radius: 6px;
  background: #fff;
  color: var(--rb-blue-deep);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

#rabid-graph .rb-reset-group {
  display: grid;
  grid-template-rows: 22px 44px;
  gap: 4px;
  min-width: 0;
}

#rabid-graph .rb-reset {
  width: 100%;
  height: 44px;
}

#rabid-graph .rb-reset:hover,
#rabid-graph .rb-actions button:hover {
  background: #e8f3fb;
}

#rabid-graph button:focus-visible,
#rabid-graph select:focus-visible,
#rabid-graph .rb-chart-scroll:focus-visible,
#rabid-graph .rb-table-scroll:focus-visible {
  outline: 3px solid var(--rb-focus);
  outline-offset: 3px;
}

#rabid-graph .rb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

#rabid-graph .rb-segment button,
#rabid-graph .rb-reset,
#rabid-graph .rb-actions button,
#rabid-graph .rb-toolbar select {
  transition: background-color var(--rb-motion-fast) ease,
    border-color var(--rb-motion-fast) ease,
    color var(--rb-motion-fast) ease,
    box-shadow var(--rb-motion-fast) ease;
  cursor: pointer;
}

#rabid-graph .rb-toolbar select:hover {
  border-color: var(--rb-blue);
  box-shadow: 0 1px 5px rgb(0 90 156 / 12%);
}

#rabid-graph .rb-segment button:not(:disabled):hover:not(.is-active):not([aria-pressed="true"]) {
  background: #d2e5f2;
}

#rabid-graph .rb-toolbar,
#rabid-graph .rb-toolbar>*,
#rabid-graph .rb-control-group,
#rabid-graph .rb-reset-group {
  min-width: 0;
}

#rabid-graph .rb-toolbar select,
#rabid-graph .rb-segment button,
#rabid-graph .rb-reset {
  box-sizing: border-box;
}

/* ==========================================================
   03 Summary cards
   ========================================================== */

#rabid-graph .rb-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
  text-align: center;
}

#rabid-graph .rb-summary span {
  display: block;
  color: var(--rb-muted);
  font-size: 0.8rem;
  font-weight: 800;
}

#rabid-graph .rb-summary strong {
  display: block;
  color: var(--rb-blue-deep) !important;
  font-size: 1.2rem !important;
  overflow-wrap: anywhere;
}

#rabid-graph .rb-summary small {
  display: block;
  margin-top: auto;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--rb-muted);
}

#rabid-graph #rb-latest-detail::before,
#rabid-graph #rb-peak-detail::before,
#rabid-graph #rb-range-detail::before {
  content: "";
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: var(--rb-detail-accent);
  border-radius: 50%;
}

#rabid-graph #rb-total-years {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--rb-blue-deep);
  white-space: nowrap;
}

#rabid-graph .rb-summary>div {
  padding: 0.65rem 0.85rem;
  background: #f4f8fb;
  border-left: 4px solid var(--rb-teal);
  border-radius: 5px;
  gap: .3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  height: 100%;
}

#rabid-graph .rb-summary>div>span {
  flex: 0 0 auto;
  width: 100%;
}

#rabid-graph .rb-summary>div>strong {
  flex: 0 0 auto;
  width: 100%;
}

#rabid-graph #rb-latest-detail,
#rabid-graph #rb-peak-detail,
#rabid-graph #rb-range-detail {
  max-width: 100%;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: var(--rb-detail-bg);
  border: 1px solid var(--rb-detail-border);
  border-left: 4px solid var(--rb-detail-accent);
  border-radius: 5px;
  color: var(--rb-detail-text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  text-align: center;
}

/* ----------------------------------------------------------
   Detection counts and selected animal labels
   Populated dynamically by rabies-controls.js.
   Both the number and the animal label use 1.8rem.
   ---------------------------------------------------------- */

#rabid-graph #rb-latest,
#rabid-graph #rb-peak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  line-height: 1.2;
}

#rabid-graph .rb-summary-number {
  display: block;
  color: var(--rb-blue-deep) !important;
  font-size: 1.2rem !important;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#rabid-graph .rb-summary-unit {
  display: block;
  max-width: 100%;
  color: var(--rb-muted);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ==========================================================
   04 Heading and legends
   ========================================================== */

#rabid-graph .rb-chart-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  margin: 0.75rem 0 0.5rem;
}

#rabid-graph .rb-chart-heading>div:first-child {
  min-width: 0;
}

#rabid-graph .rb-chart-heading h3 {
  margin: 0 0 0.1rem;
  color: var(--rb-blue-deep);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: capitalize;
}

#rabid-graph .rb-chart-heading p {
  margin: 0;
  color: var(--rb-muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

#rabid-graph .rb-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding: 0.35rem;
  background: #f3f7fa;
  border: 1px solid var(--rb-line);
  border-radius: 7px;
}

#rabid-graph .rb-legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 28px;
  padding: 0.25rem 0.5rem;
  background: #e8f3fb;
  color: #103e65;
  border: 1px solid #b7d4e9;
  border-radius: 5px;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

#rabid-graph .rb-legend-item.rb-legend-item--raccoons {
  background: #fff1e5;
  border-color: #e9c39b;
  color: #71330a;
}

#rabid-graph .rb-legend-swatch {
  display: inline-block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

#rabid-graph .rb-legend-item--median {
  background: var(--rb-median-soft);
  border: 1px solid #e9aac1;
  color: var(--rb-median-deep);
  font-weight: 700;
}

#rabid-graph .rb-legend-median {
  display: inline-block;
  flex: 0 0 25px;
  width: 25px;
  height: 0;
  border-top: 4px dashed var(--rb-median);
}

/* ==========================================================
   05 Chart, axes and bars
   ========================================================== */

#rabid-graph .rb-chart-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0.25rem 0.4rem;
  scrollbar-width: thin;
}

#rabid-graph .rb-chart {
  position: relative;
  min-height: 320px;
}

#rabid-graph .rb-bars {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 0 8px;
  gap: clamp(3px, 0.8vw, 9px);
}

#rabid-graph .rb-bar-wrap {
  position: relative;
  display: flex;
  flex: 1 0 22px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}

#rabid-graph .rb-bar {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px 3px 0 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}

#rabid-graph .rb-bar-segment {
  display: block;
  flex: none;
  width: 100%;
  min-height: 0;
}

#rabid-graph .rb-bar-segment:last-of-type {
  border-radius: 3px 3px 0 0;
}

#rabid-graph .rb-bar.is-zero {
  height: 2px !important;
  min-height: 2px;
  border-top: 2px solid var(--rb-blue);
}

#rabid-graph .rb-bar.is-selected,
#rabid-graph .rb-bar:hover {
  filter: brightness(0.85);
}

#rabid-graph .rb-bar.is-unavailable {
  background: transparent;
  border-top: 2px dashed #64748b;
}

#rabid-graph .rb-chart-layout {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: stretch;
  column-gap: .5rem;
  width: 100%;
  min-width: 0;
}

#rabid-graph .rb-y-axis-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  color: var(--rb-blue-deep);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

#rabid-graph .rb-chart-layout .rb-chart-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

#rabid-graph .rb-chart-bottom {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .6rem 0 1rem 40px;
  padding: .35rem 0;
  color: var(--rb-blue-deep);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

#rabid-graph .rb-plot {
  position: relative;
  height: 270px;
  margin: 0 8px 0 44px;
  border-bottom: 2px solid #8397a5;
  background: repeating-linear-gradient(to top,
      transparent 0,
      transparent calc(20% - 1px),
      #e2e9ee calc(20% - 1px),
      #e2e9ee 20%);
  animation: rb-plot-enter 260ms ease-out both;
}

#rabid-graph .rb-y-labels {
  position: absolute;
  top: 0;
  left: -43px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 36px;
  height: 100%;
  color: var(--rb-muted);
  font-size: 0.75rem;
  transform: translateY(-0.5em);
  pointer-events: none;
  animation: rb-fade-in 350ms 90ms ease-out both;
}

#rabid-graph .rb-bars .rb-bar {
  transform-origin: bottom center;
  animation: rb-bar-grow var(--rb-motion-slow) var(--rb-motion-ease) both;
  animation-delay: var(--rb-bar-delay, 50ms);
  transition: filter var(--rb-motion-fast) ease;
  will-change: transform;
}

#rabid-graph .rb-bar-wrap:nth-child(6n + 1) {
  --rb-bar-delay: 30ms;
}

#rabid-graph .rb-bar-wrap:nth-child(6n + 2) {
  --rb-bar-delay: 65ms;
}

#rabid-graph .rb-bar-wrap:nth-child(6n + 3) {
  --rb-bar-delay: 100ms;
}

#rabid-graph .rb-bar-wrap:nth-child(6n + 4) {
  --rb-bar-delay: 135ms;
}

#rabid-graph .rb-bar-wrap:nth-child(6n + 5) {
  --rb-bar-delay: 170ms;
}

#rabid-graph .rb-bar-wrap:nth-child(6n) {
  --rb-bar-delay: 205ms;
}

#rabid-graph .rb-bar-label {
  position: absolute;
  top: calc(100% + 8px);
  color: var(--rb-muted);
  font-size: 0.69rem;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: top center;
  pointer-events: none;
  animation: rb-fade-in 350ms ease-out both;
  animation-delay: calc(var(--rb-bar-delay, 50ms) + 130ms);
}

/* ==========================================================
   06 Median overlay
   ========================================================== */

#rabid-graph .rb-median-path {
  fill: none;
  stroke: var(--rb-median);
  stroke-width: 4;
  stroke-dasharray: 8 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

#rabid-graph .rb-median-point {
  fill: #fff;
  stroke: var(--rb-median);
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 20%));
}

#rabid-graph .rb-median-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: rb-median-enter 580ms 240ms ease-out both;
}

/* ==========================================================
   07 Floating tooltip
   ========================================================== */

.rb-tooltip.rb-floating-tooltip {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  bottom: auto;
  width: max-content;
  min-width: 250px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid #b4cbda;
  border-radius: 10px;
  background: #fff;
  color: #18364a;
  box-shadow: 0 12px 36px rgb(16 62 101 / 25%), 0 3px 8px rgb(16 62 101 / 12%);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  transform: none;
  box-sizing: border-box;
  overflow: hidden;
}

.rb-tooltip.rb-floating-tooltip::before {
  content: none !important;
  display: none !important;
}

.rb-tooltip.rb-floating-tooltip[hidden] {
  display: none !important;
}

.rb-floating-tooltip .rb-tooltip-heading {
  display: block;
  margin: 0;
  padding: .75rem .95rem;
  background: #103e65;
  color: #fff;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.4;
}

.rb-floating-tooltip .rb-tooltip-list {
  display: grid;
  gap: 0;
  padding: .5rem .85rem .6rem;
  background: #fff;
}

.rb-floating-tooltip .rb-tooltip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 35px;
  padding: .35rem .1rem;
  border-bottom: 1px solid #e6edf2;
}

.rb-floating-tooltip .rb-tooltip-row:last-child {
  border-bottom: 0;
}

.rb-floating-tooltip .rb-tooltip-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  color: #18364a;
  font-weight: 600;
}

.rb-floating-tooltip .rb-tooltip-dot {
  display: inline-block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.rb-floating-tooltip .rb-tooltip-value,
.rb-floating-tooltip .rb-tooltip-row strong {
  color: #103e65;
  font-size: .95rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rb-floating-tooltip .rb-tooltip-note {
  margin: 0 0 .4rem;
  padding: .1rem .1rem .45rem 1.65rem;
  color: #526678;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.rb-floating-tooltip .rb-tooltip-median,
.rb-floating-tooltip .rb-tooltip-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  font-variant-numeric: tabular-nums;
}

.rb-floating-tooltip .rb-tooltip-median {
  margin: .4rem .85rem;
  padding: .6rem .65rem;
  border: 1px solid #e9aac1;
  border-left: 4px solid #c2185b;
  border-radius: 6px;
  background: #fff0f5;
  color: #88103f;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.4;
}

.rb-floating-tooltip .rb-tooltip-median-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rb-floating-tooltip .rb-tooltip-median-value,
.rb-floating-tooltip .rb-tooltip-median strong {
  color: #88103f;
  font-size: 1rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.rb-floating-tooltip .rb-tooltip-comparison {
  margin: .15rem .85rem .6rem;
  padding: .5rem .65rem;
  border-radius: 5px;
  background: #f1f6fa;
  color: #365069;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}

.rb-floating-tooltip .rb-tooltip-comparison strong {
  color: #103e65;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.rb-floating-tooltip .rb-tooltip-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: .15rem 0 0;
  padding: .75rem .95rem;
  border-top: 1px solid #b8d4e6;
  background: #e8f3fb;
  color: #103e65;
  font-size: .85rem;
  font-weight: 800;
}

.rb-floating-tooltip .rb-tooltip-total strong {
  font-size: 1rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rb-tooltip.rb-floating-tooltip:not([hidden]) {
  animation: rb-tooltip-appear 140ms ease-out both;
}

/* ==========================================================
   08 Data notes
   ========================================================== */

#rabid-graph .rb-note {
  border-left: 4px solid var(--rb-blue);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  background: #f7fafc;
  border: 1px solid var(--rb-line);
  border-radius: 10px;
  color: var(--rb-ink);
}

#rabid-graph .rb-note[hidden] {
  display: none !important;
}

#rabid-graph #rb-data-notes-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  color: var(--rb-blue-deep);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

#rabid-graph #rb-data-notes-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 21px;
  flex-shrink: 0;
  background: var(--rb-blue);
  border-radius: 3px;
}

#rabid-graph #rb-notes-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: stretch;
}

#rabid-graph .rb-note-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  color: #104d27;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.4;
}

#rabid-graph .rb-note-label::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  background: #237a45;
  border-radius: 3px;
}

#rabid-graph .rb-note-description {
  margin: 0;
  color: #354f63;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-transform: capitalize;
}

#rabid-graph .rb-note-item[data-animal="raccoons"] {
  background: var(--rb-note-raccoon-bg);
  border-color: var(--rb-note-raccoon-border);
  border-left-color: var(--rb-note-raccoon);
}

#rabid-graph .rb-note-item[data-animal="raccoons"] .rb-note-label {
  color: #71330a;
}

#rabid-graph .rb-note-item[data-animal="raccoons"] .rb-note-label::before {
  background: var(--rb-note-raccoon);
}

#rabid-graph .rb-note-item[data-animal="raccoons"] .rb-note-description {
  color: #604323;
}

#rabid-graph .rb-note-item[data-animal="skunks"] {
  background: #f3effa;
  border-color: #d3c4e9;
  border-left-color: #6c4c9c;
}

#rabid-graph .rb-note-item[data-animal="skunks"] .rb-note-label {
  color: #4c3474;
}

#rabid-graph .rb-note-item[data-animal="skunks"] .rb-note-label::before {
  background: #6c4c9c;
}

#rabid-graph .rb-note-item[data-animal="foxes"] {
  background: #e8f5f0;
  border-color: #b5daca;
  border-left-color: #14725b;
}

#rabid-graph .rb-note-item[data-animal="foxes"] .rb-note-label {
  color: #105745;
}

#rabid-graph .rb-note-item[data-animal="foxes"] .rb-note-label::before {
  background: #14725b;
}

#rabid-graph .rb-note-item {
  position: relative;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: #edf8f0;
  border: 1px solid #b8ddc4;
  border-left: 5px solid #237a45;
  border-radius: 7px;
  color: #174d30;
  animation: rb-note-enter 400ms var(--rb-motion-ease) both;
}

#rabid-graph .rb-note-item:nth-child(2) {
  animation-delay: 70ms;
}

#rabid-graph .rb-note-item:nth-child(3) {
  animation-delay: 120ms;
}

#rabid-graph .rb-note-item:nth-child(4) {
  animation-delay: 170ms;
}

/* ==========================================================
   09 Data table
   ========================================================== */

#rabid-graph #rb-table-panel {
  margin-top: 0.8rem;
}

#rabid-graph #rb-table-panel[hidden] {
  display: none;
}

#rabid-graph .rb-table-scroll {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--rb-line);
}

#rabid-graph .rb-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

#rabid-graph .rb-table-scroll caption {
  padding: 0.7rem;
  text-align: left;
  caption-side: top;
  font-weight: 700;
  color: var(--rb-blue-deep);
}

#rabid-graph .rb-table-scroll th,
#rabid-graph .rb-table-scroll td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rb-line);
  text-align: left;
}

#rabid-graph .rb-table-scroll th {
  position: sticky;
  top: 0;
  background: var(--rb-blue-deep);
  color: #fff;
}

/* ==========================================================
   10 Other
   ========================================================== */


/* ==========================================================
   11 Graph animations - keyframes
   ========================================================== */

@keyframes rb-plot-enter {
  from {
    opacity: 0.65;
  }

  to {
    opacity: 1;
  }
}

@keyframes rb-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rb-bar-grow {
  from {
    transform: scaleY(0.01);
    opacity: 0.35;
  }

  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes rb-median-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rb-tooltip-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rb-note-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   Responsive: (max-width:992px)
   ========================================================== */

@media (max-width:992px) {
  #rabid-graph .rb-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rabid-graph .rb-reset-group {
    grid-column: 2;
  }

  #rabid-graph .rb-chart-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ==========================================================
   Responsive: (max-width:768px)
   ========================================================== */

@media (max-width:768px) {
  #rabid-graph #rb-notes-content {
    grid-template-columns: minmax(0, 1fr);
  }

  #rabid-graph>.card-body {
    padding: 1rem;
  }

  #rabid-graph .rb-header {
    margin-bottom: .85rem !important;
  }

  #rabid-graph .rb-subtitle {
    font-size: .88rem;
    line-height: 1.55;
  }

  #rabid-graph .rb-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
    background: #f3f8fc;
    border: 1px solid #c9dce9;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgb(16 62 101 / 5%);
  }

  #rabid-graph .rb-toolbar>.rb-period {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(90px, .24fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .3rem .85rem;
    padding: .75rem .85rem;
    background: #fff;
    border: 1px solid #d5e3eb;
    border-radius: 8px;
  }

  #rabid-graph .rb-period>.rb-field-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  #rabid-graph .rb-period>.rb-segment {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  #rabid-graph .rb-period>#rb-month-help {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: .15rem 0 0;
    text-align: left;
  }

  #rabid-graph .rb-control-group:not(.rb-period) {
    display: grid;
    grid-template-rows: auto 44px;
    gap: .4rem;
    align-content: start;
    padding: .7rem .75rem;
    background: #fff;
    border: 1px solid #d5e3eb;
    border-radius: 8px;
  }

  #rabid-graph .rb-control-group label,
  #rabid-graph .rb-field-label {
    display: block;
    width: auto;
    min-height: 0;
    font-size: .79rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
  }

  #rabid-graph .rb-period #rb-month-help {
    color: #465d70;
    font-size: .75rem;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
  }

  #rabid-graph .rb-toolbar select {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: .55rem .65rem;
    font-size: .875rem;
  }

  #rabid-graph .rb-reset-group {
    grid-column: 1 / -1;
    display: block;
    padding: 0;
    margin: 0;
  }

  #rabid-graph .rb-reset-group>.rb-field-label {
    display: none;
  }

  #rabid-graph .rb-reset {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: .65rem .85rem;
    background: #fff;
    border: 1px solid #005a9c;
    border-radius: 7px;
    color: #103e65;
    font-size: .875rem;
    font-weight: 700;
  }

  #rabid-graph .rb-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
  }

  #rabid-graph .rb-summary>div {
    min-width: 0;
    padding: .7rem .55rem;
  }

  #rabid-graph .rb-summary strong {
    font-size: 1.45rem;
  }

  #rabid-graph .rb-chart-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }

  #rabid-graph .rb-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: .35rem;
  }

  #rabid-graph .rb-chart-layout {
    grid-template-columns: 27px minmax(0, 1fr);
    column-gap: .3rem;
  }

  #rabid-graph .rb-chart-bottom {
    margin-left: 32px;
  }
}

/* ==========================================================
   Responsive: (max-width:650px)
   ========================================================== */

@media (max-width:650px) {
  .rb-tooltip.rb-floating-tooltip {
    min-width: 0;
    max-width: min(310px, calc(100vw - 20px));
    font-size: .82rem;
  }

  .rb-floating-tooltip .rb-tooltip-heading {
    padding: .65rem .8rem;
  }

  .rb-floating-tooltip .rb-tooltip-list {
    padding: .4rem .65rem;
  }

  .rb-floating-tooltip .rb-tooltip-median,
  .rb-floating-tooltip .rb-tooltip-comparison {
    margin-inline: .65rem;
  }

  #rabid-graph>.card-body {
    padding: 0.8rem;
  }

  #rabid-graph .rb-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #rabid-graph .rb-reset-group {
    grid-column: 1;
    grid-template-rows: 44px;
  }

  #rabid-graph .rb-reset-group .rb-field-label {
    display: none;
  }

  #rabid-graph .rb-summary {
    grid-template-columns: 1fr;
  }

  #rabid-graph .rb-actions {
    flex-direction: column;
  }

  #rabid-graph .rb-actions button {
    width: 100%;
  }

  #rabid-graph .rb-chart-layout {
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: .25rem;
  }

  #rabid-graph .rb-y-axis-title {
    font-size: .7rem;
  }

  #rabid-graph .rb-chart-bottom {
    margin-left: 29px;
    font-size: .75rem;
  }

  #rabid-graph .rb-summary small {
    margin-top: .25rem;
  }

  #rabid-graph .rb-note {
    padding: 0.8rem;
    margin-top: 1rem;
  }

  #rabid-graph .rb-note-item {
    padding: 0.8rem;
  }

  #rabid-graph #rb-data-notes-title {
    font-size: 0.9rem;
  }

  #rabid-graph .rb-note-label {
    font-size: 0.83rem;
  }

  #rabid-graph .rb-note-description {
    font-size: 0.82rem;
  }

  #rabid-graph #rb-latest-detail,
  #rabid-graph #rb-peak-detail,
  #rabid-graph #rb-range-detail {
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
    text-align: left;
  }
}

/* ==========================================================
   Responsive: (min-width:481px) and (max-width:700px)
   ========================================================== */

@media (min-width:481px) and (max-width:700px) {

  #rabid-graph #rb-latest-detail::before,
  #rabid-graph #rb-peak-detail::before,
  #rabid-graph #rb-range-detail::before {
    content: none;
    display: none;
  }

  #rabid-graph .rb-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: stretch;
  }

  #rabid-graph .rb-summary>div {
    grid-template-rows: minmax(3rem, auto) auto minmax(3.25rem, auto);
    align-items: center;
    justify-items: center;
    align-content: stretch;
    min-width: 0;
    gap: 0.35rem;
    padding: 0.65rem 0.5rem;
    background: #f4f8fb;
    border-left: 4px solid var(--rb-teal);
    border-radius: 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #rabid-graph .rb-summary>div>span {
    width: 100%;
    margin: 0;
    color: var(--rb-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    text-align: center;
  }

  #rabid-graph .rb-summary>div>strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    color: var(--rb-blue-deep);
    font-size: clamp(1.3rem, 3.5vw, 1.65rem);
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.45rem;
  }

  #rabid-graph #rb-latest-detail,
  #rabid-graph #rb-peak-detail,
  #rabid-graph #rb-range-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0.4rem 0.45rem;
    gap: 0.3rem;
    background: var(--rb-detail-bg);
    border: 1px solid var(--rb-detail-border);
    border-left: 3px solid var(--rb-detail-accent);
    border-radius: 5px;
    color: var(--rb-detail-text);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: break-word;
    margin-top: auto;
    min-height: 3.5rem;
  }
}

/* ==========================================================
   Responsive: (min-width:481px) and (max-width:550px)
   ========================================================== */

@media (min-width:481px) and (max-width:550px) {
  #rabid-graph .rb-summary {
    gap: 0.35rem;
  }

  #rabid-graph .rb-summary>div {
    grid-template-rows: minmax(3.5rem, auto) auto minmax(3.5rem, auto);
    padding: 0.55rem 0.35rem;
    gap: 0.25rem;
  }

  #rabid-graph .rb-summary>div>span {
    font-size: 0.67rem;
  }

  #rabid-graph .rb-summary>div>strong {
    font-size: 1.35rem;
  }

  #rabid-graph #rb-latest-detail,
  #rabid-graph #rb-peak-detail,
  #rabid-graph #rb-range-detail {
    min-height: 3.5rem;
    padding: 0.3rem;
    font-size: 0.63rem;
  }
}

/* ==========================================================
   Responsive: (max-width:480px)
   ========================================================== */

@media (max-width:480px) {
  #rabid-graph>.card-body {
    padding: .7rem;
  }

  #rabid-graph .rb-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    padding: .65rem;
    border-radius: 9px;
  }

  #rabid-graph .rb-toolbar>.rb-period {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: .4rem;
    padding: .75rem;
  }

  #rabid-graph .rb-period>.rb-field-label,
  #rabid-graph .rb-period>.rb-segment,
  #rabid-graph .rb-period>#rb-month-help {
    grid-column: 1;
    grid-row: auto;
  }

  #rabid-graph .rb-period>.rb-field-label,
  #rabid-graph .rb-control-group label {
    font-size: .81rem;
    text-align: left;
  }

  #rabid-graph .rb-segment {
    height: 46px;
    padding: 3px;
  }

  #rabid-graph .rb-segment button {
    height: 38px;
    min-height: 38px;
    font-size: .88rem;
  }

  #rabid-graph .rb-period #rb-month-help {
    margin-top: .1rem;
    font-size: .73rem;
    text-align: left;
  }

  #rabid-graph .rb-control-group:not(.rb-period) {
    grid-template-rows: auto 46px;
    gap: .4rem;
    padding: .7rem .75rem;
  }

  #rabid-graph .rb-toolbar select {
    height: 46px;
    font-size: .9rem;
  }

  #rabid-graph .rb-reset-group {
    grid-column: 1;
  }

  #rabid-graph .rb-reset {
    height: 46px;
    min-height: 46px;
  }

  #rabid-graph .rb-summary strong {
    font-size: 1.55rem;
  }

  #rabid-graph .rb-summary small {
    margin-top: .25rem;
  }

  #rabid-graph .rb-chart-heading h3 {
    font-size: .88rem;
  }

  #rabid-graph .rb-chart-heading p {
    font-size: .72rem;
    line-height: 1.5;
  }

  #rabid-graph .rb-legend {
    gap: .35rem;
    padding: .4rem;
  }

  #rabid-graph .rb-legend-item {
    white-space: normal;
    font-size: .68rem;
    line-height: 1.35;
  }

  #rabid-graph .rb-chart-layout {
    grid-template-columns: 23px minmax(0, 1fr);
    column-gap: .2rem;
  }

  #rabid-graph .rb-y-axis-title {
    font-size: .66rem;
  }

  #rabid-graph .rb-chart-bottom {
    margin-left: 26px;
    font-size: .75rem;
  }

  #rabid-graph .rb-chart-scroll {
    padding-inline: 0;
  }

  #rabid-graph .rb-note {
    padding: .75rem;
  }

  #rabid-graph #rb-notes-content {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
  }

  #rabid-graph .rb-note-item {
    padding: .75rem;
  }

  #rabid-graph #rb-latest-detail::before,
  #rabid-graph #rb-peak-detail::before,
  #rabid-graph #rb-range-detail::before {
    content: none;
    display: none;
  }

  #rabid-graph .rb-chart-heading {
    margin-top: 0.7rem;
  }

  #rabid-graph #rb-total-years {
    font-size: 1.05rem;
    white-space: normal;
  }

  #rabid-graph .rb-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.65rem;
    text-align: center;
    align-items: stretch;
  }

  #rabid-graph .rb-summary>div {
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-width: 0;
    margin: 0;
    padding: 0.55rem 0.3rem;
    background: #f4f8fb;
    border: 1px solid #d5e3eb;
    border-top: 3px solid var(--rb-teal);
    border-left: 1px solid #d5e3eb;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #rabid-graph .rb-summary>div>span {
    display: block;
    width: 100%;
    margin: 0;
    color: #465d70;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
    min-height: 2.75rem;
  }

  #rabid-graph .rb-summary>div>strong {
    display: block;
    margin: 0;
    color: var(--rb-blue-deep);
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
  }

  #rabid-graph #rb-latest-detail,
  #rabid-graph #rb-peak-detail,
  #rabid-graph #rb-range-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding: 0.25rem 0.2rem;
    background: #fff3d9;
    border: 1px solid #e5c27e;
    border-radius: 4px;
    color: #69400b;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
    margin-top: auto;
    min-height: 2.5rem;
  }
}

/* ==========================================================
   Responsive: (max-width:360px)
   ========================================================== */

@media (max-width:360px) {
  #rabid-graph .rb-summary {
    gap: 0.25rem;
  }

  #rabid-graph .rb-summary>div {
    padding: 0.45rem 0.2rem;
  }

  #rabid-graph .rb-summary>div>span {
    font-size: 0.59rem;
  }

  #rabid-graph .rb-summary>div>strong {
    font-size: 1.1rem;
  }

  #rabid-graph #rb-latest-detail,
  #rabid-graph #rb-peak-detail,
  #rabid-graph #rb-range-detail {
    font-size: 0.57rem;
    padding: 0.2rem 0.15rem;
  }
}

/* ==========================================================
   Responsive: (prefers-reduced-motion:reduce)
   ========================================================== */

@media (prefers-reduced-motion:reduce) {
  #rabid-graph * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  #rabid-graph .rb-plot,
  #rabid-graph .rb-y-labels,
  #rabid-graph .rb-bars .rb-bar,
  #rabid-graph .rb-bar-label,
  #rabid-graph .rb-median-overlay,
  #rabid-graph .rb-note-item,
  .rb-tooltip.rb-floating-tooltip:not([hidden]) {
    animation: none !important;
    transform: none;
    opacity: 1;
  }

  #rabid-graph .rb-segment button,
  #rabid-graph .rb-reset,
  #rabid-graph .rb-actions button,
  #rabid-graph .rb-toolbar select {
    transition: none !important;
  }

  #rabid-graph .rb-toolbar select,
  #rabid-graph .rb-segment button,
  #rabid-graph .rb-reset {
    transition: none !important;
    animation: none !important;
  }
}


/* ==============================================================
   LA COUNTY PUBLIC HEALTH — RABIES DASHBOARD FOCUS ENHANCEMENTS
   Author: Roberto Flores
   Scope: #rabid-map and #rabid-graph only
   Load AFTER map.css, chart CSS, Leaflet and marker styles.
   Purpose: Visible keyboard focus on pale/dark controls and map tiles.
   ============================================================= */

#rabid-map,
#rabid-graph {
  --rb-ada-focus-dark: #823600;
  --rb-ada-focus-light: #ffffff;
}

/* 1. All native dashboard inputs, buttons and interactive chart controls */
#rabid-map :is(button, input, select, textarea, a[href], [role="button"]):focus-visible,
#rabid-graph :is(button, input, select, textarea, a[href], [role="button"]):focus-visible,
#rabid-graph .rb-chart-scroll:focus-visible,
#rabid-graph .rb-table-scroll:focus-visible {
  outline: 3px solid var(--rb-ada-focus-dark) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--rb-ada-focus-light),
    0 0 0 7px var(--rb-ada-focus-dark) !important;
  position: relative;
  z-index: 20;
}

/* 2. Leaflet markers and cluster elements are often image/div elements,
      not native buttons. Target the focusable Leaflet classes directly. */
#rabid-map .leaflet-marker-icon:focus-visible,
#rabid-map .marker-cluster:focus-visible,
#rabid-map .rb-map-detection-icon:focus-visible,
#rabid-map .leaflet-interactive:focus-visible,
#rabid-map .leaflet-control a:focus-visible {
  outline: 3px solid var(--rb-ada-focus-dark) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px #fff,
    0 0 0 8px var(--rb-ada-focus-dark) !important;
  border-radius: 6px;
}

/* The marker pane is stacked above tiles, but its focused children also
   need a raised stacking order to avoid neighboring markers obscuring them. */
#rabid-map .leaflet-marker-icon:focus-visible,
#rabid-map .marker-cluster:focus-visible {
  z-index: 1000 !important;
}

/* 3. Chart bars are extremely narrow (and may represent zero counts).
      Their visible focus indication must be broader than the colored segment. */
#rabid-graph .rb-bar:focus-visible,
#rabid-graph .rb-stacked-bar:focus-visible {
  outline: 3px solid var(--rb-ada-focus-dark) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff,
    0 0 0 7px var(--rb-ada-focus-dark) !important;
  min-height: 8px;
  z-index: 10;
}

/* Highlight the whole chart period, including zero-height bar periods. */
#rabid-graph .rb-bar-wrap:focus-within {
  background: rgb(0 90 156 / 10%);
  border-radius: 4px;
}

/* 4. The map itself needs a visible outline when focused for keyboard panning. */
#rabid-map :is(#coolingMap, .leaflet-container):focus-visible {
  outline: 4px solid var(--rb-ada-focus-dark) !important;
  outline-offset: -5px !important;
  box-shadow: inset 0 0 0 3px white !important;
}

/* 5. Focused controls must remain visible inside dialogs and panels.
      Inset variant for buttons directly at clipped panel boundaries. */
#rabid-map :is(.rb-map-help-close, .rb-map-help-done, .rb-map-mobile-details__close):focus-visible {
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 2px #fff,
    inset 0 0 0 5px var(--rb-ada-focus-dark) !important;
}

/* 6. Browser forced-color themes must retain visible focus indicators. */
@media (forced-colors: active) {

  #rabid-map :is(button, input, select, a[href], [role="button"], .leaflet-marker-icon, .marker-cluster, .leaflet-interactive):focus-visible,
  #rabid-graph :is(button, input, select, a[href], [role="button"], .rb-bar):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
}

/* Focus transitions must not animate for users requesting reduced motion. */
@media (prefers-reduced-motion: reduce) {

  #rabid-map :focus-visible,
  #rabid-graph :focus-visible {
    transition: none !important;
  }
}


/* ==========================================================
   RABIES DASHBOARD — MONTHLY REPORTING YEAR
   Author: Roberto Flores
   Subtle styling with WCAG focus and contrast support
   ========================================================== */

#rabid-graph .rb-monthly-year-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  padding: 0;
  background: transparent;
  border: none;
}

/* Keep hidden state working */
#rabid-graph .rb-monthly-year-toolbar[hidden] {
  display: none !important;
}

/* Reporting Year label */
#rabid-graph .rb-monthly-year-label {
  margin: 0;
  color: #005a9c;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Dropdown */
#rabid-graph .rb-monthly-year-select {
  appearance: auto;
  flex: 0 1 135px;
  width: 135px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;

  background: #ffffff;
  color: #18364a;
  border: 2px solid #526b80;
  border-radius: 6px;

  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

/* Hover */
#rabid-graph .rb-monthly-year-select:hover {
  border-color: #005a9c;
}

/* Keyboard focus */
#rabid-graph .rb-monthly-year-select:focus-visible {
  outline: 3px solid #9b4100;
  outline-offset: 3px;
  border-color: #005a9c;
}

/* Small screens and 400% zoom */
@media (max-width: 480px) {
  #rabid-graph .rb-monthly-year-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  #rabid-graph .rb-monthly-year-select {
    flex: none;
    width: min(100%, 180px);
  }
}

/* Windows high-contrast mode */
@media (forced-colors: active) {
  #rabid-graph .rb-monthly-year-select {
    border-color: ButtonText;
  }

  #rabid-graph .rb-monthly-year-select:focus-visible {
    outline-color: Highlight;
  }
}

#rabid-graph .rb-monthly-year-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  padding: 0;
  background: transparent;
  border: none;
}

/* Keep hidden state working */
#rabid-graph .rb-monthly-year-toolbar[hidden] {
  display: none !important;
}

/* Reporting Year label */
#rabid-graph .rb-monthly-year-label {
  margin: 0;
  color: #005a9c;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Dropdown */
#rabid-graph .rb-monthly-year-select {
  appearance: auto;
  flex: 0 1 90px;
  width: 90px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;

  background: #ffffff;
  color: #18364a;
  border: 2px solid #526b80;
  border-radius: 6px;

  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

/* Hover */
#rabid-graph .rb-monthly-year-select:hover {
  border-color: #005a9c;
}

/* Keyboard focus */
#rabid-graph .rb-monthly-year-select:focus-visible {
  outline: 3px solid #9b4100;
  outline-offset: 3px;
  border-color: #005a9c;
}

/* Small screens and 400% zoom */
@media (max-width: 480px) {
  #rabid-graph .rb-monthly-year-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  #rabid-graph .rb-monthly-year-select {
    flex: none;
    width: min(100%, 180px);
  }
}

/* Windows high-contrast mode */
@media (forced-colors: active) {
  #rabid-graph .rb-monthly-year-select {
    border-color: ButtonText;
  }

  #rabid-graph .rb-monthly-year-select:focus-visible {
    outline-color: Highlight;
  }
}

#rabid-graph .rb-bar-wrap {
  position: relative;
  min-width: 0;
}

/* Full-column transparent mouse target */
#rabid-graph .rb-bar-hit-area {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;

  background: transparent;
  cursor: pointer;
}

/* Highlight the month being inspected */
#rabid-graph .rb-bar-wrap:hover,
#rabid-graph .rb-bar-wrap.is-hovered,
#rabid-graph .rb-bar-wrap:focus-within {
  background: rgba(0, 90, 156, 0.07);
  border-radius: 5px;
}

/* Keep the visible bar above the column background */
#rabid-graph .rb-bar {
  position: relative;
  z-index: 1;
}

/* Stronger keyboard focus */
#rabid-graph .rb-bar:focus-visible {
  outline: 3px solid #9b4100;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #ffffff;
}

/* Zero-height bars retain a visible focus target */
#rabid-graph .rb-bar.is-zero:focus-visible,
#rabid-graph .rb-bar.is-unavailable:focus-visible {
  min-height: 4px;
}

/* Prevent hover treatment from interfering with reduced motion */
@media (prefers-reduced-motion: reduce) {
  #rabid-graph .rb-bar-wrap {
    transition: none;
  }
}

.ph-page-header {
  margin: 0 !important;
  margin-top: -1rem !important;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  border-radius: unset;
}

/**
 * ============================================================
 * RABIES DASHBOARD - LAST UPDATED
 * ============================================================
 * Author: Roberto Flores
 *
 * PURPOSE:
 * Displays a compact, highlighted last-updated date
 * aligned to the right above the section controls.
 * ============================================================
 */

.rb-wrap .rb-last-updated {
  display: block !important;
  width: fit-content;
  max-width: 100%;

  /* Right alignment */
  margin: 14px 0 8px auto !important;

  /* Compact appearance */
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;

  /* Public Health colors */
  color: #005a9c !important;
  background-color: #edf5fb;
  border: 1px solid #c9dfef;
  border-radius: 4px;

  text-align: right !important;
  box-sizing: border-box;
}

/* Chart */
#rabid-graph .rb-last-updated {
  margin-bottom: -10px !important;
}

/* Map */
#rabid-map .rb-last-updated {
  margin-bottom: -10px !important;
}

/* Historical Data */
#historical-data .rb-last-updated {
  margin-bottom: -10px !important;
}

/* Mobile */
@media (max-width: 600px) {
  .rb-wrap .rb-last-updated {
    font-size: 0.6875rem !important;
    padding: 3px 8px !important;
    margin-bottom: 6px !important;
  }
}

.historical-data-img {
  width: 100%;
}



/**
 * ============================================================
 * 05 — RABIES CHART & MAP DATA SOURCE NOTES
 * ============================================================
 *
 * Author: Roberto Flores
 *
 * PURPOSE:
 * Shared information callout styling for:
 * - Rabies Surveillance Chart (#rabid-graph)
 * - Rabies Surveillance Map (#rabid-map)
 *
 * Both use the same HTML classes for a consistent layout.
 * Scoped to the Rabies Dashboard to avoid affecting other pages.
 * ============================================================
 */

/* Main information container */
#rabid-graph .rb-map-data-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;

  margin: 1rem 0 0;
  padding: 1rem 1.25rem;

  background: #f1f8fa;
  border: 1px solid #c8e3e7;
  border-left: 4px solid #007c8a;
  border-right: 4px solid #007c8a;
  border-radius: 9px;
  /*border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;*/

  color: #103e65;
  font-size: 0.875rem;
  line-height: 1.6;
  box-sizing: border-box;
}

/* Information icon container */
#rabid-map .rb-map-data-note__icon,
#rabid-graph .rb-map-data-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  background: #dceff2;
  color: #005a9c;

  border: 1px solid #b9dce2;
  border-radius: 50%;

  font-size: 1.1rem;
}

/* Font Awesome icon */
#rabid-map .rb-map-data-note__icon i,
#rabid-graph .rb-map-data-note__icon i {
  display: inline-block;
  line-height: 1;
}

/* Text container */
#rabid-map .rb-map-data-note__content,
#rabid-graph .rb-map-data-note__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Paragraph */
#rabid-map .rb-map-data-note__content p,
#rabid-graph .rb-map-data-note__content p {
  margin: 0;
  padding: 0;

  color: #364f61;
  font-size: 0.75rem;
  line-height: 1.65;
}

/* Heading inside paragraph */
#rabid-map .rb-map-data-note__content strong,
#rabid-graph .rb-map-data-note__content strong {
  display: block;
  margin-bottom: 0.2rem;

  color: #103e65;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
}

.fontWeight {
  font-weight: 700;
}

.nowrap {
  white-space: nowrap
}

/* Rabies chart: no-data information (year and month views). */
#rabid-graph .rb-chart-no-data:not([hidden]) {
  display: block;
  max-width: 100%;
  margin: .75rem 0 1rem;
  padding: .8rem 1rem;
  box-sizing: border-box;
  border: 1px solid #b9d6e7;
  border-left: 4px solid #005a9c;
  border-radius: 6px;
  background: #eef6fc;
  color: #103e65;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#rabid-graph .rb-chart-no-data[hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  #rabid-graph .rb-chart-no-data:not([hidden]) {
    padding: .7rem .8rem;
    font-size: .82rem;
  }
}

/* ============================================================
   13 — RABIES CHART: FLOATING TOOLTIP POINTER
   Author: Roberto Flores
   Organization: Los Angeles County Department of Public Health

   PURPOSE:
   - Keep the pointer visually BEHIND the floating tooltip.
   - Keep pointer clicks from interfering with chart interactions.
   - Let JavaScript position/hide the pointer before changing bars.
   - Preserve above/below direction and forced-colors support.

   IMPORTANT:
   The pointer is appended to document.body by rabies-chart.js.
   The JS must set pointer.hidden = true before repositioning it
   and reveal it only after updating its coordinates and direction.
   CSS stacking order alone cannot prevent an old-position flash.
   ============================================================ */

/* Tooltip must remain on top of the separate pointer element. */
.rb-tooltip.rb-floating-tooltip {
  position: fixed;
  z-index: 10000;
  isolation: isolate;
}

/* The pointer is drawn as a diamond; part is tucked under the popup. */
.rb-tooltip-arrow {
  position: fixed;
  z-index: 9999;
  display: block;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: #003f70;
  border: 1px solid #b4cbda;
  border-radius: 1px;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center;
  transition: none;
  animation: none;
  will-change: auto;
}

/* The DOM hidden attribute takes precedence over generic display rules. */
.rb-tooltip-arrow[hidden] {
  display: none !important;
}

/* Tooltip above bar: diamond points DOWN; upper half is behind popup. */
.rb-tooltip-arrow.is-above {
  border-width: 0 1px 1px 0;
  margin-top: -6px;
}

/* Tooltip below bar: diamond points UP; lower half is behind popup. */
.rb-tooltip-arrow.is-below {
  border-width: 1px 0 0 1px;
  margin-top: -6px;
}

/* No ghost pointer when the tooltip itself is absent. */
.rb-tooltip.rb-floating-tooltip[hidden] {
  display: none !important;
}

@media (forced-colors: active) {
  .rb-tooltip-arrow {
    background: Canvas;
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-tooltip-arrow {
    transition: none !important;
    animation: none !important;
  }
}


/* Rabies surveillance chart — keyboard accessibility additions.
   Add after your existing chart stylesheet. */
#rabid-graph .rb-chart-keyboard-guide {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#rabid-graph .rb-bar-wrap:focus-within {
  background: rgb(0 90 156 / 10%);
  border-radius: 4px;
}

#rabid-graph .rb-bar:focus-visible {
  outline: 3px solid #823600 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px #823600 !important;
  min-height: 8px;
  z-index: 5;
}

#rabid-graph .rb-chart:focus-visible {
  outline: 3px solid #823600 !important;
  outline-offset: 3px !important;
}

@media (forced-colors: active) {

  #rabid-graph .rb-bar:focus-visible,
  #rabid-graph .rb-chart:focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
}