/*COLOR CODES USED ARE SHOWN BELOW WITH THEIR NAMES

Background colors:

Light Mode: #ffffff (white) 
Dark Mode: #121212 (almost black)

Text colors:

Light Mode: #000000 (black) 
Dark Mode: #ffffff (white)

Link colors:

Light Mode: #007BFF (a medium blue) 
Dark Mode: #66b3ff (a soft light blue for visibility on dark backgrounds)

Hover colors:

Light Mode: #f2f2f2 (light gray for hover on links/buttons) 
Dark Mode: #333333 (darker gray for hover on links/buttons)

Button colors:

Light Mode: #ddd (light gray background for buttons) 
Dark Mode: #2a2a2a (dark gray background for buttons)

Borders: Light Mode: #ccc (light gray border) 
Dark Mode: #444 (darker gray border for contrast)*/

body {
  margin: 0; /* Removes default margin */
  font-family: Arial, sans-serif; /* Sets default font */
  display: flex; /* Enables flexbox for layout */
  flex-direction: column; /* Stacks elements vertically */
}

/* Prevents scrolling when a certain class is added */
body.no-scroll {
  overflow: hidden; /* Disables scrolling */
}

/* Top bar styles */
.top-bar {
  display: flex; /* Uses flexbox layout */
  background: #fff; /* Sets background color */
  align-items: center; /* Centers items vertically */
  border-bottom: 1px solid #ccc; /* Adds border under the top bar */
  padding: 10px 20px; /* Adds padding around the top bar */
  justify-content: space-between; /* Aligns content with space in between */
  width: 100%; /* Full width of the screen */
  z-index: 1000; /* Keeps the top bar above other content */
  top: 0;
}

.top-bar .logo {
  font-weight: bold;
  font-size: 20px;
  margin-left:0;
  flex-shrink:0;
}

/*Search bar styles */
.search-bar {
  flex: 1; /* Takes available space */
  margin: 0 20px; /* Adds margin on left and right */
  display: flex; /* Uses flexbox for layout */
  justify-content: center; /* Centers items horizontally */
}
.search-bar input {
  width: 100%; /* Full width of the search bar */
  max-width: 400px; /* Maximum width for the input */
  padding: 8px 12px; /* Padding inside the input */
  font-size: 14px; /* Font size for input text */
  border: 1px solid #ccc; /* Border around the input */
  border-radius: 4px; /* Rounded corners */
  outline: none; /* Removes outline on focus */
  transition: border 0.3s ease; /* Smooth transition for border color */
}

/* Menu button styles */
#menu-toggle {
  font-size: 24px; /* Sets the font size of the button */
  background: none; /* Removes background */
  border: none; /* Removes border */
  cursor: pointer; /* Adds pointer cursor */
  margin-right: 15px; /* Adds margin to the right */
}

/* Ensures the buttons have the text color based on the theme */
#menu-toggle, #close-sidebar {
  color: var(--text-color); /* Uses variable for text color */
}

/* Dark mode overrides for buttons */
body.dark-mode #menu-toggle, body.dark-mode #close-sidebar {
  color: #fff; /* Changes the text color to white in dark mode */
}

/* Theme toggle button styles */
#theme-toggle {
  margin: 10px; /* Adds margin */
  align-self: center; /* Centers the button horizontally */
  font-size: 14px; /* Font size */
  padding: 8px 12px; /* Padding inside the button */
  background-color: #ddd; /* Light background color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
}

/* Top bar logo styles */
.top-bar .logo {
  color: var(--text-color); /* Uses variable for text color */
  font-weight: bold; /* Makes logo text bold */
  font-size: 20px; /* Font size */
}

/* Transitions for smooth changes between light/dark mode */
.top-bar, #theme-toggle, #menu-toggle, .logo {
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions for background color and text color */
}

/* Dark mode: changes color of logo */
body.dark-mode .top-bar .logo {
  color: #fff; /* White color for logo in dark mode */
}

/* Sidebar styles */
.sidebar {
  position: fixed; /* Fixes sidebar in place */
  top: 50px; /* 50px from the top */
  left: -100vw; /* Moves the sidebar completely offscreen */
  width: 240px; /* Width of the sidebar */
  height: 100vh; /* Full viewport height */
  background-color: #fff; /* Background color */
  transition: left 0.3s ease; /* Smooth transition when sidebar opens/closes */
  padding: 10px; /* Padding inside the sidebar */
  z-index: 10; /* Makes sure the sidebar stays above other content */
  border-right: 1px solid #ccc; /* Border on the right side */
  overflow-y: auto; /* Enables scrolling inside the sidebar */
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stacks items vertically */
  justify-content: space-between; /* Pushes the content to the top and the button to the bottom */
}

/* When the sidebar has the 'open' class, it slides in */
.sidebar.open {
  left: 0; /* Moves sidebar to the visible area */
}

/* Sidebar logo styles */
.sidebar .logo {
  font-weight: bold; /* Makes the logo text bold */
  font-size: 20px; /* Font size */
  margin-bottom: 20px; /* Adds space below the logo */
}

/* Close button styles inside the sidebar */
#close-sidebar {
  font-size: 24px; /* Font size of close button */
  background: none; /* No background */
  border: none; /* No border */
  float: right; /* Floats the button to the right */
  cursor: pointer; /* Pointer cursor on hover */
  margin-bottom: 10px; /* Adds margin at the bottom */
  display: none; /* Hidden by default */
}

/* Show the close button when the sidebar is open */
.sidebar.open #close-sidebar {
  display: block; /* Makes the close button visible when the sidebar is open */
}

/* Navigation links styles */
.nav-links a {
  display: block; /* Makes links block-level */
  padding: 10px 15px; /* Padding inside the links */
  color: var(--text-color); /* Text color based on theme */
  text-decoration: none; /* Removes underline */
  border-radius: 8px; /* Rounded corners */
}

/* Hover effect for links */
.nav-links a:hover {
  background-color: #f2f2f2; /* Light background on hover */
}

/* Section title styles */
.section-title {
  font-size: 14px; /* Font size */
  margin: 15px 0 5px 15px; /* Adds margins around the title */
  font: bold; /* Makes title bold */
  color: #555; /* Dark gray color */
}

/* Main content styles */
.main-content {
  margin-top: 60px; /* Adds top margin */
  padding: 20px; /* Adds padding */
}

/* Overlay that covers the screen when sidebar is open */
.overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Fixes the overlay in place */
  top: 0; /* Position from the top */
  left: 0; /* Position from the left */
  height: 100%; /* Full height */
  width: 100%; /* Full width */
  background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
  z-index: 9; /* Positioned above content, but below sidebar */
}

/* Overlay shown when sidebar is active */
.overlay.active {
  display: block; /* Shows the overlay */
}

/* Theme toggle button container at the bottom */
.theme-toggle-wrapper {
  padding: 10px 15px; /* Adds padding */
  margin-top: auto; /* Ensures the button stays at the bottom */
}

/* Style for theme toggle button */
.theme-toggle-wrapper button {
  width: 100%; /* Button takes full width */
  padding: 10px; /* Padding inside the button */
  background-color: #ddd; /* Light gray background */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
}

/* LIGHT AND DARK MODE THEME */

/* Root default light theme colors */
:root {
  --background-color: #ffffff; /* Light background */
  --text-color: #000000; /* Black text */
  --link-color: #f9f9f9; /* Light link color */
  --link-hover-color: #e0e0e0; /* Hover color for links */
}

/* Apply colors based on the theme */
body {
  background-color: var(--background-color); /* Uses the background color variable */
  color: var(--text-color); /* Uses the text color variable */
}

/* Apply colors for sidebar */
.sidebar {
  background-color: var(--background-color); /* Sidebar background color */
}

/* Hover effect for links */
.nav-links a:hover {
  background-color: var(--link-hover-color); /* Link hover color */
}

/* Dark mode theme overrides */
body.dark-mode {
  --background-color: #121212; /* Dark background */
  --text-color: #ffffff; /* White text */
  --link-hover-color: #333; /* Darker link hover color */
  --link-color: #ccc; /* Light link color */
}

/* Dark mode styles for the main content */
body.dark-mode .main-content {
  background-color: #121212; /* Dark background */
  color: #ffffff; /* White text */
}

/* Dark mode styles for the sidebar */
body.dark-mode .sidebar {
  background-color: #1e1e1e; /* Dark sidebar background */
  color: #ffffff; /* White text */
}

/* Dark mode link color */
body.dark-mode .nav-links a {
  color: #ffffff; /* White text */
  background-color: transparent; /* Transparent background */
}

/* Dark mode link hover effect */
body.dark-mode .nav-links a:hover {
  background-color: #333; /* Dark background on hover */
  color: #ffffff; /* White text */
}

/* Dark mode section title color */
body.dark-mode .section-title {
  color: #cccccc; /* Light gray color */
}

/* Dark mode theme toggle button styles */
body.dark-mode #theme-toggle {
  background-color: #2a2a2a; /* Dark button background */
  color: #fff; /* White text */
}

/* Dark mode theme toggle button hover effect */
body.dark-mode #theme-toggle:hover {
  background-color: #444; /* Lighter background on hover */
}

/* Dark mode top bar styles */
body.dark-mode .top-bar {
  background-color: #1e1e1e; /* Dark top bar background */
  color: #fff; /* White text */
  border-bottom: 1px solid #444; /* Dark border */
}

/* Dark mode theme toggle button wrapper styles */
body.dark-mode .theme-toggle-wrapper {
  border-top: 1px solid #444; /* Dark border for the bottom button wrapper */
}

/* Dark mode button inside theme toggle wrapper */
body.dark-mode .theme-toggle-wrapper button {
  background-color: #2a2a2a; /* Dark button background */
  color: #fff; /* White text */
}

/* Dark mode close sidebar button */
body.dark-mode #menu-toggle, body.dark-mode #close-sidebar {
  color: #fff; /* White text for buttons */
}

/* LIGHT AND DARK MODE THEME ENDS HERE */

/* Responsive design for smaller screens (theme toggle) */
@media screen and (max-width: 600px) {
    #theme-toggle {
        font-size: 12px; /* Smaller font size for mobile */
        padding: 6px 10px; /* Smaller padding */
    }
  .top-bar .logo {
    font-size: 16px;
    margin-left: 0;
}

/* Smooth transition for changes between light/dark modes */
body, .sidebar, .nav-links a, .main-content {
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}