/* ==========================================================
   RABIES SURVEILLANCE — SHARED VIEW TOGGLE + DATA TABLE
   Author: Roberto Flores | Los Angeles County Public Health

   Used by: #rabid-map (Map / Table)
            #rabid-graph (Dashboard Chart / Table)

   Load once after site base styles, before component overrides.
   View changes are controlled by existing JavaScript; CSS provides
   consistent styling and accessible animations for both sections.
   ========================================================== */

:is(#rabid-map, #rabid-graph) {
  --rb-view-blue: #005a9c;
  --rb-view-ink: #103e65;
  --rb-view-muted: #465d70;
  --rb-view-border: #ccdde7;
  --rb-view-soft: #f1f7fb;
  --rb-view-focus: #b84d00;
}

/* 01 — Shared Map/Table and Chart/Table toggle */
:is(#rabid-map, #rabid-graph) :is(.rb-view-toggle, .rb-map-view-toggle) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--rb-view-border);
  border-radius: 8px;
  background: var(--rb-view-soft);
}

:is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 105px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--rb-view-ink);
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

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

:is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button):hover:not([aria-pressed="true"]):not(:disabled) {
  background: #dcecf7;
}

:is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button):disabled {
  color: #64748b;
  opacity: .65;
  cursor: not-allowed;
}

:is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button, .rb-data-table-scroll, .rb-map-table-scroll):focus-visible {
  outline: 3px solid var(--rb-view-focus);
  outline-offset: 2px;
}

/* 02 — Visibility: hidden content must never animate into view. */
:is(#rabid-map, #rabid-graph) :is(.rb-view-panel,
  .rb-map-table-panel,
  .rb-dashboard-chart-view,
  .rb-dashboard-table-panel,
  .rb-data-table-scroll,
  .rb-map-table-scroll,
  .rb-data-table-empty,
  .rb-map-table-empty)[hidden] {
  display: none !important;
}

/* 03 — Shared view entrance animation.
   When JS switches hidden attributes, the newly visible panel enters.
   Avoid animating Leaflet tiles or any individual data table rows. */
@keyframes rb-view-enter {
  from {
    opacity: .35;
    transform: translateY(5px);
  }

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

#rabid-map :is(.rb-map-table-panel, .live-map-box):not([hidden]),
#rabid-graph :is(.rb-dashboard-chart-view, .rb-dashboard-table-panel):not([hidden]) {
  animation: rb-view-enter 220ms ease-out both;
}

/* 04 — Shared data table structure */
:is(#rabid-map, #rabid-graph) :is(.rb-data-table-panel, .rb-map-table-panel) {
  width: 100%;
  min-width: 0;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table-heading, .rb-map-table-heading) {
  margin: 0 0 6px;
  color: var(--rb-view-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table-summary, .rb-map-table-summary) {
  margin: 0 0 14px;
  color: var(--rb-view-muted);
  font-size: .875rem;
  line-height: 1.5;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table-scroll, .rb-map-table-scroll) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--rb-view-border);
  border-radius: 6px;
  background: #fff;
}

/* Monthly dashboard records use card styling from the dashboard CSS. */
#rabid-graph .rb-dashboard-table-panel[data-period="month"] .rb-dashboard-table-scroll {
  overflow-x: visible;
  overflow-y: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: #18364a;
  font-size: .875rem;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) :is(th, td) {
  padding: 11px 12px;
  border-bottom: 1px solid #dce6ec;
  text-align: center;
  vertical-align: top;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) thead {
  background: var(--rb-view-blue);
  color: #fff;
}

:is(.rb-data-table, .rb-map-data-table) tbody th {
  color: #18364a !important;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) th {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) tbody tr:nth-child(even) {
  background: #f3f8fb;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table, .rb-map-data-table) tbody tr:last-child td {
  border-bottom: 0;
}

:is(#rabid-map, #rabid-graph) :is(.rb-data-table-empty, .rb-map-table-empty) {
  padding: 16px;
  color: var(--rb-view-muted);
}

/* 05 — Responsive toggle and panel sizing */
@media (max-width: 768px) {
  :is(#rabid-map, #rabid-graph) :is(.rb-view-toggle, .rb-map-view-toggle) {
    display: flex;
    width: 100% !important;
  }

  :is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button) {
    flex: 1 1 0;
    min-width: 0;
  }

  :is(#rabid-map, #rabid-graph) :is(.rb-data-table-panel, .rb-map-table-panel) {
    padding: 12px;
  }
}

/* 06 — Accessibility: disable view animations and button transitions. */
@media (prefers-reduced-motion: reduce) {
  :is(#rabid-map, #rabid-graph) :is(.rb-view-button, .rb-map-view-button) {
    transition: none;
  }

  #rabid-map :is(.rb-map-table-panel, .live-map-box):not([hidden]),
  #rabid-graph :is(.rb-dashboard-chart-view, .rb-dashboard-table-panel):not([hidden]) {
    animation: none;
  }
}

/* 07 — Banner header sizing (preserved from existing shared file). */
@media (max-width: 768px) {
  .disease-head-title {
    font-size: clamp(1rem, 2.71vw, 1.3rem);
  }
}