/**
 * Stats Migrate Table Base Styles
 * Structural/functional styles only (positioning, layout, spacing)
 * Visual styles (colors, borders) are in _stats-tables-visual.scss
 */

/* ==========================================================================
   Tabs Interface Structure
   ========================================================================== */

.stats-tabs .tab-container {
  position: relative;
}

.stats-tabs .tab-headers-bar {
  display: flex;
  margin-bottom: 10px;
  gap: 5px;
}

.stats-tabs .tab-header {
  cursor: pointer;
  padding: 10px 20px;
  border-bottom: none;
  margin: 0;
}

.stats-tabs [role="tabpanel"][hidden] {
  display: none;
}

.stats-tabs .stats-tabs__tablist {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stats-tabs .stats-tabs__tab {
  border: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.stats-tabs .tab-content {
  width: 100%;
}

/* Override theme - don't force display: table as it can break sticky positioning */
.stats-tabs .tab-content.active {
  display: block !important;
}

/* Our table wrapper handles the layout */
.stats-table.tab-content {
  display: table !important;
  width: 100%;
}

/* ==========================================================================
   Base Table Structure
   ========================================================================== */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  margin: 1rem 0;
  /* Explicitly set overflow-y: visible for sticky header to work with viewport scroll */
}

.table-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
  position: relative;
}

.stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  position: relative;
  /* Ensure proper stacking context for sticky */
}

/* ==========================================================================
   Table Header Structure
   ========================================================================== */

.stats-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.stats-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 0.75rem;
  z-index: 10;
}

/* Ensure parent doesn't clip sticky elements */
.stats-tabs {
  overflow: visible !important;
}

.stats-tabs__panel {
  overflow: visible !important;
}

.tab-item {
  overflow: visible !important;
}

/* ==========================================================================
   Table Body Structure
   ========================================================================== */

.stats-table tbody tr.blank td {
  line-height: 10px;
}

.stats-table tbody tr.blank {
  height: 50%;
}

/* ==========================================================================
   Table Cell Structure
   ========================================================================== */

.stats-table td,
.stats-table th {
  width: 200px; /* Default column width */
}

.stats-table td {
  padding: 0.5rem 0.75rem;
}

/* Right-aligned numeric columns */
.text-align-right {
  text-align: right;
}

/* ==========================================================================
   Column-Specific Structure (Semantic Classes)
   ========================================================================== */

/* Sub-annual table columns */
.stats-table--sub-annual .col-year {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  position: sticky;
  left: 0;
  z-index: 5;
}

.stats-table--sub-annual .col-period {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  position: sticky;
  left: 80px;
  z-index: 5;
}

/* Sticky header cells in first two columns need higher z-index */
.stats-table--sub-annual thead th.col-year {
  z-index: 15;
}

.stats-table--sub-annual thead th.col-period {
  z-index: 15;
}

.stats-table--sub-annual .col-data,
.stats-table--sub-annual .col-calc {
  min-width: 180px;
  width: auto;
}

/* Annual table columns */
.stats-table--annual .col-series {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 5;
}

/* Sticky header cell in first column needs higher z-index */
.stats-table--annual thead th.col-series {
  z-index: 15;
}

.stats-table--annual .col-year,
.stats-table--annual .col-pct-change {
  min-width: 180px;
  width: auto;
}

/* ==========================================================================
   Sub-annual minimal structure (position-based selectors)
   ========================================================================== */

.stats-table--sub-annual th:first-child,
.stats-table--sub-annual td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  width: 80px;
  max-width: 80px;
  min-width: 80px;
}

.stats-table--sub-annual th:nth-child(2),
.stats-table--sub-annual td:nth-child(2) {
  position: sticky;
  left: 80px;
  z-index: 5;
  width: 80px;
  max-width: 80px;
  min-width: 80px;
}

.stats-table--sub-annual thead th:first-child,
.stats-table--sub-annual thead th:nth-child(2) {
  z-index: 15;
}

/* Section header rows - head row cells should be sticky */
.stats-table--sub-annual tr.head td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
}

.stats-table--sub-annual tr.head td:nth-child(2) {
  position: sticky;
  left: 80px;
  z-index: 6;
}

.stats-table--sub-annual tr.head td:nth-child(3) {
  position: sticky;
  left: 160px;
  z-index: 6;
}

/* Data columns */
.stats-table--sub-annual td:nth-child(n+3),
.stats-table--sub-annual th:nth-child(n+3) {
  width: 110px;
}

/* ==========================================================================
   Annual minimal structure (position-based selectors)
   ========================================================================== */

.stats-table--annual th:first-child,
.stats-table--annual td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  width: 250px;
  max-width: 250px;
}

.stats-table--annual thead th:first-child {
  z-index: 15;
}

.stats-table--annual tr.head td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
}

/* Year and % change columns */
.stats-table--annual td:nth-child(n+2),
.stats-table--annual th:nth-child(n+2) {
  width: 110px;
}

/* ==========================================================================
   Adhoc table structure (custom row/column layout)
   ========================================================================== */

/* Adhoc table columns */
.stats-table--adhoc .col-label {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 5;
}

/* Sticky header cell in first column needs higher z-index */
.stats-table--adhoc thead th.col-label {
  z-index: 15;
}

.stats-table--adhoc .col-data {
  min-width: 180px;
  width: auto;
}

/* Adhoc minimal structure (position-based selectors) */
.stats-table--adhoc th:first-child,
.stats-table--adhoc td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  width: 250px;
  max-width: 250px;
}

.stats-table--adhoc thead th:first-child {
  z-index: 15;
}

.stats-table--adhoc tr.head td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
}

/* Data columns */
.stats-table--adhoc td:nth-child(n+2),
.stats-table--adhoc th:nth-child(n+2) {
  width: 110px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.tabs-headings {
  margin-bottom: 1rem;
}

.tabs-download {
  margin-top: 1rem;
}

/* ==========================================================================
   Sticky Header Clone Structure (from JS)
   ========================================================================== */

.sticky-header-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
}

.sticky-header-clone table {
  margin: 0;
  border-collapse: collapse;
}