/* =============================================================================
   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 18px;
  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);
}

/* Override the old minified blob's hardcoded first-header background */
.simple-table tr th:first-child {
  background: var(--tbl-thead-bg, #f9fafb);
  color: var(--tbl-thead-color, #374151);
}

/* 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);
}

/* Desktop — contain wide tables without page-level scroll */
.simple-table {
  max-width: 100%;
}
.simple-table:not(.benchmark-table):not(.latency-table) {
  table-layout: auto;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 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;
  }
  /* First column can wrap (host/plan names) */
  .simple-table tbody td,
  .simple-table tbody th {
    padding: var(--tbl-td-pad-mobile, 10px 12px);
    white-space: normal;
    word-break: break-word;
  }
  /* Data columns: nowrap forces table wider than viewport so overflow-x: auto scrolls */
  .simple-table tbody td:not(:first-child),
  .simple-table tbody th:not(:first-child) {
    white-space: nowrap;
  }
  .simple-table thead tr th {
    padding: var(--tbl-th-pad-mobile, 10px 12px);
    font-size: 10px;
  }
  /* Explicit scroll opt-in (kept for backwards compat) */
  .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;
}

/* -----------------------------------------------------------------------------
   HORIZONTAL SCROLL UX — drag-to-pan + arrow buttons (desktop)
   ----------------------------------------------------------------------------- */
.benchmark-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.benchmark-table-wrap.is-dragging {
  cursor: grabbing !important;
  user-select: none;
}
.table-scroll-outer {
  position: relative;
}
.table-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: rgba(255,255,255,0.93);
  box-shadow: 0 2px 6px rgba(0,0,0,.13);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: opacity .15s, box-shadow .15s;
  padding: 0;
}
.table-scroll-btn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  background: #fff;
}
.table-scroll-btn.btn-left  { left: 4px; }
.table-scroll-btn.btn-right { right: 4px; }
.table-scroll-btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  .table-scroll-btn { display: none; }
}


/* =============================================================================
   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 #2a3a50;
  --tbl-shadow: 0 4px 20px rgba(0,0,0,.22);
  --tbl-radius: 10px;
  --tbl-bg: #141b27;
  --tbl-thead-bg: #1c2940;
  --tbl-thead-color: #90caf9;
  --tbl-th-size: 11px;
  --tbl-th-tracking: 1px;
  --tbl-thead-border: 2px solid #2a3a50;
  --tbl-th-pad: 14px 16px;
  --tbl-td-pad: 13px 16px;
  --tbl-row-border: 1px solid #1e2d42;
  --tbl-hover-bg: #1a2538;
  --tbl-td-color: #dce4ee;
  --tbl-td-first-color: #e8edf4;
  --tbl-caption-color: #90caf9;
  --tbl-stripe-bg: rgba(28, 41, 64, 0.4);
  --tbl-sticky-bg: #141b27;
}

.benchmark-table {
  font-family: 'Courier New', 'JetBrains Mono', monospace;
  font-size: 13px;
  table-layout: auto;
}
.benchmark-table thead tr th {
  white-space: nowrap;
}
/* Explicitly paint each body cell dark — don't rely on table-element background showing through */
.benchmark-table tbody td,
.benchmark-table tbody th {
  background: var(--tbl-bg, #141b27);
  color: var(--tbl-td-color, #dce4ee);
}
.benchmark-table tbody td {
  white-space: nowrap;
}
/* Provider column — wider */
.benchmark-table tbody td:first-child,
.benchmark-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--tbl-td-first-color, #e8edf4);
  white-space: nowrap;
}
/* Alternating rows — target cells directly since cells now have explicit background */
.benchmark-table tbody tr:nth-child(even) td,
.benchmark-table tbody tr:nth-child(even) th {
  background: #1c2940;
}
.benchmark-table tbody tr:hover td,
.benchmark-table tbody tr:hover th {
  background: var(--tbl-hover-bg, #1a2538);
}

/* Speed result helpers */
.benchmark-table .t-fastest { color: #66d98e; font-weight: 700; }
.benchmark-table .t-fast    { color: #90caf9; }
.benchmark-table .t-slow    { color: #f28b82; }

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

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

@media (max-width: 768px) {
  .simple-table.benchmark-table {
    font-size: 12px;
    min-width: 560px;
  }
  .simple-table.benchmark-table th,
  .simple-table.benchmark-table td { padding: 10px 12px; }
}


/* =============================================================================
   THEME 7: latency-table
   Use for: Ping times, TTFB by datacenter location, "which server is closest?"
   ============================================================================= */
.simple-table.latency-table {
  --tbl-border: 1px solid #1a3a38;
  --tbl-shadow: 0 4px 20px rgba(0,0,0,.25);
  --tbl-radius: 10px;
  --tbl-bg: #0c1f1f;
  --tbl-thead-bg: #143432;
  --tbl-thead-color: #7eddd2;
  --tbl-th-size: 11px;
  --tbl-th-tracking: 1.2px;
  --tbl-thead-border: 2px solid #1a4a46;
  --tbl-th-pad: 14px 18px;
  --tbl-td-pad: 13px 18px;
  --tbl-row-border: 1px solid #163836;
  --tbl-hover-bg: #122c2a;
  --tbl-td-color: #d0ece8;
  --tbl-caption-color: #5eead4;
  --tbl-sticky-bg: #0c1f1f;
  --tbl-stripe-bg: rgba(20, 52, 50, 0.35);
}
.latency-table {
  font-family: 'Courier New', 'JetBrains Mono', monospace;
  font-size: 13px;
}
/* Provider column */
.latency-table tbody td:first-child,
.latency-table tbody th[scope="row"] {
  font-weight: 700;
  color: #b8e8e0;
}
/* Alternating rows */
.latency-table tbody tr:nth-child(even) {
  background: rgba(20, 52, 50, 0.35);
}
.latency-table tbody tr:nth-child(even):hover {
  background: #122c2a;
}
/* Speed tiers — higher contrast */
.latency-table .ms-fast { color: #5ef0b0; font-weight: 700; }
.latency-table .ms-ok   { color: #fdd663; }
.latency-table .ms-slow { color: #f28b82; }
/* Location */
.latency-table .loc-cell { color: #c5e8f7; font-weight: 600; }
.latency-table .loc-flag { font-size: 18px; margin-right: 6px; vertical-align: middle; }
/* Ping status dot */
.latency-table .ping-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.latency-table .ping-dot.fast { background: #5ef0b0; box-shadow: 0 0 6px #5ef0b0; }
.latency-table .ping-dot.ok   { background: #fdd663; box-shadow: 0 0 6px #fdd663; }
.latency-table .ping-dot.slow { background: #f28b82; box-shadow: 0 0 6px #f28b82; }

@media (max-width: 768px) {
  .simple-table.latency-table {
    font-size: 12px;
  }
  .simple-table.latency-table th,
  .simple-table.latency-table td { padding: 10px 12px; }
}


/* =============================================================================
   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);
}