/*
 * Table Component Styles - Pop Art Edition
 * Data tables with bold borders, comic shadows, and hover effects
 */

@layer components {
  /* ==========================================================================
     Table Container - Card style with comic shadow
     ========================================================================== */

  .data-table-container {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    overflow: hidden;
  }

  /* ==========================================================================
     Table Header Bar (search, filters, add button)
     ========================================================================== */

  .table-header {
    padding: var(--space-3);
    border-block-end: var(--border-thick) solid var(--color-comic-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
  }

  /* ==========================================================================
     Data Table - Pop Art style
     ========================================================================== */

  .data-table {
    inline-size: 100%;

    & th,
    & td {
      padding: var(--space-3) var(--space-4);
      text-align: start;
    }

    /* Bold header row - bg-gray-900 with white text */
    & thead {
      & tr {
        background: #111827;
        color: white;
      }

      & th {
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        border-block-end: none;

        /* Checkbox column */
        &:first-child:has(input[type="checkbox"]) {
          width: var(--space-10);
        }
      }
    }

    /* Table body rows - border-t-2 border-black */
    & tbody {
      & tr {
        border-block-start: 2px solid var(--color-comic-border);
        transition: background-color 0.15s ease;

        &:hover {
          /* Amber in light mode, gray-700 in dark mode */
          background-color: light-dark(#FEF3C7, #374151);
        }

        &:first-child {
          border-block-start: none;
        }
      }

      & td {
        font-size: var(--text-sm);
      }
    }

    /* Table footer (totals row) */
    & tfoot {
      & tr {
        background: var(--color-border-muted);
        border-block-start: var(--border-thick) solid var(--color-comic-border);
      }

      & td {
        font-weight: var(--font-bold);
      }
    }

    /* Selected row styling */
    & tbody tr.selected {
      background-color: light-dark(oklch(0.95 0.03 250), oklch(0.25 0.05 250));
    }
  }

  /* ==========================================================================
     Table Links
     ========================================================================== */

  .data-table-link,
  .project-name-link {
    color: var(--color-ink);
    text-decoration: none;
    font-weight: var(--font-bold);
    transition: color 0.15s ease;

    &:hover {
      color: var(--color-wham-blue);
    }
  }

  /* ==========================================================================
     Table Actions Column
     ========================================================================== */

  .data-table .actions {
    text-align: end;
    white-space: nowrap;
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;

    /* Only style non-button links/buttons (icon-only actions) */
    & a:not(.btn),
    & button:not(.btn) {
      padding: var(--space-1);
      color: var(--color-ink-muted);
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-wham-blue);
      }

      &.action-delete:hover {
        color: var(--color-pow-red);
      }
    }
  }

  /* ==========================================================================
     Sortable Headers
     ========================================================================== */

  .data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;

    &:hover {
      background-color: light-dark(#374151, #4b5563);
    }

    /* Sort indicator */
    &::after {
      content: "";
      display: inline-block;
      margin-inline-start: var(--space-1);
      opacity: 0.5;
    }

    &.sort-asc::after {
      content: "▲";
      opacity: 1;
    }

    &.sort-desc::after {
      content: "▼";
      opacity: 1;
    }
  }

  /* ==========================================================================
     Responsive Table Wrapper
     ========================================================================== */

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

  /* ==========================================================================
     Compact Table Variant
     ========================================================================== */

  .data-table-compact {
    & th,
    & td {
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-sm);
    }

    & tfoot td {
      border-block-start: var(--border-medium) solid var(--color-comic-border);
      border-block-end: none;
      background: var(--color-surface-raised);
    }
  }

  /* ==========================================================================
     Table with Checkboxes
     ========================================================================== */

  .data-table input[type="checkbox"] {
    appearance: none;
    inline-size: var(--space-4);
    block-size: var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-medium) solid currentColor;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, background-color 0.15s ease;

    &:hover {
      transform: scale(1.1);
    }

    &:checked {
      background-color: var(--color-wham-blue);
      border-color: var(--color-wham-blue);
    }

    &:checked::after {
      content: "";
      position: absolute;
      inset: 1px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  /* Header checkbox (select all) - white border in dark header */
  .data-table thead input[type="checkbox"] {
    border-color: white;

    &:checked {
      border-color: var(--color-wham-blue);
    }
  }

  /* ==========================================================================
     Status Badges in Tables
     ========================================================================== */

  .table-status {
    display: inline-block;
    padding: var(--space-0_5) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    border: 1px solid var(--color-comic-border);

    &.status-active {
      background-color: var(--color-boom-green);
      color: white;
    }

    &.status-pending {
      background-color: var(--color-zap-yellow);
      color: var(--color-ink);
    }

    &.status-inactive,
    &.status-draft {
      background-color: var(--color-border-muted);
      color: var(--color-ink);
    }

    &.status-error {
      background-color: var(--color-pow-red);
      color: white;
    }
  }

  /* ==========================================================================
     Empty Table State
     ========================================================================== */

  .table-empty {
    padding: var(--space-8);
    text-align: center;

    & .empty-icon {
      display: inline-block;
      padding: var(--space-4);
      background: var(--color-border-muted);
      border: var(--border-thick) solid var(--color-comic-border);
      box-shadow: var(--comic-shadow-sm);
      margin-block-end: var(--space-4);
      color: var(--color-ink-muted);
    }

    & .empty-title {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      margin-block-end: var(--space-1);
    }

    & .empty-text {
      font-size: var(--text-sm);
      color: var(--color-ink-muted);
      margin-block-end: var(--space-4);
    }
  }

  /* ==========================================================================
     Pagination for Tables
     ========================================================================== */

  .table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3);
    border-block-start: var(--border-thick) solid var(--color-comic-border);
    flex-wrap: wrap;
  }

  .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-8);
    height: var(--space-8);
    padding: var(--space-1_5);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    border: var(--border-thin) solid var(--color-comic-border);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;

    &:hover:not(.page-active):not(:disabled) {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 var(--comic-shadow-color);
    }

    &.page-active {
      background: var(--color-wham-blue);
      color: white;
      border-color: var(--color-wham-blue);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* ==========================================================================
     Table Card Wrapper (for list-style tables)
     ========================================================================== */

  .table-card {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;

    &:hover {
      transform: translateX(4px);
      border-color: var(--color-wham-blue);
    }

    &:hover .table-card-arrow {
      transform: translateX(4px);
    }
  }

  .table-card-arrow {
    transition: transform 0.15s ease;
  }
}