/* General Styles */
:root {
  --accent-color: #4285f4; /* Default accent color (Blue) */
  --light-bg: #f9f9f9;
  --light-container-bg: #fff;
  --light-card-bg: #fff;
  --light-text: #333;
  --light-secondary-text: #555;
  --light-border: #eee;
  --light-card-border: #ddd;
  --light-input-bg: #fff;
  --light-input-border: #bbb;
  --light-shadow: rgba(0, 0, 0, 0.1);
  --light-header-bg: white;
  --light-header-text: #1a1a1a;
  --light-nav-bg: #fff;
  --light-nav-item: #666;
  --light-filter-btn-bg: #e9ecef;
  --light-filter-btn-text: #495057;
  --light-filter-btn-border: #ced4da;
  --light-upload-status-success-bg: #d4edda;
  --light-upload-status-success-color: #155724;
  --light-upload-status-success-border: #c3e6cb;
  --light-upload-status-error-bg: #f8d7da;
  --light-upload-status-error-color: #721c24;
  --light-upload-status-error-border: #f5c6cb;
  --light-menu-item-border: #eee;
  --light-modal-bg: #fefefe;
  --light-modal-border: #888;
  --light-close-button: #aaa;

  --brand-text-gradient-stop-1: #4285f4;
  --brand-text-gradient-stop-1-rgb: 66, 133, 244;
  --brand-text-gradient-stop-2: #9b72cb;
  --brand-text-gradient-stop-2-rgb: 155, 114, 203;
  --brand-text-gradient-stop-3: #d96570;
  --brand-text-gradient-stop-3-rgb: 217, 101, 112;
  --surface: #fff;
  --surface-rgb: 255, 255, 255;
}

/* Dark Mode Variables */
body.dark-mode {
  --light-bg: #121212;
  --light-container-bg: #1e1e1e;
  --light-card-bg: #2a2a2a;
  --light-text: #e0e0e0;
  --light-secondary-text: #b0b0b0;
  --light-border: #333;
  --light-card-border: #333;
  --light-input-bg: #333;
  --light-input-border: #555;
  --light-shadow: rgba(0, 0, 0, 0.3);
  --light-header-bg: #333;
  --light-header-text: #e0e0e0;
  --light-nav-bg: #1e1e1e;
  --light-nav-item: #b0b0b0;
  --light-filter-btn-bg: #333;
  --light-filter-btn-text: #b0b0b0;
  --light-filter-btn-border: #555;
  --light-upload-status-success-bg: #1f4d2e;
  --light-upload-status-success-color: #a3e0b8;
  --light-upload-status-success-border: #285e3b;
  --light-upload-status-error-bg: #5e2d2f;
  --light-upload-status-error-color: #e0a8a8;
  --light-upload-status-error-border: #723a3d;
  --light-menu-item-border: #333;
  --light-modal-bg: #2a2a2a;
  --light-modal-border: #333;
  --light-close-button: #b0b0b0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: var(--light-bg);
  color: var(--light-text);
  /* Add padding at the bottom for the fixed nav on small screens */
  padding-bottom: 60px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Add transition for dark mode */
  font-size: 16px; /* Default font size, adjustable via JS */
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  max-width: 800px;
  margin: 0 auto; /* Center container */
  background: var(--light-container-bg);
  padding: 20px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--light-shadow);
  /* Adjust min-height considering header and nav */
  min-height: calc(100vh - 60px - 60px);
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Add transition */
}

.container::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" width="900" height="600" version="1.1"><path d="M322 600L90 600L90 514L383 514L383 429L438 429L438 343L188 343L188 257L255 257L255 171L339 171L339 86L295 86L295 0L900 0L900 86L900 86L900 171L900 171L900 257L900 257L900 343L900 343L900 429L900 429L900 514L900 514L900 600L900 600Z" fill="%234facf7"/><path d="M364 600L307 600L307 514L563 514L563 429L348 429L348 343L474 343L474 257L325 257L325 171L509 171L509 86L370 86L370 0L900 0L900 86L900 86L900 171L900 171L900 257L900 257L900 343L900 343L900 429L900 429L900 514L900 514L900 600L900 600Z" fill="%23ffffff"/><path d="M794 600L615 600L615 514L767 514L767 429L618 429L618 343L685 343L685 257L540 257L540 171L628 171L628 86L636 86L636 0L900 0L900 86L900 86L900 171L900 171L900 257L900 257L900 343L900 343L900 429L900 429L900 514L900 514L900 600L900 600Z" fill="%234facf7"/></svg>'),
    var(--light-container-bg);
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.05;
  z-index: 0;
}

.container h1 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 0.5em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add text shadow for readability on background */
}

.container p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px auto;
  font-size: 1.1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Add text shadow */
}

.container > * {
  z-index: 1;
}
/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--light-header-bg);
  color: var(--light-header-text);
  padding: 15px 20px;
  gap: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky; /* Make header sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 4; /* Ensure header is on top */
  transition: background-color 0.3s ease, color 0.3s ease; /* Add transition */
}

.app-header h1 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 700;
  text-align: left;
}
.app-header h1.logo {
  font-weight: 700;
  font-size: 1.8em;
  color: transparent;
  background: -webkit-linear-gradient(
    16deg,
    var(--brand-text-gradient-stop-1) 0,
    var(--brand-text-gradient-stop-2) 9%,
    var(--brand-text-gradient-stop-3) 20%,
    var(--brand-text-gradient-stop-3) 24%,
    var(--brand-text-gradient-stop-2) 35%,
    var(--brand-text-gradient-stop-1) 44%,
    var(--brand-text-gradient-stop-2) 50%,
    var(--brand-text-gradient-stop-3) 56%,
    var(--surface) 75%,
    var(--surface) 100%
  );
  background: linear-gradient(
    74deg,
    var(--brand-text-gradient-stop-1) 0,
    var(--brand-text-gradient-stop-2) 9%,
    var(--brand-text-gradient-stop-3) 20%,
    var(--brand-text-gradient-stop-3) 24%,
    var(--brand-text-gradient-stop-2) 35%,
    var(--brand-text-gradient-stop-1) 44%,
    var(--brand-text-gradient-stop-2) 50%,
    var(--brand-text-gradient-stop-3) 56%,
    var(--surface) 75%,
    var(--surface) 100%
  );

  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-header button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 24px;
  padding: 5px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  cursor: pointer;
  color: var(--light-header-text);
  transition: color 0.3s ease;
}

.app-header button:hover {
  background-color: color-mix(
    in srgb,
    var(--light-card-bg) 30%,
    var(--accent-color)
  );
}

.app-header .hidden {
  display: none !important;
}

/* Sections */
.app-section {
  display: none; /* Hide all sections by default */
  padding-top: 20px; /* Add padding below the header */
}

.app-section.active {
  display: block; /* Show the active section */
}

/* Cards */
.card {
  background: var(--light-card-bg);
  border: 1px solid var(--light-card-border);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition */
}

/* Form Groups */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="file"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
  padding: 10px;
  border: 1px solid var(--light-input-border);
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--light-input-bg);
  color: var(--light-text);
  transition: border-color 0.3s ease, background-color 0.3s ease,
    color 0.3s ease; /* Add transition */
  resize: none;
}
.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* Buttons */
.btn {
  display: inline-block;
  background-color: var(--accent-color); /* Use accent color */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, opacity 0.3s ease; /* Add transition */
  text-align: center;
  text-decoration: none;
}

.btn:hover:not(:disabled) {
  background-color: color-mix(
    in srgb,
    var(--accent-color) 80%,
    black
  ); /* Darken accent color on hover */
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: #6c757d; /* Secondary color */
}

.btn-secondary:hover:not(:disabled) {
  background-color: #545b62; /* Darker secondary on hover */
}

.btn-danger {
  background-color: #dc3545; /* Danger color */
}

.btn-danger:hover:not(:disabled) {
  background-color: #c82333; /* Darker danger on hover */
}

/* Settings Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2000; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  padding-top: 60px; /* Place modal content below header */
}

.modal-content {
  background-color: var(--light-modal-bg);
  margin: 5% auto; /* 5% from the top and centered */
  padding: 20px;
  border: 1px solid var(--light-modal-border);
  width: 90%; /* Responsive width */
  max-width: 500px; /* Max width */
  border-radius: 8px;
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease; /* Add transition */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  color: var(--light-text);
}

.modal-content h3 {
  margin-top: 0;
  border-bottom: 1px solid var(--light-border);
  padding-bottom: 10px;
  margin-bottom: 20px;
  transition: border-color 0.3s ease;
  color: var(--light-text);
}

.close-button {
  color: var(--light-close-button);
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
  color: color-mix(in srgb, var(--light-close-button) 50%, black);
  text-decoration: none;
  cursor: pointer;
}

hr {
  margin: none;
  border: 0;
  border-top: 1px solid var(--light-border);
  width: 100%;
  clear: both;
}

/* --- Loading Overlay --- */

#loadingOverlay {
  position: fixed; /* Fixed position relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Semi-transparent white background */
  display: flex; /* Use flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1000; /* Ensure it's on top of other content */
  transition: opacity 0.3s ease; /* Smooth fade in/out */
  /* Initially hidden by default in HTML style */
}

.loader-content {
  text-align: center; /* Center text and spinner */
  color: var(--accent-color); /* Blue color for spinner and text */
}

.loader-content i {
  margin-bottom: 10px; /* Space below spinner */
}

#loadingMessage {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
}

/* --- Dialog Container --- */

#dialogContainer {
  position: fixed; /* Fixed position relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  display: flex; /* Use flexbox to center dialog box */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1010; /* Ensure it's above loading overlay */
  transition: opacity 0.3s ease; /* Smooth fade in/out */
  /* Initially hidden by default in HTML style */
}

.dialog-box {
  background-color: var(
    --light-card-bg
  ); /* White background for the dialog box */
  padding: 25px;
  border-radius: 8px;
  box-shadow: var(--light-shadow); /* Stronger shadow for dialog */
  max-width: 400px; /* Max width of the dialog */
  width: 90%; /* Responsive width */
  text-align: center; /* Center content */
  opacity: 0; /* Start invisible for animation */
  transform: scale(0.9); /* Start slightly smaller for animation */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
  z-index: 1;
}

/* Class to apply when dialog is shown */
#dialogContainer .dialog-box.visible {
  opacity: 1; /* Fade in */
  transform: scale(1); /* Scale up to normal size */
}

/* Container for action buttons/links */
.action-list {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  gap: 10px; /* Space between buttons */
  margin-bottom: 15px; /* Space below the list */
}

/* Styling for individual action buttons/links */
.action-button {
  display: block; /* Make button/link take full width */
  width: 100%;
  padding: 10px 15px;
  border: 1px solid var(--light-border); /* Light border */
  border-radius: 5px;
  background-color: var(--light-secondary); /* Light background */
  color: var(--light-secondary-text);
  font-size: 1em;
  text-align: left; /* Align text to the left */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.action-button i {
  margin-right: 8px; /* Space between icon and text */
}

.action-button:hover {
  background-color: var(--light-card-bg); /* Slightly darker on hover */
  border-color: var(--light-text);
}

/* Modifier class for destructive actions (e.g., Delete) */
.action-button.text-danger {
  color: #e74c3c; /* Red color for text */
  border-color: #e74c3c; /* Red border */
}

.action-button.text-danger:hover {
  background-color: #e74c3c; /* Red background on hover */
  color: white; /* White text on hover */
}

.dialog-message {
  margin-bottom: 20px;
  font-size: 1em;
  color: var(--light-text);
  line-height: 1.5;
}

.dialog-buttons {
  display: flex; /* Arrange buttons side-by-side */
  justify-content: center; /* Center buttons */
  gap: 10px; /* Space between buttons */
}

.dialog-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.dialog-buttons button:hover {
  opacity: 0.9; /* Slight transparency on hover */
}

/* Style for OK/Confirm button */
.dialog-buttons .btn-ok,
.dialog-buttons .btn-confirm {
  background-color: var(--accent-color); /* Primary blue */
  color: white;
}

/* Style for Cancel button */
.dialog-buttons .btn-cancel {
  background-color: var(--light-close-button); /* Gray */
  color: var(--light-text);
}

/* Style for Info button (if only one button) */
.dialog-buttons .btn-info {
  background-color: var(--accent-color); /* Green */
  color: white;
}

/* --- Toast Notification Container --- */

#toastContainer {
  position: fixed; /* Fixed position relative to the viewport */
  bottom: 20px; /* Position at the bottom */
  right: 20px; /* Position on the right */
  z-index: 1020; /* Ensure it's above dialogs */
  display: flex;
  flex-direction: column; /* Stack toasts vertically */
  gap: 10px; /* Space between toasts */
  max-width: 300px; /* Max width for toasts */
  pointer-events: none; /* Allow clicks to pass through the container */
}

/* Style for individual toast messages */
.toast-message {
  background-color: var(--light-text); /* Dark background */
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  font-size: 0.9em;
  opacity: 0; /* Start invisible for animation */
  transform: translateX(100%); /* Start off-screen to the right */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* Smooth slide/fade in */
  pointer-events: auto; /* Re-enable clicks on the toast itself (if you add a close button) */
}

/* Class to apply when a toast is actively shown */
.toast-message.visible {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide in */
}

/* Class to apply when a toast is fading out */
.toast-message.hiding {
  opacity: 0; /* Fade out */
  transform: translateX(100%); /* Slide back out */
}

/* Modifier classes for different toast types */
.toast-message.toast-success {
  background-color: #28a745; /* Green for success */
}

.toast-message.toast-error {
  background-color: #dc3545; /* Red for error */
}

.toast-message.toast-info {
  background-color: #17a2b8; /* Blue-green for info */
}

/* Responsive adjustments for positioning */
@media (max-width: 600px) {
  #toastContainer {
    bottom: 10px;
    right: 10px;
    max-width: calc(100% - 20px); /* Adjust width on small screens */
  }

  #dialogContainer {
    padding: 10px; /* Add padding around dialog on small screens */
  }
}

/* Dark Mode Specific Overrides */
body.dark-mode .app-header {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
body.dark-mode .fab {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
body.dark-mode .fab-option {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
body.dark-mode .bottom-nav {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
}
body.dark-mode .available-songs-list li.selected {
  background-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

/* Font Size Adjustment (Via JS) */
body.font-size-14px {
  font-size: 14px;
}
body.font-size-15px {
  font-size: 15px;
}
body.font-size-16px {
  font-size: 16px;
}
body.font-size-17px {
  font-size: 17px;
}
body.font-size-18px {
  font-size: 18px;
}
body.font-size-19px {
  font-size: 19px;
}
body.font-size-20px {
  font-size: 20px;
}

@media (min-width: 992px) {
  /* Define default (light mode) colors */
  :root {
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #555;
  }

  /* Override colors for dark mode system preference */
  @media (prefers-color-scheme: dark) {
    :root {
      --scrollbar-track-color: #2c2c2c;
      --scrollbar-thumb-color: #666;
      --scrollbar-thumb-hover-color: #888;
    }
  }

  /* Override colors again if the .light-mode class is *explicitly* set */
  .light-mode {
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #555;
  }

  /* Override colors again if the .dark-mode class is *explicitly* set */
  .dark-mode {
    --scrollbar-track-color: #2c2c2c;
    --scrollbar-thumb-color: #666;
    --scrollbar-thumb-hover-color: #888;
  }

  /* Apply styles using the CSS variables (same as Method 2) */
  ::-webkit-scrollbar {
    width: 10px;
  }

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

  :-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 5px;
  }

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

  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  }
}