/* ===== DATA TABLE STYLES (WORDPRESS) ===== */

.elementor-widget-mystic_data_table .data-table-wrapper {
  width: 100%;
  overflow: hidden;
}

.data-table {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-radius: 12px;
  border: 4px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.data-table-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.data-table-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  min-height: 60px;
}

.data-table-cell {
  display: flex;
  padding: 20px 24px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  min-height: 60px;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.data-table-cell:last-child {
  border-right: none;
}

.data-table-row:last-child .data-table-cell {
  border-bottom: none;
}

/* Responsive table */
.data-table--responsive {
  width: 100%;
}

.data-table--responsive .data-table-cell {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* Fixed width table with scroll */
.data-table--fixed {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
}

.data-table--fixed .data-table-content {
  min-width: max-content;
  width: 100%;
}

/* Regular fixed table cells (not sticky) */
.data-table--fixed:not(.data-table--sticky-first) .data-table-cell {
  min-width: 150px;
  flex-shrink: 0;
  flex: 0 0 auto;
}

/* Mystic Data Table - Semantic HTML Structure */
.mystic-data-table-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.mystic-data-table {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mystic-data-table__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  display: flex;
  flex-direction: column;
}

.mystic-data-table__header {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: contents;
}

.mystic-data-table__body {
  display: contents;
}

.mystic-data-table__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 0;
}

.mystic-data-table__row:last-child {
  border-bottom: none;
}

.mystic-data-table__cell {
  padding: 20px 24px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 60px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

.mystic-data-table__cell:last-child {
  border-right: none;
}

.mystic-data-table__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 160%;
  letter-spacing: 0.16px;
  background: rgba(255, 255, 255, 0.1);
  justify-content: center;
  align-items: center;
  text-transform: none;
}

.mystic-data-table__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* Responsive Table */
.mystic-data-table--responsive {
  overflow-x: visible;
}

.mystic-data-table--responsive.mystic-data-table--scrollable {
  overflow-x: auto;
}

.mystic-data-table--responsive .mystic-data-table__table {
  table-layout: auto;
  min-width: var(--table-min-width, 800px);
  width: 100%;
}

.mystic-data-table--responsive .mystic-data-table__cell {
  min-width: 150px;
}

/* Fixed Width Table */
.mystic-data-table--fixed {
  overflow-x: auto;
}

.mystic-data-table--fixed .mystic-data-table__table {
  min-width: max-content;
}

.mystic-data-table--fixed .mystic-data-table__cell {
  min-width: 160px;
  width: 160px;
}

/* ========================================
                     NEW STICKY COLUMN IMPLEMENTATION
                     ======================================== */

/* Sticky Column Layout - Main Container */
.mystic-data-table--sticky-column {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

/* Sticky First Column Container */
.mystic-sticky-column {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 20;
  background: var(--table-bg-primary, #ffffff);
  border-right: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
  min-width: 200px;
  width: 30%; /* Default width, will be overridden by JavaScript */
  max-width: 400px; /* Allow for wider columns */
  overflow: visible;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Sticky Column Header */
.mystic-sticky-column__header {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Sticky Column Body */
.mystic-sticky-column__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: visible;
}

/* Sticky Column Cells */
.mystic-sticky-column__cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px 16px;
  min-height: 60px;
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  background: var(--table-bg-primary, #ffffff);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  flex-direction: column;
}

.mystic-sticky-column__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  line-height: 140%;
  text-align: left;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
}

.mystic-sticky-column__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-align: left;
}

/* Scrollable Columns Container */
.mystic-scrollable-columns {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.mystic-scrollable-columns::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mystic-scrollable-columns::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.mystic-scrollable-columns::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.mystic-scrollable-columns::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Scrollable Columns Header */
.mystic-scrollable-columns__header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  min-width: max-content;
}

/* Scrollable Columns Body */
.mystic-scrollable-columns__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: max-content;
}

/* Scrollable Columns Row */
.mystic-scrollable-columns__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 60px;
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  min-width: max-content;
  height: auto; /* Allow dynamic height */
  box-sizing: border-box;
}

.mystic-scrollable-columns__row:last-child {
  border-bottom: none;
}

/* Scrollable Columns Cells */
.mystic-scrollable-columns__cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  min-height: 60px;
  min-width: 250px; /* Increased minimum width */
  width: 300px; /* Increased default width */
  flex: 0 0 300px; /* Increased default flex basis */
  border-right: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  background: var(--table-bg-primary, #ffffff);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  flex-direction: column;
}

.mystic-scrollable-columns__cell:last-child {
  border-right: none;
}

.mystic-scrollable-columns__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  line-height: 140%;
  text-align: center;
  background: var(--table-bg-primary, #ffffff);
}

.mystic-scrollable-columns__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-align: center;
}

/* Hidden cells for merging */
.mystic-scrollable-columns__cell--hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  flex: 0 !important;
}

/* Enhanced height synchronization for sticky columns */
.mystic-data-table--sticky-column .mystic-sticky-column__cell,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  box-sizing: border-box;
  overflow: visible;
  align-items: flex-start !important; /* Force consistent alignment */
}

/* Ensure row alignment */
.mystic-data-table--sticky-column .mystic-sticky-column__body,
.mystic-data-table--sticky-column .mystic-scrollable-columns__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-main-content,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-main-content {
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-bullet-list,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-bullet-list {
  width: 100%;
  margin: 0;
  padding-left: 20px;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-note-container,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-note-container {
  width: 100%;
  margin: 0;
}

/* Enhanced content flow within cells */
.mystic-sticky-column__cell > *,
.mystic-scrollable-columns__cell > * {
  width: 100%;
  margin: 0;
  padding: 0;
}

.mystic-sticky-column__cell .mystic-table-main-content,
.mystic-scrollable-columns__cell .mystic-table-main-content {
  margin-bottom: 12px;
}

.mystic-sticky-column__cell .mystic-table-main-content:last-child,
.mystic-scrollable-columns__cell .mystic-table-main-content:last-child {
  margin-bottom: 0;
}

/* Mobile optimization for sticky columns - COMPREHENSIVE HORIZONTAL SCROLLING FIX */
@media (max-width: 768px) {
  /* CRITICAL: Ensure parent wrapper enables horizontal scrolling */
  .mystic-data-table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    /* Add scroll indicators */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
  }

  /* Custom scrollbar styling for better UX */
  .mystic-data-table-wrapper::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4) !important;
  }

  .mystic-data-table--sticky-column {
    /* CRITICAL: Force content wider than viewport to enable scrolling */
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
    min-width: 900px !important; /* Force wider than mobile viewport */
    width: max-content !important;
    position: relative !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1) !important;
    min-width: 200px !important;
    width: 200px !important;
    flex: 0 0 200px !important;
    overflow: visible !important;
  }

  .mystic-data-table--sticky-column .mystic-scrollable-columns {
    /* CRITICAL: Enable horizontal scrolling within scrollable columns */
    flex: 1 1 auto !important;
    min-width: 700px !important; /* Force wider than remaining viewport */
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* CRITICAL: Force scrollable content to be wider than container */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__header,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__body {
    min-width: 1000px !important; /* Force content wider than scrollable container */
    width: max-content !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* CRITICAL: Ensure rows force horizontal scrolling */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__row {
    display: flex !important;
    flex-direction: row !important;
    min-width: 1000px !important; /* Force content wider than scrollable container */
    width: max-content !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
    min-width: 150px !important;
    padding: 16px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell--header,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell--header {
    padding: 12px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* CRITICAL: Force scrollable columns to have fixed widths for horizontal scrolling */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
    flex: 0 0 200px !important; /* Increased width for better readability */
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
}

/* Enhanced visual alignment for sticky columns */
.mystic-data-table--sticky-column {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.mystic-data-table--sticky-column .mystic-sticky-column,
.mystic-data-table--sticky-column .mystic-scrollable-columns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ensure consistent cell spacing */
.mystic-sticky-column__cell,
.mystic-scrollable-columns__cell {
  margin: 0;
  padding: 20px 16px;
  border-collapse: collapse;
}

/* Merged cells */
.mystic-scrollable-columns__cell--merged {
  flex: 0 0 auto;
  width: auto;
  min-width: 300px;
}

/* Enhanced variants for sticky column */
.mystic-data-table--enhanced.mystic-data-table--sticky-column {
  border-radius: 16px;
  background: var(--table-bg-primary, #ffffff);
  border: 1px solid var(--table-border-color, #eeeef0);
}

/* Healthcare variant for sticky column */
.mystic-data-table--healthcare.mystic-data-table--sticky-column {
  border-radius: 0;
  background: var(--table-bg-primary, #ffffff);
  border: none;
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-sticky-column__cell {
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

/* Healthcare variant sticky column cell borders */
.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:last-child {
  border-right: none;
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell:last-child,
.mystic-data-table--healthcare.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:last-child
  .mystic-scrollable-columns__cell {
  border-bottom: none;
}

/* Striped rows for enhanced variants */
.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-sticky-column__cell--data:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:nth-child(even)
  .mystic-scrollable-columns__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Healthcare variant striped rows for sticky column */
.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell--data:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:nth-child(even)
  .mystic-scrollable-columns__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Row Height Synchronization */
.mystic-data-table--sticky-column .mystic-sticky-column__cell,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  min-height: 60px;
  height: auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Hover Effects */
.mystic-data-table--sticky-column .mystic-sticky-column__cell:hover,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:hover {
  background-color: rgba(15, 85, 125, 0.05);
  transition: background-color 0.2s ease;
}

/* Focus States for Accessibility */
.mystic-data-table--sticky-column .mystic-sticky-column__cell:focus,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
  background-color: rgba(15, 85, 125, 0.1);
}

/* Shadow Effect for Sticky Column */
.mystic-sticky-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
  z-index: 30;
}

/* Scroll Indicators for Scrollable Columns */
.mystic-scrollable-columns::before,
.mystic-scrollable-columns::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mystic-scrollable-columns::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-scrollable-columns::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-scrollable-columns.has-scroll-left::before {
  opacity: 1;
}

.mystic-scrollable-columns.has-scroll-right::after {
  opacity: 1;
}

/* Mobile Responsive Behavior */
@media (max-width: 768px) {
  /* Mobile: Stack sticky column above scrollable columns */
  .mystic-data-table--sticky-column {
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mystic-sticky-column {
    position: static;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .mystic-sticky-column__header,
  .mystic-sticky-column__body {
    width: 100%;
  }

  .mystic-sticky-column__cell {
    width: 100%;
    min-width: 100%;
    padding: 16px 12px;
    min-height: 50px;
    font-size: 14px;
  }

  .mystic-scrollable-columns {
    width: 100%;
    min-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .mystic-scrollable-columns__header,
  .mystic-scrollable-columns__body,
  .mystic-scrollable-columns__row {
    min-width: max-content;
  }

  .mystic-scrollable-columns__cell {
    min-width: 120px;
    width: 120px;
    flex: 0 0 120px;
    padding: 16px 12px;
    min-height: 50px;
    font-size: 14px;
  }

  /* Remove shadow effect on mobile */
  .mystic-sticky-column::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .mystic-sticky-column__cell {
    padding: 12px 8px;
    min-height: 45px;
    font-size: 13px;
  }

  .mystic-scrollable-columns__cell {
    min-width: 100px;
    width: 100px;
    flex: 0 0 100px;
    padding: 12px 8px;
    min-height: 45px;
    font-size: 13px;
  }
}

/* Touch Scrolling Optimization */
@media (hover: none) and (pointer: coarse) {
  .mystic-scrollable-columns {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .mystic-data-table--sticky-column {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Performance Optimizations */
.mystic-data-table--sticky-column {
  contain: layout style;
  will-change: scroll-position;
}

.mystic-sticky-column,
.mystic-scrollable-columns {
  contain: layout;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .mystic-sticky-column {
    border-right-color: #000000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
  }

  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell {
    border-color: #000000;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell,
  .mystic-scrollable-columns::before,
  .mystic-scrollable-columns::after {
    transition: none;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell:hover,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell:hover {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .mystic-data-table--sticky-column {
    flex-direction: column;
    overflow: visible;
    box-shadow: none;
    border: 1px solid #000000;
  }

  .mystic-sticky-column,
  .mystic-scrollable-columns {
    position: static;
    width: 100%;
    overflow: visible;
    box-shadow: none;
    border: none;
  }

  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell {
    background: white !important;
    color: black !important;
    border-color: #000000 !important;
  }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .mystic-data-table__cell {
    padding: 16px 20px;
    min-height: 50px;
    height: 50px;
    font-size: 14px;
  }

  /* Mobile adjustments for sticky layout */
  .mystic-data-table--sticky .mystic-data-table__row {
    min-height: 50px;
  }

  .mystic-data-table--sticky .mystic-data-table__cell {
    min-height: 50px;
    height: 50px;
    padding: 12px 16px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px);
  }

  .mystic-data-table--fixed .mystic-data-table__cell,
  .mystic-data-table--sticky .mystic-data-table__cell {
    min-width: 120px;
    width: 120px;
    min-height: 60px;
    height: 60px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px);
    flex: 1 1 auto;
  }

  /* Elementor widget specific responsive overrides */
  .elementor-widget-mystic_data_table .mystic-data-table__sticky-first-column {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;
  }

  .elementor-widget-mystic_data_table .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px) !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell {
    padding: 12px 16px;
    min-height: 45px;
    height: 45px;
    font-size: 13px;
  }

  .mystic-data-table--fixed .mystic-data-table__cell,
  .mystic-data-table--sticky .mystic-data-table__cell {
    min-width: 100px;
    width: 100px;
    min-height: 60px;
    height: 60px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 100px);
    flex: 1 1 auto;
  }

  /* Elementor widget specific responsive overrides */
  .elementor-widget-mystic_data_table .mystic-data-table__sticky-first-column {
    min-width: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
  }

  .elementor-widget-mystic_data_table .mystic-data-table__scrollable-columns {
    width: calc(100% - 100px) !important;
    flex: 1 1 auto !important;
  }
}

/* ========================================
                     DATA TABLE CELL MERGING STYLES
                     ======================================== */

/* Merged cell styling */
.mystic-data-table__cell--merged {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0; /* Prevent merged cells from shrinking */
}

/* Ensure first column maintains fixed width when other columns are merged */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) .mystic-data-table__cell--first {
  flex: 1;
  flex-shrink: 0; /* Prevent first column from shrinking */
}

/* Ensure proper flex distribution in rows with merged cells */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Reset flex for all cells in rows with merged cells, then apply proper distribution */
.mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell:not(.mystic-data-table__cell--first):not(.mystic-data-table__cell--merged):not(
    .mystic-data-table__cell--hidden
  ) {
  flex: 1;
  flex-shrink: 1; /* Allow non-merged cells to shrink if needed */
  min-width: 0; /* Allow cells to shrink below their content width */
}

/* Ensure merged cells take up the correct amount of space */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) .mystic-data-table__cell--merged {
  flex-shrink: 0; /* Prevent merged cells from shrinking */
}

/* Hidden cells (part of a merge) */
.mystic-data-table__cell--hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  flex: 0 !important; /* Ensure hidden cells take no space */
}

/* ========================================
                     ROW HEIGHT CONTROLS STYLES
                     ======================================== */

/* Row height controls for manual height settings */
.mystic-data-table__cell[style*="height"],
.mystic-sticky-column__cell[style*="height"],
.mystic-scrollable-columns__cell[style*="height"] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: none; /* Allow heights up to 800px */
}

/* Ensure row wrapper maintains grid layout */
.mystic-scrollable-columns__row {
  display: flex; /* preserve original flex layout */
}

/* Ensure content within height-controlled cells is properly contained */
.mystic-data-table__cell[style*="height"] .mystic-table-main-content,
.mystic-sticky-column__cell[style*="height"] .mystic-table-main-content,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-main-content {
  width: 100%;
  overflow: inherit;
}

/* Bullet lists within height-controlled cells */
.mystic-data-table__cell[style*="height"] .mystic-table-bullet-list,
.mystic-sticky-column__cell[style*="height"] .mystic-table-bullet-list,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-bullet-list {
  width: 100%;
  margin: 0;
  padding-left: 20px;
  overflow: inherit;
}

/* Note containers within height-controlled cells */
.mystic-data-table__cell[style*="height"] .mystic-table-note-container,
.mystic-sticky-column__cell[style*="height"] .mystic-table-note-container,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-note-container {
  width: 100%;
  margin: 0;
  overflow: inherit;
}

/* Overflow handling for different overflow settings */
.mystic-data-table__cell[style*="overflow: hidden"],
.mystic-sticky-column__cell[style*="overflow: hidden"],
.mystic-scrollable-columns__cell[style*="overflow: hidden"] {
  text-overflow: ellipsis;
}

.mystic-data-table__cell[style*="overflow: scroll"],
.mystic-sticky-column__cell[style*="overflow: scroll"],
.mystic-scrollable-columns__cell[style*="overflow: scroll"] {
  overflow-y: auto;
  overflow-x: hidden;
}

.mystic-data-table__cell[style*="overflow: auto"],
.mystic-sticky-column__cell[style*="overflow: auto"],
.mystic-scrollable-columns__cell[style*="overflow: auto"] {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure sticky column and scrollable columns maintain height synchronization */
.mystic-data-table--sticky-column .mystic-sticky-column__cell[style*="height"] {
  height: inherit !important;
}

/* Mobile responsive adjustments for row heights */
@media (max-width: 768px) {
  .mystic-data-table__cell[style*="height"],
  .mystic-sticky-column__cell[style*="height"],
  .mystic-scrollable-columns__cell[style*="height"] {
    min-height: 50px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell[style*="height"],
  .mystic-sticky-column__cell[style*="height"],
  .mystic-scrollable-columns__cell[style*="height"] {
    min-height: 45px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Enhanced variant merged cells */
.mystic-data-table--enhanced .mystic-data-table__cell--merged {
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
  background: inherit;
}

/* Enhanced variant first column width control when merging */
.mystic-data-table--enhanced
  .mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell--first {
  flex: 1;
  flex-shrink: 0;
}

/* Healthcare variant merged cells */
.mystic-data-table--healthcare .mystic-data-table__cell--merged {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Healthcare variant first column width control when merging */
.mystic-data-table--healthcare
  .mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell--first {
  flex: none !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}

/* Ensure merged cells maintain proper text alignment */
.mystic-data-table__cell--merged.mystic-data-table__cell--first {
  justify-content: flex-start;
  text-align: left;
}

.mystic-data-table__cell--merged:not(.mystic-data-table__cell--first) {
  justify-content: center;
  text-align: center;
}

/* Merged cell content styling */
.mystic-data-table__cell--merged .mystic-table-main-content,
.mystic-data-table__cell--merged .mystic-table-bullet-list,
.mystic-data-table__cell--merged .mystic-table-note-container {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive adjustments for merged cells */
@media (max-width: 768px) {
  .mystic-data-table__cell--merged {
    padding: 16px 12px;
    min-height: 60px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell--merged {
    padding: 12px 8px;
    min-height: 50px;
    font-size: 13px;
  }
}

/* ========================================
                     YEAR TABS STYLES FOR DATA TABLE
                     ======================================== */

/* Main widget wrapper - full width */
.xclean-data-table {
  width: 100%;
  box-sizing: border-box;
}

/* Tabs Container - full width like Figma */
.xclean-data-table-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.xclean-data-table-tabs::-webkit-scrollbar {
  height: 4px;
}

.xclean-data-table-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.xclean-data-table-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

/* Individual Tab - full width distribution */
.xclean-data-table-tab {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  border-right: none;
  background-color: #f0f4f8;
  color: #333333;
  font-family: var(--e-global-typography-text-font-family, "Public Sans"), -apple-system, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  white-space: nowrap;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.xclean-data-table-tab:first-child {
  border-top-left-radius: 10px;
}

.xclean-data-table-tab:last-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-top-right-radius: 10px;
}

/* Active Tab - white background, connects to content */
.xclean-data-table-tab.xclean-data-table-tab--active {
  background-color: #ffffff;
  color: #333333;
  font-weight: 500;
  z-index: 10;
  border-bottom: 2px solid #ffffff;
  margin-bottom: -1px;
  position: relative;
}

/* Hover State */
.xclean-data-table-tab:hover:not(.xclean-data-table-tab--active) {
  background-color: #f0f0f0;
  color: #333333;
}

/* Focus State for Accessibility */
.xclean-data-table-tab:focus {
  outline: 2px solid #007bff;
  outline-offset: -2px;
  z-index: 20;
}

.xclean-data-table-tab:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

/* Tab Panels Container */
.xclean-data-table-panels {
  position: relative;
  width: 100%;
  min-height: 100px;
}

/* Individual Panel */
.xclean-data-table-panel {
  display: none;
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
}

.xclean-data-table-panel.xclean-data-table-panel--active {
  display: block;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Panel inner - white content area with rounded bottom (Figma) */
.xclean-data-table-panel-inner {
  width: 100%;
  padding: 0;
  background-color: #ffffff;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  box-sizing: border-box;
}

.xclean-data-table-panel .ss-inner {
  width: 100%;
  padding: 0;
}

/* ===== Table inside year panels (Figma defaults) ===== */
.xclean-data-table-panel .mystic-data-table-wrapper {
  width: 100%;
  border: none;
  border-radius: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.xclean-data-table-panel .mystic-data-table {
  width: 100%;
  background: #ffffff;
  border: none;
  border-radius: 0;
}

.xclean-data-table-panel .mystic-data-table__table {
  width: 100%;
  display: flex;
  flex-direction: column;
  table-layout: fixed;
}

/* Ensure table wrapper doesn't cause overflow issues */
.xclean-data-table-panel .mystic-data-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.xclean-data-table-panel .mystic-data-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.xclean-data-table-panel .mystic-data-table__row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 48px;
  align-items: stretch;
  box-sizing: border-box;
}

/* Ensure header and body rows align perfectly */
.xclean-data-table-panel .mystic-data-table__header .mystic-data-table__row,
.xclean-data-table-panel .mystic-data-table__body .mystic-data-table__row {
  display: flex;
  width: 100%;
  align-items: stretch;
}

/* Prevent content overflow from breaking cell alignment */
.xclean-data-table-panel .mystic-data-table__cell > * {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Ensure header first cell matches data first cell width exactly */
.xclean-data-table-panel .mystic-data-table__cell--header.mystic-data-table__cell--first {
  /* flex: 0 0 290px; */
  /* min-width: 900px; */
  /* max-width: 180px;
  width: 180px; */
}

.xclean-data-table-panel .mystic-data-table__row:last-child {
  border-bottom: none;
}

.xclean-data-table-panel .mystic-data-table__cell {
  padding: 16px 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  vertical-align: top;
}

/* First column (row labels) - fixed width for consistent alignment */
.xclean-data-table-panel .mystic-data-table__cell--first {
  flex: 0 0 180px;
  min-width: 180px;
  max-width: 180px;
  width: 180px;
}

/* Data columns (non-first) - equal distribution of remaining space */
.xclean-data-table-panel .mystic-data-table__cell:not(.mystic-data-table__cell--first) {
  flex: 1 1 0;
  min-width: 0;
}

.xclean-data-table-panel .mystic-data-table__cell:last-child {
  border-right: none;
}

.xclean-data-table-panel .mystic-data-table__cell--header {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
  color: #333333;
}

.xclean-data-table-panel .mystic-data-table__cell--data {
  color: #333333;
}

/* Links and values - blue, underlined (Figma) */
.xclean-data-table-panel .mystic-table-text-link,
.xclean-data-table-panel .mystic-table-highlight {
  color: #0F557D;
  text-decoration: underline;
}

.xclean-data-table-panel .mystic-table-text-link:hover {
  color: #0a3d5c;
}

.xclean-data-table-panel .mystic-table-main-content,
.xclean-data-table-panel .mystic-table-bullet-list,
.xclean-data-table-panel .mystic-table-bullet-item {
  color: inherit;
}

.xclean-data-table-panel .mystic-table-note-container {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(15, 85, 125, 0.08);
  border-radius: 4px;
  font-size: 14px;
}

/* Responsive Styles - Tabs */
@media (max-width: 768px) {
  .xclean-data-table-tabs {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .xclean-data-table-tab {
    flex: 0 0 auto;
    min-width: 80px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .xclean-data-table-tab {
    min-width: 70px;
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* Responsive - Table in panels */
@media (max-width: 768px) {
  .xclean-data-table-panel .mystic-data-table__cell {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .xclean-data-table-panel .mystic-data-table__cell--first,
  .xclean-data-table-panel .mystic-data-table__cell--header.mystic-data-table__cell--first {
    flex: 0 0 140px;
    min-width: 140px;
    max-width: 140px;
    width: 140px;
  }
  
  .xclean-data-table-panel-inner {
    border-radius: 0 0 10px 10px;
  }
}

@media (max-width: 480px) {
  .xclean-data-table-panel .mystic-data-table__cell {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .xclean-data-table-panel .mystic-data-table__cell--first,
  .xclean-data-table-panel .mystic-data-table__cell--header.mystic-data-table__cell--first {
    flex: 0 0 120px;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
  }
  
  .xclean-data-table-panel-inner {
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 767px) {
  .xclean-data-table-panel .mystic-data-table__table {
    min-width: 400px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .xclean-data-table-tab {
    transition: none;
  }
  
  .xclean-data-table-panel {
    animation: none;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .xclean-data-table-tab {
    border-color: #000000;
  }
  
  .xclean-data-table-tab.xclean-data-table-tab--active {
    border-bottom-color: #000000;
    border-bottom-width: 3px;
  }
}

/* ========================================
                     YEAR TABLE STYLES
                     ======================================== */

/* Table built from repeater data */
.xclean-year-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background-color: #ffffff;
  font-family: var(--e-global-typography-text-font-family, "Public Sans"), -apple-system, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.xclean-year-table th,
.xclean-year-table td {
  padding: 16px 20px;
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

.xclean-year-table thead th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333333;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

.xclean-year-table tbody th {
  background-color: #fafafa;
  font-weight: 600;
  color: #333333;
}

.xclean-year-table tbody td {
  background-color: #ffffff;
  color: #666666;
}

.xclean-year-table tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
}

.xclean-year-table tbody tr:hover td {
  background-color: #f0f7ff;
}

.xclean-year-table a {
  color: #007bff;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.xclean-year-table a:hover {
  color: #0056b3;
  text-decoration: none;
}

.xclean-year-table ul {
  margin: 8px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.xclean-year-table li {
  margin: 4px 0;
}

.xclean-year-table strong {
  font-weight: 600;
  color: #333333;
}

.xclean-year-table em {
  font-style: italic;
  color: #555555;
}

/* Responsive table */
@media (max-width: 768px) {
  .xclean-year-table {
    font-size: 14px;
  }
  
  .xclean-year-table th,
  .xclean-year-table td {
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .xclean-year-table {
    font-size: 13px;
  }
  
  .xclean-year-table th,
  .xclean-year-table td {
    padding: 10px 12px;
  }
}