/**
 * @file
 * Table Styles - ITU Branded
 *
 * Uses CSS variables from archive-modern.css design tokens.
 * Note: .view-conferences tables are styled in archive-modern.css
 * This file handles general Drupal tables (admin, content lists, etc.)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TABLE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: var(--text-sm, 0.875rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

thead th {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-weight: var(--font-semibold, 600);
  text-align: left;
  color: var(--color-gray-800, #333333);
  background-color: var(--color-gray-50, #f5f5f5);
  border-bottom: 2px solid var(--color-gray-200, #e0e0e0);
}

/* Sortable headers */
thead th.is-active,
thead th.sortable-heading {
  cursor: pointer;
}

thead th.is-active a,
thead th a {
  color: var(--color-gray-800, #333333);
  text-decoration: none;
}

thead th a:hover {
  color: var(--itu-blue, #009EDB);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE BODY
   ═══════════════════════════════════════════════════════════════════════════ */

tbody td {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  color: var(--color-gray-800, #333333);
  border-bottom: 1px solid var(--color-gray-100, #f0f0f0);
  vertical-align: middle;
}

/* Alternating rows */
tbody tr:nth-child(even) {
  background-color: var(--color-gray-50, #f5f5f5);
}

/* Hover effect */
tbody tr:hover {
  background-color: var(--itu-blue-lighter, rgba(0, 158, 219, 0.05));
}

/* Links in tables */
tbody td a {
  color: var(--itu-blue, #009EDB);
  text-decoration: none;
}

tbody td a:hover {
  color: var(--itu-blue-hover, #007AB8);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

tfoot td {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-weight: var(--font-semibold, 600);
  background-color: var(--color-gray-50, #f5f5f5);
  border-top: 2px solid var(--color-gray-200, #e0e0e0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Stack table on mobile if needed */
  .table--stack thead {
    display: none;
  }

  .table--stack tbody tr {
    display: block;
    margin-bottom: var(--space-4, 1rem);
    border: 1px solid var(--color-gray-200, #e0e0e0);
    border-radius: var(--radius-md, 0.5rem);
  }

  .table--stack tbody td {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-gray-100, #f0f0f0);
  }

  .table--stack tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-600, #666666);
  }

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

/* ═══════════════════════════════════════════════════════════════════════════
   DRUPAL-SPECIFIC TABLE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Views table */
.views-table {
  margin-bottom: var(--space-4, 1rem);
}

/* Draggable table rows */
.tabledrag-toggle-weight-wrapper {
  margin-bottom: var(--space-2, 0.5rem);
}

tr.draggable td {
  vertical-align: middle;
}

/* Operations column */
.views-field-operations,
td.views-field-operations {
  white-space: nowrap;
}

/* Checkbox column */
.views-field-node-bulk-form,
td.views-field-node-bulk-form {
  width: 40px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS INDICATORS IN TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.marker {
  display: inline-block;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  text-transform: uppercase;
  border-radius: var(--radius-sm, 0.25rem);
}

.marker--new,
.marker--updated {
  background-color: var(--itu-blue-light, rgba(0, 158, 219, 0.1));
  color: var(--itu-blue, #009EDB);
}

.marker--warning {
  background-color: rgba(185, 92, 0, 0.1);
  color: var(--color-warning, #b95c00);
}

.marker--error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-error, #dc2626);
}