/*
================================================================================
COMPARISON TABLE MICROSIM - STYLESHEET
================================================================================

This stylesheet provides styling for interactive comparison tables with:
- Star ratings (color-coded 1-5 scale)
- Difficulty/category badges
- Logo + name cells with consistent height
- Pure CSS hover tooltips
- Responsive design

TABLE OF CONTENTS:
==================
1. Reset & Base Styles
2. Container & Layout
3. Table Structure
4. Tooltip System (IMPORTANT - see notes)
5. First Row Tooltip Fix
6. Cell Types (Logo, Rating, Difficulty, Description)
7. Star Rating Colors
8. Difficulty Badges
9. Legend
10. Responsive Styles

================================================================================
LESSONS LEARNED & TIPS
================================================================================

1. ROW HEIGHT ALIGNMENT:
   When using flexbox cells with images (logo + name), rows can shift if images
   have different aspect ratios. SOLUTION: Set explicit height on the cell
   containing the image (e.g., height: 60px on .distro-cell).

2. TOOLTIP Z-INDEX ISSUES:
   Pure CSS tooltips using ::after pseudo-elements can be hidden behind
   elements with their own stacking contexts (like sticky headers or
   elements with position/z-index). Multiple approaches were tried:
   - Setting high z-index on tooltip (9999) - not sufficient alone
   - Setting low z-index on thead (1) - didn't fully work
   - SOLUTION: Show first row tooltip BELOW the row instead of above,
     using tr:first-child selectors to flip the tooltip direction.

3. TOOLTIP BEST PRACTICES:
   - Use data-tooltip attribute on <tr> elements
   - Always prefix tooltip text with item name for context
   - Use ::after for tooltip content, ::before for arrow
   - Set pointer-events: none to prevent hover interference
   - Use visibility + opacity for smooth fade transitions

4. STAR RATINGS:
   - Use Unicode star (★) character for compatibility
   - Separate filled and empty stars into different spans
   - Color-code by rating level (green=5, red=1)
   - Use letter-spacing for better visual appearance

5. OFFICIAL LOGOS:
   - Check official brand guidelines (e.g., fedoraproject.org brand page)
   - vectorlogo.zone is a good source for SVG logos
   - Use 32x32px as standard size, with flex-shrink: 0

================================================================================
*/

/* =============================================================================
   1. RESET & BASE STYLES
   ============================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: aliceblue;
    color: #333;
    line-height: 1.6;
}

/* =============================================================================
   2. CONTAINER & LAYOUT
   ============================================================================= */

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
}

/*
 * IMPORTANT: h2 needs low z-index so tooltips can appear above it.
 * Without this, tooltips from the first row would be hidden behind the title.
 */
h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/*
 * Table wrapper handles horizontal scrolling on small screens.
 * overflow-y: visible allows tooltips to extend outside the wrapper.
 */
.table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* =============================================================================
   3. TABLE STRUCTURE
   ============================================================================= */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

/*
 * thead needs low z-index so tooltips appear above it.
 * This was one attempt to fix tooltip visibility - kept for safety.
 */
.comparison-table thead {
    position: relative;
    z-index: 1;
}

.comparison-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    white-space: nowrap;
}

/*
 * Each row needs position: relative for tooltip positioning.
 * cursor: pointer indicates the row is interactive.
 */
.comparison-table tbody tr {
    position: relative;
    cursor: pointer;
}

.comparison-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* =============================================================================
   4. TOOLTIP SYSTEM
   ============================================================================= */

/*
 * Tooltip content (::after pseudo-element)
 * - Positioned above the row by default (bottom: calc(100% + 10px))
 * - Centered horizontally with left: 50% + transform
 * - High z-index (9999) to appear above most elements
 * - Smooth fade-in with opacity/visibility transition
 */
.comparison-table tbody tr[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 10px);
    background-color: rgba(45, 55, 72, 0.95);
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    width: max-content;
    max-width: 400px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;  /* Prevents tooltip from blocking hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: left;
    font-weight: normal;
}

/*
 * Tooltip arrow (::before pseudo-element)
 * - Uses border trick to create triangle
 * - Positioned just below the tooltip box
 */
.comparison-table tbody tr[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 2px);
    border: 8px solid transparent;
    border-top-color: rgba(45, 55, 72, 0.95);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

/* Show tooltip on hover */
.comparison-table tbody tr[data-tooltip]:hover::after,
.comparison-table tbody tr[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* =============================================================================
   5. FIRST ROW TOOLTIP FIX
   ============================================================================= */

/*
 * CRITICAL: First row tooltip appears BELOW instead of above.
 *
 * Problem: The first row's tooltip would be hidden behind the page title (h2)
 * and table header (thead) due to stacking context issues. Even with high
 * z-index values, the tooltip couldn't reliably appear above these elements.
 *
 * Solution: Flip the tooltip to appear below the first row instead.
 * - Change bottom: to top: for positioning
 * - Flip the arrow direction (border-bottom instead of border-top)
 */
.comparison-table tbody tr:first-child[data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 10px);
}

.comparison-table tbody tr:first-child[data-tooltip]::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: rgba(45, 55, 72, 0.95);
}

/* Ensure hovered row is above siblings for tooltip visibility */
.comparison-table tbody tr:hover {
    z-index: 10000;
}

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

/* =============================================================================
   6. CELL TYPES
   ============================================================================= */

/*
 * Logo + Name cell (.distro-cell)
 *
 * IMPORTANT: height: 60px ensures consistent row heights.
 * Without this, rows can shift/misalign when logos have different aspect ratios
 * or when flexbox calculates different heights for each row.
 */
.distro-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
    height: 60px;  /* CRITICAL: Prevents row height shifting */
}

.distro-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;  /* Prevents logo from shrinking on narrow screens */
}

.distro-name {
    font-weight: 600;
    color: #2c3e50;
}

/* Rating cell - contains star ratings */
.rating {
    white-space: nowrap;
    font-size: 16px;
}

/* Description cell */
.best-for {
    font-size: 13px;
    color: #6b7280;
    min-width: 150px;
}

/* =============================================================================
   7. STAR RATING COLORS
   ============================================================================= */

/*
 * Star ratings use semantic colors:
 * - Green shades for high ratings (good)
 * - Orange/red shades for low ratings (challenging)
 *
 * Usage: <span class="stars stars-4">★★★★</span><span class="stars-empty">★</span>
 */
.stars {
    color: #f59e0b;  /* Default/fallback color */
    letter-spacing: 1px;
}

.stars-5 { color: #22c55e; }  /* Green - Excellent */
.stars-4 { color: #84cc16; }  /* Yellow-green - Very Good */
.stars-3 { color: #f59e0b; }  /* Orange - Good/Average */
.stars-2 { color: #f97316; }  /* Red-orange - Below Average */
.stars-1 { color: #ef4444; }  /* Red - Poor */

.stars-empty {
    color: #d1d5db;  /* Light gray for unfilled stars */
    letter-spacing: 1px;
}

/* =============================================================================
   8. DIFFICULTY BADGES
   ============================================================================= */

/*
 * Difficulty badges use pill-shaped styling with semantic colors.
 * Green = Easy, Yellow = Medium, Red = Hard
 */
.difficulty {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
}

.difficulty.easy {
    background-color: #dcfce7;  /* Light green background */
    color: #166534;             /* Dark green text */
}

.difficulty.medium {
    background-color: #fef3c7;  /* Light yellow background */
    color: #92400e;             /* Dark orange text */
}

.difficulty.hard {
    background-color: #fee2e2;  /* Light red background */
    color: #991b1b;             /* Dark red text */
}

/* =============================================================================
   9. LEGEND
   ============================================================================= */

.legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.legend-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Legend badges use same colors as difficulty badges */
.legend-badge.easy {
    background-color: #dcfce7;
    color: #166534;
}

.legend-badge.medium {
    background-color: #fef3c7;
    color: #92400e;
}

.legend-badge.hard {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Source/attribution text */
.source {
    text-align: center;
    margin-top: 12px;
    font-size: 11px;
    color: #9ca3af;
}

/* =============================================================================
   10. RESPONSIVE STYLES
   ============================================================================= */

@media (max-width: 700px) {
    .container {
        padding: 10px;
    }

    h2 {
        font-size: 1.2rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .distro-logo {
        width: 24px;
        height: 24px;
    }

    .distro-name {
        font-size: 13px;
    }

    .rating {
        font-size: 14px;
    }

    .best-for {
        font-size: 11px;
        min-width: 100px;
    }
}