mcp-quiz-server/public/styles.css

🧠 AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.

/**
 * @moduleName: Custom Theme Styles
 * @version: 2.0.0
 * @since: 2025-07-21
 * @lastUpdated: 2025-07-22
 * @contributors: Jorge Sequeira
 * @description: Custom CSS with theme variables and dark mode support
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Enhanced Answer Selection Styles */
.selection-checkmark {
    animation: checkmark-bounce 0.6s ease-in-out;
}

@keyframes checkmark-bounce {
    0% { 
        transform: scale(0) rotate(0deg); 
        opacity: 0; 
    }
    50% { 
        transform: scale(1.2) rotate(10deg); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
}

/* Continue Button Animations */
.continue-button-container button {
    transform: translateY(0);
    transition: all 0.3s ease;
}

.continue-button-container button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Enhanced Selection Feedback */
.question-block label.border-green-400 {
    transition: all 0.3s ease;
    transform: scale(1.02);
}

/* Immediate Feedback Animation (ISSUE_009_FEEDBACK) */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Answer Option Interactions */
.question-block label {
    position: relative;
    transition: all 0.2s ease;
    border-width: 2px;
}

.question-block label:hover {
    border-color: rgb(99, 102, 241) !important;
    background-color: rgb(238, 242, 255) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.dark .question-block label:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgb(96, 165, 250) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.question-block label:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

/* Radio button enhanced styling */
.question-block input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    transition: all 0.2s ease;
}

.question-block input[type="radio"]:hover {
    transform: scale(1.1);
}

.question-block input[type="radio"]:checked {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Selected option enhancement - default blue styling */
.question-block label:has(input:checked) {
    background-color: rgb(219, 234, 254) !important;
    border-color: rgb(59, 130, 246) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Enhanced green feedback for answer selection - using data attribute for stability */
.question-block label[data-selected-feedback="true"]:has(input:checked) {
    background-color: rgb(240, 253, 244) !important;
    border-color: rgb(74, 222, 128) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.dark .question-block label:has(input:checked) {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgb(59, 130, 246) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Enhanced green feedback for answer selection - dark mode using data attribute */
.dark .question-block label[data-selected-feedback="true"]:has(input:checked) {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgb(74, 222, 128) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Feedback animations */
@keyframes answer-select-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.quiz-option.just-selected {
    animation: answer-select-pulse 0.3s ease-out;
}

/* ISSUE_020: Click-to-Select Answer Cards Styles */
.quiz-answer-card {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    will-change: transform, box-shadow;
}

.quiz-answer-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.05);
}

.quiz-answer-card:active {
    transform: translateY(0) scale(0.98);
}

.quiz-answer-card:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Selected card enhanced styling */
.quiz-answer-card[aria-pressed="true"] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25), 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
    .quiz-answer-card {
        min-height: 48px; /* Ensure minimum touch target size */
        padding: 16px;
    }
    
    .quiz-answer-card:hover {
        transform: none; /* Disable hover animations on touch devices */
    }
    
    .quiz-answer-card:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Answer indicator enhanced animations */
.quiz-answer-card .answer-indicator {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quiz-answer-card[aria-pressed="true"] .answer-indicator {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Focus ring for keyboard navigation */
.quiz-answer-card:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.8);
    outline-offset: 2px;
}

/* Dark mode enhancements for answer cards */
.dark .quiz-answer-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dark .quiz-answer-card[aria-pressed="true"] {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Smooth card entrance animation */
@keyframes card-entrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-answer-card {
    animation: card-entrance 0.4s ease-out;
}

/* Stagger animation for multiple cards */
.quiz-answer-card:nth-child(1) { animation-delay: 0.1s; }
.quiz-answer-card:nth-child(2) { animation-delay: 0.15s; }
.quiz-answer-card:nth-child(3) { animation-delay: 0.2s; }
.quiz-answer-card:nth-child(4) { animation-delay: 0.25s; }
.quiz-answer-card:nth-child(5) { animation-delay: 0.3s; }

/* Submit button enhancement */
#submit-button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

#submit-button:active {
    transform: translateY(0);
}

#submit-button:disabled {
    transform: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CSS Custom Properties for Modern Elegant Theming */
:root {
  /* Light Theme - Clean & Professional */
  --color-bg-primary: 255 255 255;
  --color-bg-secondary: 248 250 252;
  --color-bg-elevated: 255 255 255;
  
  --color-text-primary: 15 23 42;
  --color-text-secondary: 71 85 105;
  --color-text-tertiary: 148 163 184;
  
  --color-border-primary: 226 232 240;
  --color-border-secondary: 241 245 249;
  
  /* Accent Colors - Modern Blue System */
  --color-accent-primary: 59 130 246;    /* #3B82F6 - Primary blue */
  --color-accent-hover: 96 165 250;      /* #60A5FA - Blue-400 hover */
  --color-accent-selected: 99 102 241;   /* #6366F1 - Indigo-500 focus */
  --color-accent-success: 16 185 129;    /* #10B981 - Success green */
  --color-accent-warning: 245 158 11;    /* #F59E0B - Warning amber */
  
  /* Legacy color system for compatibility */
  --color-primary-50: 248 250 252;
  --color-primary-100: 241 245 249;
  --color-primary-200: 226 232 240;
  --color-primary-300: 203 213 225;
  --color-primary-400: 148 163 184;
  --color-primary-500: 100 116 139;
  --color-primary-600: 71 85 105;
  --color-primary-700: 51 65 85;
  --color-primary-800: 30 41 59;
  --color-primary-900: 15 23 42;

  --color-surface-50: 249 250 251;
  --color-surface-100: 243 244 246;
  --color-surface-200: 229 231 235;
  --color-surface-300: 209 213 219;
  --color-surface-400: 156 163 175;
  --color-surface-500: 107 114 128;
  --color-surface-600: 75 85 99;
  --color-surface-700: 55 65 81;
  --color-surface-800: 31 41 55;
  --color-surface-900: 17 24 39;
}

/* Modern Elegant Dark Theme - VS Code Inspired */
.dark {
  /* Dark Theme - Soft Black-Purple with Modern Aesthetics */
  --color-bg-primary: 30 30 47;        /* #1E1E2F - Soft black-purple background */
  --color-bg-secondary: 37 37 57;      /* #252539 - Elevated card/panel background */
  --color-bg-elevated: 37 37 57;       /* #252539 - Modal/dropdown background */
  
  --color-text-primary: 228 228 235;   /* #E4E4EB - Near-white primary text */
  --color-text-secondary: 166 166 186; /* #A6A6BA - Secondary text/labels */
  --color-text-tertiary: 110 110 133;  /* #6E6E85 - Disabled/low priority text */
  
  --color-border-primary: 47 47 71;    /* #2F2F47 - Border/divider lines */
  --color-border-secondary: 37 37 57;  /* #252539 - Subtle borders */
  
  /* Accent Colors - Consistent with light theme */
  --color-accent-primary: 59 130 246;  /* #3B82F6 - Primary blue (unchanged) */
  --color-accent-hover: 96 165 250;    /* #60A5FA - Blue-400 hover */
  --color-accent-selected: 99 102 241; /* #6366F1 - Indigo-500 focus/glow */
  --color-accent-success: 16 185 129;  /* #10B981 - Success green */
  --color-accent-warning: 245 158 11;  /* #F59E0B - Warning amber */
  
  /* Legacy color system - inverted for dark mode */
  --color-surface-50: 30 30 47;        /* Dark background */
  --color-surface-100: 37 37 57;       /* Card background */
  --color-surface-200: 47 47 71;       /* Border color */
  --color-surface-300: 75 85 99;
  --color-surface-400: 107 114 128;
  --color-surface-500: 156 163 175;
  --color-surface-600: 209 213 219;
  --color-surface-700: 229 231 235;
  --color-surface-800: 37 37 57;       /* Elevated surfaces */
  --color-surface-900: 228 228 235;    /* Text on dark backgrounds */
}

/* Theme Variants */
.theme-purple {
  --color-primary-50: 250 245 255;
  --color-primary-100: 243 232 255;
  --color-primary-200: 233 213 255;
  --color-primary-300: 196 181 253;
  --color-primary-400: 168 162 247;
  --color-primary-500: 139 92 246;
  --color-primary-600: 124 58 237;
  --color-primary-700: 109 40 217;
  --color-primary-800: 91 33 182;
  --color-primary-900: 76 29 149;
}

.theme-emerald {
  --color-primary-50: 236 253 245;
  --color-primary-100: 209 250 229;
  --color-primary-200: 167 243 208;
  --color-primary-300: 110 231 183;
  --color-primary-400: 52 211 153;
  --color-primary-500: 16 185 129;
  --color-primary-600: 5 150 105;
  --color-primary-700: 4 120 87;
  --color-primary-800: 6 95 70;
  --color-primary-900: 6 78 59;
}

.theme-rose {
  --color-primary-50: 255 241 242;
  --color-primary-100: 255 228 230;
  --color-primary-200: 254 205 211;
  --color-primary-300: 253 164 175;
  --color-primary-400: 251 113 133;
  --color-primary-500: 244 63 94;
  --color-primary-600: 225 29 72;
  --color-primary-700: 190 18 60;
  --color-primary-800: 159 18 57;
  --color-primary-900: 136 19 55;
}

.theme-orange {
  --color-primary-50: 255 247 237;
  --color-primary-100: 255 237 213;
  --color-primary-200: 254 215 170;
  --color-primary-300: 253 186 116;
  --color-primary-400: 251 146 60;
  --color-primary-500: 249 115 22;
  --color-primary-600: 234 88 12;
  --color-primary-700: 194 65 12;
  --color-primary-800: 154 52 18;
  --color-primary-900: 124 45 18;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Custom component styles */
.quiz-card {
  background: rgb(var(--color-surface-50));
  border-color: rgb(var(--color-surface-200));
  transition: all 0.2s ease;
}

.quiz-card:hover {
  background: rgb(var(--color-primary-50));
  border-color: rgb(var(--color-primary-300));
}

.quiz-card.active {
  background: rgb(var(--color-primary-100));
  border-color: rgb(var(--color-primary-400));
}

.dark .quiz-card {
  background: rgb(var(--color-surface-100));
  border-color: rgb(var(--color-surface-300));
}

.dark .quiz-card:hover {
  background: rgb(var(--color-primary-900) / 0.2);
  border-color: rgb(var(--color-primary-600));
}

.dark .quiz-card.active {
  background: rgb(var(--color-primary-900) / 0.3);
  border-color: rgb(var(--color-primary-500));
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-surface-100));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-surface-400));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-surface-500));
}

/* Theme selector button styles */
.theme-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-btn:hover {
  transform: scale(1.1);
  border-color: rgb(var(--color-surface-400));
}

.theme-btn.active {
  border-color: rgb(var(--color-primary-500));
  box-shadow: 0 0 0 2px rgb(var(--color-primary-200));
}

.theme-blue { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.theme-purple-btn { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.theme-emerald-btn { background: linear-gradient(135deg, #10b981, #059669); }
.theme-rose-btn { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.theme-orange-btn { background: linear-gradient(135deg, #f97316, #ea580c); }

/* Modern Elegant Component Styles */

/* Quiz Cards - Modern Design */
.quiz-card {
  background: rgb(var(--color-bg-elevated));
  border: 1px solid rgb(var(--color-border-primary));
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quiz-card:hover {
  background: rgb(var(--color-bg-secondary));
  border-color: rgb(var(--color-accent-primary));
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.dark .quiz-card {
  background: rgb(var(--color-bg-elevated));
  border-color: rgb(var(--color-border-primary));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .quiz-card:hover {
  background: rgb(var(--color-bg-secondary));
  border-color: rgb(var(--color-accent-primary));
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Modal/Dropdown Modern Styling */
.modal-elegant {
  background: rgb(var(--color-bg-elevated));
  border: 1px solid rgb(var(--color-border-primary));
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(8px);
}

.dark .modal-elegant {
  background: rgb(var(--color-bg-elevated));
  border-color: rgb(var(--color-border-primary));
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Text Color Classes */
.text-primary {
  color: rgb(var(--color-text-primary));
}

.text-secondary {
  color: rgb(var(--color-text-secondary));
}

.text-tertiary {
  color: rgb(var(--color-text-tertiary));
}

/* Button Styles - Modern Elegant */
.btn-primary {
  background: rgb(var(--color-accent-primary));
  color: white;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  background: rgb(var(--color-accent-hover));
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Line clamp utility for quiz descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Navigation Button Styles */
.nav-button {
  color: rgb(var(--color-surface-600));
  background-color: rgb(var(--color-surface-100));
  border: 1px solid rgb(var(--color-surface-300));
}

.nav-button:hover:not(:disabled) {
  color: rgb(var(--color-surface-800));
  background-color: rgb(var(--color-surface-200));
}

.nav-button:disabled {
  color: rgb(var(--color-surface-300));
  background-color: rgb(var(--color-surface-50));
  border-color: rgb(var(--color-surface-200));
}

/* Dark mode navigation buttons */
.dark .nav-button {
  color: rgb(var(--color-surface-400));
  background-color: rgb(var(--color-surface-700));
  border-color: rgb(var(--color-surface-600));
}

.dark .nav-button:hover:not(:disabled) {
  color: rgb(var(--color-surface-200));
  background-color: rgb(var(--color-surface-600));
}

.dark .nav-button:disabled {
  color: rgb(var(--color-surface-600));
  background-color: rgb(var(--color-surface-800));
  border-color: rgb(var(--color-surface-700));
}

.nav-button.disabled-fade {
  animation: fadeToDisabled 0.3s ease-out forwards;
}

.nav-button.enabled-fade {
  animation: fadeToEnabled 0.3s ease-out forwards;
}

/* Navigation Icon Animations */
.nav-icon-container {
  transition: transform 0.2s ease-out;
}

.nav-button:hover:not(:disabled) .nav-icon-container {
  transform: translateX(2px);
}

.prev-button:hover:not(:disabled) .nav-icon-container {
  transform: translateX(-2px);
}

/* Fade animations for disabled states */
@keyframes fadeToDisabled {
  from { 
    opacity: 1; 
    transform: scale(1);
  }
  to { 
    opacity: 0.3; 
    transform: scale(0.95);
  }
}

@keyframes fadeToEnabled {
  from { 
    opacity: 0.3; 
    transform: scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: scale(1);
  }
}

/* Disappear animation for end-of-quiz states */
@keyframes fadeOutDisappear {
  0% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% { 
    opacity: 0; 
    transform: scale(0.8);
    visibility: hidden;
  }
}

.nav-button.disappear {
  animation: fadeOutDisappear 0.5s ease-out forwards;
}

/* Star favorite button animations */
.favorite-btn {
  transition: all 0.2s ease-out;
}

.favorite-btn:hover {
  transform: scale(1.1);
}

.favorite-btn.favorited {
  animation: starPulse 0.4s ease-out;
}

@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Sidebar Toggle Functionality */
.sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

.sidebar.collapsed {
  transform: translateX(-100%);
  width: 0;
  min-width: 0;
  opacity: 0;
}

.sidebar.expanded {
  transform: translateX(0);
  opacity: 1;
}

/* Main content area responsive to sidebar state */
.main-with-sidebar {
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-sidebar-collapsed {
  margin-left: 0;
  max-width: 100%;
}

.main-sidebar-expanded {
  margin-left: 16rem; /* w-64 */
  max-width: calc(100% - 16rem);
}

/* Floating toggle button */
.floating-toggle {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  z-index: 50;
}

.floating-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
}

.floating-toggle.sidebar-expanded {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100px);
}

.floating-toggle.sidebar-collapsed {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Fix overflow issue: Allow main content to scroll when quiz is active */
#main-content:has(#quiz-container) {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Height fix: Ensure quiz content has proper spacing for button visibility */
#quiz-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#quiz-content .flex-1 {
  padding-bottom: 100px; /* Ensure space for fixed submit button area */
  min-height: calc(100vh - 180px); /* Account for header and footer */
}

/* Additional padding for quiz container when fixed submit bar is present */
#quiz-container {
  padding-bottom: 20px; /* Extra padding for better spacing */
}

/* Submit button area should always be visible */
#quiz-content > div:last-child {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid rgb(var(--color-surface-200));
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

.dark #quiz-content > div:last-child {
  background: rgb(var(--color-surface-800));
  border-top-color: rgb(var(--color-surface-700));
}

/* Sidebar toggle button in header */
.sidebar-toggle-btn {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
}

/* Quiz container spacing optimization */
#quiz-container {
  /* Better utilize available space while maintaining readability */
  max-width: none;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Responsive max-width for quiz container based on screen size */
@media (min-width: 768px) {
  #quiz-container {
    max-width: 90%;
  }
}

@media (min-width: 1024px) {
  #quiz-container {
    max-width: 85%;
  }
}

@media (min-width: 1280px) {
  #quiz-container {
    max-width: 80%;
  }
}

.sidebar-toggle-btn:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  transform: rotate(90deg);
}

.sidebar-toggle-btn.collapsed:hover {
  transform: rotate(-90deg);
}

/* Completion celebration animations */
@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Celebration modal animations */
.celebration-enter {
  animation: celebration-appear 0.5s ease-out forwards;
}

@keyframes celebration-appear {
  0% {
    transform: scale(0.8) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Wide mode adjustments when sidebar is expanded */
.wide-mode.sidebar-expanded {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Animation for sidebar toggle icon */
.sidebar-toggle-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-toggle-icon.collapsed {
  transform: rotate(180deg);
}

/* Modal and Dropdown Fixes */
#settings-dropdown, #theme-dropdown {
  z-index: 9999 !important; /* Ensure proper layering above all content */
  background-color: white !important; /* Solid background, no transparency */
  backdrop-filter: none !important; /* Remove any backdrop filter causing transparency */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Dark mode modal fixes */
.dark #settings-dropdown, .dark #theme-dropdown {
  background-color: rgb(31, 41, 55) !important; /* Solid dark background */
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure modal content is always visible */
#settings-dropdown *, #theme-dropdown * {
  z-index: inherit;
  background-color: transparent;
}

/* Modern theme button styles for new simplified system */
.theme-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.theme-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .theme-option:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.theme-option.active {
  border-color: rgb(59, 130, 246);
  background-color: rgba(59, 130, 246, 0.1);
}

.theme-option .theme-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Modal Animations */
@media (max-width: 767px) {
  .modal-content {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .modal-content.show {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .modal-content {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .modal-content.show {
    transform: scale(1);
    opacity: 1;
  }
}

/* Enhanced scrolling for modal content */
.modal-content .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

.modal-content .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.modal-content .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
  border-radius: 3px;
}

.modal-content .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}

/* Dark mode scrollbar */
.dark .modal-content .overflow-y-auto {
  scrollbar-color: rgba(75, 85, 99, 0.3) transparent;
}

.dark .modal-content .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(75, 85, 99, 0.3);
}

.dark .modal-content .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.5);
}

/* Enhanced Status Bar Styles - Modern Elegant */
.quiz-status-bar {
    background: rgb(var(--color-bg-elevated));
    border-bottom: 1px solid rgb(var(--color-border-primary));
    backdrop-filter: blur(8px);
}

.dark .quiz-status-bar {
    background: rgb(var(--color-bg-elevated));
    border-bottom: 1px solid rgb(var(--color-border-primary));
}

/* Progress Bar Animation - Modern Elegant */
#quiz-progress-bar {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgb(var(--color-accent-primary));
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.dark #quiz-progress-bar {
    background: rgb(var(--color-accent-primary));
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Breadcrumb Enhancement */
.breadcrumb-item {
    transition: color 0.2s ease;
}

.breadcrumb-item:hover {
    color: #3b82f6;
}

.dark .breadcrumb-item:hover {
    color: #60a5fa;
}

/* Status Text Animation */
#quiz-progress-text, #quiz-completion {
    transition: all 0.3s ease;
}

/* Pulse animation for progress updates */
@keyframes progress-pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.05);
    }
}

.progress-update {
    animation: progress-pulse 0.6s ease-in-out;
}

/* ============================================
   TOUR SYSTEM STYLES
   ============================================ */

/* Tour Overlay - Creates dark background */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 55;
    transition: all 0.3s ease;
}

.tour-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Tour Spotlight - Highlights specific elements */
.tour-spotlight {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid rgb(59, 130, 246);
    border-radius: 8px;
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.2),
        0 0 20px rgba(59, 130, 246, 0.3),
        0 0 40px rgba(59, 130, 246, 0.1);
    z-index: 56;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.dark .tour-spotlight {
    background: rgba(31, 41, 55, 0.95);
    border-color: rgb(96, 165, 250);
    box-shadow: 
        0 0 0 4px rgba(96, 165, 250, 0.2),
        0 0 20px rgba(96, 165, 250, 0.3),
        0 0 40px rgba(96, 165, 250, 0.1);
}

.tour-spotlight.hidden {
    opacity: 0;
    transform: scale(0.8);
}

/* Highlighted Element Styles */
.tour-highlighted {
    position: relative;
    z-index: 57;
    transition: all 0.3s ease;
}

.tour-highlighted::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, rgb(59, 130, 246), rgb(147, 51, 234));
    border-radius: 8px;
    z-index: -1;
    animation: tour-highlight-pulse 2s ease-in-out infinite;
}

@keyframes tour-highlight-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* Tour Pulse Animation for Elements */
.tour-pulse {
    animation: tour-pulse-animation 1.5s ease-in-out 2;
}

@keyframes tour-pulse-animation {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

/* Tour Modal Specific Styles */
#tour-modal {
    z-index: 60;
}

#tour-modal .modal-content {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark #tour-modal .modal-content {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Tour Progress Bar */
#tour-progress-bar {
    background: linear-gradient(90deg, rgb(59, 130, 246), rgb(147, 51, 234));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

/* Tour Video Player Styles */
#tour-video {
    border-radius: 8px;
    background: rgb(var(--color-surface-900));
}

#video-play-btn {
    border-radius: 8px;
    transition: all 0.2s ease;
}

#video-play-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

#video-play-btn .bg-white {
    transition: all 0.2s ease;
}

#video-play-btn:hover .bg-white {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Tour Button States */
#tour-next-btn:disabled,
#tour-prev-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

#tour-next-btn:not(:disabled):hover,
#tour-prev-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tour Skip Button Hover */
#tour-skip-btn:hover {
    color: rgb(var(--color-surface-700));
    text-decoration: underline;
}

.dark #tour-skip-btn:hover {
    color: rgb(var(--color-surface-300));
}

/* Tour Completion Animation */
.tour-complete {
    animation: tour-complete-celebration 0.8s ease-out;
}

@keyframes tour-complete-celebration {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Tour Navigation Keyboard Hints */
.tour-keyboard-hint {
    opacity: 0.7;
    font-size: 0.75rem;
    color: rgb(var(--color-surface-500));
}

/* Tour Modal Responsive Adjustments */
@media (max-width: 640px) {
    #tour-modal .modal-content {
        max-width: 95vw;
        max-height: 85vh;
        margin: 1rem;
    }
    
    #tour-video {
        aspect-ratio: 16/10; /* Slightly more compact on mobile */
    }
    
    .tour-spotlight {
        border-width: 2px;
        box-shadow: 
            0 0 0 2px rgba(59, 130, 246, 0.2),
            0 0 15px rgba(59, 130, 246, 0.3);
    }
}

/* Tour Progress Dots (alternative visual indicator) */
.tour-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    background-color: rgb(var(--color-surface-300));
}

.tour-progress-dot.active {
    background-color: rgb(59, 130, 246);
    transform: scale(1.2);
}

/* Tour Settings Integration */
.tour-settings-highlight {
    position: relative;
}

.tour-settings-highlight::before {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgb(59, 130, 246);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 10;
    animation: tour-badge-bounce 2s ease-in-out infinite;
}

@keyframes tour-badge-bounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
    .tour-spotlight {
        border-width: 4px;
        border-color: #000;
    }
    
    .dark .tour-spotlight {
        border-color: #fff;
    }
    
    #tour-progress-bar {
        background: #000;
    }
    
    .dark #tour-progress-bar {
        background: #fff;
    }
}

/* ISSUE_019: Navigation visibility in single mode */
.quiz-navigation-bar {
  transition: all 0.3s ease-in-out;
}

.quiz-navigation-bar.hidden-single-mode {
  display: none !important;
}

.quiz-navigation-bar.fade-out-single-mode {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* Single mode specific styles */
.single-question-view .quiz-navigation-bar {
  display: none;
}

/* List mode always shows navigation */
.all-questions-view .quiz-navigation-bar {
  display: block !important;
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tour-overlay,
    .tour-spotlight,
    .tour-highlighted,
    #tour-progress-bar {
        transition: none;
        animation: none;
    }
    
    .tour-pulse,
    .tour-highlight-pulse,
    .tour-complete {
        animation: none;
    }
    
    .quiz-navigation-bar {
        transition: none;
    }
}