/* Basic Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* --- Dark Mode Variables and Global Styles --- */

:root {
    --bg-primary: #1e1e1e;       /* Dark background */
    --bg-secondary: #252526;     /* Slightly lighter for panels/cards */
    --text-primary: #f0f0f0;     /* Light text color */
    --text-secondary: #aaaaaa;   /* Muted secondary text */
    --sidebar-bg: #333333;       /* Sidebar background */
    --link-hover-bg: #444444;    /* Hover state for links */
    --accent-color: #5d9cec;     /* Blue accent color for contrast */
    --success-bg: #4caf50;       /* Green for success (Submit button, Correct answer) */
    --error-bg: #f44336;         /* Red for errors (Wrong answer) */
    --warning-bg: #ffc107;       /* Amber for warnings (Skipped answers) */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Main Layout using Flexbox (Desktop/Tablet) */
.quiz-container {
    display: flex; 
    max-width: 1200px;
    margin: 20px auto;
    border: 1px solid var(--sidebar-bg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    background-color: var(--bg-secondary);
    min-height: 80vh;
}

/* --- Sidebar Styling --- */
.sidebar {
    width: 250px; 
    background-color: var(--sidebar-bg);
    color: var(--text-primary);
    padding: 20px;
    flex-shrink: 0; 
}

.sidebar h3 {
    margin-bottom: 15px;
    border-bottom: 2px solid var(--link-hover-bg);
    padding-bottom: 10px;
}

#topic-list {
    list-style: none;
}

#topic-list li a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px dotted var(--link-hover-bg);
    transition: background-color 0.3s;
}

#topic-list li a:hover,
#topic-list li a.active {
    background-color: var(--link-hover-bg);
    color: white; 
}

/* NEW: Completion Status Visual */
#topic-list li a.completed {
    color: var(--success-bg); /* Highlight completed topics in green */
    font-weight: bold;
}

/* --- Main Content Styling --- */
.main-content {
    flex-grow: 1; 
    padding: 30px;
}

.main-content h1 {
    color: var(--accent-color);
    margin-bottom: 20px;
}

/* Quiz Card Styling */
.question-card {
    background-color: var(--bg-primary); 
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--link-hover-bg);
    border-left: 5px solid var(--accent-color); 
    border-radius: 4px;
}

/* Mobile-friendly option labels for better tap target */
.question-card .option-label {
    display: flex; /* Use flex to align input and text */
    align-items: center;
    margin: 10px 0;
    padding: 8px; /* Increase padding for tap area */
    border-radius: 4px;
    transition: background-color 0.2s;
    cursor: pointer;
}

/* Add a subtle hover/focus effect to options */
.question-card .option-label:hover {
    background-color: rgba(255, 255, 255, 0.05); 
}

.question-card input[type="radio"] {
    margin-right: 10px;
    /* Increase radio button size for mobile clarity (optional but recommended) */
    transform: scale(1.2); 
}

/* --- BUTTON STYLING --- */

/* Group buttons together for mobile */
#button-group {
    display: flex;
    gap: 10px; /* Space between buttons */
    margin-top: 15px; /* Add some space above the buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on very small screens */
}

/* Submit Button */
button#submit-quiz {
    padding: 10px 20px;
    background-color: var(--success-bg);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    flex-grow: 1; /* Allow buttons to grow */
}

button#submit-quiz:hover {
    background-color: #43a047; 
}

/* Reset Button Styling */
button#reset-score {
    padding: 10px 20px;
    background-color: var(--accent-color); 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    flex-grow: 1; /* Allow buttons to grow */
}

button#reset-score:hover {
    background-color: #4a89d9; 
}

/* --- RESULTS & FEEDBACK STYLING --- */

/* Topic Results Area */
#results-area h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Cumulative Score Area */
#cumulative-score-display {
    padding: 15px;
    background-color: var(--sidebar-bg);
    border-radius: 4px;
    margin-top: 20px;
}


/* JavaScript Applied Feedback */

/* 1. Correct Answer */
.question-card.correct {
    background-color: rgba(76, 175, 80, 0.2); 
    border-left-color: var(--success-bg);
}

/* 2. Wrong Answer */
.question-card.incorrect {
    background-color: rgba(244, 67, 54, 0.2); 
    border-left-color: var(--error-bg);
}

/* 3. Skipped Question */
.question-card.skipped {
    background-color: rgba(255, 193, 7, 0.2); 
    border-left-color: var(--warning-bg);
}

/* Hint text shown for incorrect/skipped answers */
.correct-answer-hint {
    margin-top: 10px;
    padding: 5px;
    background-color: rgba(93, 156, 236, 0.1); 
    color: var(--accent-color);
    border-radius: 3px;
    font-size: 0.9em;
}

/* --- MOBILE RESPONSIVENESS (Media Query) --- */
@media (max-width: 768px) {
    .quiz-container {
        flex-direction: column; /* Stack the sidebar and main content */
        margin: 0; /* Remove side margins for full screen use */
        min-height: 100vh;
        border: none;
        box-shadow: none;
    }

    .sidebar {
        width: 100%; /* Sidebar takes full width */
        padding: 15px; /* Slightly less padding */
        border-bottom: 2px solid var(--accent-color); /* Separator */
    }
    
    /* Make the topic list scrollable horizontally/vertically to prevent huge lists */
    #topic-list {
        display: flex; /* Make links flow horizontally */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 8px; /* Small gap between topic links */
        margin-top: 10px;
    }
    
    #topic-list li {
        flex-basis: 48%; /* Roughly 2 items per row */
    }
    
    #topic-list li a {
        border-bottom: none; 
        border: 1px solid var(--link-hover-bg);
        border-radius: 4px;
        padding: 8px 10px;
        text-align: center;
        font-size: 0.9em;
    }
    
    .main-content {
        padding: 15px; /* Adjust padding for mobile */
    }
    
    .question-card {
        padding: 10px;
    }
    
    .main-content h1 {
        font-size: 1.8em; /* Smaller main heading */
    }
    
    .main-content h2 {
        font-size: 1.4em; /* Smaller quiz heading */
    }
    
    #cumulative-score-display {
        padding: 10px;
    }
    
    #button-group {
        flex-direction: column; /* Stack buttons vertically on small screen */
        gap: 10px;
    }
}