/**
 * DataTable.css - Styles for the DataTable library
 * 
 * Includes styles for:
 * - Base table layout
 * - Different table styles (compact, striped, modern, minimal, bordered)
 * - Column header styling and interactions
 * - Row styling and hover effects
 * - Sort indicators
 * - Column resizers
 * - Row detail popup
 * 
 * @version 1.0.0
 */

/* Custom Table Styles */
.table-compact .column-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

.table-compact .column-data {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.table-striped tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}

.dark .table-striped tbody tr:nth-child(odd) {
  background-color: #1f2937;
}

.table-bordered {
  border: 1px solid #e5e7eb;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #e5e7eb;
}

.dark .table-bordered {
  border: 1px solid #374151;
}

.dark .table-bordered th,
.dark .table-bordered td {
  border: 1px solid #374151;
}

/* Modern Table Style */
.table-modern {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.table-modern .column-header {
  background-color: #f3f4f6;
  color: #374151;
  font-weight: 600;
  padding: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

.table-modern .column-data {
  padding: 1rem;
}

.dark .table-modern .column-header {
  background-color: #374151;
  color: #f3f4f6;
  border-bottom: 2px solid #4b5563;
}

.table-modern tbody tr:hover {
  background-color: #f9fafb;
}

.dark .table-modern tbody tr:hover {
  background-color: #1f2937;
}

/* Minimal Table Style */
.table-minimal .column-header {
  border-bottom: 1px solid #e5e7eb;
  background-color: transparent;
}

.table-minimal tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.dark .table-minimal .column-header {
  border-bottom: 1px solid #374151;
}

.dark .table-minimal tbody tr {
  border-bottom: 1px solid #374151;
}

/* Column header */
.column-header {
  position: relative;
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  color: #4b5563;
  user-select: none;
}

.dark .column-header {
  color: #d1d5db;
}

/* Column resizer */
.column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

.column-resizer:hover,
.column-resizer:active {
  background-color: #3b82f6;
}

/* Column data cell */
.column-data {
  padding: 0.75rem 1rem;
  min-width: 150px;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-data .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 500px; /* Reasonable max-width for content */
}

/* Row Details Popup */
.row-detail-popup {
  position: fixed !important; /* Force fixed position */
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 9999 !important; /* Higher z-index to ensure it's on top */
  min-width: 300px;
  max-width: 800px;
  max-height: 80vh;
  overflow: auto;
  border: 1px solid #e5e7eb;
  /* Centered positioning */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90%;
  margin: 0 !important; /* Reset any margins */
}

.dark .row-detail-popup {
  background-color: #1f2937;
  border: 1px solid #374151;
}

.row-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}

.dark .row-detail-header {
  border-bottom: 1px solid #374151;
  background-color: #1f2937;
}

.row-detail-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dark .row-detail-header h3 {
  color: #f3f4f6;
}

.close-popup {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.close-popup:hover {
  color: #111827;
}

.dark .close-popup:hover {
  color: #f3f4f6;
}

.row-detail-content {
  padding: 1rem;
  overflow: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-header {
  text-align: left;
  font-weight: 600;
  color: #374151;
  padding: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 5;
}

.dark .detail-header {
  color: #f3f4f6;
  border-bottom: 1px solid #374151;
  background-color: #1f2937;
}

.detail-column-name {
  padding: 0.5rem;
  width: 30%;
  color: #4b5563;
  font-weight: 500;
  vertical-align: top;
}

.dark .detail-column-name {
  color: #9ca3af;
}

.detail-column-value {
  padding: 0.5rem;
  color: #111827;
  vertical-align: top;
  word-break: break-word;
}

.dark .detail-column-value {
  color: #f9fafb;
}

.detail-column-value .json-object {
  font-family: monospace;
  font-size: 0.75rem;
  background-color: #f3f4f6;
  padding: 0.5rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  color: #111827;
}

.dark .detail-column-value .json-object {
  background-color: #374151;
  color: #f9fafb;
}

/* Improved Table Scrolling */
.table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.dark .table-wrapper {
  scrollbar-color: #4b5563 transparent;
}

.table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}

.dark .table-wrapper::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

/* Sticky Elements */
.sticky-left {
  position: sticky;
  left: 0;
  z-index: 10;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Hide popup by default */
.hidden {
  display: none;
}

/* Column Resizing Mode */
html.column-resizing {
  cursor: col-resize !important;
}

html.column-resizing * {
  user-select: none !important;
}