/* Table Components - Reusable across all pages */

/* Base Table Styles */
.table-responsive {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-material {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

/* Table Header - Material Dashboard Pink Gradient Theme */
.table thead {
  background: var(--main-gradient, linear-gradient(135deg, #ff6589, #e91e63)) !important;
  background-color: transparent !important;
}

.table thead th {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sidebar-text, #3c4858) !important;
  padding: var(--space-lg) var(--space-md) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  border-bottom: none !important;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.table thead th:first-child {
  padding-left: var(--space-xl) !important;
}

.table thead th:last-child {
  padding-right: var(--space-xl) !important;
  text-align: right;
}

/* Specific column widths for optimal data display */
.table-material thead th:nth-child(1) { width: 4%; text-align: center; }    /* Index/ID */
.table-material thead th:nth-child(2) { width: 18%; }                      /* Name */
.table-material thead th:nth-child(3) { width: 22%; }                      /* Email */
.table-material thead th:nth-child(4) { width: 14%; }                      /* Phone */
.table-material thead th:nth-child(5) { width: 12%; text-align: center; }  /* Instrument */
.table-material thead th:nth-child(6) { width: 10%; text-align: center; }  /* Level */
.table-material thead th:nth-child(7) { width: 12%; }                      /* Trainer */
.table-material thead th:nth-child(8) { width: 8%; text-align: center; }   /* Status */
.table-material thead th:nth-child(9) { width: 10%; text-align: center; }  /* Actions */

/* Table Body */
.table tbody {
  background: var(--white);
}

.table tbody td {
  padding: var(--space-md) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  font-size: var(--font-size-sm) !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
}

/* Enhanced table body cells */
.table-material tbody td {
  padding: 10px 8px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-weight: 500 !important;
  color: var(--text-primary, #333) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
}

/* Column-specific styling */
/* Index/ID column */
.table-material tbody td:nth-child(1) {
  text-align: center !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #666) !important;
  font-size: 0.8rem !important;
}

/* Name column */
.table-material tbody td:nth-child(2) {
  font-weight: 600 !important;
  color: var(--text-primary, #222) !important;
  font-size: 0.9rem !important;
}

/* Email column */
.table-material tbody td:nth-child(3) {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.8rem !important;
  color: var(--primary-color, #ff6589) !important;
  cursor: pointer !important;
}

.table-material tbody td:nth-child(3):hover {
  text-decoration: underline !important;
}

/* Phone column */
.table-material tbody td:nth-child(4) {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.85rem !important;
  color: var(--text-secondary, #555) !important;
}

/* Instrument column */
.table-material tbody td:nth-child(5) {
  text-align: center !important;
}

/* Level column */
.table-material tbody td:nth-child(6) {
  text-align: center !important;
}

/* Trainer column */
.table-material tbody td:nth-child(7) {
  font-size: 0.85rem !important;
  color: var(--text-secondary, #666) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Status column */
.table-material tbody td:nth-child(8) {
  text-align: center !important;
}

/* Actions column */
.table-material tbody td:nth-child(9) {
  text-align: center !important;
  padding: 6px 4px !important;
}

/* Enhanced Status Badges */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  position: relative !important;
}

.status-badge.active,
.status-badge.status-active {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  box-shadow: none !important;
}

.status-badge.inactive,
.status-badge.status-inactive {
  background: #ffebee !important;
  color: #c62828 !important;
  box-shadow: none !important;
}

.status-badge.pending,
.status-badge.status-pending {
  background: #fff3e0 !important;
  color: #f57c00 !important;
  box-shadow: none !important;
}

.status-badge.status-completed {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
  box-shadow: none !important;
}

.status-badge.status-cancelled {
  background: #ffebee !important;
  color: #c62828 !important;
  box-shadow: none !important;
}

.status-badge.status-scheduled {
  background: #e3f2fd !important;
  color: #1976d2 !important;
  box-shadow: none !important;
}

/* Enhanced Instrument Tags */
.instrument-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--primary-color, #E65878), #ec407a) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  min-width: 50px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(230, 88, 120, 0.3) !important;
}

/* Enhanced Level Badges */
.level-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  min-width: 55px !important;
  white-space: nowrap !important;
}

.level-badge.beginner {
  background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
}

.level-badge.intermediate {
  background: linear-gradient(135deg, #ff9800, #ffb74d) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3) !important;
}

.level-badge.advanced {
  background: linear-gradient(135deg, #ff6589, #ff8fab) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(255, 101, 137, 0.3) !important;
}

/* Table Pagination */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
}

.page-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.pagination-controls {
  display: flex;
  gap: var(--space-sm);
}

.pagination-btn {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.pagination-btn:hover {
  background: var(--gray-100);
}

.pagination-btn.active {
  background: var(--primary-gradient);
  color: var(--white);
  border-color: transparent;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-secondary);
}

.empty-state .material-icons {
  font-size: 48px;
  color: var(--gray-300);
  margin-bottom: var(--space-lg);
}

.empty-state p {
  margin: 0;
  font-size: var(--font-size-base);
}

/* Actions column specific styling */
.table-material tbody td:nth-child(9) {
  text-align: center !important;
  min-width: 120px !important;
  width: 120px !important;
  max-width: 120px !important;
  padding: 8px 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Enhanced Action Buttons */
.action-buttons {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  min-width: 100px !important;
}

.action-buttons .mdc-icon-button,
.action-buttons .btn-action {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--text-secondary, #666) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.action-buttons .mdc-icon-button i,
.action-buttons .btn-action i {
  font-size: 18px !important;
  transition: all 0.2s ease !important;
  text-indent: 0 !important;
}

/* Edit button styling */
.action-buttons .mdc-icon-button[title*="Edit"],
.action-buttons .mdc-icon-button[data-action="edit"],
.action-buttons .btn-action.edit {
  color: #2196f3 !important;
  border-color: rgba(33, 150, 243, 0.2) !important;
}

.action-buttons .mdc-icon-button[title*="Edit"]:hover,
.action-buttons .mdc-icon-button[data-action="edit"]:hover,
.action-buttons .btn-action.edit:hover {
  background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
  color: white !important;
  border-color: #2196f3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

/* Delete button styling */
.action-buttons .mdc-icon-button[title*="Delete"],
.action-buttons .mdc-icon-button[data-action="delete"],
.action-buttons .btn-action.delete {
  color: #f44336 !important;
  border-color: rgba(244, 67, 54, 0.2) !important;
}

.action-buttons .mdc-icon-button[title*="Delete"]:hover,
.action-buttons .mdc-icon-button[data-action="delete"]:hover,
.action-buttons .btn-action.delete:hover {
  background: linear-gradient(135deg, #f44336, #ef5350) !important;
  color: white !important;
  border-color: #f44336 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3) !important;
}

/* View button styling */
.action-buttons .mdc-icon-button[title*="View"],
.action-buttons .mdc-icon-button[data-action="view"],
.action-buttons .btn-action.view,
.action-buttons .btn-action.approve {
  color: #4caf50 !important;
  border-color: rgba(76, 175, 80, 0.2) !important;
}

.action-buttons .mdc-icon-button[title*="View"]:hover,
.action-buttons .mdc-icon-button[data-action="view"]:hover,
.action-buttons .btn-action.view:hover,
.action-buttons .btn-action.approve:hover {
  background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
  color: white !important;
  border-color: #4caf50 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3) !important;
}

/* Action button hover effects */
.action-buttons .mdc-icon-button:hover i,
.action-buttons .btn-action:hover i {
  transform: scale(1.1) !important;
}

.action-buttons .mdc-icon-button:active,
.action-buttons .btn-action:active {
  transform: translateY(0) scale(0.95) !important;
}

/* Enhanced table row hover effects */
.table-material tbody tr {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.table-material tbody tr:hover {
  background-color: rgba(230, 88, 120, 0.04) !important;
  transform: scale(1.001) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.table-material tbody tr:hover .action-buttons .mdc-icon-button,
.table-material tbody tr:hover .action-buttons .btn-action {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Enhanced responsive design */
@media (max-width: 1200px) {
  .table-material thead th:nth-child(3) { width: 20%; }
  .table-material thead th:nth-child(4) { width: 12%; }
  .table-material thead th:nth-child(7) { display: none; }
  .table-material tbody td:nth-child(7) { display: none; }
}

@media (max-width: 768px) {
  .table-material thead th:nth-child(1) { width: 8%; }
  .table-material thead th:nth-child(2) { width: 25%; }
  .table-material thead th:nth-child(3) { display: none; }
  .table-material thead th:nth-child(4) { display: none; }
  .table-material thead th:nth-child(5) { width: 20%; }
  .table-material thead th:nth-child(6) { width: 20%; }
  .table-material thead th:nth-child(8) { width: 15%; }
  .table-material thead th:nth-child(9) { width: 12%; }
  
  .table-material tbody td:nth-child(3) { display: none; }
  .table-material tbody td:nth-child(4) { display: none; }
  
  .action-buttons .mdc-icon-button,
  .action-buttons .btn-action {
    width: 28px !important;
    height: 28px !important;
  }
  
  .action-buttons .mdc-icon-button i,
  .action-buttons .btn-action i {
    font-size: 14px !important;
  }
}

/* Currency and Number Formatting */
.currency-amount {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
  font-weight: 600 !important;
  color: var(--success-color, #4caf50) !important;
  font-size: 0.9rem !important;
}

.currency-amount.negative {
  color: var(--danger-color, #f44336) !important;
}

/* Contact Information Styling */
.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.contact-info div:first-child {
  font-weight: 600 !important;
  color: var(--text-primary, #222) !important;
}

.contact-info div:last-child {
  font-size: 0.8rem !important;
  color: var(--text-secondary, #666) !important;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
}

/* Date and Time Formatting */
.datetime-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.datetime-info .date {
  font-weight: 600 !important;
  color: var(--text-primary, #222) !important;
}

.datetime-info .time {
  font-size: 0.8rem !important;
  color: var(--text-secondary, #666) !important;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
}

/* Role Badges */
.role-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  min-width: 55px !important;
  white-space: nowrap !important;
}

.role-badge.admin {
  background: linear-gradient(135deg, #ff6589, #ff8fab) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(255, 101, 137, 0.3) !important;
}

.role-badge.trainer {
  background: linear-gradient(135deg, #2196f3, #42a5f5) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

.role-badge.student {
  background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
}

.role-badge.demo {
  background: linear-gradient(135deg, #ff9800, #ffb74d) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3) !important;
}

/* Duration Badges */
.duration-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #607d8b, #78909c) !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  min-width: 50px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(96, 125, 139, 0.3) !important;
}

/* Ensure table styles apply to all containers */
[id$="Container"] .table-material {
  width: 100%;
  table-layout: fixed;
}

[id$="Container"] .table-material thead th,
[id$="Container"] .table-material tbody td {
  font-family: inherit !important;
}

/* ====================================== */

/* ── Support Ticket Table overrides ──── */
#supportContainer .mdc-data-table__table {
  border-collapse: collapse !important;
}

/* Strip ALL MDC cell borders — keep only bottom separator */
#supportContainer .mdc-data-table__cell {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #e8e8e8 !important;
  /* Allow badge cells to render fully */
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* No border on last row */
#supportContainer .mdc-data-table__row:last-child .mdc-data-table__cell {
  border-bottom: none !important;
}

/* No border on header cells */
#supportContainer .mdc-data-table__header-cell {
  border: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}