// ============================================================
// Tables Component
// Data tables with cyber styling
// ============================================================

@layer components {
  .cyber-table {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-collapse: collapse;

    // Table header
    thead {
      background: var(--color-bg-tertiary);

      th {
        padding: var(--space-sm);
        border-bottom: 2px solid var(--cyber-cyan-500);
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
        color: var(--cyber-cyan-500);

        // Sortable header indicator
        &[data-sortable] {
          cursor: pointer;
          user-select: none;

          &::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: var(--space-xs);
            border-top: 4px solid currentcolor;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            opacity: 30%;
            transition: opacity var(--transition-fast);
            vertical-align: middle;
          }

          &:hover::after {
            opacity: 70%;
          }

          &[data-sort="asc"]::after {
            border-top: none;
            border-bottom: 4px solid currentcolor;
            opacity: 100%;
          }

          &[data-sort="desc"]::after {
            opacity: 100%;
          }
        }
      }
    }

    // Table body
    tbody {
      tr {
        transition: background var(--duration-fast);

        &:hover {
          background: color-mix(in srgb, var(--cyber-cyan-500) 5%, transparent);
        }
      }

      td {
        padding: var(--space-sm);
        border-bottom: 1px solid var(--color-border-default);
      }
    }

    // Table footer
    tfoot {
      background: var(--color-bg-tertiary);

      td {
        padding: var(--space-sm);
        border-top: 1px solid var(--color-border-default);
        font-weight: 600;
        color: var(--color-text-primary);
      }
    }

    // --------------------------------------------------------
    // Striped Variant
    // --------------------------------------------------------

    &--striped {
      tbody tr:nth-child(even) {
        background: color-mix(in srgb, var(--cyber-void-500) 50%, transparent);
      }

      tbody tr:nth-child(even):hover {
        background: color-mix(in srgb, var(--cyber-cyan-500) 8%, transparent);
      }
    }

    // --------------------------------------------------------
    // Bordered Variant
    // --------------------------------------------------------

    &--bordered {
      th,
      td {
        border: var(--border-thin) solid var(--color-border-default);
      }

      thead th {
        border-bottom-color: var(--cyber-cyan-500);
        border-bottom-width: var(--border-medium);
      }
    }

    // --------------------------------------------------------
    // Compact Variant
    // --------------------------------------------------------

    &--compact {
      font-size: var(--text-xs);

      thead th,
      tbody td,
      tfoot td {
        padding: var(--space-xs);
      }
    }

    // --------------------------------------------------------
    // Responsive wrapper
    // --------------------------------------------------------

    &-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      // Fade edges to indicate scroll
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        opacity: 0%;
        transition: opacity var(--transition-fast);
        pointer-events: none;
      }

      &::before {
        left: 0;
        background: linear-gradient(90deg, var(--color-bg-primary), transparent);
      }

      &::after {
        right: 0;
        background: linear-gradient(-90deg, var(--color-bg-primary), transparent);
      }

      &[data-scroll-left]::before {
        opacity: 100%;
      }

      &[data-scroll-right]::after {
        opacity: 100%;
      }
    }

    // --------------------------------------------------------
    // Cell utilities
    // --------------------------------------------------------

    .cell-number {
      font-family: var(--font-mono);
      text-align: right;
    }

    .cell-status {
      display: inline-flex;
      gap: var(--space-2xs);
      align-items: center;

      &::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cyber-chrome-500);
      }

      &--active::before {
        background: var(--cyber-green-500);
        box-shadow: 0 0 6px var(--cyber-green-500);
      }

      &--inactive::before {
        background: var(--cyber-chrome-600);
      }

      &--pending::before {
        background: var(--cyber-yellow-500);
        animation: status-pulse 1.5s ease-in-out infinite;
      }

      &--error::before {
        background: var(--cyber-magenta-500);
      }
    }

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

    // Highlighted row
    tr.row-highlight {
      border-left: var(--border-thick) solid var(--cyber-cyan-500);
      background: color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
    }

    // Selected row
    tr.row-selected {
      background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
    }
  }

  @keyframes status-pulse {
    0%,
    100% {
      opacity: 100%;
    }

    50% {
      opacity: 40%;
    }
  }
}