:root {
    /* Default chart and title heights used to compute fixed container height
       container height = chart height + title height + 20px (padding buffer) */
    --chart-base-height: 300px;
    --chart-title-height: 36px;
}
/*---------------------------------------/*
 # COMPONENTS
/*---------------------------------------*/

/* Prevent horizontal overflow on mobile */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure the entire page background respects theme */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    min-height: 100vh;
}

main {
    background-color: var(--bg-primary) !important;
    min-height: 100vh;
}

.c-graphs-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    /* Increased padding by 20px (was 20px) to give extra breathing room and prevent visual overflow */
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.c-quiz-sessions-container {
    min-height: 800px; /* Reserve space to prevent CLS - matches loading state */
    position: relative; /* For absolute positioning of content */
}

.c-graph {
    height: 300px;
    width: 100%;
    position: relative;
    overflow: visible !important;
    /* Fixes cutoff points */
}

.c-graph-card {
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-light);
    overflow: visible;
    /* Allows chart to render properly */
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    min-height: 350px; /* Reserve space to prevent CLS during chart loading */
}

.c-graph-title {
    margin-bottom: 1rem;
    color: var(--primary-color);
    text-align: center;
    min-height: 1.5rem; /* Prevent shift when title loads */
}

.c-quiz-session {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    min-height: 800px; /* Match loading state height to prevent CLS */
    contain: layout; /* Optimize rendering performance */
    content-visibility: auto; /* Optimize off-screen rendering */
}

/* Mobile-specific styles */
@media only screen and (max-width: 768px) {
    .c-graphs-container {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .c-quiz-session {
        width: 100%;
        padding: 1rem;
        margin-bottom: 1.5rem;
        box-sizing: border-box;
    }
    
    .c-quiz-session > div:first-child {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .c-graph-card {
        width: 100%;
        max-width: none;
        padding: 1rem;
    }
    
    .c-graph {
        height: 250px;
        margin-bottom: 0;
    }
    
    .apexcharts-svg {
        overflow: visible !important;
    }
    
    /* Specific styles for the quiz session layout */
    .c-quiz-session h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }
    
    .c-quiz-session > div > div {
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .c-quiz-session h3 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    .tab-button {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
}

/* Dark mode support for all graph components */
.session-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    min-height: 2rem; /* Prevent shift when title loads */
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    min-height: 350px; /* Reserve space for charts to prevent CLS */
}

.gamepad-chart-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    /* Reduced top padding to avoid pushing content and causing top overflow.
       Keep larger left/right and extra bottom padding to prevent bottom overflow. */
    padding: 12px 40px 48px 40px; /* top right bottom left (reduced bottom padding) */
    transition: all 0.3s ease;
    /* Aggressively force a large minimum height so ApexCharts cannot overflow the bottom */
    /* reduced overall buffer so the card isn't excessively large */
    min-height: calc(var(--chart-base-height) + var(--chart-title-height) + 120px) !important;
    /* Let height auto but respect the forced min-height */
    height: auto !important;
    /* Ensure any overflow is visible inside the card (but min-height prevents visual overflow) */
    overflow: visible !important;
}

.chart-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
    min-height: 1.35rem; /* Prevent shift */
}

.chart-placeholder {
    background-color: var(--bg-primary);
    border-radius: 4px;
    /* Let the chart determine its height so it won't overflow its parent */
    min-height: 0;
    /* Fixed chart area height so container sizing is stable (matches --chart-base-height) */
    height: var(--chart-base-height);
    box-sizing: border-box;
    /* Add a little internal bottom spacing so chart elements don't extend past the bottom */
    padding-bottom: 12px;
}

/* Add an invisible spacer after the chart to guarantee extra bottom room */
.chart-placeholder::after {
    content: "";
    display: block;
    height: 40px !important;
    width: 100%;
}

/* Force ApexCharts SVG/canvas/foreignObject to fit within the declared chart height */
.chart-placeholder .apexcharts-canvas,
.chart-placeholder .apexcharts-svg,
.chart-placeholder svg,
.chart-placeholder foreignObject {
    max-height: calc(var(--chart-base-height) + 0px) !important;
    height: calc(var(--chart-base-height) + 0px) !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Mobile overrides: use smaller fixed chart height and recompute container height */
@media only screen and (max-width: 768px) {
    .chart-placeholder {
        height: 220px;
    }
    .gamepad-chart-container {
        height: calc(220px + 36px + 20px);
        padding: 16px; /* reduce padding on mobile */
        padding-bottom: 36px;
    }
}

/* ApexCharts renders SVGs with inline width/height; prefer 100% sizing
   so the charts adapt to their container instead of forcing overflow. */
.chart-placeholder .apexcharts-canvas,
.chart-placeholder .apexcharts-svg,
.chart-placeholder svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
}

/* Ensure tooltip and legend wrappers don't force extra height */
.chart-placeholder .apexcharts-legend,
.chart-placeholder .apexcharts-tooltip {
    max-width: 100% !important;
    box-sizing: border-box;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: var(--text-muted);
    font-style: italic;
}

/* Loading states */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    min-height: 800px; /* Match typical session content height to prevent CLS */
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.loading-state p {
    color: var(--text-secondary);
    margin-top: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    will-change: transform; /* Optimize animation performance */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Session selector */
.session-selector-container {
    background-color: var(--bg-secondary) !important;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

/* Session controls bar */
.session-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.75rem 0;
}
.session-controls .btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    font-weight: 600;
}
.session-controls .btn:hover:not(:disabled) { background: var(--hover-bg); }
.session-controls .btn:active:not(:disabled) { transform: translateY(1px); }
.session-controls .btn:disabled { 
    opacity: 0.6; /* Increased from 0.5 for better contrast */
    cursor: not-allowed; 
    color: var(--text-muted); /* Ensure text is still readable */
}
.session-controls .theme-toggle { margin: 0 auto; }

@media only screen and (max-width: 768px) {
    .session-controls { flex-direction: column; align-items: stretch; }
    .session-controls .btn { width: 100%; }
}

.session-selector-label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.session-selector {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.session-selector:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(74, 134, 232, 0.1);
}

/* Dark mode specific select styling */
[data-theme="dark"] .session-selector {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .session-selector option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Toggle containers for chat/answers */
.toggle-container {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 100px; /* Reserve space to prevent CLS */
}

/* Force dark mode toggle container styling */
[data-theme="dark"] .toggle-container {
    background-color: var(--bg-secondary) !important;
}

.toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-secondary) !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-header:hover {
    background-color: var(--hover-bg) !important;
}

.toggle-title {
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Force dark mode toggle header styling */
[data-theme="dark"] .toggle-header {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .toggle-title {
    color: var(--text-primary) !important;
}

.toggle-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge {
    background-color: var(--primary-color);
    color: var(--text-inverse);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.toggle-icon {
    color: var(--text-secondary);
    font-size: 1rem;
}

.toggle-content {
    padding: 0;
    background-color: var(--bg-secondary);
    /* Single scroll container for chat/answers to avoid nested scrollbars */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Chat display */
.chat-display {
    background-color: var(--bg-primary) !important;
    border-radius: 0;
    padding: 1rem;
    /* Let the parent .toggle-content handle scrolling */
    max-height: none;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.chat-message {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: var(--bg-secondary) !important;
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
    border: 1px solid var(--border-color);
}

.chat-message-user {
    color: var(--primary-color) !important;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.chat-message-content {
    color: var(--text-primary) !important;
    line-height: 1.4;
    font-weight: 500;
}

.chat-message-timestamp {
    color: var(--text-secondary) !important;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Light mode chat styling - ensure good contrast */
[data-theme="light"] .chat-message,
body:not([data-theme="dark"]) .chat-message {
    background-color: #f9fafb !important; /* Light gray background */
    color: #111827 !important; /* Dark text */
    border: 1px solid #d1d5db !important;
}

[data-theme="light"] .chat-message-user,
body:not([data-theme="dark"]) .chat-message-user {
    color: #1e3a8a !important; /* Dark blue for username */
}

[data-theme="light"] .chat-message-content,
body:not([data-theme="dark"]) .chat-message-content {
    color: #111827 !important; /* Very dark text */
}

[data-theme="light"] .chat-message-timestamp,
body:not([data-theme="dark"]) .chat-message-timestamp {
    color: #374151 !important; /* Dark gray for timestamps */
}

/* High contrast dark mode chat styling */
[data-theme="dark"] .chat-message {
    background-color: #374151 !important; /* Darker gray for better contrast */
    color: #e2e8f0 !important; /* Light text */
    border: 1px solid #4b5563 !important;
}

[data-theme="dark"] .chat-message-user {
    color: #60a5fa !important; /* Bright blue for username */
}

[data-theme="dark"] .chat-message-content {
    color: #f8fafc !important; /* Very bright whitish-blueish gray text */
}

[data-theme="dark"] .chat-message-timestamp {
    color: #cbd5e1 !important; /* Medium gray for timestamps */
}

/* Extra aggressive targeting for chat message text */
[data-theme="dark"] .chat-message * {
    color: #f8fafc !important;
}

[data-theme="dark"] .chat-display .chat-message p,
[data-theme="dark"] .chat-display .chat-message div,
[data-theme="dark"] .chat-display .chat-message span {
    color: #f8fafc !important;
}

/* Override any potential inline styles */
[data-theme="dark"] .chat-message [style*="color"] {
    color: #f8fafc !important;
}

/* Player answers display */
.player-answers-display {
    background-color: var(--bg-primary) !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    /* Let the parent .toggle-content handle scrolling */
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Override any conflicting styles that might collapse player answers */
.player-answers-display * {
    box-sizing: border-box !important;
}

/* Remove overly aggressive display overrides to let layout behave naturally */

/* Question groups containing multiple player answers */
.question-group {
    margin-bottom: 1.5rem !important;
    background-color: var(--bg-secondary) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

.question-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
    display: block !important;
    line-height: 1.4 !important;
    min-height: auto !important;
}

/* Individual player answer container */
.player-answer {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    margin: 0.875rem 1rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    min-height: 140px !important;
    height: auto !important;
    display: block !important;
    width: calc(100% - 2rem) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Answer header with player name and points */
.player-answer .answer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 0 !important;
}

.player-answer .player-name {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.player-answer .points {
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* The actual answer text */
.player-answer .answer-text {
    color: var(--text-primary) !important;
    margin-bottom: 0.75rem !important;
    padding: 0.75rem !important;
    background-color: var(--bg-secondary) !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    border: 1px solid var(--border-color) !important;
    line-height: 1.4 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 3em !important;
    height: auto !important;
    word-wrap: break-word !important;
    overflow: visible !important;
}

/* Answer footer with timing info */
.player-answer .answer-footer {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    margin-top: auto !important;
    width: 100% !important;
    min-height: 25px !important;
    height: auto !important;
    padding: 0 !important;
}

.player-answer .answer-footer span {
    display: inline-block !important;
    line-height: 1.4 !important;
    color: var(--text-secondary) !important;
}

/* Legacy styles for old answer format */
.answer-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.answer-question {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.answer-response {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.answer-correct {
    color: var(--success-color);
}

.answer-incorrect {
    color: var(--danger-color);
}

.answer-timestamp {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Error states */
.error-state {
    background-color: var(--bg-secondary);
    border: 1px solid var(--danger-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--danger-color);
}

.no-data-state {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* Ensure containers have proper background */
.c-quiz-sessions-container {
    background-color: var(--bg-primary);
    min-height: 50vh;
    width: 100%;
}

/* Fix any remaining white backgrounds */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Force override any white backgrounds in dark mode */
[data-theme="dark"] .c-quiz-session,
[data-theme="dark"] .session-selector-container,
[data-theme="dark"] .c-graph-card,
[data-theme="dark"] .gamepad-chart-container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .c-graphs-container,
[data-theme="dark"] .c-quiz-sessions-container {
    background-color: var(--bg-primary) !important;
}

/* Override any potential inline styles */
[data-theme="dark"] div[style*="background"],
[data-theme="dark"] div[style*="background-color"] {
    background-color: var(--bg-secondary) !important;
}

/* Dark mode player answers styling */
[data-theme="dark"] .question-group {
    background-color: var(--bg-secondary) !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .question-title {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .player-answer {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .player-name {
    color: #60a5fa !important;
}

[data-theme="dark"] .points {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .answer-text {
    background-color: var(--bg-secondary) !important;
    color: #f8fafc !important;
    border-color: #4b5563 !important;
}

[data-theme="dark"] .answer-footer {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .answer-footer span {
    color: #cbd5e1 !important;
}

/* Player Rankings Styles */
.rankings-container {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rankings-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.rankings-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: relative;
}

.rankings-tab.active {
    background-color: var(--primary-color);
    color: var(--text-inverse);
}

.rankings-tab:hover:not(.active) {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.rankings-content {
    min-height: 400px;
}

.rankings-tab-content {
    display: none;
}

.rankings-tab-content.active {
    display: block;
}

/* Podium Styles for Top 3 */
.rankings-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: end;
}

.podium-position {
    text-align: center;
    position: relative;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.podium-position:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.podium-position.first {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #8b5a00;
    border-color: #ffd700;
    order: 2;
    min-height: 120px;
}

.podium-position.second {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    color: #4a4a4a;
    border-color: #c0c0c0;
    order: 1;
    min-height: 100px;
}

.podium-position.third {
    background: linear-gradient(135deg, #cd7f32 0%, #daa560 100%);
    color: #5d3a1a;
    border-color: #cd7f32;
    order: 3;
    min-height: 80px;
}

.podium-rank {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.podium-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.podium-score {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.podium-accuracy {
    font-size: 0.9rem;
    opacity: 0.9; /* Increased from 0.8 for better contrast */
    font-weight: 500; /* Added weight for better readability */
}

.podium-crown {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Rankings Table */
.rankings-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.rankings-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-primary);
}

.rankings-table th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.rankings-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.rankings-table tbody tr {
    transition: background-color 0.2s ease;
}

.rankings-table tbody tr:hover {
    background-color: var(--hover-bg);
}

.rankings-table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .rankings-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Rank styling */
.rank-cell {
    font-weight: 700;
    font-size: 1.1rem;
}

.rank-cell.rank-1 { color: #ffd700; }
.rank-cell.rank-2 { color: #c0c0c0; }
.rank-cell.rank-3 { color: #cd7f32; }

/* Player name styling */
.player-name-cell {
    font-weight: 600;
}

.player-username {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 400;
}

/* Score styling */
.score-cell {
    font-weight: 700;
    color: var(--primary-color);
}

/* Accuracy badges */
.accuracy-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.accuracy-excellent { 
    background-color: #d4edda; 
    color: #155724; 
}

.accuracy-good { 
    background-color: #fff3cd; 
    color: #856404; 
}

.accuracy-average { 
    background-color: #f8d7da; 
    color: #721c24; 
}

[data-theme="dark"] .accuracy-excellent {
    background-color: #1e4d2b;
    color: #b8e6c1;
}

[data-theme="dark"] .accuracy-good {
    background-color: #4d3d00;
    color: #f5e97d;
}

[data-theme="dark"] .accuracy-average {
    background-color: #4d1e24;
    color: #f7b2ba;
}

/* Empty state for rankings */
.rankings-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.rankings-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7; /* Increased from 0.5 for better visibility */
    color: var(--text-muted); /* Ensure it uses muted color */
}

.rankings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.rankings-loading .spinner {
    margin-bottom: 1rem;
}

/* Stats cards for global rankings */
.rankings-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Responsive design for rankings */
@media only screen and (max-width: 768px) {
    .rankings-container {
        padding: 1rem;
    }
    
    .rankings-podium {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .podium-position.first,
    .podium-position.second,
    .podium-position.third {
        order: unset;
        min-height: 80px;
    }
    
    .rankings-table {
        font-size: 0.875rem;
    }
    
    .rankings-table th,
    .rankings-table td {
        padding: 0.5rem;
    }
    
    .rankings-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

/* Very small devices (phones, 400px and down) */
@media only screen and (max-width: 400px) {
    .c-graph {
        height: 220px;
    }
    
    .c-quiz-session {
        padding: 0.75rem;
    }
    
    .c-quiz-session h2 {
        font-size: 1.1rem;
    }
    
    .c-quiz-session h3 {
        font-size: 0.85rem;
    }
    
    .rankings-tabs {
        flex-direction: column;
    }
    
    .rankings-tab {
        border-radius: 8px;
        margin-bottom: 0.25rem;
    }
    
    .rankings-stats {
        grid-template-columns: 1fr;
    }
}

/* ===== CONTRAST IMPROVEMENTS ===== */
/* Ensure WCAG AA compliance (4.5:1) for both light and dark modes */

/* Light mode contrast improvements */
[data-theme="light"] .player-answer .player-name,
[data-theme="light"] .question-title,
body:not([data-theme="dark"]) .player-answer .player-name,
body:not([data-theme="dark"]) .question-title {
    color: #111827 !important; /* Very dark for maximum contrast */
}

[data-theme="light"] .player-answer .points,
[data-theme="light"] .player-answer .timestamp,
body:not([data-theme="dark"]) .player-answer .points,
body:not([data-theme="dark"]) .player-answer .timestamp {
    color: #1f2937 !important; /* Dark gray for good contrast */
}

[data-theme="light"] .toggle-icon,
[data-theme="light"] .empty-state,
body:not([data-theme="dark"]) .toggle-icon,
body:not([data-theme="dark"]) .empty-state {
    color: #374151 !important; /* Ensure muted text is still readable */
}

/* Dark mode contrast improvements */
[data-theme="dark"] .player-answer .player-name,
[data-theme="dark"] .question-title {
    color: #ffffff !important; /* Pure white for maximum contrast */
}

[data-theme="dark"] .player-answer .points,
[data-theme="dark"] .player-answer .timestamp {
    color: #f1f5f9 !important; /* Very light gray for good contrast */
}

[data-theme="dark"] .toggle-icon,
[data-theme="dark"] .empty-state {
    color: #e2e8f0 !important; /* Bright enough to be clearly visible */
}