/* ================================================================
   LA COUNTY PUBLIC HEALTH — RABIES SURVEILLANCE GEODATA MAP
   Author: Roberto Flores | Consolidated: 2026-10-13

   Dedicated stylesheet; load after Leaflet, MarkerCluster CSS.
   Load the separate rabies-map-help-mobile.css AFTER this file.

   01  Theme, map frame and status
   02  Filters and marker-count actions
   03  Leaflet navigation controls and tooltips
   04  Detection popups
   05  Data note
   06  MarkerCluster and individual detection dots
   07  Responsive layout and fullscreen
   08  Accessible and reduced-motion states

   Desktop: filters and marker-count controls float top-right.
   <=768px: filters move above map; +/- and View All float
   over the map at top-right. No extra JS DOM changes required.
   ================================================================ */

/* 01 — Theme and map frame */
#rabid-map {
  --rm-blue: #005a9c;
  --rm-blue-deep: #103e65;
  --rm-raccoon: #a24f12;
  --rm-teal: #007c8a;
  --rm-muted: #465d70;
  --rm-border: #ccdde7;
  --rm-focus: #b84d00;
}

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

#rabid-map .rb-map-layout {
  min-width: 0;
  width: 100%;
}

#rabid-map .rb-map-intro {
  color: var(--rm-muted);
  line-height: 1.6;
}

#rabid-map .live-map-box {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--rm-border);
  border-radius: 9px 9px 0 0;
  background: #e8f5f5;
  /* Intentionally not overflow:hidden: toolbar tooltips must remain visible. */
  overflow: visible;
}

#rabid-map :is(.leaflet-map, #coolingMap) {
  display: block;
  position: relative;
  width: 100%;
  height: 520px;
  min-height: 380px;
  z-index: 1;
  background: #e8f5f5;
}

#rabid-map .rb-map-status {
  margin: .8rem 0 .25rem;
  padding-inline: 10px;
  color: var(--rm-muted);
  font-size: .875rem;
  line-height: 1.5;
}

/* 02 — Filter toolbar: shared desktop and mobile controls */
#rabid-map .rb-map-toolbar {
  position: absolute;
  z-index: 1000;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 6px;
  width: max-content;
  max-width: min(98%, 760px);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--rm-border);
  border-radius: 6px;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 3px 12px rgb(16 62 101 / 18%);
}

#rabid-map .rb-map-toolbar-field {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 3px;
  min-width: 0;
}

#rabid-map .rb-map-toolbar-label {
  padding-left: 2px;
  font-size: .7rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--rm-blue-deep);
  white-space: nowrap;
  text-transform: capitalize;
}

#rabid-map :is(.rb-map-toolbar-select, .rb-map-toolbar-zip) {
  display: block;
  width: 124px;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid #a9c1d0;
  border-radius: 5px;
  background: #fff;
  color: var(--rm-blue-deep);
  font: inherit;
  /*font-size: .78rem;*/
  line-height: 1.2;
  cursor: pointer;
}

#rabid-map .rb-map-toolbar-year {
  width: 90px;
}

#rabid-map .rb-map-toolbar-radius {
  width: 120px;
}

#rabid-map .rb-map-toolbar-zip {
  width: 105px;
}

/* Segmented +/- remains horizontal, independently of global button rules. */
#rabid-map .rb-map-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: max-content;
  min-width: 0;
  margin: 0;
}

#rabid-map .rb-map-toolbar-stepper {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  grid-template-rows: 38px;
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  flex: 0 0 76px;
  width: 76px;
  min-width: 76px;
  height: 38px;
  margin: 0;
  padding: 0;
}

#rabid-map .rb-map-toolbar .rb-map-toolbar-btn.rb-map-toolbar-icon {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rm-blue);
  border-radius: 5px;
  background: #fff;
  color: var(--rm-blue);
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

#rabid-map .rb-map-toolbar-stepper>.rb-map-toolbar-icon:first-child {
  border-radius: 5px 0 0 5px;
}

#rabid-map .rb-map-toolbar-stepper>.rb-map-toolbar-icon:last-child {
  border-left: 0;
  border-radius: 0 5px 5px 0;
}

#rabid-map .rb-map-toolbar-icon>span {
  display: grid;
  place-items: center;
  line-height: 1;
}

#rabid-map .rb-map-toolbar .rb-map-toolbar-icon:hover:not(:disabled) {
  background: var(--rm-blue);
  color: #fff;
}

#rabid-map .rb-map-toolbar .rb-map-toolbar-icon:disabled {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

#rabid-map .rb-map-toolbar-icon[data-tooltip]:not(:disabled):is(:hover, :focus-visible)::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1400;
  top: calc(100% + 8px);
  right: 0;
  display: block;
  width: max-content;
  max-width: min(170px, 50vw);
  padding: 6px 9px;
  border-radius: 5px;
  background: var(--rm-blue-deep);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
  font: 600 .76rem/1.35 Arial, sans-serif;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

#rabid-map .rb-map-toolbar-icon:disabled::after {
  display: none;
}

/* 03 — Leaflet navigation and utility controls */
#rabid-map .rb-map-leaflet-controls {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  width: max-content;
  padding: 3px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 9px rgb(16 62 101 / 18%);
  overflow: visible;
}

/* Shared size for navigation, reset, fullscreen and help icons. */
#rabid-map .rb-map-leaflet-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0;
  border: 1px solid #c8d8e2;
  border-radius: 4px;
  background: #fff;
  color: var(--rm-blue-deep);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}

#rabid-map .rb-map-leaflet-btn:hover {
  background: #e8f3fb;
  border-color: var(--rm-blue);
  color: var(--rm-blue);
}

/* Navigation-specific wrapper keeps the main button in place. */
#rabid-map .rb-map-leaflet-controls:has(> .rb-map-nav) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: max-content;
}

/* The arrow panel floats beside the main button, without shifting it. */
#rabid-map .rb-map-nav {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(2, 36px);
  grid-template-rows: repeat(2, 36px);
  gap: 4px;
  width: max-content;
  padding: 5px;
  border: 1px solid #c8d8e2;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(16 62 101 / 20%);
}

/* A small pointer directed toward the main navigation toggle. */
#rabid-map .rb-map-nav::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-left: 1px solid #c8d8e2;
  border-bottom: 1px solid #c8d8e2;
  background: #fff;
  transform: rotate(45deg);
  pointer-events: none;
}

/* The HTML hidden state must take precedence over display:grid. */
#rabid-map .rb-map-nav[hidden] {
  display: none !important;
}

#rabid-map .rb-map-nav .rb-map-leaflet-btn {
  z-index: 1;
}

/* Accessible visual tooltips for icon buttons. */
#rabid-map .rb-map-leaflet-btn[data-tooltip]:hover::after,
#rabid-map .rb-map-leaflet-btn[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1300;
  top: 50%;
  left: calc(100% + 9px);
  transform: translateY(-50%);
  display: block;
  width: max-content;
  max-width: min(220px, 60vw);
  padding: .4rem .6rem;
  border-radius: 5px;
  background: var(--rm-blue-deep);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  pointer-events: none;
}

/* ==========================================================
   03A — Leaflet built-in zoom controls, matching custom icons
   ========================================================== */
#rabid-map .leaflet-control-zoom {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 9px rgb(16 62 101 / 18%);
  overflow: visible;
}

#rabid-map .leaflet-control-zoom a.leaflet-control-zoom-in,
#rabid-map .leaflet-control-zoom a.leaflet-control-zoom-out {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid #c8d8e2;
  border-radius: 4px;
  background: #fff;
  color: var(--rm-blue-deep);
  font: 700 22px/1 Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

#rabid-map .leaflet-control-zoom a span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: inherit;
  line-height: 1;
}

#rabid-map .leaflet-control-zoom a:hover:not(.leaflet-disabled) {
  background: #e8f3fb;
  border-color: var(--rm-blue);
  color: var(--rm-blue);
}

#rabid-map .leaflet-control-zoom a.leaflet-disabled {
  background: #f1f5f9;
  border-color: #d5dfe6;
  color: #64748b;
  cursor: not-allowed;
}

#rabid-map .leaflet-control-zoom a:hover::after,
#rabid-map .leaflet-control-zoom a:focus-visible::after {
  position: absolute;
  z-index: 1300;
  top: 50%;
  left: calc(100% + 9px);
  transform: translateY(-50%);
  display: block;
  width: max-content;
  max-width: min(220px, 60vw);
  padding: .4rem .6rem;
  border-radius: 5px;
  background: var(--rm-blue-deep);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
  font: 600 .76rem/1.35 Arial, sans-serif;
  white-space: normal;
  text-align: left;
  pointer-events: none;
}

#rabid-map .leaflet-control-zoom-in:hover::after,
#rabid-map .leaflet-control-zoom-in:focus-visible::after {
  content: 'Zoom in';
}

#rabid-map .leaflet-control-zoom-out:hover::after,
#rabid-map .leaflet-control-zoom-out:focus-visible::after {
  content: 'Zoom out';
}

/* Move built-in Leaflet controls 10px from the map edge. */
#rabid-map .leaflet-top.leaflet-left {
  left: 10px;
}

#rabid-map .leaflet-top {
  top: 6px;
}

#rabid-map .leaflet-top {
  top: 6px;
}


#rabid-map .leaflet-top.leaflet-left .leaflet-control {
  margin-left: 0;
}


/* ==========================================================
   04 — DETECTION POPUP (Leaflet + MarkerCluster)
   Scoped to the popup's className: rb-detection-popup.
   Uses the DOM structure returned by selectMarker().
   Does not modify MarkerCluster badges or other Leaflet popups.
   ========================================================== */

#rabid-map .leaflet-popup.rb-detection-popup {
  z-index: 1100;
  color: var(--rm-blue-deep, #103e65);
}

#rabid-map .leaflet-popup.rb-detection-popup .leaflet-popup-content-wrapper {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rm-border, #ccdde7);
  border-top: 4px solid var(--rm-teal, #007c8a);
  border-radius: 9px;
  background: #fff;
  color: var(--rm-blue-deep, #103e65);
  box-shadow: 0 10px 28px rgb(16 62 101 / 24%);
}

/* Keep Leaflet's inline popup width for accurate arrow/marker anchoring. */
#rabid-map .leaflet-popup.rb-detection-popup .leaflet-popup-content {
  min-width: 0;
  max-width: calc(100vw - 64px);
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  line-height: 1.5;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup {
  min-width: 0;
  padding: 16px 16px 12px;
  color: var(--rm-blue-deep, #103e65);
  font-size: .84rem;
  line-height: 1.5;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__title {
  display: block;
  margin: 0 0px 12px 0;
  padding: 0 0 10px;
  border-bottom: 1px solid #dce8ef;
  background: transparent;
  color: var(--rm-blue-deep, #103e65);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup:not(:has(.rb-map-popup__latest)) .rb-map-popup__title {
  margin: 0.25rem 0 12px 0;
}


/* dl > div > dt + dd: enforce rows against global Bootstrap/site styles. */
#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details>div {
  display: grid;
  grid-template-columns: minmax(86px, 38%) minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #e5edf2;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details>div:first-child {
  padding-top: 0;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details>div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dt,
#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dd {
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dt {
  border-right: 1px solid #dee2e6;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dd {
  text-align: right;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dt {
  color: #365267;
  font-weight: 700;
}

#rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details dd {
  color: var(--rm-blue-deep, #103e65);
  font-weight: 400;
  overflow-wrap: anywhere;
}

#rabid-map .leaflet-popup.rb-detection-popup .leaflet-popup-tip-container {
  pointer-events: none;
}

#rabid-map .leaflet-popup.rb-detection-popup .leaflet-popup-tip {
  background: #fff;
  border-right: 1px solid var(--rm-border, #ccdde7);
  border-bottom: 1px solid var(--rm-border, #ccdde7);
  box-shadow: 2px 2px 5px rgb(16 62 101 / 9%);
}

/* Close link is a sibling of the content wrapper, not inside it. */
#rabid-map .leaflet-popup.rb-detection-popup>.leaflet-popup-close-button {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rm-border, #ccdde7);
  border-radius: 5px;
  background: #f3f8fb;
  color: var(--rm-blue-deep, #103e65);
  font: 700 21px/1 Arial, sans-serif;
  text-align: center;
  text-decoration: none;
}

#rabid-map .leaflet-popup.rb-detection-popup>.leaflet-popup-close-button:hover {
  background: #e8f3fb;
  color: var(--rm-blue, #005a9c);
}

#rabid-map .leaflet-popup.rb-detection-popup>.leaflet-popup-close-button:focus-visible {
  outline: 3px solid var(--rm-focus, #b84d00);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  #rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup {
    padding: 13px 12px 10px;
    font-size: .82rem;
  }

  #rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__title {
    font-size: .94rem;
    margin-right: 32px;
  }

  #rabid-map .leaflet-popup.rb-detection-popup .rb-map-popup__details>div {
    grid-template-columns: minmax(77px, 38%) minmax(0, 1fr);
    gap: 7px;
  }
}

/* 05 — Data source note */
/* Main information container */
#rabid-map .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-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  color: #103e65;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Information icon container */
#rabid-map .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 {
  display: inline-block;
  line-height: 1;
}

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

/* Paragraph */
#rabid-map .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 {
  display: block;

  margin-bottom: 0.2rem;

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

/* 06 — MarkerCluster: detection divIcons and numbered clusters
   Requires MarkerCluster.css, MarkerCluster.Default.css, then this file.
   The divIcon itself is 22x22; center the 18px dot inside it. */
#rabid-map .rb-map-detection-icon {
  display: grid;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50%;
}

#rabid-map .rb-map-detection-dot {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--rb-detection-color, var(--rm-blue));
  box-shadow: 0 1px 5px rgb(0 0 0 / 25%);
  transition: transform .12s ease, box-shadow .12s ease;
}

#rabid-map .rb-map-detection-icon.rb-map-detection-selected .rb-map-detection-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--rm-blue-deep), 0 2px 8px rgb(0 0 0 / 25%);
}

/* MarkerCluster's default circular badges: style outer AND inner circle. */
#rabid-map .marker-cluster-small,
#rabid-map .marker-cluster-medium,
#rabid-map .marker-cluster-large {
  background: rgb(0 90 156 / 20%);
}

#rabid-map .marker-cluster-small div,
#rabid-map .marker-cluster-medium div,
#rabid-map .marker-cluster-large div {
  background: var(--rm-blue);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}

#rabid-map .marker-cluster div span {
  color: #fff;
}

#rabid-map .marker-cluster:focus-visible,
#rabid-map .rb-map-detection-icon:focus-visible {
  outline: 3px solid var(--rm-focus);
  outline-offset: 3px;
}

/* 07 — Responsive map frame and toolbar */
@media (max-width: 768px) {
  #rabid-map .live-map-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    overflow: visible;
  }

  /* Toolbar appears above Leaflet; action buttons float over the map. */
  #rabid-map .live-map-box>.rb-map-toolbar {
    position: relative;
    inset: auto;
    order: -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-bottom: 2px solid var(--rm-blue);
    border-radius: 0;
    background: #f3f8fb;
    box-shadow: none;
    z-index: 1000;
  }

  #rabid-map .rb-map-toolbar-field {
    width: 100%;
    min-width: 0;
  }

  #rabid-map .rb-map-toolbar :is(.rb-map-toolbar-select, .rb-map-toolbar-zip) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #rabid-map .rb-map-toolbar-actions {
    position: absolute;
    top: calc(100% + 10px);
    right: 10px;
    z-index: 1200;
    grid-column: auto;
    width: max-content;
    min-width: 0;
    padding: 4px;
    border: 1px solid var(--rm-border);
    border-radius: 6px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 3px 12px rgb(16 62 101 / 18%);
  }

  #rabid-map .live-map-box> :is(.leaflet-map, #coolingMap) {
    position: relative;
    order: 0;
    flex: none;
    height: 430px;
    min-height: 350px;
  }

  #rabid-map .live-map-box>.rb-map-status {
    order: 1;
    padding: 0 12px 8px;
  }

  #rabid-map .rb-map-data-note {
    gap: .7rem;
    padding: .85rem 1rem;
  }

  #rabid-map .rb-map-data-note__icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 600px) {
  #rabid-map .live-map-box>.rb-map-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 9px;
    padding: 9px 10px;
  }
}

@media (max-width: 480px) {
  #rabid-map .live-map-box> :is(.leaflet-map, #coolingMap) {
    height: 360px;
    min-height: 300px;
  }

  #rabid-map .rb-map-data-note {
    padding: .75rem .85rem;
    gap: .65rem;
  }

  #rabid-map .rb-map-data-note__icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  #rabid-map .rb-map-data-note__content p {
    font-size: .8rem;
  }

  #rabid-map .rb-map-data-note__content strong {
    font-size: .75rem;
  }
}

@media (max-width: 360px) {
  #rabid-map .live-map-box>.rb-map-toolbar {
    gap: 6px;
    padding: 8px;
  }

  #rabid-map .rb-map-toolbar :is(.rb-map-toolbar-select, .rb-map-toolbar-zip) {
    font-size: .72rem;
  }
}

/* Fullscreen: fill remaining space after mobile toolbar and status. */
#rabid-map .live-map-box:fullscreen {
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}

#rabid-map .live-map-box:fullscreen> :is(.leaflet-map, #coolingMap) {
  height: 100%;
  min-height: 0;
}

@media (max-width: 768px) {
  #rabid-map .live-map-box:fullscreen> :is(.leaflet-map, #coolingMap) {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* 08 — Focus and motion */
#rabid-map :is(button, select, input, .leaflet-interactive, .leaflet-control a, #coolingMap):focus-visible {
  outline: 3px solid var(--rm-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #rabid-map :is(.rb-map-toolbar-icon, .rb-map-leaflet-btn, .rb-map-detection-dot) {
    transition: none;
  }
}

/* ================================================================
   09 — Selected Detection: MOBILE DETAILS PANEL (<=768px)
   Author: Roberto Flores
   Unlike Leaflet popups, this panel is a sibling AFTER the map canvas.
   It never moves with the pin, avoids autoPan and cannot be clipped by
   Leaflet's popup pane. Desktop continues to use the anchored popup.
   ================================================================ */
#rabid-map .rb-map-mobile-details[hidden] {
  display: none !important;
}

#rabid-map .rb-map-mobile-details {
  display: none;
}

@media (max-width: 768px) {
  #rabid-map .live-map-box> :is(.leaflet-map, #coolingMap) {
    height: 560px;
    min-height: 560px;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) {
    display: block;
    position: relative;
    order: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-top: 4px solid var(--rm-teal, #007c8a);
    background: #fff;
    color: var(--rm-blue-deep, #103e65);
    box-shadow: inset 0 1px 0 #d9e7ef;
    z-index: 1;
  }

  #rabid-map .rb-map-mobile-details__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0f7fb;
    border-bottom: 1px solid #d3e2ed;
  }

  #rabid-map .rb-map-mobile-details__title {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #103e65;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  #rabid-map .rb-map-mobile-details__close {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 70px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #005a9c;
    border-radius: 6px;
    background: #fff;
    color: #005a9c;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
  }

  #rabid-map .rb-map-mobile-details__close:hover {
    background: #e7f2fa;
  }

  #rabid-map .rb-map-mobile-details__close:focus-visible {
    outline: 3px solid var(--rm-focus, #b84d00);
    outline-offset: 2px;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup {
    padding: 14px 16px 16px;
    max-height: min(48dvh, 350px);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: .9rem;
    line-height: 1.5;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__latest {
    display: inline-block;
    margin: 0 0 12px;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid #d5e4ed;
    border-radius: 7px;
    background: #f8fbfd;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details :is(dt, dd) {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details dt {
    font-size: .77rem;
    font-weight: 800;
    color: #465d70;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details dd {
    margin-top: 3px;
    font-size: .94rem;
    color: #103e65;
  }
}

@media (max-width: 480px) {
  #rabid-map .live-map-box> :is(.leaflet-map, #coolingMap) {
    height: 620px;
    min-height: 620px;
  }

  #rabid-map .rb-map-mobile-details__header {
    padding: 10px 12px;
  }

  #rabid-map .rb-map-mobile-details__title {
    font-size: .98rem;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup {
    max-height: min(45dvh, 320px);
    padding: 12px;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details>div {
    padding: 10px 12px;
  }
}

/* In fullscreen, the panel stays below the map; the map consumes free space. */
@media (max-width: 768px) {
  #rabid-map .live-map-box:fullscreen> :is(.leaflet-map, #coolingMap) {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  #rabid-map .live-map-box:fullscreen>.rb-map-mobile-details:not([hidden]) {
    flex: 0 1 auto;
    max-height: 48dvh;
  }
}

/* ================================================================
   10 — MOBILE DETECTION DETAILS: REFINED ENTRANCE ANIMATION
   Author: Roberto Flores | Updated: 2026-10-19

   CSS-only improvement for the existing JS / DOM structure.
   - Slides the panel gently downward from the top while fading in.
   - Staggers header, indicator, and detail cards for clearer hierarchy.
   - Leaves the map's toolbar, Leaflet markers, and desktop popup alone.
   - Does not re-position the details panel or require new JS classes.

   NOTE: The existing JS sets [hidden] immediately on close. CSS cannot
   animate that instant display:none removal. Closing therefore remains
   immediate; a reversed exit transition would require a small JS change.
   ================================================================ */
@media (max-width: 768px) {
  #rabid-map .rb-map-mobile-details:not([hidden]) {
    transform-origin: center top;
    animation: rb-mobile-details-enter 420ms cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform, opacity;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-mobile-details__header {
    animation: rb-mobile-details-content 390ms cubic-bezier(.22, 1, .36, 1) 65ms both;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__latest {
    animation: rb-mobile-details-content 380ms cubic-bezier(.22, 1, .36, 1) 115ms both;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__details>div {
    animation: rb-mobile-details-content 380ms cubic-bezier(.22, 1, .36, 1) 130ms both;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__details>div:nth-child(2) {
    animation-delay: 165ms;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__details>div:nth-child(3) {
    animation-delay: 200ms;
  }

  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__details>div:nth-child(n+4) {
    animation-delay: 230ms;
  }

  /* Quiet but visible feedback when the user closes the panel. */
  #rabid-map .rb-map-mobile-details__close {
    transition: background-color 160ms ease, border-color 160ms ease,
      color 160ms ease, box-shadow 160ms ease;
  }

  #rabid-map .rb-map-mobile-details__close:hover {
    box-shadow: 0 2px 7px rgb(16 62 101 / 13%);
  }

  #rabid-map .rb-map-mobile-details__close:active {
    background: #dceef9;
  }
}

@keyframes rb-mobile-details-enter {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(.985);
    filter: drop-shadow(0 0 0 transparent);
  }

  65% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 3px 8px rgb(16 62 101 / 10%));
  }
}

@keyframes rb-mobile-details-content {
  from {
    opacity: 0;
    transform: translateY(-9px);
  }

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

@media (prefers-reduced-motion: reduce) {

  #rabid-map .rb-map-mobile-details:not([hidden]),
  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-mobile-details__header,
  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__latest,
  #rabid-map .rb-map-mobile-details:not([hidden]) .rb-map-popup__details>div {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  #rabid-map .rb-map-mobile-details__close {
    transition: none !important;
  }
}

/* ================================================================
   11 — MOBILE DETECTION BOTTOM SHEET (inside the map)
   Replaces the previous below-map layout and entrance animation.
   Desktop map popups and fullscreen controls are unaffected.
   ================================================================ */
@media (max-width: 768px) {
  #rabid-map .live-map-box {
    position: relative;
  }

  #rabid-map .live-map-box>.rb-map-mobile-details {
    position: absolute;
    inset: auto 8px 8px 8px;
    order: initial;
    z-index: 1500;
    display: block;
    width: auto;
    max-height: min(65%, 390px);
    margin: 0;
    overflow: hidden;
    border: 1px solid #bdd3e0;
    border-top: 4px solid var(--rm-teal, #007c8a);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 38px rgb(0 30 60 / 26%);
    opacity: 0;
    transform: translate3d(0, calc(100% + 24px), 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1),
      opacity 240ms ease, visibility 0s linear 380ms;
    animation: none !important;
    will-change: transform, opacity;
  }

  #rabid-map .live-map-box>.rb-map-mobile-details.is-open:not([hidden]) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1),
      opacity 240ms ease, visibility 0s;
  }

  #rabid-map .live-map-box>.rb-map-mobile-details.is-closing:not([hidden]) {
    opacity: 0;
    transform: translate3d(0, calc(100% + 24px), 0);
    pointer-events: none;
    visibility: visible;
    transition: transform 280ms ease-in, opacity 200ms ease-in;
  }

  /* Disable the old downward-from-top/keyframe effects on card children. */
  #rabid-map .rb-map-mobile-details :is(.rb-map-mobile-details__header,
    .rb-map-popup__latest, .rb-map-popup__details > div) {
    animation: none !important;
  }

  #rabid-map .live-map-box>.rb-map-mobile-details .rb-map-popup {
    max-height: min(37dvh, 250px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The sheet must not shrink the Leaflet canvas or cover the filters. */
  #rabid-map .live-map-box:fullscreen>.rb-map-mobile-details:not([hidden]) {
    position: absolute;
    flex: none;
    max-height: min(60dvh, 390px);
  }
}

@media (max-width: 480px) {
  #rabid-map .live-map-box>.rb-map-mobile-details {
    inset: auto 6px 6px 6px;
    max-height: min(65%, 365px);
  }

  #rabid-map .live-map-box>.rb-map-mobile-details .rb-map-popup {
    max-height: min(39dvh, 245px);
  }
}

@media (prefers-reduced-motion: reduce) {

  #rabid-map .live-map-box>.rb-map-mobile-details,
  #rabid-map .live-map-box>.rb-map-mobile-details.is-open:not([hidden]),
  #rabid-map .live-map-box>.rb-map-mobile-details.is-closing:not([hidden]) {
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }
}

/* ===============================================================
   ACCESSIBILITY IMPROVEMENTS — 2026-10-19
   Supplement existing map, status and bottom-sheet styling.
   =============================================================== */
#rabid-map .rb-map-keyboard-guide {
  margin: .5rem 0 .75rem;
  padding: .7rem .9rem;
  border-left: 4px solid #005a9c;
  background: #f0f7fb;
  color: #103e65;
  font-size: .875rem;
  line-height: 1.5;
  display: none;
}

#rabid-map .rb-map-zip-error:not([hidden]) {
  display: block;
  margin-top: 4px;
  color: #8b2500;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#rabid-map .rb-map-toolbar-zip[aria-invalid="true"] {
  border: 2px solid #a32900;
  background: #fff9f6;
}

#rabid-map :is(.rb-map-toolbar-icon, .rb-map-leaflet-btn,
  .rb-map-mobile-details__close, .leaflet-control-zoom a,
  .rb-map-toolbar-select, .rb-map-toolbar-zip,
  .rb-map-detection-icon):focus-visible {
  outline: 3px solid #b84d00 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

#rabid-map .rb-map-toolbar :is(.rb-map-toolbar-select, .rb-map-toolbar-zip) {
  border-color: #667f91;
  font-size: 0.78rem;
}

#rabid-map .rb-map-detection-icon {
  cursor: pointer;
}

@media (max-width: 768px) {
  #rabid-map .rb-map-toolbar {
    min-width: 0;
  }

  #rabid-map .rb-map-mobile-details {
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  #rabid-map .rb-map-toolbar-actions {
    max-width: calc(100vw - 30px);
  }

  #rabid-map .rb-map-mobile-details .rb-map-popup__details {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {

  #rabid-map .rb-map-detection-dot,
  #rabid-map .rb-map-mobile-details,
  #rabid-map .rb-map-mobile-details * {
    animation: none !important;
    transition: none !important;
  }
}

/* Keyboard activation and focus for cluster markers and location markers. */
#rabid-map .marker-cluster[role="button"]:focus-visible,
#rabid-map .rb-map-detection-icon[role="button"]:focus-visible {
  outline: 4px solid #b84d00 !important;
  outline-offset: 5px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #103e65;
}

#rabid-map .rb-map-leaflet-btn:focus-visible,
#rabid-map .rb-map-help-close:focus-visible,
#rabid-map .rb-map-help-done:focus-visible {
  outline: 3px solid #b84d00 !important;
  outline-offset: 3px;
}


/* ==============================================================
   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;
  }
}


#rabid-map .leaflet-popup.rb-detection-popup .leaflet-popup-content {
  position: relative;
}

/* Allow room for the close button. */
#rabid-map .rb-detection-popup .rb-map-popup {
  position: relative;
  padding-top: 42px;
}

/* Close button */
#rabid-map .rb-detection-popup .rb-map-popup__close {
  position: relative;
  top: 6px;
  right: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  width: 100%;

  border: 2px solid #005a9c;
  border-radius: 6px;
  background: #ffffff;
  color: #005a9c;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  z-index: 2;
}

#rabid-map .rb-detection-popup .rb-map-popup__close:hover {
  background: #005a9c;
  color: #ffffff;
}

/* Strong keyboard focus */
#rabid-map .rb-detection-popup .rb-map-popup__close:focus-visible {
  outline: 3px solid #b84d00;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #ffffff;
}

/* Forced-colors accessibility */
@media (forced-colors: active) {
  #rabid-map .rb-detection-popup .rb-map-popup__close:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}




/* ============================================================
   RABIES MAP — SCROLLABLE YEAR FILTER
   Author: Roberto Flores

   PURPOSE:
   - Prevent year values (2026, 2025, etc.) from wrapping.
   - Ensure the dropdown has enough width.
   - Limit the dropdown height to 220px.
   - Allow scrolling for additional years.
   - Preserve existing map toolbar styling.
   ============================================================ */

/* Year field container */
#rabid-map .rb-map-year-field {
  position: relative;
  min-width: 105px !important;
  width: 105px;
  flex: 0 0 105px;
  box-sizing: border-box;
}

/* Year dropdown button */
#rabid-map .rb-map-year-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  width: 100%;
  min-width: 105px;
  box-sizing: border-box;

  padding: 8px 10px;
  cursor: pointer;
  text-align: left;

  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Prevent year text from wrapping */
#rabid-map .rb-map-year-trigger span {
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0;
}

/* Dropdown arrow */
#rabid-map .rb-map-year-trigger::after {
  content: '';
  display: inline-block;

  width: 0;
  height: 0;

  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;

  flex-shrink: 0;
}

/* Scrollable year menu */
#rabid-map .rb-map-year-menu {
  position: absolute;
  z-index: 1500;

  top: 100%;
  left: 0;
  right: auto;

  width: 100%;
  min-width: 105px;
  max-height: 220px;

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  margin-top: 2px;
  padding: 4px 0;

  background: #fff;
  color: #103e65;

  border: 1px solid #b9dce2;
  border-radius: 4px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);

  box-sizing: border-box;
}

/* Hidden menu */
#rabid-map .rb-map-year-menu[hidden] {
  display: none !important;
}

/* Individual year options */
#rabid-map .rb-map-year-option {
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 7px 11px;

  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.35;

  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Hover and keyboard focus */
#rabid-map .rb-map-year-option:hover,
#rabid-map .rb-map-year-option:focus-visible {
  background: #e6f2f6;
  outline: 2px solid #005a9c;
  outline-offset: -2px;
}

/* Selected year */
#rabid-map .rb-map-year-option[aria-selected="true"] {
  background: #edf5fb;
  font-weight: 700;
}

/* Responsive layout */
@media (max-width: 600px) {
  #rabid-map .rb-map-year-field {
    width: 105px;
    min-width: 105px !important;
    flex: 0 0 105px;
  }

  #rabid-map .rb-map-year-menu {
    max-height: 180px;
  }
}



/* ==========================================================
   RABIES MAP — DPH GLOBAL FORM STYLE OVERRIDE
   ==========================================================

   PURPOSE:
   Prevents global #main-content form styles from affecting
   map controls while preserving their original visibility,
   responsive layout, and JavaScript-controlled states.
   ========================================================== */

/* Override conflicting form properties without changing display */
#main-content #rabid-map .rb-map-toolbar:is(input.rb-map-toolbar-zip, select.rb-map-toolbar-select) {
  margin: 0 !important;
  padding: 5px 7px !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #103e65 !important;
  background-color: #fff !important;
  border: 1px solid #667f91 !important;
  border-radius: 5px !important;
  box-sizing: border-box;
}

/* Preserve original control widths */
#main-content #rabid-map .rb-map-toolbar select.rb-map-toolbar-select {
  width: 124px !important;
}

#main-content #rabid-map .rb-map-toolbar select.rb-map-toolbar-year {
  width: 90px !important;
}

#main-content #rabid-map .rb-map-toolbar select.rb-map-toolbar-radius {
  width: 120px !important;
}

#main-content #rabid-map .rb-map-toolbar input.rb-map-toolbar-zip {
  width: 105px !important;
  margin-bottom: 0 !important;
}

/* Preserve hidden controls */
#main-content #rabid-map [hidden] {
  display: none !important;
}

/* Mobile: controls fill their grid cells */
@media (max-width: 768px) {
  #main-content #rabid-map .rb-map-toolbar :is(input.rb-map-toolbar-zip, select.rb-map-toolbar-select) {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Preserve ZIP validation */
#main-content #rabid-map input.rb-map-toolbar-zip[aria-invalid="true"] {
  border: 2px solid #a32900 !important;
  background-color: #fff9f6 !important;
}

/* ==========================================================
   RABIES MAP — NATIVE BROWSER SELECT ARROWS
   Author: Roberto Flores

   Restores browser-rendered arrows on native <select> controls
   despite the DPH global appearance:none rule. Does not affect
   the custom JavaScript year-menu button (.rb-map-year-trigger).
   ========================================================== */
#main-content #rabid-map .rb-map-toolbar select.rb-map-toolbar-select {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  background-image: none !important;
  background-color: #fff !important;
  padding-right: 7px !important;
  margin-bottom: 0 !important;
}

/* Keep custom visibility rules intact for hidden year widgets. */
#main-content #rabid-map .rb-map-toolbar [hidden] {
  display: none !important;
}

/* ================================================================
   12 — CUSTOM YEAR DROPDOWN: VISIBLE KEYBOARD FOCUS
   Author: Roberto Flores
   Updated: 2026-10-27

   The native #coolingMap-year-filter select is intentionally hidden.
   Keyboard focus is on #coolingMap-year-trigger and the role=option
   elements within #coolingMap-year-options. Give both a conspicuous
   focus indicator, including when focus is set programmatically.
   ================================================================ */

/* Do not allow the DPH global button styles to suppress the focus ring. */
#main-content #rabid-map .rb-map-toolbar button.rb-map-year-trigger:is(:focus, :focus-visible),
#rabid-map .rb-map-toolbar button.rb-map-year-trigger:is(:focus, :focus-visible) {
  outline: 3px solid #823600 !important;
  outline-offset: 2px !important;
  border-color: #823600 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px #823600 !important;
  position: relative;
  z-index: 2;
}

/* Keep the Year field distinguishable while its listbox has focus. */
#rabid-map .rb-map-year-field:focus-within>.rb-map-year-trigger:not(:focus) {
  border-color: #823600 !important;
  box-shadow: inset 0 0 0 1px #823600;
}

/* Script moves focus to role=option DIVs. :focus catches programmatic
   focus; :focus-visible is retained for keyboard-driven focus. */
#rabid-map .rb-map-year-menu .rb-map-year-option:is(:focus, :focus-visible) {
  outline: 3px solid #823600 !important;
  outline-offset: -3px !important;
  background: #fff3d9 !important;
  color: #563000 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  position: relative;
  z-index: 1;
}

#rabid-map .rb-map-year-menu .rb-map-year-option[aria-selected="true"]:not(:focus) {
  background: #edf5fb;
  color: #103e65;
}

/* Make the open listbox boundary easier to see without clipping options. */
#rabid-map .rb-map-year-menu:focus-within {
  border-color: #823600;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #823600,
    0 5px 14px rgb(0 0 0 / 16%);
}

@media (forced-colors: active) {

  #rabid-map .rb-map-toolbar button.rb-map-year-trigger:is(:focus, :focus-visible),
  #rabid-map .rb-map-year-menu .rb-map-year-option:is(:focus, :focus-visible) {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
    forced-color-adjust: auto;
  }
}