/* colors.css imported globally via style.css */
/* ==========================================================================
   _tables.css – IDX Table Styling for Listings, Comparisons, and Data
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Base Table Styles
 * 2.0 Table Headers
 * 3.0 Table Cells
 * 4.0 Row Striping
 * 5.0 Row Hover States
 * 6.0 Responsive Wrapper
 * 7.0 Table Captions
 * 8.0 Accessibility
 * 9.0 Dark Mode Overrides
 */

/* ==========================================================================
   1.0 Base Table Styles
   ========================================================================== */
.IDX-table {
  width: 100%;
  margin: var(--space-3) 0;
  /* 1rem 0 */
  font-size: 0.95rem;
  line-height: 1.4;
  border-collapse: collapse;
}

/* ==========================================================================
   2.0 Table Headers
   ========================================================================== */
.IDX-table th {
  padding: var(--space-2);
  background-color: var(--kaplon-blue);
  /* 0.75rem */
  border: 1px solid var(--gray-border);
  color: var(--white);
  text-align: left;
}

/* ==========================================================================
   3.0 Table Cells
   ========================================================================== */
.IDX-table td {
  padding: var(--space-2);
  /* 0.75rem */
  border: 1px solid var(--gray-border);
  color: var(--gray-text-base);
}

/* ==========================================================================
   4.0 Row Striping
   ========================================================================== */
.IDX-table tr:nth-child(even) {
  background-color: var(--surface-soft);
}

/* ==========================================================================
   5.0 Row Hover States
   ========================================================================== */
.IDX-table tbody tr:hover,
.IDX-table tbody tr:focus-within {
  background-color: var(--gray-100);
  color: inherit;
  /* keep text readable in light mode */
}

/* ==========================================================================
   6.0 Responsive Wrapper
   ========================================================================== */
.IDX-table-wrapper {
  overflow-x: auto;
  /* Subtle outer frame around the table */
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   7.0 Table Captions
   ========================================================================== */
.IDX-table caption {
  margin-bottom: var(--space-1);
  color: var(--color-gray-dark);
  font-size: 1rem;
  font-weight: bold;
  /* 0.5rem */
  text-align: left;
}

/* ==========================================================================
   8.0 Accessibility
   ========================================================================== */
.IDX-table td:focus,
.IDX-table th:focus {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

/* IDX tokenized table styling */
.IDX-wrapper-standard .IDX-table th,
.IDX-wrapper-standard table th {
  border-color: var(--idx-border, var(--gray-border));
  color: var(--idx-text-primary, var(--gray-900));
}

/* ==========================================================================
   9.0 Dark Mode Overrides
   ========================================================================== */
@media (prefers-color-scheme: dark) {

  /* IDX tables: rebalance header/body contrast without changing layout */
  html[data-kaplon-color-mode=system] .IDX-table {
    background-color: transparent;
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-table th {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--text-muted-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-table td {
    border-color: var(--dark-border);
    color: var(--text-secondary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-table tr:nth-child(even) {
    background-color: color-mix(in oklab, var(--kaplon-blue) 6%, var(--dark-surface));
  }

  /* Dark-mode outer frame */
  html[data-kaplon-color-mode=system] .IDX-table-wrapper {
    border-color: var(--dark-border);
  }

  html[data-kaplon-color-mode=system] .IDX-table tbody tr:hover,html[data-kaplon-color-mode=system] 
  .IDX-table tbody tr:focus-within {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-table caption {
    color: var(--dark-text-strong);
  }

  /* Generic tables (frontend) — apply subtle dark tokens without changing layout */
  html[data-kaplon-color-mode=system] table th {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--text-secondary-dark);
  }

  html[data-kaplon-color-mode=system] table td {
    border-color: var(--dark-border);
    color: var(--text-primary-dark);
  }
}
/* IDX tables: rebalance header/body contrast without changing layout */
/* Dark-mode outer frame */
/* Generic tables (frontend) — apply subtle dark tokens without changing layout */
/* IDX tables: rebalance header/body contrast without changing layout */
html[data-kaplon-color-mode=dark] .IDX-table {
    background-color: transparent;
    color: var(--text-primary-dark);
  }
html[data-kaplon-color-mode=dark] .IDX-table th {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--text-muted-dark);
  }
html[data-kaplon-color-mode=dark] .IDX-table td {
    border-color: var(--dark-border);
    color: var(--text-secondary-dark);
  }
html[data-kaplon-color-mode=dark] .IDX-table tr:nth-child(even) {
    background-color: color-mix(in oklab, var(--kaplon-blue) 6%, var(--dark-surface));
  }
/* Dark-mode outer frame */
html[data-kaplon-color-mode=dark] .IDX-table-wrapper {
    border-color: var(--dark-border);
  }
html[data-kaplon-color-mode=dark] .IDX-table tbody tr:hover,html[data-kaplon-color-mode=dark] 
  .IDX-table tbody tr:focus-within {
    background-color: var(--dark-hover-bg);
    color: var(--text-primary-dark);
  }
html[data-kaplon-color-mode=dark] .IDX-table caption {
    color: var(--dark-text-strong);
  }
/* Generic tables (frontend) — apply subtle dark tokens without changing layout */
html[data-kaplon-color-mode=dark] table th {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--text-secondary-dark);
  }
html[data-kaplon-color-mode=dark] table td {
    border-color: var(--dark-border);
    color: var(--text-primary-dark);
  }