/* styles.css */
body {
  font-family: "Inter", sans-serif;
  background-color: #263238;
  color: #e0e0e0;
}

.bg-accent {
  background-color: #9ef01a;
}

.text-accent {
  color: #9ef01a;
}

.border-accent {
  border-color: #9ef01a;
}

.card {
  background-color: #304048;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.table-striped tbody tr:nth-child(even) {
  background-color: #34424e;
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-spinner {
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  /* Fixed typo: 'boyfriend' to '50%' */
  border-top: 2px solid #9ef01a;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.glow-hover:hover {
  box-shadow: 0 0 15px rgba(158, 240, 26, 0.5);
}

#ai-chat-modal .download-container select,
#ai-chat-modal .chat-input-container input,
#ai-chat-modal .chat-input-container button {
  font-family: "Inter", sans-serif;
}

#ai-chat-modal .chat-box {
  background-color: #304048;
  border-color: #4b5e6e;
}

#ai-chat-modal .chat-box p {
  color: #e0e0e0;
}

#ai-chat-modal .chat-stats {
  color: #94a3b8;
}

#ai-chat-modal .download-container button,
#ai-chat-modal .chat-input-container button {
  background-color: #9ef01a;
  color: #1e293b;
}

#ai-chat-modal .download-container button:hover,
#ai-chat-modal .chat-input-container button:hover {
  background-color: rgba(158, 240, 26, 0.9);
}

/* Navigation Bar */
nav {
  position: relative;
  /* Make nav the positioned ancestor for #mobile-menu */
}

/* Mobile Menu */
#mobile-menu {
  z-index: 40;
  /* Ensure it appears above cards but below AI chat modal (z-index: 50) */
  background-color: #2d3748;
  /* Slightly different background for distinction */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 100%;
  /* Equivalent to Tailwind's top-full, positions just below the nav */
  left: 0;
  right: 0;
  /* Replace w-full with left: 0 and right: 0 for better control */
  margin: 0;
  /* Remove any default margins */
}

#mobile-menu button {
  width: 100%;
}

/* Responsive Styles */
@media (max-width: 768px) {
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
  }

  #mobile-menu:not(.hidden) {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .chat-input-container {
    flex-direction: column;
  }

  .chat-input-container input,
  .chat-input-container button {
    width: 100%;
    margin-top: 0.5rem;
  }
}

#ai-chat-toggle-mobile {
  display: none;
}

@media (max-width: 768px) {
  #ai-chat-toggle-mobile {
    display: flex;
  }
}

/* News */
.news-card {
  background-color: #304048;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.news-thumbnail {
  height: 160px;
  background-size: cover;
  background-position: center;
}

.news-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
}

.news-source {
  font-size: 0.8rem;
  color: #94a3b8;
}

.news-excerpt {
  font-size: 0.85rem;
  color: #c0c0c0;
  margin-top: 0.5rem;
}

/* Breadcrumb Styling */
.breadcrumb {
  background-color: #1e293b;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #374151;
}

.breadcrumb a {
  color: #9ef01a;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: #bef264;
  text-decoration: underline;
}

.breadcrumb span {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0 0.5rem;
}