/* ============================================
   Admin Sales Table - BEM
   ============================================ */
@layer components {
  /* Block: sales-table */
  .sales-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .sales-table thead {
    background-color: #f8f9fa;
  }

  .sales-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
  }

  .sales-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
  }

  .sales-table tbody tr:hover {
    background-color: #f8f9fa;
  }

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

  /* Element: sales-table__url */
  .sales-table__url {
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  /* Modifier: ongoing (row modifier) */
  .sales-table tbody tr.sales-table__row--ongoing {
    background-color: var(--color-success-bg);
  }

  .sales-table tbody tr.sales-table__row--ongoing:hover {
    background-color: var(--color-success-bg-hover);
  }

  @media (prefers-color-scheme: dark) {
    .sales-table {
      background: var(--color-bg);
    }

    .sales-table thead {
      background-color: var(--color-bg-secondary);
    }

    .sales-table th,
    .sales-table td {
      border-color: var(--color-bg-tertiary);
    }

    .sales-table tbody tr:hover {
      background-color: var(--color-bg-tertiary);
    }

    .sales-table tbody tr.sales-table__row--ongoing {
      background-color: var(--color-success-bg);
    }

    .sales-table tbody tr.sales-table__row--ongoing:hover {
      background-color: var(--color-success-bg-hover);
    }
  }
}