/**
 * @file
 * EP Table Styles - Table styling
 * 
 * Purpose: Centralized table styles for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-tables.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - Table base styles
 * - Table header styles
 * - Table cell styles
 * - Table row styles (hover, striped)
 * - Table responsive styles
 * - Table action column styles
 * 
 * Reference: Contacts table styles (ep-contacts-table) used by layouts and guests modules
 * Design: Clean, professional, transparent backgrounds, subtle borders
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * Base Table Styles
 * 
 * Clean, professional table design - reference contacts table
 */

.ep-table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  border-radius: var(--ep-border-radius); /* Square edges */
  box-shadow: none;
  font-size: inherit;
  font-family: var(--ep-font-family-base);
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-hover-bg: transparent !important;
  outline: none !important; /* Remove focus outline that causes flashing black line */
  border-left: none !important; /* Remove any left border that might flash */
  border-right: none !important; /* Remove any right border that might flash */
  border-top: none !important;
  border-bottom: none !important;
}

/* Remove focus outline from all table elements - prevents flashing black line when clicking */
/* Must include :focus-visible to override ep-base *:focus-visible which adds outline */
.ep-table:focus,
.ep-table:active,
.ep-table:focus-within,
.ep-table:focus-visible,
.ep-table *:focus,
.ep-table *:active,
.ep-table *:focus-within,
.ep-table *:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Remove selection highlight that might cause flashing */
.ep-table::selection,
.ep-table *::selection,
.ep-table::-moz-selection,
.ep-table *::-moz-selection {
  background: transparent !important;
  color: inherit;
}

/* Prevent text selection that might cause visual artifacts */
.ep-table {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection in cells but prevent visual artifacts */
.ep-table tbody td,
.ep-table thead th {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Remove any borders or shadows that might appear on focus */
.ep-table:focus,
.ep-table:active,
.ep-table:focus-within,
.ep-table:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove pseudo-elements that might cause flashing */
.ep-table::before,
.ep-table::after,
.ep-table *::before,
.ep-table *::after {
  display: none !important;
  content: none !important;
}

.ep-table tr,
.ep-table tr.odd,
.ep-table tr.even {
  background: none !important;
  background-color: #fff !important; /* White background for table rows */
}

/* Table header cells - light blue background */
.ep-table thead tr th,
.ep-table thead tr th.odd,
.ep-table thead tr th.even,
.ep-table thead th {
  background: none !important;
  background-color: var(--ep-color-bg-tertiary) !important; /* Light blue - same as primary buttons */
}

.ep-table tbody tr td {
  background: none !important;
  background-color: #fff !important; /* White background for table cells */
}

/**
 * Table Headers
 */

.ep-table thead th {
  background: var(--ep-color-bg-tertiary); /* Light blue - same as primary buttons */
  color: var(--ep-color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--ep-font-weight-semibold);
  padding: var(--ep-table-header-padding-y) var(--ep-table-header-padding-x); /* Grid-based spacing */
  text-align: right; /* Right align headers to match numbers */
  border-bottom: var(--ep-table-border-width) solid var(--ep-color-list-divider);
  border-top: none;
  border-left: none;
  border-right: none;
  font-size: var(--ep-font-size-sm);
}

.ep-table thead th:first-child {
  padding-left: var(--ep-table-cell-padding-x); /* Keep padding for alignment */
  text-align: left; /* First column (usually labels) left-aligned */
}

.ep-table thead th:last-child {
  padding-right: var(--ep-table-cell-padding-x); /* Keep padding for alignment */
  text-align: right; /* Last column right-aligned */
}

/**
 * Table Body Rows
 */

.ep-table tbody tr {
  background-color: #fff; /* White background for table rows */
  --bs-table-accent-bg: #fff; /* White background for Bootstrap compatibility */
  transition: background-color var(--ep-transition-base);
}

.ep-table tbody tr.odd,
.ep-table tbody tr.even {
  background-color: #fff !important; /* White background for odd/even rows */
}

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

/**
 * Table Cells
 */

.ep-table tbody td {
  padding: var(--ep-table-cell-padding-y) var(--ep-table-cell-padding-x); /* Grid-based spacing */
  vertical-align: middle;
  color: inherit;
  border-bottom: var(--ep-table-border-width) solid var(--ep-color-list-divider);
  background-color: #fff; /* White background for table cells */
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: right; /* Right align cells to match numbers */
}

.ep-table tbody td:first-child {
  padding-left: var(--ep-table-cell-padding-x); /* Keep padding for alignment */
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
  text-align: left; /* First column (usually labels) left-aligned */
}

.ep-table tbody td:last-child {
  padding-right: var(--ep-table-cell-padding-x); /* Keep padding for alignment */
  text-align: right; /* Last column right-aligned */
}

/**
 * Table Links
 */

.ep-table tbody td a {
  color: var(--ep-color-primary);
  font-weight: var(--ep-font-weight-semibold);
  text-decoration: none;
  transition: color var(--ep-transition-base);
}

.ep-table tbody td a:hover,
.ep-table tbody td a:focus {
  color: var(--ep-color-text-primary);
  text-decoration: underline;
}

/**
 * Table Variants
 */

/* Sheet variant - slightly smaller text */
.ep-table--sheet tbody td {
  font-size: 0.95rem;
}

/* Compact variant - less padding (still grid-based) */
.ep-table--compact thead th,
.ep-table--compact tbody td {
  padding: var(--ep-spacing-sm) var(--ep-spacing-md); /* Grid-based spacing */
}

/* Bordered variant - borders on all sides */
.ep-table--bordered {
  border: var(--ep-border-width) solid var(--ep-color-border-light);
}

.ep-table--bordered thead th,
.ep-table--bordered tbody td {
  border: var(--ep-border-width) solid var(--ep-color-border-light);
}

/**
 * Table Actions Column
 */

.ep-table__actions {
  text-align: left;
  white-space: nowrap;
  display: flex;
  gap: var(--ep-form-grid-gap); /* Grid-based spacing */
  justify-content: flex-start; /* Left-align actions to match header */
  align-items: center; /* Vertical alignment */
  width: 100%; /* Full width of cell for proper alignment */
}

.ep-table__actions .ep-button,
.ep-table__actions a {
  margin-left: 0; /* Use gap instead */
}

.ep-table__actions .ep-button:first-child,
.ep-table__actions a:first-child {
  margin-left: 0;
}

/**
 * Responsive Table Wrapper
 */

.ep-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  outline: none !important; /* Remove focus outline from wrapper */
}

.ep-table-wrapper:focus,
.ep-table-wrapper:focus-visible,
.ep-table-wrapper:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.ep-table-wrapper .ep-table {
  min-width: 600px; /* Minimum width before scrolling */
}

/**
 * Empty State
 */

.ep-table-empty {
  padding: var(--ep-spacing-xl);
  text-align: center;
  color: var(--ep-color-text-tertiary);
  font-style: italic;
}

/**
 * Bootstrap Compatibility
 * 
 * Ensure compatibility with Bootstrap table classes
 */

.ep-table.table > thead > tr > th {
  background-color: var(--ep-color-bg-tertiary) !important; /* Light blue - same as primary buttons */
  border-color: var(--ep-color-list-divider) !important;
}

.ep-table.table > tbody > tr > td,
.ep-table.table > tbody > tr > th,
.ep-table.table > tfoot > tr > td,
.ep-table.table > tfoot > tr > th {
  background-color: #fff !important; /* White background for Bootstrap table compatibility */
  border-color: var(--ep-color-list-divider) !important;
}

.ep-table.table-striped > tbody > tr:nth-of-type(odd),
.ep-table.table-striped > tbody > tr:nth-of-type(even),
.ep-table.table-hover > tbody > tr:hover,
.ep-table.table-hover > tbody > tr:hover > td,
.ep-table.table-hover > tbody > tr:hover > th {
  background-color: #fff !important; /* White background for striped/hover rows */
}

/**
 * Legacy Support
 * 
 * Support for existing table classes during migration
 */

.ep-contacts-table {
  /* Contacts table class - will be replaced with .ep-table */
  /* Keeping for backward compatibility */
}

.ep-contacts-table--sheet {
  /* Sheet variant - will be replaced with .ep-table--sheet */
}