@charset "UTF-8";
/* BasinLens Comparison Details Styles */

/* Table Container */
.comparison-table-container {
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid #e5e7eb; /* border-gray-200 */
  margin-bottom: 1.5rem; /* mb-6 */
  background-color: #fff;
  /* Note: overflow:hidden is NOT used here to preserve sticky header functionality relative to viewport */
}

/* Table Base */
.comparison-table {
  width: 100%;
  font-size: 0.875rem; /* text-sm */
  text-align: left;
  border-collapse: separate; /* Changed from collapse for robust sticky support */
  border-spacing: 0;
}

/* Header Sticky */
.comparison-header-sticky {
  position: sticky;
  top: calc(4rem - 1px); /* Adjust based on top nav height */
  z-index: 20;
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.1);
  background-color: #f9fafb; /* Gray-50 background */
}

/* Header Cells (Product Images) */
.comparison-header-cell {
  background-color: #f9fafb; /* Gray-50 background for header */
  padding: 0.75rem;
  border-bottom: 1px solid #e5e7eb; /* Distinct border for header */
  vertical-align: top;
  min-width: 300px;
  font-weight: 600; /* font-semibold */
}

/* Key Column (Parameter Name) */
.comparison-key-cell {
  background-color: #fff; /* White background (no special bg) */
  color: #374151; /* text-gray-700 (darkened) */
  font-weight: 500; /* font-medium */
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 (darkened) */
  min-width: 300px;
  width: 300px; /* Fixed width for key column if possible, or min-width */
  vertical-align: top;

  /* Sticky First Column Logic */
  position: sticky;
  left: 0;
  z-index: 10;
  /* Visual separation for sticky column */
  box-shadow: 1px 0 0 0 #e5e7eb, 4px 0 8px -4px rgba(0,0,0,0.1);
}

/* Intersection Cell (Top Left Header) Logic */
.comparison-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 30; /* Highest to sit on top of everything */
  box-shadow: 1px 0 0 0 #e5e7eb, 4px 0 8px -4px rgba(0,0,0,0.1);
}

/* Value Columns (Product Data) */
.comparison-val-cell {
  color: #111827; /* text-gray-900 */
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 (darkened) */
  vertical-align: top;
  max-width: 600px;
}

/* Zebra Striping */
.comparison-table tbody tr:nth-child(even) .comparison-key-cell,
.comparison-table tbody tr:nth-child(even) .comparison-val-cell {
  background-color: #fafafa; /* Subtle zebra stripe (very light gray) */
}

/* Hover Effect */
.comparison-row:hover .comparison-key-cell,
.comparison-row:hover .comparison-val-cell {
  background-color: #f3f4f6; /* Distinct gray on hover (darker than zebra) */
}

/* Remove last row border */
.comparison-table tbody:last-of-type tr:last-child .comparison-key-cell,
.comparison-table tbody:last-of-type tr:last-child .comparison-val-cell {
  border-bottom: none;
}

/* Rounded Corners Handling */
/* Top Left */
.comparison-table thead tr:first-child th:first-child,
.comparison-table thead tr:first-child td:first-child {
  border-top-left-radius: 0.5rem;
}
/* Top Right */
.comparison-table thead tr:first-child th:last-child,
.comparison-table thead tr:first-child td:last-child {
  border-top-right-radius: 0.5rem;
}
/* Bottom Left */
.comparison-table tbody:last-of-type tr:last-child th:first-child,
.comparison-table tbody:last-of-type tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}
/* Bottom Right */
.comparison-table tbody:last-of-type tr:last-child th:last-child,
.comparison-table tbody:last-of-type tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

/* AI Analysis Styles Override */
.ai-content-label {
  display: inline-flex;
  align-items: center;
}

/* Responsive considerations */
@media (max-width: 768px) {
  .comparison-key-cell,
  .comparison-val-cell {
    padding: 0.5rem;
  }
}