/* =============================================================================
   TABLE THEME SYSTEM — thatmy.com
   Add this to your main stylesheet (or a dedicated tables.css)
   Usage: <table class="simple-table [theme-class] [modifier-class]">
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SHARED SHELL — always on .simple-table
   All themes override these via CSS custom properties
   ----------------------------------------------------------------------------- */
.simple-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--tbl-margin, 2em 0);
  border-radius: var(--tbl-radius, 10px);
  overflow: hidden;
  border: var(--tbl-border, 1px solid #e5e7eb);
  background: var(--tbl-bg, #fff);
  box-shadow: var(--tbl-shadow, 0 2px 12px rgba(0,0,0,.07));
  font-size: 14px;
  font-family: var(--font-display, inherit);
}

.simple-table caption {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 10px;
  color: var(--tbl-caption-color, #374151);
  letter-spacing: 0.4px;
  caption-side: top;
}

.simple-table thead tr th {
  padding: var(--tbl-th-pad, 13px 18px);
  background: var(--tbl-thead-bg, #f9fafb);
  color: var(--tbl-thead-color, #374151);
  font-size: var(--tbl-th-size, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tbl-th-tracking, 0.6px);
  border-bottom: var(--tbl-thead-border, 2px solid #e5e7eb);
  text-align: left;
  white-space: nowrap;
}

.simple-table tbody td,
.simple-table tbody th {
  padding: var(--tbl-td-pad, 14px 18px);
  border-bottom: var(--tbl-row-border, 1px solid #f3f4f6);
  color: var(--tbl-td-color, #374151);
  font-size: var(--tbl-td-size, 14px);
  vertical-align: middle;
  line-height: 1.5;
}

.simple-table tbody tr:last-child td,
.simple-table tbody tr:last-child th {
  border-bottom: none;
}

.simple-table tbody tr {
  transition: background 0.12s;
}

.simple-table tbody tr:hover {
  background: var(--tbl-hover-bg, #f9fafb);
}

/* Sticky first column — add .has-sticky to the table */
.simple-table.has-sticky tbody th[scope="row"],
.simple-table.has-sticky thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--tbl-sticky-bg, #fff);
  box-shadow: 2px 0 6px rgba(0,0,0,.06);
}

/* Responsive — Desktop-first, graceful mobile degradation */
@media (max-width: 768px) {
  .simple-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--tbl-radius, 8px);
    font-size: 13px;
  }
  /* Let cell text wrap on mobile — prevents ultra-wide tables */
  .simple-table tbody td,
  .simple-table tbody th {
    padding: var(--tbl-td-pad-mobile, 10px 12px);
    white-space: normal;
    word-break: break-word;
  }
  .simple-table thead tr th {
    padding: var(--tbl-th-pad-mobile, 10px 12px);
    font-size: 10px;
  }
  /* Only force nowrap for data-heavy tables that NEED horizontal scroll */
  .simple-table.has-scroll {
    white-space: nowrap;
  }
  /* Reduce box shadow on mobile */
  .simple-table {
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }
}

/* Extra-small screens */
@media (max-width: 480px) {
  .simple-table {
    font-size: 12px;
    margin: 1.5em 0;
  }
  .simple-table tbody td,
  .simple-table tbody th {
    padding: 8px 10px;
  }
  .simple-table thead tr th {
    padding: 8px 10px;
    font-size: 9px;
  }
}

/* Tables inside tabs — fix spacing and overflow */
.widget-menu-tabs .simple-table {
  margin: 1em 0;
}
.widget-menu-tabs .list-tab {
  overflow-x: auto;
}


/* =============================================================================
   THEME 1: verdict-table
   Use for: Hero decision matrix at the top of an article
   The "which one should I pick?" table
   ============================================================================= */
.simple-table.verdict-table {
  --tbl-border: 2px solid #1a1a2e;
  --tbl-shadow: 0 8px 32px rgba(0,0,0,.14);
  --tbl-radius: 12px;
  --tbl-bg: #fff;
  --tbl-thead-bg: #1a1a2e;
  --tbl-thead-color: #fff;
  --tbl-th-size: 11px;
  --tbl-th-tracking: 1.2px;
  --tbl-thead-border: none;
  --tbl-th-pad: 14px 20px;
  --tbl-td-pad: 16px 20px;
  --tbl-row-border: 1px solid #f0f0f0;
  --tbl-hover-bg: #fafbff;
  --tbl-td-color: #2d3748;
  --tbl-caption-color: #1a1a2e;
  --tbl-sticky-bg: #fff;
}

/* Winner row highlight */
.verdict-table .t-winner {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
}
.verdict-table .t-winner td,
.verdict-table .t-winner th {
  font-weight: 600;
}

/* Verdict badge pills */
.verdict-table .verdict-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.verdict-table .vb-best    { background: #dcfce7; color: #14532d; }
.verdict-table .vb-fast    { background: #dbeafe; color: #1e3a8a; }
.verdict-table .vb-budget  { background: #fef9c3; color: #713f12; }
.verdict-table .vb-premium { background: #f3e8ff; color: #4c1d95; }
.verdict-table .vb-runner  { background: #f1f5f9; color: #475569; }
.verdict-table .vb-support { background: #fce7f3; color: #831843; }
.verdict-table .vb-secure  { background: #fee2e2; color: #7f1d1d; }
.verdict-table .vb-eco     { background: #dcfce7; color: #14532d; }
.verdict-table .vb-cloud   { background: #e0f2fe; color: #075985; }
.verdict-table .vb-wp      { background: #eff6ff; color: #1e3a8a; }

/* Star rating helper */
.verdict-table .stars {
  color: #f59e0b;
  letter-spacing: -1px;
  font-size: 13px;
}


/* =============================================================================
   THEME 2: pricing-table
   Use for: Renewal price tables, cost comparisons, "price shock" content
   ============================================================================= */
.simple-table.pricing-table {
  --tbl-border: 1px solid #fde68a;
  --tbl-shadow: 0 4px 20px rgba(245,158,11,.12);
  --tbl-radius: 10px;
  --tbl-bg: #fffbeb;
  --tbl-thead-bg: #92400e;
  --tbl-thead-color: #fff;
  --tbl-th-size: 11px;
  --tbl-th-tracking: 0.8px;
  --tbl-thead-border: none;
  --tbl-th-pad: 12px 18px;
  --tbl-td-pad: 13px 18px;
  --tbl-row-border: 1px solid #fde68a;
  --tbl-hover-bg: #fffde7;
  --tbl-td-color: #3d2000;
  --tbl-caption-color: #92400e;
  --tbl-sticky-bg: #fffbeb;
}

/* Row color helpers */
.pricing-table .t-good { background: #f0fdf4 !important; }
.pricing-table .t-bad  { background: #fef2f2 !important; }
.pricing-table .t-warn { background: #fef9c3 !important; font-weight: 700; }

/* Value helpers */
.pricing-table .t-red   { color: #dc2626; font-weight: 700; }
.pricing-table .t-green { color: #16a34a; font-weight: 700; }
.pricing-table .price-up::before  { content: "▲ "; }
.pricing-table .price-dn::before  { content: "▼ "; color: #16a34a; }

/* Pricing table mobile — prevent text from being cut off */
@media (max-width: 768px) {
  .simple-table.pricing-table {
    --tbl-td-pad-mobile: 10px 12px;
    --tbl-th-pad-mobile: 10px 12px;
  }
  .pricing-table tbody td {
    min-width: 80px;
  }
}
@media (max-width: 480px) {
  .simple-table.pricing-table {
    font-size: 12px;
  }
  .pricing-table tbody td {
    min-width: 65px;
  }
}


/* =============================================================================
   THEME 3: benchmark-table
   Use for: Speed tests, uptime data, performance comparisons
   ============================================================================= */
.simple-table.benchmark-table {
  --tbl-border: 1px solid #1e3a5f;
  --tbl-shadow: 0 4px 24px rgba(0,0,0,.28);
  --tbl-radius: 10px;
  --tbl-bg: #0d1117;
  --tbl-thead-bg: #161b22;
  --tbl-thead-color: #58a6ff;
  --tbl-th-size: 10px;
  --tbl-th-tracking: 1.5px;
  --tbl-thead-border: 1px solid #21262d;
  --tbl-th-pad: 12px 18px;
  --tbl-td-pad: 13px 18px;
  --tbl-row-border: 1px solid #21262d;
  --tbl-hover-bg: #161b22;
  --tbl-td-color: #c9d1d9;
  --tbl-caption-color: #58a6ff;
}

.benchmark-table {
  font-family: 'Courier New', 'JetBrains Mono', monospace;
}

/* Speed result helpers */
.benchmark-table .t-fastest { color: #3fb950; font-weight: 700; }
.benchmark-table .t-fast    { color: #79c0ff; }
.benchmark-table .t-slow    { color: #f85149; }

/* Mini bar chart */
.benchmark-table .bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.benchmark-table .bar {
  height: 6px;
  border-radius: 3px;
  background: #3fb950;
  display: inline-block;
  opacity: 0.85;
}
.benchmark-table .bar.slow { background: #f85149; }
.benchmark-table .bar.mid  { background: #d29922; }

/* Rank medals */
.benchmark-table .rank-1::before { content: "🥇 "; }
.benchmark-table .rank-2::before { content: "🥈 "; }
.benchmark-table .rank-3::before { content: "🥉 "; }


/* =============================================================================
   THEME 4: comparison-table
   Use for: Feature grids, spec comparisons, "does it have X?" tables
   ============================================================================= */
.simple-table.comparison-table {
  --tbl-border: 1px solid #e2e8f0;
  --tbl-shadow: 0 2px 16px rgba(0,0,0,.06);
  --tbl-radius: 12px;
  --tbl-bg: #fff;
  --tbl-thead-bg: #f8fafc;
  --tbl-thead-color: #1e293b;
  --tbl-th-size: 11px;
  --tbl-th-tracking: 0.6px;
  --tbl-thead-border: 2px solid #e2e8f0;
  --tbl-th-pad: 14px 20px;
  --tbl-td-pad: 14px 20px;
  --tbl-row-border: 1px solid #f1f5f9;
  --tbl-hover-bg: #f8fafc;
  --tbl-td-color: #334155;
  --tbl-caption-color: #1e293b;
  --tbl-sticky-bg: #fff;
}

/* Checkmarks */
.comparison-table .t-check   { color: #16a34a; font-size: 16px; }
.comparison-table .t-cross   { color: #dc2626; font-size: 16px; }
.comparison-table .t-partial { color: #d97706; font-size: 14px; }

/* Highlight a "recommended" column */
.comparison-table .col-highlight {
  background: #f0f9ff !important;
  border-left: 2px solid #0ea5e9 !important;
  border-right: 2px solid #0ea5e9 !important;
}
.comparison-table thead .col-highlight {
  border-top: 2px solid #0ea5e9 !important;
  background: #e0f2fe !important;
}
.comparison-table tbody tr:last-child .col-highlight {
  border-bottom: 2px solid #0ea5e9 !important;
}

/* Section divider rows */
.comparison-table .feature-group {
  background: #f8fafc !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #94a3b8 !important;
  padding: 8px 20px !important;
  pointer-events: none;
}
.comparison-table .feature-group:hover {
  background: #f8fafc !important;
}


/* =============================================================================
   THEME 5: hardware-table
   Use for: CPU comparisons, datacenter specs, technical infrastructure
   ============================================================================= */
.simple-table.hardware-table {
  --tbl-border: 1px solid #312e81;
  --tbl-shadow: 0 8px 30px rgba(49,46,129,.22);
  --tbl-radius: 10px;
  --tbl-bg: #1e1b4b;
  --tbl-thead-bg: #312e81;
  --tbl-thead-color: #c7d2fe;
  --tbl-th-size: 10px;
  --tbl-th-tracking: 1.2px;
  --tbl-thead-border: none;
  --tbl-th-pad: 12px 18px;
  --tbl-td-pad: 13px 18px;
  --tbl-row-border: 1px solid #312e81;
  --tbl-hover-bg: #252262;
  --tbl-td-color: #e0e7ff;
  --tbl-caption-color: #a5b4fc;
  --tbl-sticky-bg: #1e1b4b;
}

.hardware-table {
  font-family: 'Courier New', 'JetBrains Mono', monospace;
}

/* Performance tier helpers */
.hardware-table .t-top { color: #a5f3fc; font-weight: 700; }
.hardware-table .t-mid { color: #fde68a; }
.hardware-table .t-low { color: #fca5a5; }

/* Chip tag pill */
.hardware-table .chip-tag {
  background: #312e81;
  border: 1px solid #4338ca;
  color: #a5b4fc;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* Score bar */
.hardware-table .score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hardware-table .score-fill {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6366f1, #a5f3fc);
  display: inline-block;
}
.hardware-table .score-fill.good {
  background: linear-gradient(90deg, #d97706, #fde68a);
}
.hardware-table .score-fill.low {
  background: linear-gradient(90deg, #dc2626, #fca5a5);
}