/* ============================================================
   RABIES SURVEILLANCE — SHARED TABLE PDF & PAGINATION STYLES
   Author: Roberto Flores
   Organization: Los Angeles County Department of Public Health

   Reusable for Map/Table (#rabid-map) and Dashboard/Table (#rabid-graph).
   Both table modules should generate the shared .rb-table-* classes.
   No map-only or chart-only styling is required.
   Load AFTER rabies-view-shared.css and responsive table CSS.
   ============================================================ */

:is(#rabid-map, #rabid-graph) {
  --rb-pdf-primary: var(--rb-view-blue, #005a9c);
  --rb-pdf-primary-hover: #061c60;
  --rb-pdf-ink: var(--rb-view-ink, #103e65);
  --rb-pdf-focus: var(--rb-view-focus, #b84d00);
}

/* 01 — Export action area, reusable in either table view. */
:is(#rabid-map, #rabid-graph) .rb-table-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 0 0 1rem;
  min-width: 0;
}

:is(#rabid-map, #rabid-graph) .rb-table-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  max-width: 100%;
  padding: .6rem 1rem;
  border: 1px solid var(--rb-pdf-primary);
  border-radius: 7px;
  background: var(--rb-pdf-primary);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

:is(#rabid-map, #rabid-graph) .rb-table-export-btn:hover:not(:disabled) {
  background: var(--rb-pdf-primary-hover);
  border-color: var(--rb-pdf-primary-hover);
}

:is(#rabid-map, #rabid-graph) .rb-table-export-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

:is(#rabid-map, #rabid-graph) :is(.rb-table-export-btn, .rb-table-page-btn):focus-visible {
  outline: 3px solid var(--rb-pdf-focus);
  outline-offset: 2px;
}

/* 02 — PDF progress: spinner, success, error, and timed dismissal. */
:is(#rabid-map, #rabid-graph) .rb-table-pdf-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid #b9d6e7;
  border-radius: 7px;
  background: #eef6fc;
  color: var(--rb-pdf-ink);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[hidden] {
  display: none !important;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="loading"] .rb-table-pdf-status-icon {
  border: 2.5px solid #bfd9e8;
  border-top-color: #005a9c;
  border-radius: 50%;
  animation: rb-pdf-spin .7s linear infinite;
}

@keyframes rb-pdf-spin {
  to {
    transform: rotate(360deg);
  }
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="success"] {
  border-color: #abd1bd;
  background: #eff9f2;
  color: #215b3c;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="success"] .rb-table-pdf-status-icon::before {
  content: "✓";
  font-size: 1.15rem;
  font-weight: 900;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="error"] {
  border-color: #e2b7aa;
  background: #fff5f2;
  color: #842f20;
}

:is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="error"] .rb-table-pdf-status-icon::before {
  content: "!";
  font-size: 1.15rem;
  font-weight: 900;
}

/* 02 — Accessible pagination tooltips, for both table modules.
   JS should set aria-label, title, and data-tooltip on icon buttons.
   Native title serves pointer hover; custom tooltip appears on focus. */
:is(#rabid-map, #rabid-graph) .rb-table-page-btn {
  position: relative;
}

:is(#rabid-map, #rabid-graph) .rb-table-page-btn:focus-visible[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: min(200px, 65vw);
  padding: .4rem .55rem;
  border-radius: 5px;
  background: var(--rb-pdf-primary-hover);
  color: #fff;
  white-space: normal;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}

/* 03 — Smaller screens: controls remain easy to tap and fit in the view. */
@media (max-width: 480px) {
  :is(#rabid-map, #rabid-graph) .rb-table-export-actions {
    align-items: stretch;
  }

  :is(#rabid-map, #rabid-graph) .rb-table-export-btn {
    width: 100%;
  }

  :is(#rabid-map, #rabid-graph) .rb-table-pdf-status {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#rabid-map, #rabid-graph) .rb-table-export-btn {
    transition: none;
  }

  :is(#rabid-map, #rabid-graph) .rb-table-pdf-status[data-state="loading"] .rb-table-pdf-status-icon {
    animation: none;
    border-style: dotted;
  }
}

/* 04 — Shared PDF button / matching-record summary alignment. */
:is(#rabid-map, #rabid-graph) .rb-table-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  margin: 0 0 1rem;
}

:is(#rabid-map, #rabid-graph) .rb-table-results-header .rb-data-table-summary {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0 auto;
}

:is(#rabid-map, #rabid-graph) .rb-table-results-header .rb-table-export-actions {
  margin: 0;
}

@media (max-width: 480px) {
  :is(#rabid-map, #rabid-graph) .rb-table-results-header {
    flex-direction: column;
    align-items: stretch;
  }

  :is(#rabid-map, #rabid-graph) .rb-table-results-header .rb-data-table-summary {
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
  }
}


:is(#rabid-map, #rabid-graph) .rb-table-clear-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -.35rem 0 0; /*-.35rem 0 1rem;*/
}

:is(#rabid-map, #rabid-graph) .rb-table-clear-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid #005a9c;
  border-radius: 6px;
  background: #fff;
  color: #005a9c;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

:is(#rabid-map, #rabid-graph) .rb-table-clear-btn:hover:not(:disabled) {
  background: #e5f2fa;
}

:is(#rabid-map, #rabid-graph) .rb-table-clear-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

:is(#rabid-map, #rabid-graph) .rb-table-clear-btn:focus-visible {
  outline: 3px solid #b84d00;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  :is(#rabid-map, #rabid-graph) .rb-table-clear-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#rabid-map, #rabid-graph) .rb-table-clear-btn {
    transition: none;
  }
}