/* Container & Global Styles */
.livvic-comparison-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  font-family: 'Livvic', system-ui, -apple-system, sans-serif;
  color: #000000;
}

.main-table-card {
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(27,31,35,0.14), 0 4px 12px rgba(27,31,35,0.08);
}

/* TABLE CORE LOGIC - LOCKING COLUMNS */
.livvic-comparison-wrapper table {
  width: 100% !important;
  border-collapse: separate !important;
  table-layout: fixed !important; /* Force browser to respect widths */
  margin: 0;
  background: #ffffff;
}

/* Explicit Column Widths */
.col-width-1 { width: 26% !important; }
.col-width-2 { width: 22% !important; }
.col-width-3 { width: 17% !important; }
.col-width-4 { width: 17% !important; }
.col-width-5 { width: 17% !important; }

/* Headers Styling */
.th-header { padding: 14px 16px; font-weight: 700; text-align: center; border-bottom: 1px solid transparent; }
.th-main { background: linear-gradient(180deg,#f7fbff,#eef3f7); border-bottom-color: #e6ebf2; }
.th-ra { background: linear-gradient(90deg,#e52652,#ff4e72); color: #ffffff; border-bottom-color: #d83f5e; }
.th-house { background: linear-gradient(90deg,#c837b8,#ff73e2); color: #ffffff; border-bottom-color: #b135a5; }
.th-agency { background: linear-gradient(90deg,#7a64ff,#9aa5ff); color: #ffffff; border-bottom-color: #6a54f0; }
.th-freelance { background: linear-gradient(90deg,#3ab6ff,#7ae0ff); color: #ffffff; border-bottom-color: #2fa6ee; }

/* Body Cell Styling */
tbody th { padding: 12px 16px; font-weight: 600; text-align: left; background: #ffffff; }
tbody td { padding: 12px 16px; text-align: center; }
tbody tr { border-top: 1px solid #eef2f7; transition: all 160ms ease; }

/* Column Colors (Direct preservation of original hex codes) */
.cell-pink-light { background: #fff5f7; }
.cell-pink-dark  { background: #ffe9ee; }
.cell-purple-light { background: #fff3fb; }
.cell-purple-dark  { background: #ffe6f7; }
.cell-blue-light { background: #f2f4ff; }
.cell-blue-dark  { background: #e9ecff; }
.cell-cyan-light { background: #f2fbff; }
.cell-cyan-dark  { background: #e6f8ff; }

/* Grey Row Helper */
.row-grey th { background: #f5f7fa !important; }

/* Hover Effects */
tbody tr:hover td, tbody tr:hover th {
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.05);
}

/* Sticky Column Logic */
table thead th:first-child, table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 3;
}
table thead th:first-child::after, table th[scope="row"]::after {
  content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: rgba(0,0,0,0.08);
}

/* Mobile Scroll UI */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-affordance { display: none; position: relative; margin-bottom: 6px; }
.scroll-track { overflow-x: auto; height: 10px; }
.scroll-track::-webkit-scrollbar { height: 6px; }
.scroll-track::-webkit-scrollbar-thumb { background: #1e5aeb; border-radius: 999px; }
.scroll-track-inner { height: 1px; }
.scroll-arrow { 
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%); 
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; 
  border-left: 8px solid #b5b5b5; pointer-events: none; 
}

/* Responsiveness */
@media (max-width: 1024px) {
  .livvic-comparison-wrapper table { min-width: 1000px !important; }
}

@media (max-width: 768px) {
  .livvic-comparison-wrapper table { min-width: 900px !important; }
  .col-width-1 { width: 15% !important; } /* Wider sticky column for mobile */
  thead th { font-size: 16px !important; }
  tbody tr { font-size: 12px !important; }
  .scroll-affordance { display: block; }
}

/* TABLE 2 SPECIFIC WIDTHS (3-Column Layout) */
.table-type-ai .ai-col-1 { width: 18% !important; }
.table-type-ai .ai-col-2 { width: 35% !important; }
.table-type-ai .ai-col-3 { width: 45% !important; }

/* Mobile Adjustment for Table 2 */
@media (max-width: 768px) {
  .table-type-ai table { min-width: 700px !important; }
  .table-type-ai .ai-col-1 { width: 140px !important; }
  .table-type-ai .ai-col-2 { width: 280px !important; }
  .table-type-ai .ai-col-3 { width: 280px !important; }

/* TABLE 4 SPECIFIC WIDTHS (4-Column Layout) */
.table-type-account .acc-col-1 { width: 22% !important; }
.table-type-account .acc-col-2 { width: 26% !important; }
.table-type-account .acc-col-3 { width: 26% !important; }
.table-type-account .acc-col-4 { width: 26% !important; }

/* Mobile Adjustment for Table 4 */
@media (max-width: 768px) {
  .table-type-account table { min-width: 750px !important; }
  .table-type-account .acc-col-1 { width: 140px !important; }
  .table-type-account .acc-col-2 { width: 150px !important; }
  .table-type-account .acc-col-3 { width: 150px !important; }
  .table-type-account .acc-col-4 { width: 150px !important; }
}