/* Reset and ensure full height for html and body */
html, body {
    height: 100%; /* Full height for both */
    margin: 0; /* Remove default margin */
    overflow: hidden; /* Prevent global scrolling */
}

/* Header styles */
#header {
    background-color: #f3f3f3; /* Light mode background */
    color: #1e1e1e; /* Light mode text color */
    padding: 5px 20px; /* Add padding for spacing */
    text-align: left; /* Align text to the left */
    font-family: 'Secular One', serif; /* Use the font */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    position: sticky; /* Make it stick to the top */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it stays above other elements */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
}

#header div {
    flex: 1; /* Allow the title container to take available space */
}

#header img {
    height: 100px; /* Set a specific height for the image */
    margin-left: 20px; /* Add some space to the left of the image */
}

h1 {
    margin: 0;
    font-size: 50px;
}

h4 {
    margin: 0;
    margin-top: -8px;
    font-size: 18.2px;
}

body {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange children vertically */
    font-family: 'Roboto', sans-serif; /* Fallback to sans-serif if the font fails to load */
    background-color: #e9e9e9; /* Default light mode background */
    color: #161616; /* Default light mode text color */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for modes */
    height: 100vh; /* Full height of the viewport */
}

/* Content area */
#content {
    display: flex; /* Use flex for layout */
    flex-grow: 1; /* Allow content to take remaining space */
    overflow: hidden; /* Prevent overflow on the content area */
}

#title-list {
    width: 30%; /* Width for title list */
    background-color: #ffffff;
    border-right: 1px solid #cccccc; /* Light mode border on the right */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    height: 100%; /* Full height of the parent */
}

#search-area {
    position: sticky; /* Makes the search area sticky */
    top: 0; /* Sticks it to the top of the title list */
    background-color: #ffffff; /* Same background to prevent content shift */
    z-index: 10; /* Ensure it stays above other elements */
    padding: 10px; /* Add padding for aesthetics */ 
    margin-bottom: 5px;
}

#question-count {
    position: sticky; /* Make the question count sticky */
    background-color: #ffffff; /* Same background to prevent content shift */
    color: #717171; /* Light mode text color for question count */
    z-index: 10; /* Ensure it stays on top */
    padding: 0; /* Vertical padding */
    padding-top: 5px;
}

#search {
    width: 100%; /* Full width */
    padding: 10px; /* Padding inside the search box */
    margin-bottom: 2px; /* Space below the search box */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Questions container */
#questions {
    flex-grow: 1; /* Allow this area to take the remaining height */
    padding: 10px; /* Padding around the questions */
    padding-top: 0;
    overflow-y: auto; /* Allows vertical scrolling */
    box-sizing: border-box; /* Include padding in height calculation */
}

#titles {
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* No padding */
    margin: 0; /* No margin */
}

#titles li {
    position: relative; /* Position relative to allow absolute positioning of the button */
    padding: 10px 15px;
    margin: 0 0 10px 0;
    margin-top: 0;
    background-color: #ffffff; /* Light background for titles */
    border: 1px solid #e0e0e0; /* Light mode subtle border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover effect */
    cursor: pointer; /* Change cursor to pointer on hover */
    overflow: hidden; /* Prevent child overflow */
}

/* Button styles */
.add-button {
    position: absolute; /* Positioning for the button */
    right: 10px;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Centering adjustment */
    background-color: #007bffbe; /* Button color */
    backdrop-filter: blur(1px);
    color: white; /* Button text color */
    border: none; /* No border */
    border-radius: 50%; /* Circular button */
    width: 30px; /* Width of the button */
    height: 30px; /* Height of the button */
    font-size: 20px; /* Font size for plus sign */
    cursor: pointer; /* Pointer cursor on hover */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.2s ease; /* Smooth transition for appearance and position */
}

/* Show add-button on hover */
#titles li:hover .add-button {
    right: 10px; /* Bring it to its visible position */
    opacity: 1; /* Fade in */
}

/* Add button hover effect */
.add-button:hover {
    background-color: #0163cdbe; /* Slightly darker blue on hover */
}

/* Gradient blur effect on hover */
#titles li:hover {
    background: rgba(255, 255, 255, 0.9); /* Slightly lighten background */
    border-color: #007bff; /* Change border color on hover */
    z-index: 1; /* Bring the text above the gradient blur */
}

.remove-button {
    position: absolute; /* Keep the button positioned within the list item */
    left: 10px; /* Position it off-screen when not hovered */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Center vertically */
    background-color: #dc3546a0; /* Red color */
    backdrop-filter: blur(2px);
    color: white; /* White minus sign */
    border: none; /* Remove border */
    border-radius: 50%; /* Circular shape */
    width: 30px; /* Button size */
    height: 30px; /* Button size */
    font-size: 16px; /* Font size for minus sign */
    font-weight: bold; /* Bold for clarity */
    line-height: 25px; /* Center minus sign in the circle */
    cursor: pointer; /* Pointer cursor */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.2s ease; /* Smooth transition for appearance and position */
}

/* Show button on hover */
#queue-list li:hover .remove-button {
    opacity: 1; /* Fade in */
}

/* Button hover effect */
.remove-button:hover {
    background-color: #d12839a0; /* Slightly darker red on hover */
}

/* Gradient blur effect on hover */
#queue-list li:hover {
    background: rgba(255, 255, 255, 0.9); /* Slightly lighten background */
    border-color: #007bff; /* Change border color on hover */
    z-index: 1; /* Bring the text above the gradient blur */
}

/* Adjust list items to not overflow */
#titles {
    overflow: hidden; /* Prevent overflow for the list */
}


/* Light mode highlighted state for list items */
#titles li.highlighted {
    background-color: #cce5ff; /* Light blue background for highlight */
    border: 1px solid #007bff; /* Highlight border color */
}

/* Dark mode highlighted state for list items */
body.dark-mode #titles li.highlighted {
    color: #ffffff;
    background-color: #57a8ff; /* Dark mode highlight color */
    border: 1px solid #0a72e0; /* Darker border for highlight */
}

/* Video container */
#video-container {
    font-size: 0;
    width: 70%; /* Width for the video container */
    padding: 20px; /* Padding around the video */
    height: 100%; /* Full height of the parent */
    overflow-y: auto;
}

/* Queue section styles */
#queue-section {
    font-size: medium;
    margin-top: 20px; /* Space above the section */
    margin-bottom: 30px;
    padding: 10px 0px 10px 10px; /* Padding inside the section */
    background-color: #ffffff; /* Light background for the section */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

.queue-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    margin-right: 10px;
}

.clear-queue-button {
    background-color: transparent; /* Light gray background */
    color: #333; /* Dark text */
    border: 1px solid #ccc; /* Light border */
    padding: 6px 10px; /* Adjusted padding */
    cursor: pointer;    
    font-size: 15px;
    font-family: 'Roboto', sans-serif; /* Fallback to sans-serif if the font fails to load */
    font-weight: 500;
    border-radius: 15px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inset shadow */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}

.clear-queue-button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
}

.clear-queue-button:active {
    outline: none; /* Remove the default focus outline */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Darker inset shadow on focus */
}

/* Dark mode styles */
body.dark-mode .clear-queue-button {
    background-color: transparent; /* Keep it transparent for dark mode */
    color: #fff; /* Light text color */
    border: 1px solid #555; /* Darker border for contrast */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inset shadow with lighter color */
}

body.dark-mode .clear-queue-button:hover {
    background-color: rgba(30, 30, 30, 0.1); /* Slightly more visible hover effect */
}

body.dark-mode .clear-queue-button:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); /* Lighter inset shadow on focus */
}

#now-playing {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between title and remove button */
    align-items: center; /* Center vertically */
    padding: 8px; /* Padding inside each item */
    margin: 5px 10px 5px 0; /* Margin between items */
    background-color: #f8f9fa; /* Light background for items */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth hover effect */
}

#now-playing.highlight {
    background-color: #cce5ff; /* Light blue background for highlight */
    border: 1px solid #007bff; /* Highlight border color */
}

/* Queue title styles */
#queue-section h3 {
    margin: 0; /* Space below the title */
    font-size: 22px; /* Font size for title */
    color: #007bff; /* Title color */
}

/* Queue list styles */
#queue-list {
    list-style-type: ">"; /* Remove bullet points */
    padding: 0px 10px 0px 0px; /* No padding */
    margin: 0px; /* No margin */
    overflow-y: auto; /* Allow vertical scrolling if needed */
    max-height: 200px; /* Limit height of queue list */
}

/* Queue item styles */
#queue-list li {
    display: flex; /* Use flexbox for layout */
    position: relative;
    justify-content: space-between; /* Space between title and remove button */
    align-items: center; /* Center vertically */
    padding: 8px; /* Padding inside each item */
    margin: 5px 0; /* Margin between items */
    background-color: #f8f9fa; /* Light background for items */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth hover effect */
    cursor: pointer;
}

/* Hover effect for queue items */
#queue-list li:hover {
    background-color: #e2e6ea; /* Slightly darker background on hover */
}

/* Optionally, add padding at the bottom of the queue list */
#queue-list::after {
    content: ""; /* Ensure there's an extra space */
    display: block;
    height: 10px; /* Adjust height as needed for padding */
}

#video-container #player {
    width: 100%; /* Full width for the player */
    height: 400px; /* Fixed height for the video */
}

/* Options container */
#options {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 0px; /* Space above the options */
    margin-bottom: 20px;
    padding: 7px; /* Padding for aesthetics */
    background-color: #ffffff; /* Light background for options area */
    border: 1px solid #ffffff; /* Light mode subtle border */
    border-radius: 0px 0px 10px 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    font-size: medium;
}

/* Individual option groups */
#options div {
    margin-bottom: 0px; /* Space between option groups */
    padding: 0 7px;
}

/* Labels for options */
#options label {
    font-weight: 600; /* Bold for better visibility */
    display: inline-block; /* Ensures the label takes full width */
    margin-bottom: 0px; /* Space below the label */
}

/* Styling for the select dropdown */
#speed {
    padding: 5px; /* Padding inside the dropdown */
    border-radius: 5px; /* Rounded corners */
    border: 1px solid #cccccc; /* Light mode subtle border */
    width: 20%; /* Full width */
    box-sizing: border-box; /* Includes padding in width calculation */
    transition: border 0.3s; /* Smooth transition for border color */
}

/* Change border color on focus for select dropdown */
#speed:focus {
    border-color: #007bff; /* Change border color when focused */
    outline: none; /* Remove default outline */
}

/* Styling for the checkbox labels */
#options input[type="checkbox"] {
    margin-right: 5px; /* Space between checkbox and label */
    margin-left: 10px;
}

/* Queue section dark mode */
body.dark-mode #queue-section {
    background-color: #3a3a3a; /* Dark mode background */
    border: 1px solid #666; /* Dark mode border */
    color: #f4f4f4; /* Dark mode text color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

/* Now-playing item dark mode */
body.dark-mode #now-playing {
    background-color: #4a4a4a; /* Dark background for now-playing item */
    border: 1px solid #666; /* Darker border in dark mode */
    color: #f4f4f4; /* Dark mode text color */
}

body.dark-mode #now-playing.highlight {
    background-color: #57a8ff; /* Dark mode highlight color */
    border: 1px solid #0a72e0; /* Darker border for highlight */
}

/* Queue list item dark mode */
body.dark-mode #queue-list li {
    background-color: #4a4a4a; /* Dark background for queue items */
    border: 1px solid #666; /* Darker border in dark mode */
    color: #f4f4f4; /* Dark mode text color */
}

body.dark-mode #queue-list li:hover {
    background-color: #555; /* Slightly darker on hover in dark mode */
}

/* Queue section title dark mode */
body.dark-mode #queue-section h3 {
    color: #57a8ff; /* Dark mode title color */
}

/* Dark mode styles */
body.dark-mode {
    background-color: #2e2e2e; /* Dark mode background */
    color: #f4f4f4; /* Dark mode text color */
}

/* Header dark mode styles */
body.dark-mode #header {
    background-color: #3a3a3a; /* Dark mode header background */
    color: #f4f4f4; /* Dark mode header text color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

/* Dark mode header image */
body.dark-mode #header img {
    filter: brightness(0) invert(1); /* White fill effect for the logo */
}

body.dark-mode #title-list {
    border-right: 1px solid #555; /* Darker border in dark mode */
    background-color: #3a3a3a; /* Dark mode background for title list */
}

body.dark-mode #search-area {
    background-color: #3a3a3a; /* Dark mode background for search area */
}

body.dark-mode #question-count {
    background-color: #3a3a3a; /* Dark mode background for question count */
    color: #b0b0b0; /* Dark mode text color for question count */
}

body.dark-mode #search {
    background-color: #444; /* Dark mode background for search box */
    color: #f4f4f4; /* Dark mode text color for search box */
    border: 1px solid #666; /* Dark mode border */
}

body.dark-mode #questions {
    background-color: #3a3a3a; /* Dark mode background for questions */
}

body.dark-mode #titles li {
    background-color: #4a4a4a; /* Dark background for titles in dark mode */
    border: 1px solid #666; /* Darker border in dark mode */
}

body.dark-mode #options {
    background-color: #3a3a3a; /* Dark mode background for options */
    border: 1px solid #666; /* Dark mode border */
}

body.dark-mode #options label {
    color: #f4f4f4; /* Dark mode label text color */
}

body.dark-mode #speed {
    background-color: #444; /* Dark mode background for dropdown */
    color: #f4f4f4; /* Dark mode text color for dropdown */
    border: 1px solid #666; /* Dark mode border */
}

/* Dark mode toggle switch */
#mode-toggle {
    cursor: pointer; /* Change cursor to pointer */
}

/* Scrollbar styles */
.scroll::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.scroll::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar thumb color */
    border-radius: 5px; /* Rounded corners for the thumb */
}

.scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb on hover */
}

/* Responsive adjustments */
/* @media (max-width: 768px) {    
    #video-container {
        height: auto;
    }

    #options {
        margin: 10px;
    }
} */