/**
 * Table Styles for Blog Posts
 * ===========================
 * Provides consistent styling for markdown tables with
 * proper borders and center alignment.
 */

/* Base table styles */
.article-content table,
.post-body table,
.blog-article-container table {
  width: 100%;
  margin: 2rem auto;
  border-collapse: collapse;
  background: rgba(34, 34, 34, 0.5);
  border: 1.5px solid #ffd700;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Prevent border-radius from being ignored due to border-collapse */
.article-content table,
.post-body table,
.blog-article-container table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Table header */
.article-content thead,
.post-body thead,
.blog-article-container thead {
  background: rgba(255, 215, 0, 0.1);
}

.article-content th,
.post-body th,
.blog-article-container th {
  padding: 1rem 1.5rem;
  text-align: center;
  font-weight: 700;
  color: #ffd700;
  border-bottom: 2px solid #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9em;
}

/* Table cells */
.article-content td,
.post-body td,
.blog-article-container td {
  padding: 0.875rem 1.5rem;
  text-align: center;
  color: #f5e9c9;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

/* Remove bottom border from last row */
.article-content tr:last-child td,
.post-body tr:last-child td,
.blog-article-container tr:last-child td {
  border-bottom: none;
}

/* Alternating row colors */
.article-content tbody tr:nth-child(even),
.post-body tbody tr:nth-child(even),
.blog-article-container tbody tr:nth-child(even) {
  background: rgba(255, 215, 0, 0.03);
}

/* Hover effect */
.article-content tbody tr:hover,
.post-body tbody tr:hover,
.blog-article-container tbody tr:hover {
  background: rgba(255, 215, 0, 0.08);
  transition: background 0.2s ease;
}

/* First column emphasis (usually parameter names) */
.article-content td:first-child,
.post-body td:first-child,
.blog-article-container td:first-child {
  font-weight: 600;
  color: #ffed4a;
  text-align: left;
  border-right: 1px solid rgba(255, 215, 0, 0.2);
}

/* Border radius for corner cells */
.article-content table tr:first-child th:first-child,
.post-body table tr:first-child th:first-child,
.blog-article-container table tr:first-child th:first-child {
  border-top-left-radius: 11px;
}

.article-content table tr:first-child th:last-child,
.post-body table tr:first-child th:last-child,
.blog-article-container table tr:first-child th:last-child {
  border-top-right-radius: 11px;
}

.article-content table tr:last-child td:first-child,
.post-body table tr:last-child td:first-child,
.blog-article-container table tr:last-child td:first-child {
  border-bottom-left-radius: 11px;
}

.article-content table tr:last-child td:last-child,
.post-body table tr:last-child td:last-child,
.blog-article-container table tr:last-child td:last-child {
  border-bottom-right-radius: 11px;
}

/* Responsive tables */
@media (max-width: 768px) {
  .article-content table,
  .post-body table,
  .blog-article-container table {
    font-size: 0.875rem;
  }
  
  .article-content th,
  .post-body th,
  .blog-article-container th,
  .article-content td,
  .post-body td,
  .blog-article-container td {
    padding: 0.75rem 1rem;
  }
}

/* Ultra-wide tables - horizontal scroll */
.article-content .table-wrapper,
.post-body .table-wrapper,
.blog-article-container .table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 12px;
}

.article-content .table-wrapper table,
.post-body .table-wrapper table,
.blog-article-container .table-wrapper table {
  margin: 0;
}

/* Print styles */
@media print {
  .article-content table,
  .post-body table,
  .blog-article-container table {
    background: white;
    border: 1px solid #999;
    box-shadow: none;
  }
  
  .article-content th,
  .post-body th,
  .blog-article-container th {
    background: #f0f0f0;
    color: #000;
    border-bottom: 2px solid #666;
  }
  
  .article-content td,
  .post-body td,
  .blog-article-container td {
    color: #000;
    border-bottom: 1px solid #ccc;
  }
  
  .article-content td:first-child,
  .post-body td:first-child,
  .blog-article-container td:first-child {
    color: #000;
    font-weight: 600;
  }
}

/* Monospace font for certain values */
.article-content td code,
.post-body td code,
.blog-article-container td code,
.article-content td .mono,
.post-body td .mono,
.blog-article-container td .mono {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: 0.1em;
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  .article-content table,
  .post-body table,
  .blog-article-container table {
    background: rgba(255, 255, 255, 0.9);
    border-color: #b8a048;
  }
  
  .article-content thead,
  .post-body thead,
  .blog-article-container thead {
    background: rgba(184, 160, 72, 0.1);
  }
  
  .article-content th,
  .post-body th,
  .blog-article-container th {
    color: #b8a048;
    border-bottom-color: #b8a048;
  }
  
  .article-content td,
  .post-body td,
  .blog-article-container td {
    color: #333;
    border-bottom-color: rgba(184, 160, 72, 0.2);
  }
  
  .article-content td:first-child,
  .post-body td:first-child,
  .blog-article-container td:first-child {
    color: #8a7835;
    border-right-color: rgba(184, 160, 72, 0.2);
  }
  
  .article-content tbody tr:nth-child(even),
  .post-body tbody tr:nth-child(even),
  .blog-article-container tbody tr:nth-child(even) {
    background: rgba(184, 160, 72, 0.05);
  }
  
  .article-content tbody tr:hover,
  .post-body tbody tr:hover,
  .blog-article-container tbody tr:hover {
    background: rgba(184, 160, 72, 0.15);
  }
}