/* Custom application styles to supplement Tailwind CSS */

html, body {
  height: 100%; /* Ensure the body takes full height */
  margin: 0; /* Remove default margin */
}

.min-h-full {
  min-width: 80%;
  min-height: 100%;
}

#profile-dropdown {
    display: none; /* Default to hidden */
    transition: opacity 0.3s ease-in-out;
}

#profile-dropdown.hidden {
    display: none; /* Add 'hidden' class for visibility toggle */
    opacity: 0;
}

#profile-dropdown:not(.hidden) {
    display: block; /* Show when 'hidden' class is removed */
    opacity: 1;
}

.js-hidden {                /* only used when JS toggles visibility */
  display: none !important; /* cannot be overridden accidentally   */
}

input[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

button[disabled] {
  cursor: not-allowed;
  background-color: #d1d5db; /* Tailwind gray-400 */
  color: #6b7280; /* Tailwind gray-500 */
}

.icon-container {
  display: inline-flex;
  align-items: center;
  margin-right: 8px; /* Space between icon and text */
}

.icon {
  width: 1em; /* Adjust to match the triangle size */
  height: 1em;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.chevron {
  fill: currentColor; /* Match color with text */
}

button.expanded .chevron {
  transform: rotate(90deg); /* Rotate to indicate expansion */
}

/* Specific styles for category checkboxes and labels */
#categories-list .category-checkbox-label {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 16px !important; /* Space between different subjects */
}

#categories-list .category-checkbox-label {
  margin-right: 10px !important; /* Space between checkbox and subject name */
}

.lecture-content-box {
  max-width: 800px;
  max-height: 600px;
  overflow: auto;
  padding: 15px;
  border: 1px solid #ccc;
  margin: 20px auto;
  background-color: #f9f9f9;
}

/* Responsive Navigation Rules */
/* Custom class to hide desktop navigation by default */
.desktop-nav-hidden {
  display: none;
}

/* Hide desktop navigation on mobile */
@media (max-width: 767px) {
  .desktop-nav,
  .desktop-nav.desktop-nav-hidden,
  .desktop-nav.hidden {
    display: none !important;
  }
  
  /* Also hide all links within desktop navigation on mobile */
  .desktop-nav a,
  .desktop-nav.desktop-nav-hidden a,
  .desktop-nav.hidden a {
    display: none !important;
  }
  
  /* Hide all content within desktop navigation on mobile */
  .desktop-nav *,
  .desktop-nav.desktop-nav-hidden *,
  .desktop-nav.hidden * {
    display: none !important;
  }
}

/* Show desktop navigation on desktop */
@media (min-width: 768px) {
  .desktop-nav {
    display: block !important;
  }
  
  /* Override custom hidden class for desktop navigation on desktop screens */
  .desktop-nav.desktop-nav-hidden {
    display: block !important;
  }
  
  /* Override global hidden class for desktop navigation on desktop screens */
  .desktop-nav.hidden {
    display: block !important;
  }
  
  /* Ensure all content within desktop navigation is visible on desktop */
  .desktop-nav * {
    display: initial !important;
  }
  
  /* Hide mobile hamburger button on desktop */
  .flex.md\:hidden {
    display: none !important;
  }
  
  /* Hide mobile menu on desktop */
  #mobile-menu {
    display: none !important;
  }
}

/* Answer Option Strikethrough Styles */
.answer-text.strikethrough {
  text-decoration: line-through;
  color: #9ca3af; /* Tailwind gray-400 */
  opacity: 0.6;
  transition: all 0.2s ease-in-out;
}

.toggle-strikethrough {
  transition: all 0.2s ease-in-out;
}

.toggle-strikethrough:hover {
  background-color: #f3f4f6; /* Tailwind gray-100 */
  color: #ef4444; /* Tailwind red-500 */
  transform: scale(1.1);
}

.toggle-strikethrough.disabled {
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  pointer-events: none;
}

.toggle-strikethrough:focus {
  outline: none !important;
  box-shadow: none !important;
}

.toggle-strikethrough:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}