/* ============================================================================
   SPECS TABLE - Reusable Specification/Comparison Table
   ============================================================================
   Usage:
   <div class="specs-table-container">
       <table class="specs-table">
           <thead>
               <tr>
                   <th>Specification</th>
                   <th>Model A</th>
                   <th>Model B</th>
               </tr>
           </thead>
           <tbody>
               <tr class="spec-group-header">
                   <td colspan="3">Category Header</td>
               </tr>
               <tr>
                   <td>Spec Name</td>
                   <td>Value A</td>
                   <td class="highlight">Value B (highlighted)</td>
               </tr>
           </tbody>
       </table>
   </div>

   Brand Colors:
   Use wrapper class + scoped CSS overrides for brand-specific column colors:
   .nvidia-specs .specs-table th:nth-child(2) { color: #76b900; }
   ============================================================================ */

/* Table Container - Allows horizontal scroll on mobile */
.specs-table-container {
    overflow-x: auto;
    margin-top: 20px;
}

/* Base Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

/* Table Cells */
.specs-table th,
.specs-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Header Row */
.specs-table th {
    background: rgba(30, 41, 59, 0.8);
    font-weight: 600;
    color: #f1f5f9;
    font-size: 13px;
}

/* Data Cells */
.specs-table td {
    font-size: 13px;
    color: #94a3b8;
}

/* Value Columns (2nd, 3rd, 4th, etc.) */
.specs-table td:not(:first-child) {
    color: #f1f5f9;
    font-weight: 500;
}

/* Highlighted Cell */
.specs-table td.highlight {
    color: #06b6d4;
    font-weight: 600;
}

/* Last Row - No Border */
.specs-table tr:last-child td {
    border-bottom: none;
}

/* Group Header Row */
.spec-group-header td {
    background: rgba(6, 182, 212, 0.08);
    font-weight: 600;
    color: #06b6d4;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   COMPARISON TABLE VARIANT
   ============================================================================ */
.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.comparison-table th {
    background: rgba(30, 41, 59, 0.8);
    font-weight: 600;
    color: #f1f5f9;
    font-size: 13px;
}

.comparison-table td {
    font-size: 13px;
    color: #94a3b8;
}

.comparison-table td:not(:first-child) {
    color: #f1f5f9;
    font-weight: 500;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

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

    .spec-group-header td {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .specs-table th,
    .specs-table td,
    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px;
        font-size: 11px;
    }
}