/* 
* NAVIGATION FIX 
* This overrides prompt_optimizer.css navigation styles
* to match the global site navigation
*/

/* Reset the main navigation container */
.nav-container {
  
 
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Fix navigation layout */
.nav-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important; 
  height: 4rem !important;
  padding: 0 1rem !important;
}

/* Show all navigation links properly */
.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-left: 1rem !important;
  margin-right: auto !important;
}

/* Show auth buttons properly */
.auth-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin-left: 1rem !important;
}

/* Fix navigation links appearance */
.nav-link {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.9rem !important;
}

/* Fix dropdown appearance */
.nav-dropdown-menu {
  background: #0D0C1D !important;
  backdrop-filter: blur(15px) !important;
}

/* Mobile menu button position */
@media (max-width: 875px) {
  .mobile-menu-button {
    display: block !important;
    margin-left: auto !important;
  }
  
  .nav-links, .auth-buttons {
    display: none !important;
  }
}

/* Desktop navigation */
@media (min-width: 860px) {
  .mobile-menu-button {
    display: none !important;
  }
  
  .nav-links {
    display: flex !important;
  }
  
  .auth-buttons {
    display: flex !important;
  }
}

/* Reset framework container and items */
.frameworks-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
  max-height: 500px !important;
  overflow-y: auto !important;
  position: static !important;
  z-index: auto !important;
}

.framework-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0.75rem !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.5rem !important;
  padding: 1.25rem !important;
  color: white !important;
  overflow: visible !important;
}

.framework-item h4 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: white !important;
}

.framework-item p {
  margin: 0 !important;
  margin-bottom: 1rem !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.framework-actions {
  text-align: right !important;
}

.apply-framework {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  display: inline-block !important;
}

/* Fix positioning and z-index issues */
.optimize-panel, 
.transform-panel, 
.compare-panel {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  margin-bottom: 1.5rem !important;
}

.frameworks-container {
  position: relative !important;
  z-index: 10 !important;
  max-height: 500px !important;
  overflow-y: auto !important;
  margin-bottom: 2rem !important;
  border: none !important;
}

/* Fix prompt history positioning */
#promptHistoryContainer {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 3rem !important;
  clear: both !important;
}

/* Control column heights */
.main-content > .col-md-6 {
  min-height: 100px !important;
  height: auto !important;
  max-height: none !important;
}

/* Better column layout control */
.main-content {
  display: flex !important;
  flex-wrap: wrap !important;
}

@media (min-width: 768px) {
  .main-content > .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .input-card, .output-card {
    flex-grow: 0 !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: none !important;
  }
  
  .card-body {
    max-height: 500px !important;
    overflow-y: auto !important;
  }
}

/* Make sure prompt history is separate from columns */
#promptHistoryContainer {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  order: 3 !important;
  margin-top: 2rem !important;
  clear: both !important;
  display: block !important;
}