/**
 * Table Styles
 * 
 * Styling for displaying artwork, sales, exhibition data tables.
 * Collekton UI System
 */

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

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-neutral-200);
}

.table th {
  font-weight: var(--font-semibold);
  color: var(--color-neutral-600);
  background-color: var(--color-neutral-50);
  white-space: nowrap;
}

.table td {
  color: var(--color-neutral-800);
}

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

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

/* Bordered table */
.table-bordered {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-neutral-200);
}

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

/* Striped table */
.table-striped tbody tr:nth-child(even) {
  background-color: var(--color-neutral-50);
}

/* Hover effect */
.table-hover tbody tr {
  transition: background-color var(--duration-150) var(--ease-in-out);
}

.table-hover tbody tr:hover {
  background-color: var(--color-accent-50);
}

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

/* Spacious table */
.table-spacious th,
.table-spacious td {
  padding: var(--space-4) var(--space-5);
}

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

.table .text-center { text-align: center; }
.table .text-right { text-align: right; }
.table .text-left { text-align: left; }

.table .align-top { vertical-align: top; }
.table .align-middle { vertical-align: middle; }
.table .align-bottom { vertical-align: bottom; }

/* Numeric columns - right aligned */
.table .cell-numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* =========================================
 * TABLE WRAPPER (for responsive)
 * ========================================= */

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-0);
}

.table-wrapper .table {
  margin: 0;
}

.table-wrapper .table th:first-child,
.table-wrapper .table td:first-child {
  padding-left: var(--space-5);
}

.table-wrapper .table th:last-child,
.table-wrapper .table td:last-child {
  padding-right: var(--space-5);
}

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

.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.table-sortable th:hover {
  background-color: var(--color-neutral-100);
}

.th-sortable {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.th-sortable::after {
  content: '';
  width: 16px;
  height: 16px;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.th-sortable.sort-asc::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d8932b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 15l7-7 7 7'%3E%3C/path%3E%3C/svg%3E");
}

.th-sortable.sort-desc::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d8932b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* =========================================
 * SELECTABLE ROWS
 * ========================================= */

.table-selectable tbody tr {
  cursor: pointer;
}

.table-selectable tbody tr.selected {
  background-color: var(--color-accent-50);
}

.table-selectable tbody tr.selected td {
  border-color: var(--color-accent-200);
}

/* Checkbox column */
.table .cell-checkbox {
  width: 48px;
  text-align: center;
  padding: var(--space-2);
}

/* =========================================
 * ACTION COLUMN
 * ========================================= */

.table .cell-actions {
  width: 120px;
  text-align: right;
  white-space: nowrap;
}

.table-actions {
  display: inline-flex;
  gap: var(--space-1);
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-neutral-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-150) var(--ease-in-out);
}

.table-action-btn:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.table-action-btn.danger:hover {
  background-color: var(--color-error-50);
  color: var(--color-error-600);
}

/* =========================================
 * ROW STATUS INDICATORS
 * ========================================= */

.table tr.row-success {
  background-color: var(--color-success-50);
}

.table tr.row-warning {
  background-color: var(--color-warning-50);
}

.table tr.row-error {
  background-color: var(--color-error-50);
}

.table tr.row-muted {
  opacity: 0.6;
}

/* =========================================
 * LOADING STATE
 * ========================================= */

.table-loading {
  position: relative;
  pointer-events: none;
}

.table-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.table-loading tbody {
  opacity: 0.5;
}

/* Skeleton rows */
.table-skeleton td {
  padding: var(--space-4);
}

.skeleton-cell {
  height: 16px;
  background: linear-gradient(90deg, 
    var(--color-neutral-200) 0%, 
    var(--color-neutral-100) 50%, 
    var(--color-neutral-200) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* HTMX loading */
.table.htmx-request tbody {
  opacity: 0.5;
}

/* =========================================
 * EMPTY STATE
 * ========================================= */

.table-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-neutral-500);
}

.table-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-neutral-300);
}

.table-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
}

.table-empty-description {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-4);
}

/* =========================================
 * RESPONSIVE TABLE (Stacked on mobile)
 * ========================================= */

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

  .table-responsive tbody tr {
    display: block;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-neutral-200);
  }

  .table-responsive tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border: none;
  }

  .table-responsive tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-semibold);
    color: var(--color-neutral-600);
    margin-right: var(--space-4);
  }

  .table-responsive .cell-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-neutral-100);
    margin-top: var(--space-2);
  }
}

/* =========================================
 * ART INVENTORY SPECIFIC
 * ========================================= */

/* Artwork thumbnail in table */
.table-artwork-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-neutral-100);
}

/* Price cell */
.cell-price {
  font-family: var(--font-mono);
  font-weight: var(--font-medium);
  text-align: right;
}

/* Status badges in tables */
.cell-status {
  white-space: nowrap;
}

/* Artwork info cell */
.cell-artwork-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cell-artwork-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.cell-artwork-title {
  font-weight: var(--font-medium);
  color: var(--color-neutral-900);
}

.cell-artwork-artist {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

/* =========================================
 * PAGINATION FOR TABLES
 * ========================================= */

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-neutral-200);
  background-color: var(--color-neutral-0);
  font-size: var(--text-sm);
}

.table-pagination-info {
  color: var(--color-neutral-500);
}

.table-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================
 * TABLE TOOLBAR
 * ========================================= */

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-neutral-0);
  border-bottom: 1px solid var(--color-neutral-200);
}

.table-toolbar-search {
  flex: 1;
  max-width: 320px;
}

.table-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.table-toolbar-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================
 * TABLE CAPTION & FOOTER
 * ========================================= */

.table caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  text-align: left;
  caption-side: bottom;
}

.table tfoot {
  background-color: var(--color-neutral-50);
  font-weight: var(--font-semibold);
}

.table tfoot td {
  border-top: 2px solid var(--color-neutral-200);
  border-bottom: none;
}