/* ── Unified Table Component ──────────────────────────────────────────────── */

/* Wrapper - provides horizontal scroll on mobile */
.site-table-wrap {
  border: 1px solid var(--color-neutral-200);
  overflow-x: auto;
}

/* ── Toolbar (optional: tabs + search) ────────────────────────────────────── */

.site-table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-neutral-200);
}

.site-table-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.site-table-tab {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-primary-500);
  background: var(--color-surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.site-table-tab:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}

.site-table-tab.active {
  background: var(--color-primary-900);
  color: #ffffff;
  border-color: var(--color-primary-900);
}

.site-table-search {
  order: -1;
  margin-right: 0.75rem;
}

.site-table-search input {
  padding: 0.3rem 0.6rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-on-background);
  outline: none;
  transition: border-color 0.15s;
  min-width: 180px;
}

.site-table-search input:focus,
.site-table-search-input:focus {
  border-color: var(--color-primary-500);
}

/* Direct input style (when input has the class directly, not wrapped) */
input.site-table-search-input {
  padding: 0.35rem 0.6rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-on-background, #334155);
  outline: none;
  transition: border-color 0.15s;
  min-width: 240px;
  flex: 1;
}

.site-table-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.site-table-filter-label {
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-neutral-600, #64748b);
}

.site-table-filter-select {
  padding: 0.35rem 0.5rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-on-background, #334155);
}

.site-table-filter-select:focus {
  border-color: var(--color-primary-500);
  outline: none;
}

/* ── Custom checkbox dropdown ──────────────────────────────────────────── */

.filter-dropdown {
  position: relative;
}

.filter-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  background: var(--color-surface-card);
  color: var(--color-on-background, #334155);
  cursor: pointer;
  transition: border-color 0.15s;
}

.filter-dropdown-toggle:hover,
.filter-dropdown-toggle[aria-expanded="true"] {
  border-color: var(--color-primary-500);
}

.filter-dropdown-label {
  font-weight: 600;
  color: var(--color-neutral-600, #64748b);
  margin-right: 0.15rem;
}

.filter-dropdown-value {
  font-weight: 400;
}

.filter-dropdown-label,
.filter-dropdown-value {
  font-size: var(--text-caption);
  line-height: 1;
}

.filter-dropdown-chevron {
  font-size: var(--text-base);
  color: var(--color-neutral-400, #94a3b8);
  transition: transform 0.15s;
}

.filter-dropdown-toggle[aria-expanded="true"] .filter-dropdown-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 160px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 0.35rem 0;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  color: var(--color-on-background, #334155);
  cursor: pointer;
  transition: background 0.1s;
}

.filter-dropdown-item:hover {
  background: var(--color-primary-50, #f0f7fc);
}

.filter-dropdown-item input[type="checkbox"] {
  accent-color: var(--color-primary-900, #002046);
}

.filter-dropdown--scrollable .filter-dropdown-menu {
  min-width: 220px;
  max-width: 280px;
}

.filter-dropdown-search {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-neutral-200);
}

.filter-dropdown-search input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  outline: none;
}

.filter-dropdown-search input:focus {
  border-color: var(--color-primary-500);
}

.filter-dropdown-list {
  max-height: 260px;
  overflow-y: auto;
}

.filter-dropdown-actions {
  padding: 0.35rem 0.75rem;
  border-top: 1px solid var(--color-neutral-200);
}

.filter-dropdown-clear {
  font-size: var(--text-xs);
  color: var(--color-primary-700, #1e3a5f);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.filter-dropdown-clear:hover {
  text-decoration: underline;
}

.site-table-search input::placeholder {
  color: var(--color-neutral-400);
}

/* View toggle (card/table) sits in toolbar */
.site-table-view-toggle {
  display: flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.site-table-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.site-table-view-btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}

.site-table-view-btn.active {
  background: var(--color-primary-900);
  color: #ffffff;
  border-color: var(--color-primary-900);
}

.site-table-view-btn .material-symbols-outlined {
  font-size: var(--text-base);
}

.site-table-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-surface-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-neutral-600);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.site-table-export-btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-900);
}
.site-table-export-btn .material-symbols-outlined {
  font-size: 1rem;
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.site-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  /* Tabular numerals so columns of dates, page numbers, vote tallies, etc.
   * align cleanly down the column even when the widths of the digit
   * glyphs vary in the proportional figures the body font uses. */
  font-variant-numeric: tabular-nums;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-table thead th {
  background: var(--color-primary-50);
  color: var(--color-primary-500);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 2px solid var(--color-primary-500);
  white-space: nowrap;
}

/* Sortable header */
.site-table thead th[data-sortable] {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.site-table thead th[data-sortable]:hover {
  background: #edf2fb;
}

/* Sort indicator (injected by tables.js) */
.site-table thead th .sort-icon {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: var(--text-2xs);
  vertical-align: middle;
  color: var(--color-neutral-500);
}

.site-table thead th[data-sort-dir] .sort-icon {
  color: var(--color-primary-900);
}

/* ── Data Rows ────────────────────────────────────────────────────────────── */

.site-table tbody td {
  padding: 0.85rem 1rem;
  font-size: var(--text-sm);
  color: var(--color-on-background);
  border-bottom: 1px solid var(--color-neutral-200);
}

.site-table tbody tr:nth-child(even) {
  background: var(--color-neutral-100);
}

.site-table tbody tr:hover {
  background: var(--color-primary-100);
}

.site-table tbody tr:last-child td {
  border-bottom: none;
}

/* Primary column (name, title - bold navy link) */
.site-table .col-primary {
  color: var(--color-primary-900);
  font-weight: 600;
}

.site-table .col-primary a {
  color: var(--color-primary-900);
  text-decoration: none;
  font-weight: 600;
}

.site-table .col-primary a:hover {
  text-decoration: underline;
}

/* Inline text links in history/events message cells need visible distinction */
.history-table .col-primary a:not(.history-cal-btn),
.events-message-cell a:not(.events-stream-link):not(.cal-btn) {
  color: var(--color-primary-500, #2563a8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.history-table .col-primary a:not(.history-cal-btn):hover,
.events-message-cell a:not(.events-stream-link):not(.cal-btn):hover {
  color: var(--color-primary-900, #002046);
}

/* Secondary/muted column (dates, metadata) */
.site-table .col-secondary {
  color: var(--color-neutral-500);
}

.site-table .col-status {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .site-table .col-status { display: none; }
  .site-table th.col-status { display: none; }
}

/* Clickable rows */
.site-table tbody tr[data-href] {
  cursor: pointer;
}

.site-table tbody tr[data-href]:focus-within {
  background: var(--color-primary-50);
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

/* Links inside table cells */
.site-table td a {
  color: var(--color-primary-900);
  font-weight: 600;
  text-decoration: none;
}

.site-table td a:hover {
  text-decoration: underline;
}

/* Canceled/special row states */
.site-table tbody tr.row-canceled {
  opacity: 0.55;
}

.site-table tbody tr.row-canceled td {
  text-decoration: line-through;
}

/* Expandable/collapsible rows (committee documents testimony) */
.site-table tbody tr.row-expandable td {
  border-left: 3px solid var(--color-primary-500);
  cursor: pointer;
}

/* ── Footer (pagination + results count) ──────────────────────────────────── */

.site-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  background: var(--color-primary-50);
  border-top: 1px solid var(--color-neutral-200);
  font-family: Arial, sans-serif;
}

.site-table-count {
  font-size: var(--text-caption);
  color: var(--color-neutral-500);
}

.site-table-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-table-pages a,
.site-table-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  font-size: var(--text-caption);
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}

.site-table-pages a {
  color: var(--color-primary-500);
}

.site-table-pages a:hover {
  background: var(--color-primary-50);
}

.site-table-pages .active {
  background: var(--color-primary-900);
  color: #ffffff;
}

.site-table-pages .disabled {
  color: var(--color-neutral-500);
  pointer-events: none;
  opacity: 0.5;
}

.site-table-pages .ellipsis {
  color: var(--color-neutral-500);
  pointer-events: none;
}

/* Footer controls wrapper (per-page + pagination) */
.site-table-footer-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Per-page selector */
.site-table-per-page {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-caption);
  color: var(--color-neutral-500);
  white-space: nowrap;
}

.site-table-per-page select {
  padding: 0.2rem 0.4rem;
  font-family: Arial, sans-serif;
  font-size: var(--text-caption);
  border: 1px solid var(--color-neutral-200);
  border-radius: 4px;
  color: var(--color-on-background);
  background: var(--color-surface-card);
  cursor: pointer;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.site-table-empty {
  padding: 2.25rem 1rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

/* Empty-state icon - friendlier than a bare text line. Uses Material Symbols
 * (already loaded via the font link in base.html). The "inbox" glyph reads
 * as "no items here yet" without being kitschy. */
.site-table-empty::before {
  content: 'inbox';
  display: block;
  font-family: 'Material Symbols Outlined';
  font-weight: 300;
  font-size: 2rem;
  color: var(--color-neutral-450);
  line-height: 1;
  margin-bottom: 0.4rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .site-table-search {
    margin-left: 0;
    margin-right: 0;
  }

  .site-table-search input {
    width: 100%;
  }

  .site-table thead th,
  .site-table tbody td {
    padding: 0.5rem 0.75rem;
  }

  .site-table-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .site-table-footer-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-table-pages {
    justify-content: center;
  }

  /* Hide less important columns on narrow viewports */
  .site-table .col-hide-mobile {
    display: none;
  }
}

/* Tablet - restore toolbar row layout and footer alignment */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-table-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .site-table-search input {
    width: auto;
    min-width: 200px;
  }

  .site-table thead th,
  .site-table tbody td {
    padding: 0.55rem 0.85rem;
  }

  .site-table-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── Phone: transform rows to stacked cards ─────────────────────────────────
 *
 * At ≤640px, tables with many columns become unreadable (horizontal scroll
 * hides information). Collapse each row into a card with label-value pairs.
 *
 * Template requirement: each <td> must carry data-label="..." so the label
 * appears on mobile. The <thead> is kept in the DOM for screen readers but
 * visually hidden. Columns marked .col-primary get full-width block layout
 * with no inline label (they're the main content of the card).
 *
 * Opt out on a per-table basis by adding .site-table--no-stack. */
@media (max-width: 640px) {
  .site-table:not(.site-table--no-stack) thead {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .site-table:not(.site-table--no-stack),
  .site-table:not(.site-table--no-stack) tbody {
    display: block;
  }

  .site-table:not(.site-table--no-stack) tbody tr {
    display: block;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--color-neutral-200, #e2e8f0);
    background: var(--color-surface-card);
  }

  .site-table:not(.site-table--no-stack) tbody tr:nth-child(even) {
    background: var(--color-neutral-100);
  }

  .site-table:not(.site-table--no-stack) tbody tr:hover {
    background: var(--color-primary-100);
  }

  .site-table:not(.site-table--no-stack) tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
    border: none;
    text-align: right;
    font-size: var(--text-caption);
  }

  .site-table:not(.site-table--no-stack) tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-neutral-600, #64748b);
    text-align: left;
    flex-shrink: 0;
  }

  /* Cells with no data-label attribute don't render a label */
  .site-table:not(.site-table--no-stack) tbody td:not([data-label])::before {
    display: none;
  }

  /* Primary column: full-width block, no label, prominent */
  .site-table:not(.site-table--no-stack) tbody td.col-primary {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.35rem 0 0.5rem;
    font-size: var(--text-md);
    line-height: 1.4;
  }

  .site-table:not(.site-table--no-stack) tbody td.col-primary::before {
    display: none;
  }

  /* Let table cells hide themselves on mobile when empty (for optional
   * columns like Page / Document links that aren't present on every row) */
  .site-table:not(.site-table--no-stack) tbody td.col-hide-if-empty:empty {
    display: none;
  }
}

/* Very narrow phones - tighten spacing further */
@media (max-width: 480px) {
  .site-table:not(.site-table--no-stack) tbody tr {
    padding: 0.5rem 0.6rem;
  }
}