/*
 * QuickMonster Table Components
 */

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

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--qm-radius-md);
  box-shadow: var(--qm-shadow-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--qm-slate);
}

.table th,
.table td {
  padding: var(--qm-space-sm) var(--qm-space-md);
  text-align: left;
  border-bottom: 1px solid var(--qm-granite);
}

.table th {
  font-family: var(--qm-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--qm-gold);
  background: var(--qm-stone);
  border-bottom: 2px solid var(--qm-crimson);
  white-space: nowrap;
}

.table td {
  color: var(--qm-text-light);
}

/* ========================================
   TABLE VARIANTS
   ======================================== */

/* Striped rows */
.table-striped tbody tr:nth-child(even) {
  background: var(--qm-stone);
}

/* Hoverable rows */
.table-hover tbody tr {
  transition: background var(--qm-transition-fast);
}

.table-hover tbody tr:hover {
  background: rgba(196, 30, 58, 0.1);
}

/* Bordered table */
.table-bordered {
  border: 1px solid var(--qm-granite);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--qm-granite);
}

/* Borderless table */
.table-borderless th,
.table-borderless td {
  border: none;
}

/* Compact table */
.table-sm th,
.table-sm td {
  padding: var(--qm-space-xs) var(--qm-space-sm);
  font-size: var(--qm-text-sm);
}

/* ========================================
   TABLE ALIGNMENT
   ======================================== */

.table-center th,
.table-center td {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

/* ========================================
   TABLE ROW STATES
   ======================================== */

.table tr.active {
  background: rgba(196, 30, 58, 0.15);
}

.table tr.success {
  background: rgba(45, 90, 39, 0.15);
}

.table tr.warning {
  background: rgba(184, 134, 11, 0.15);
}

.table tr.danger {
  background: rgba(139, 0, 0, 0.15);
}

/* Clickable rows */
.table-clickable tbody tr {
  cursor: pointer;
}

.table-clickable tbody tr:hover {
  background: rgba(196, 30, 58, 0.15);
}

/* ========================================
   RESPONSIVE TABLE
   ======================================== */

@media (max-width: 768px) {
  .table-responsive {
    display: block;
  }

  .table-responsive thead {
    display: none;
  }

  .table-responsive tbody tr {
    display: block;
    margin-bottom: var(--qm-space-md);
    border: 1px solid var(--qm-granite);
    border-radius: var(--qm-radius-md);
  }

  .table-responsive tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--qm-space-sm) var(--qm-space-md);
    border-bottom: 1px solid var(--qm-granite);
  }

  .table-responsive tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--qm-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

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

/* ========================================
   SORTABLE TABLE HEADERS
   ======================================== */

.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--qm-space-xl);
}

.table-sortable th::after {
  content: '\2195';
  position: absolute;
  right: var(--qm-space-sm);
  color: var(--qm-text-dim);
  font-size: 0.9em;
}

.table-sortable th.sort-asc::after {
  content: '\2191';
  color: var(--qm-crimson);
}

.table-sortable th.sort-desc::after {
  content: '\2193';
  color: var(--qm-crimson);
}

/* ========================================
   DATA TABLE (With actions)
   ======================================== */

.table-actions {
  display: flex;
  gap: var(--qm-space-xs);
  justify-content: flex-end;
}

.table-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qm-granite);
  border: none;
  border-radius: var(--qm-radius-sm);
  color: var(--qm-text-muted);
  cursor: pointer;
  transition: all var(--qm-transition-fast);
}

.table-action:hover {
  background: var(--qm-crimson);
  color: white;
}

.table-action-edit:hover {
  background: var(--qm-info);
}

.table-action-delete:hover {
  background: var(--qm-danger);
}

/* ========================================
   PARCHMENT TABLE (D&D Style)
   ======================================== */

.table-parchment {
  background: var(--qm-parchment);
  color: var(--qm-text-parchment);
}

.table-parchment th {
  background: var(--qm-parchment-dark);
  color: var(--qm-blood);
  border-bottom: 2px solid var(--qm-blood);
}

.table-parchment td {
  color: var(--qm-text-parchment);
  border-bottom-color: rgba(139, 0, 0, 0.2);
}

.table-parchment tbody tr:nth-child(even) {
  background: var(--qm-parchment-aged);
}

/* ========================================
   MONSTER/ENCOUNTER TABLE
   ======================================== */

.table-monster .monster-name {
  display: flex;
  align-items: center;
  gap: var(--qm-space-sm);
}

.table-monster .monster-icon {
  width: 32px;
  height: 32px;
  background: var(--qm-charcoal);
  border-radius: var(--qm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.table-monster .cr-cell {
  font-family: var(--qm-font-heading);
  color: var(--qm-gold);
  font-weight: 700;
}

.table-monster .hp-cell {
  color: var(--qm-success-light);
}

.table-monster .ac-cell {
  color: var(--qm-info-light);
}

/* ========================================
   COMPARISON TABLE
   ======================================== */

.table-comparison {
  text-align: center;
}

.table-comparison th:first-child,
.table-comparison td:first-child {
  text-align: left;
  font-weight: 600;
}

.table-comparison .highlight {
  background: rgba(196, 30, 58, 0.15);
}

.table-comparison .check {
  color: var(--qm-success-light);
  font-size: 1.25rem;
}

.table-comparison .cross {
  color: var(--qm-text-dim);
  font-size: 1.25rem;
}

/* ========================================
   TABLE CAPTION
   ======================================== */

.table caption {
  padding: var(--qm-space-sm) var(--qm-space-md);
  font-family: var(--qm-font-ui);
  font-size: var(--qm-text-sm);
  color: var(--qm-text-muted);
  text-align: left;
  caption-side: bottom;
}

/* ========================================
   TABLE FOOTER
   ======================================== */

.table tfoot {
  background: var(--qm-stone);
  border-top: 2px solid var(--qm-granite);
}

.table tfoot td {
  font-weight: 600;
  color: var(--qm-gold);
}