:root {
    --primary-dark-bg: #2e2e2e;
    --dark-text: #2e2e2e;
    --light-text: #fff;
    --accent-green: #5F9F72;
    --accent-green-darker: #4A8C60;
    --light-bg-body: #f8f9fa;
    --card-bg: #fff;
    --button-primary: #007bff; /* Bootstrap primary blue */
    --button-primary-hover: #0056b3;
    --quiz-button-color: #198754; 
    --quiz-button-hover-color: #156d44;
    --dictation-input-bg: #f2f2f2;
    --dictation-input-border: #ccc;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-bg-body);
    color: var(--dark-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 56px; /* Offset for fixed navbar on small screens */
}

/* Navbar Styling */
.navbar {
    background-color: var(--primary-dark-bg) !important;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar-brand {
    font-family: 'Special Elite', cursive;
    color: var(--light-text) !important;
    font-size: 1.8rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.navbar-brand:hover {
    color: var(--accent-green) !important;
}

.navbar-nav .nav-link {
    font-family: 'Special Elite', cursive;
    color: var(--light-text) !important;
    margin-left: 20px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--accent-green) !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dictation Section Specific Styles */
.dictation-section {
    padding: 80px 15px;
    background-color: var(--light-bg-body);
    flex-grow: 1;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--dark-text);
    text-align: center;
    margin-top: 10%;
}

.content-card {
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 30px;
    margin-bottom: 30px;
}

.level-select-btn {
    background-color: var(--accent-green);
    color: var(--light-text);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 5px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.level-select-btn:hover {
    background-color: var(--accent-green-darker);
    transform: translateY(-2px);
}

.level-select-btn.active {
    background-color: var(--primary-dark-bg);
    border: 2px solid var(--accent-green);
}

.file-list-item {
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.file-list-item:hover {
    background-color: #f0f0f0;
}
.file-list-item.active {
    background-color: #e0ffe0; /* Light green highlight */
    font-weight: bold;
    color: cadetblue;
}

/* Custom Player Control Styles */
.audio-player-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* Hide native controls as we're building custom ones */
.audio-player-container audio {
    display: none; /* Hide native controls */
}

#customPlayerControls {
    display: none; /* Hidden by default, shown when audio loads */
    background-color: #f0f0f0; /* Light background for controls */
    padding: 15px;
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    max-width: 600px; /* Constrain width similar to audio tag */
    margin: 0 auto;
    
    /* DESKTOP DEFAULT STYLES */
    display: flex; /* Ensure flex for desktop */
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Distribute items evenly */
    flex-wrap: wrap; /* Allow wrapping on smaller screens (before specific mobile styles kick in) */
    gap: 10px; /* Spacing between elements */
}

/* These new wrappers should NOT be flex containers on desktop */
.player-controls-top-row,
.player-controls-bottom-row {
    display: contents; /* Makes children participate in parent's flex layout */
    /* Alternatively, display: block; if you want them to be blocks, but contents is better for flex parent */
}
/* Explicitly hide the desktop-only elements or adjust their layout */
/* If using display: contents, you don't need to explicitly hide the individual buttons within,
    as the parent's flex rules will apply to them directly.
    If you had elements that should ONLY appear on desktop, you'd handle them here. */


.btn-player-control {
    background-color: transparent; /* Changed to transparent */
    color: var(--dark-text); /* Changed to dark text */
    border: none;
    padding: 8px 12px; /* Smaller padding */
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: none; /* Removed box-shadow */
    cursor: pointer;
    min-width: 40px; /* Smaller min-width for icon buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Larger icons */
}
.btn-player-control:hover {
    background-color: rgba(0,0,0,0.05); /* Light hover effect */
    transform: translateY(-1px);
}
.btn-player-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-player-control.play-pause-btn {
    font-size: 2rem; /* Larger play/pause icon */
}

/* Progress Bar */
.progress-container {
    flex-grow: 1; /* Allows progress bar to take available space */
    position: relative;
    height: 8px; /* Height of the bar */
    background: #d3d3d3;
    border-radius: 5px;
    margin: 0 10px; /* Space around the progress bar */
    cursor: pointer;
}
#progressBar {
    position: absolute;
    height: 100%;
    background: #ff6347; /* Red color for progress */
    border-radius: 5px;
    width: 0%; /* Will be controlled by JS */
}
#progressDot {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #ff6347; /* Red color for dot */
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0%; /* Will be controlled by JS */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none; /* Prevents interference with progress-container click */
}

/* Time Display */
.time-display {
    font-family: 'Courier Prime', monospace;
    font-size: 0.9rem;
    color: var(--dark-text);
    white-space: nowrap; /* Prevent wrapping */
}

/* Volume Slider */
#volumeSlider {
    -webkit-appearance: none;
    width: 80px; /* Slightly smaller width */
    height: 6px; /* Smaller height */
    background: #d3d3d3;
    border-radius: 3px;
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
    vertical-align: middle;
    margin-left: 5px; /* Space from volume button */
}
#volumeSlider:hover {
    opacity: 1;
}
#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; /* Smaller thumb */
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    border: 1px solid var(--light-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#volumeSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    border: 1px solid var(--light-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Playback Speed Control */
.speed-control {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.speed-control button {
    padding: 5px 8px; /* Smaller buttons */
    font-size: 0.9rem;
    background-color: transparent;
    color: var(--dark-text);
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
.speed-control button:hover {
    background-color: #e0e0e0;
}
#speedPercentage {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--dark-text);
    min-width: 45px; /* Ensure space for percentage */
    text-align: center;
}


/* Dictation Input Area */
#dictationInput {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid var(--dictation-input-border);
    border-radius: 8px;
    background-color: var(--dictation-input-bg);
    font-family: 'Courier Prime', monospace; /* Monospace font for dictation */
    font-size: 1.1rem;
    line-height: 1.5;
    resize: vertical; /* Allow vertical resizing */
}
#dictationControls { /* These are for submit/reset buttons only now */
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
#dictationControls button {
    padding: 12px 25px;
    font-size: 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#dictationControls button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.btn-submit {
    background-color: var(--quiz-button-color); /* Using quiz button color for submit */
    border-color: var(--quiz-button-color);
    color: var(--light-text);
}
.btn-submit:hover {
    background-color: var(--quiz-button-hover-color);
    border-color: var(--quiz-button-hover-color);
}
.btn-reset {
    background-color: #6c757d; /* Grey for reset */
    border-color: #6c757d;
    color: var(--light-text);
}
.btn-reset:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Feedback / Results Area */
#dictationFeedback {
    margin-top: 30px;
    padding: 20px;
    border-radius: 15px;
    background-color: #e6f7ff; /* Light blue background for results */
    border: 1px solid #b3e0ff;
    display: none; /* Hidden by default */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#dictationFeedback h4 {
    font-family: 'Playfair Display', serif;
    color: var(--dark-text);
    margin-bottom: 15px;
}
.feedback-line {
    font-family: 'Courier Prime', monospace;
    font-size: 1.05rem;
    line-height: 1.8;
    word-wrap: break-word; /* Ensure long words wrap */
}
.correct-word {
    color: var(--quiz-button-color);
    font-weight: bold;
}
.incorrect-word {
    color: #dc3545; /* Bootstrap danger red */
    text-decoration: underline;
    font-weight: bold;
}
.score-display {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--dark-text);
    margin-top: 20px;
}
.score-display .percentage {
    color: var(--accent-green);
    font-size: 1.8rem;
}
.score-display .icon {
    font-size: 2rem;
    margin-right: 10px;
    vertical-align: middle;
}

/* Footer Styling */
.footer {
    background-color: var(--primary-dark-bg);
    color: var(--light-text);
    padding: 20px 0;
    text-align: center;
    font-size: 0.8rem;
    margin-top: auto;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.footer p {
    margin-bottom: 5px;
}

.footer .social-icons a {
    color: var(--light-text);
    font-size: 1.2rem;
    margin: 0 8px;
    transition: color 0.3s ease;
}

.footer .social-icons a:hover {
    color: var(--accent-green);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) { /* Adjust breakpoint for player controls (e.g., tablet landscape and smaller) */
    .dictation-section {
        padding: 60px 15px;
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .col-md-4, .col-md-8 { /* Stack columns on smaller screens */
        flex: 0 0 100%;
        max-width: 100%;
    }
    #customPlayerControls {
        flex-direction: column; /* Stack the main rows vertically */
        align-items: center; /* Center the stacked rows */
        gap: 15px; /* More space between the stacked rows */
        padding: 15px 10px; /* Adjust padding for smaller screens */
    }
    /* Children of customPlayerControls are now the new rows and time/progress */
    #customPlayerControls > * { 
        width: 100%; /* Make each row/element take full width */
        display: flex; /* Make them flex containers themselves */
        justify-content: center; /* Center content within these rows */
        align-items: center;
        gap: 8px; /* Smaller gap within the sub-rows */
    }

    .player-controls-top-row,
    .player-controls-bottom-row {
        /* On mobile, these should be flex containers */
        display: flex; 
        flex-wrap: wrap; /* Allow buttons to wrap if needed */
        justify-content: center; /* Center buttons within their row */
    }

    .progress-container {
        margin: 10px 0; /* Vertical margin when stacked */
    }
    #volumeSlider {
        flex-grow: 1; /* Allow volume slider to take available space */
        width: auto; /* Override fixed width from desktop */
    }
    .speed-control {
        gap: 3px; /* Tighter spacing for speed controls */
    }
    .file-list-item {
        font-size: 0.95rem; /* Slightly smaller font for list items */
    }
}
@media (max-width: 767.98px) { /* Tablet portrait and smaller */
    .navbar-brand {
        font-size: 1.5rem;
    }
    .navbar-nav .nav-link {
        margin-left: 0;
        font-size: 1rem;
        text-align: center;
    }
    #customPlayerControls {
        padding: 10px 5px; /* Even less padding on very small screens */
    }
    .player-controls-top-row,
    .player-controls-bottom-row {
        justify-content: space-around; /* Distribute space more evenly for groups of buttons */
    }
}
@media (max-width: 575.98px) { /* Mobile screens */
    body {
        padding-top: 52px; /* Adjust for potentially smaller navbar on very small screens */
    }
    .dictation-section {
        padding: 40px 10px;
    }
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    .content-card {
        padding: 20px;
    }
    .level-select-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
        margin: 3px;
    }
    #dictationControls button {
        width: 100%; /* Full width submit/reset buttons */
        padding: 10px 20px;
        font-size: 1rem;
    }
    #dictationInput {
        min-height: 120px;
        font-size: 1rem;
        padding: 10px;
    }
    .score-display {
        font-size: 1.2rem;
    }
    .score-display .percentage {
        font-size: 1.5rem;
    }
    .score-display .icon {
        font-size: 1.5rem;
    }
    .feedback-line {
        font-size: 0.95rem;
    }
    /* Further adjustments for extremely small screens if needed */
    .btn-player-control {
        padding: 6px 10px; /* Slightly smaller touch targets */
        font-size: 1.3rem; /* Slightly smaller icons */
        min-width: 35px;
    }
    .btn-player-control.play-pause-btn {
        font-size: 1.8rem; /* Maintain relative size for play/pause */
    }
    .time-display {
        font-size: 0.8rem;
    }
}
@media (max-width: 350px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
}