/**
 * Tables CSS - Clean, reusable table styles
 * Supports sortable tables, sticky columns, and responsive design
 */

/* ========================================
   TABLE WRAPPER
   ======================================== */

.table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 16px;
  box-shadow: 0 2px 4px var(--shadow-color);
  border: 1px solid var(--border-color);
}

/* ========================================
   BASE TABLE STYLES
   ======================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-elevated);
  font-size: 1em;
  border: 1px solid var(--border-color);
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.data-table th {
  background-color: var(--table-header-bg, var(--bg-secondary));
  font-weight: 600;
  color: var(--table-header-text, var(--text-primary));
  font-size: 0.9em;
  white-space: normal;
  vertical-align: bottom;
}

/* Leader card table headers get lighter styling */
.leader-card .data-table th {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.data-table td {
  color: var(--text-primary);
}

/* Alternating row colors */
.data-table tbody tr:nth-child(even) {
  background-color: var(--table-row-even);
}

.data-table tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd);
}

.data-table tbody tr:hover {
  background-color: var(--table-hover);
}

/* ========================================
   TEXT ALIGNMENT CLASSES
   ======================================== */

.data-table .text-left {
  text-align: left !important;
}

.data-table .text-center {
  text-align: center !important;
}

.data-table .text-right {
  text-align: right !important;
}

/* ========================================
   SORTABLE TABLES
   ======================================== */

.data-table.sortable th.sortable {
  cursor: pointer;
  user-select: none;
  padding-bottom: 8px;
}

.data-table.sortable th.sortable:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

/* Sort arrows - displayed as block below text */
.data-table.sortable th.sortable::after {
  content: "⇅";
  display: block;
  margin-top: 4px;
  opacity: 0.4;
  font-size: 0.85em;
}

.data-table.sortable th.sortable.asc::after {
  content: "↑";
  opacity: 1;
}

.data-table.sortable th.sortable.desc::after {
  content: "↓";
  opacity: 1;
}

/* ========================================
   STICKY HEADER (vertical scroll)
   ======================================== */

/* WARNING: Sticky headers do NOT work when parent has overflow-x: auto
   (which .table-wrapper has for mobile horizontal scrolling).
   
   Only use .sticky-header on tables that:
   1. Don't need horizontal scrolling (narrow tables)
   2. Are NOT wrapped in .table-wrapper
   
   For most data tables with .table-wrapper, DO NOT use sticky-header.
*/
.data-table.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 1001;
}

/* ========================================
   STICKY COLUMN 1 ONLY
   ======================================== */

.data-table.sticky-col-1 th:nth-child(1),
.data-table.sticky-col-1 td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--bg-elevated);
}

.data-table.sticky-col-1 th:nth-child(1) {
  z-index: 20;
  background-color: var(--table-header-bg, var(--bg-secondary));
}

/* Maintain alternating colors */
.data-table.sticky-col-1 tbody tr:nth-child(even) td:nth-child(1) {
  background-color: var(--table-row-even);
}

.data-table.sticky-col-1 tbody tr:nth-child(odd) td:nth-child(1) {
  background-color: var(--table-row-odd);
}

.data-table.sticky-col-1 tbody tr:hover td:nth-child(1) {
  background-color: var(--table-hover);
}

/* Border indicator */
.data-table.sticky-col-1 th:nth-child(1)::before,
.data-table.sticky-col-1 td:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  pointer-events: none;
}

/* ========================================
   STICKY COLUMN 2 ONLY
   ======================================== */

.data-table.sticky-col-2 th:nth-child(2),
.data-table.sticky-col-2 td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--bg-elevated);
}

.data-table.sticky-col-2 th:nth-child(2) {
  z-index: 20;
  background-color: var(--table-header-bg, var(--bg-secondary));
}

/* Maintain alternating colors */
.data-table.sticky-col-2 tbody tr:nth-child(even) td:nth-child(2) {
  background-color: var(--table-row-even);
}

.data-table.sticky-col-2 tbody tr:nth-child(odd) td:nth-child(2) {
  background-color: var(--table-row-odd);
}

.data-table.sticky-col-2 tbody tr:hover td:nth-child(2) {
  background-color: var(--table-hover);
}

/* Border indicator */
.data-table.sticky-col-2 th:nth-child(2)::before,
.data-table.sticky-col-2 td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  pointer-events: none;
}

/* ========================================
   STICKY COLUMNS 1 AND 2
   ======================================== */

.data-table.sticky-col-12 th:nth-child(1),
.data-table.sticky-col-12 td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--bg-elevated);
}

.data-table.sticky-col-12 th:nth-child(1) {
  z-index: 20;
  background-color: var(--table-header-bg, var(--bg-secondary));
}

.data-table.sticky-col-12 th:nth-child(2),
.data-table.sticky-col-12 td:nth-child(2) {
  position: sticky;
  left: var(--col1-width, 80px); /* Default 80px, can be overridden */
  z-index: 5;
  background-color: var(--bg-elevated);
}

.data-table.sticky-col-12 th:nth-child(2) {
  z-index: 20;
  background-color: var(--table-header-bg, var(--bg-secondary));
}

/* Maintain alternating colors */
.data-table.sticky-col-12 tbody tr:nth-child(even) td:nth-child(1),
.data-table.sticky-col-12 tbody tr:nth-child(even) td:nth-child(2) {
  background-color: var(--table-row-even);
}

.data-table.sticky-col-12 tbody tr:nth-child(odd) td:nth-child(1),
.data-table.sticky-col-12 tbody tr:nth-child(odd) td:nth-child(2) {
  background-color: var(--table-row-odd);
}

.data-table.sticky-col-12 tbody tr:hover td:nth-child(1),
.data-table.sticky-col-12 tbody tr:hover td:nth-child(2) {
  background-color: var(--table-hover);
}

/* Border indicators */
.data-table.sticky-col-12 th:nth-child(1)::before,
.data-table.sticky-col-12 td:nth-child(1)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-color);
  pointer-events: none;
}

.data-table.sticky-col-12 th:nth-child(2)::before,
.data-table.sticky-col-12 td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  pointer-events: none;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
  .data-table {
    font-size: 0.9em;
  }

  .data-table th,
  .data-table td {
    padding: 8px 6px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .data-table.sortable th.sortable::after {
    display: none;
  }
}

/* ========================================
   STICKY HEADER + STICKY COLUMN COMBINED
   ======================================== */

/* When header is sticky AND column is sticky, header cell needs highest z-index */
.data-table.sticky-header.sticky-col-1 th:nth-child(1),
.data-table.sticky-header.sticky-col-2 th:nth-child(2),
.data-table.sticky-header.sticky-col-12 th:nth-child(1),
.data-table.sticky-header.sticky-col-12 th:nth-child(2) {
  z-index: 1002;
}