/* ==========================================================================
   IV. RANKINGS TAB (`#ranking-analysis-tab`)
   ========================================================================== */

/* Ranking Category Toggle Buttons */
.ranking-category-toggle {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: #FFFFFF;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #F4F4F4;
}

.ranking-toggle-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: #FFFFFF;
    border: 1px solid #3B3B3B;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000000;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ranking-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: #FAFAFA;
}

.ranking-toggle-btn.active {
    background: #6B8E23;
    color: #FFFFFF;
    border-color: #6B8E23;
    box-shadow: none;
}

/* Filter-specific styles removed - using shared filter card component instead */

/* Table container within card */
#new-ranking-analysis-tab .tea-card {
    overflow-x: auto; /* Allow horizontal scroll if needed */
    overflow-y: visible; /* Keep vertical overflow visible */
}

/* Container for dynamically inserted tables */
#rankingTableContainer {
    width: 100%;
    min-height: 400px;
}

/* Direct table styling when not in card */
#new-ranking-analysis-tab > #newRankingAnalysisTable {
    margin-top: var(--spacing-lg);
}

/* Ensure the new table follows same rules */
#newRankingAnalysisTable {
    font-size: 0.95rem;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    width: 100%;
    table-layout: fixed;
}

/* Apply same column widths to new table */
#newRankingAnalysisTable th:first-child { width: 50px; }
#newRankingAnalysisTable th:nth-child(2) { width: 25%; }
#newRankingAnalysisTable th:nth-child(3) { width: 18%; }
#newRankingAnalysisTable th:nth-child(4) { width: 10%; }
#newRankingAnalysisTable th:nth-child(5) { width: 10%; }
#newRankingAnalysisTable th:nth-child(6) { width: 10%; }
#newRankingAnalysisTable th:nth-child(7) { width: 10%; }
#newRankingAnalysisTable th:nth-child(8) { width: 10%; }

/* Allow disorder names to wrap in new table */
#newRankingAnalysisTable td:nth-child(2) {
    word-wrap: break-word;
    white-space: normal;
}

/* Filters Panel for Rankings Tab */
/* Uses shared .filters-panel, .filter-group, .neumorphic-checkbox-group, 
   .neumorphic-input[type="range"] styles from "II. Shared Components/Utilities".
   Specific ID targets for JS population:
   #chapterFilterContainer, #teaScoreRange, #avgSeverityRange, #avgLabilityRange
   and their corresponding value display spans (e.g., #teaScoreValue).
*/

/* Ranking Analysis Table - Enhanced Styles */
/* Base styling from .data-table in "II. Shared Components/Utilities" applies.
   The following are overrides or specific additions for #rankingAnalysisTable.
*/
#rankingAnalysisTable {
    font-size: 0.95rem; /* Slightly smaller font for denser table */
    border-spacing: 0 !important; /* Ensure no space between cells */
    border-collapse: collapse !important; /* Ensure borders are shared */
    width: 100%; /* Ensure table takes full width of container */
    table-layout: fixed; /* Force table to respect width constraints */
}

#rankingAnalysisTable thead {
    /* .data-table thead provides sticky positioning */
}

#rankingAnalysisTable th {
    padding: var(--spacing-lg) var(--spacing-md); /* Vertical padding for readability */
    font-size: 0.85rem; /* Smaller header font */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Mindstate: Wider letter spacing for uppercase */
    font-weight: 600; /* Ensure it overrides default if any */
    white-space: nowrap; /* Prevent headers from wrapping */
    border-bottom: 3px solid #3B3B3B; /* Mindstate: Dark gray instead of primary-lighter */
    /* text-align: left !important; /* Applied via more specific selector below */
}

/* Specific column width examples (can be adjusted or removed if not needed) */
#rankingAnalysisTable th:first-child { /* Rank column */
    width: 50px;
    text-align: center !important;
}
#rankingAnalysisTable th:nth-child(2) { /* Disorder column */
    width: 25%;
    text-align: left !important;
}
#rankingAnalysisTable th:nth-child(3) { /* Chapter column */
    width: 18%;
    text-align: left !important;
}
#rankingAnalysisTable th:nth-child(4) { /* TEA Score */
    width: 10%;
}
#rankingAnalysisTable th:nth-child(5) { /* Coverage */
    width: 10%;
}
#rankingAnalysisTable th:nth-child(6) { /* Avg Severity */
    width: 10%;
}
#rankingAnalysisTable th:nth-child(7) { /* Avg Lability */
    width: 10%;
}
#rankingAnalysisTable th:nth-child(8) { /* Total Symptoms */
    width: 10%;
}

/* Center align numeric/specific column headers */
#rankingAnalysisTable thead > tr > th:nth-child(4), /* TEA Score */
#rankingAnalysisTable thead > tr > th:nth-child(5), /* Coverage */
#rankingAnalysisTable thead > tr > th:nth-child(6), /* Avg Severity */
#rankingAnalysisTable thead > tr > th:nth-child(7), /* Avg Lability */
#rankingAnalysisTable thead > tr > th:nth-child(8)  /* Total Symptoms */ {
    text-align: center !important;
}


#rankingAnalysisTable td {
    padding: var(--spacing-lg) var(--spacing-md); /* Match th padding */
    vertical-align: middle;
    border-bottom: 1px solid #F4F4F4; /* Mindstate: Light gray instead of color-bg-light */
}

/* Specific cell styling */
#rankingAnalysisTable td:first-child { /* Rank cell */
    text-align: center !important;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #3B3B3B; /* Mindstate: Dark gray */
}

#rankingAnalysisTable td:nth-child(2) { /* Disorder Name cell */
    font-weight: 500;
    color: #000000; /* Mindstate: Pure black */
    line-height: 1.4; /* For potentially longer names */
    text-align: left !important;
    word-wrap: break-word; /* Allow long disorder names to wrap */
    white-space: normal; /* Allow text wrapping */
}

#rankingAnalysisTable td:nth-child(3) { /* Chapter cell */
    font-size: 0.85rem; /* Consistent with badge */
    text-align: left !important;
}

/* Center align numeric/specific column data cells */
#rankingAnalysisTable tbody > tr > td:nth-child(4), /* TEA Score */
#rankingAnalysisTable tbody > tr > td:nth-child(5), /* Coverage */
#rankingAnalysisTable tbody > tr > td:nth-child(6), /* Avg Severity */
#rankingAnalysisTable tbody > tr > td:nth-child(7), /* Avg Lability */
#rankingAnalysisTable tbody > tr > td:nth-child(8)  /* Total Symptoms */ {
    text-align: center !important;
}


/* Row Hover Effects for Ranking Table */
/* Mindstate: Simplified hover states */
#rankingAnalysisTable tbody tr,
#newRankingAnalysisTable tbody tr {
    position: relative;
    overflow: hidden; /* For ::before animation */
}

/* Mindstate: Removed animated highlight - too decorative */
#rankingAnalysisTable tbody tr::before {
    display: none; /* Mindstate: Remove animated gradient */
}

#rankingAnalysisTable tbody tr:hover {
    background: #FAFAFA; /* Mindstate: Very light gray instead of gradient */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
    transform: translateY(-1px); /* Mindstate: Reduced movement, removed scale */
}

#rankingAnalysisTable tbody tr:hover td {
    background: transparent; /* Let row hover background show through */
}

/* Alternating Row Colors for Ranking Table */
/* Mindstate: Simplified alternating rows */
#rankingAnalysisTable tbody tr:nth-child(even) {
    background: #FAFAFA; /* Mindstate: Very light gray instead of gradient */
}
#rankingAnalysisTable tbody tr:nth-child(even):hover { /* Ensure hover overrides alternating color */
    background: #F4F4F4; /* Mindstate: Slightly darker on hover */
}


/* Chapter Separator Row Styling (if used as a full row) */
.chapter-separator {
    /* This class might be applied to a <tr> */
    /* height: 3px; /* If it's a tr, height might not work as expected */
}
.chapter-separator td { /* Styles the <td> within a .chapter-separator row */
    height: 3px !important; /* Force height */
    background: #EBEBEB !important; /* Mindstate: Solid light gray instead of gradient */
    padding: 0 !important;
    border: none !important;
    margin: var(--spacing-md) 0 !important; /* This margin won't work on td, apply to tr if possible */
}
/* If .chapter-separator is a <hr> or <div> between table rows (outside <tbody>), different styling is needed.
   Assuming it's a <tr> with a single <td colspan="all_columns"> for now.
*/


/* Chapter Badge Styling (Used in Chapter column) */
/* Mindstate: Clean badge without neuomorphism */
.chapter-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: #F4F4F4; /* Mindstate: Light gray instead of gradient */
    border-radius: 0; /* Mindstate: Sharp corners */
    font-size: 0.8rem;
    font-weight: 500;
    color: #000000; /* Mindstate: Pure black */
    border: 1px solid #EBEBEB; /* Mindstate: Light border instead of dual shadows */
    box-shadow: none; /* Mindstate: Remove shadow */
    white-space: normal; /* Allow text to wrap if needed */
    line-height: 1.3;
    max-width: 180px; /* Prevent overly wide badges */
    text-align: center; /* Center text within badge */
    text-transform: uppercase; /* Mindstate: Uppercase for labels */
    letter-spacing: 0.05em; /* Mindstate: Wide letter spacing */
}

/* Score Cell Styling (TEA Score column) */
.score-cell { /* Applied to the <td> for TEA Score */
    text-align: center !important; /* Already handled by general td alignment */
    position: relative;
}

.score-value-table { /* The numeric score value */
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 300; /* Mindstate: Lighter weight for numbers */
    display: block; /* To allow margin-bottom */
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing for numbers */
    /* Color will be set by .tea-score-high/medium/low */
}

/* Mindstate: Simplified score bar */
.score-bar-mini { /* The small bar visualization */
    width: 100%; /* Take full width of the cell, or a fixed px value */
    max-width: 80px; /* Max width for the bar */
    height: 4px;
    background: #EBEBEB; /* Mindstate: Light gray instead of gradient */
    border-radius: 0; /* Mindstate: Sharp corners */
    overflow: hidden;
    box-shadow: none; /* Mindstate: Remove inset shadow */
    margin: 0 auto; /* Center the bar if it's not full width */
}

.score-fill-mini { /* The fill of the mini score bar */
    height: 100%;
    /* width will be set by JS */
    transition: width var(--transition-medium) ease;
    position: relative;
    border-radius: 0; /* Mindstate: Sharp corners */
    /* background will be set by .tea-score-high/medium/low */
}

/* TEA Score Color Coding (applied to .score-value-table and parent <td> or <tr>) */
/* Mindstate: Using data visualization colors */
.tea-score-high { color: #6B8E23; } /* Mindstate: Data green */
.tea-score-medium { color: #BDB76B; } /* Mindstate: Data yellow */
.tea-score-low { color: #CD853F; } /* Mindstate: Data orange for warnings */

.tea-score-high .score-fill-mini { background: #6B8E23; } /* Mindstate: Solid color instead of gradient */
.tea-score-medium .score-fill-mini { background: #BDB76B; } /* Mindstate: Solid color */
.tea-score-low .score-fill-mini { background: #CD853F; } /* Mindstate: Solid color */


/* Coverage Cell Styling (Coverage column) */
.coverage-cell {
    text-align: center !important; /* Already handled by general td alignment */
}

.coverage-value {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 300; /* Mindstate: Lighter weight */
    color: #6B8E23; /* Mindstate: Data green instead of primary */
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

.coverage-fraction {
    font-size: 0.75rem;
    color: #8B9187; /* Mindstate: Medium gray */
    display: block; /* Place below the main value */
    margin-top: 2px;
}

/* Severity and Lability Cell Styling (Avg Severity, Avg Lability columns) */
.metric-cell { /* General class for these cells if more styling needed */
    text-align: center !important; /* Already handled */
    position: relative;
}

/* Mindstate: Simplified metric value display */
.metric-value-small { /* The displayed value (e.g., 0.75) */
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 300; /* Mindstate: Lighter weight */
    padding: var(--spacing-xs) var(--spacing-sm);
    /* background set by specific severity/lability classes */
    border-radius: 0; /* Mindstate: Sharp corners */
    display: inline-block; /* To allow padding and rounded corners */
    border: 1px solid #EBEBEB; /* Mindstate: Light border instead of dual shadows */
    box-shadow: none; /* Mindstate: Remove shadow */
    min-width: 50px; /* Ensure a minimum width for visual consistency */
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

/* Severity Color Coding */
/* Mindstate: Simplified colors without gradients */
.severity-high { color: #CD853F; background: #FFF5F0; } /* Mindstate: Data orange with light tint */
.severity-medium { color: #BDB76B; background: #FFFEF0; } /* Mindstate: Data yellow with light tint */
.severity-low { color: #6B8E23; background: #F0F8F0; } /* Mindstate: Data green with light tint */

/* Lability Color Coding */
.lability-high { color: #6B8E23; background: #F0F8F0; } /* High Lability = Green */
.lability-medium { color: #BDB76B; background: #FFFEF0; }
.lability-low { color: #CD853F; background: #FFF5F0; } /* Low Lability = Orange */

/* Total Symptoms Styling (Total Symptoms column) */
.symptom-count-cell {
    text-align: center !important; /* Already handled */
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300; /* Mindstate: Lighter weight */
    font-size: 1rem;
    color: #000000; /* Mindstate: Pure black */
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

/* Disorder name link styling */
.disorder-link {
    color: #000000; /* Mindstate: Pure black */
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast) ease;
    cursor: pointer;
}

.disorder-link:hover {
    color: #6B8E23; /* Mindstate: Data green on hover */
    text-decoration: underline;
}

/*
  Note: Styles previously under `#old-nonexistent-table-id` have been
  merged into `#rankingAnalysisTable` or more generic selectors where appropriate.
  The goal is to use the new ID `#rankingAnalysisTable` for any specific styling
  for this table, relying on shared `.data-table` for base styles.
*/