/**
 * RateRight Premium Navigation System
 * Modern Marketplace Design Standards
 * Inspired by Upwork, LinkedIn, and premium platforms
 */

:root {
  /* Premium Color Palette */
  --nav-bg: #ffffff;
  --nav-border: #e5e7eb;
  --nav-text: #374151;
  --nav-text-hover: #111827;
  --nav-text-active: #1d4ed8;
  --nav-text-secondary: #6b7280;
  
  /* Brand Colors */
  --brand-primary: #1d4ed8;
  --brand-orange: #ea580c;
  
  /* Notification System */
  --notification-bg: #dc2626;
  --notification-text: #ffffff;
  --notification-dot: #10b981;
  
  /* Shadows & Effects */
  --nav-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --hover-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  
  /* Spacing & Typography */
  --nav-height: 4.5rem;
  --nav-padding-x: 1rem;
  --nav-item-spacing: 0.5rem;
  --nav-font-weight: 500;
  --nav-font-size: 0.9375rem;
  --brand-font-size: 1.375rem;
  --brand-font-weight: 700;
  
  /* Transitions */
  --nav-transition: all 0.15s ease-in-out;
  --nav-transition-slow: all 0.2s ease-in-out;
}

/* Navigation Container */
.navbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  padding: 0;
  min-height: var(--nav-height);
}

.navbar .container {
  max-width: 1200px;
  padding: 0 1.5rem;
}

/* Brand Styling */
.navbar-brand {
  font-weight: var(--brand-font-weight);
  font-size: var(--brand-font-size);
  color: var(--nav-text) !important;
  transition: var(--nav-transition);
  padding: 0;
  margin-right: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.navbar-brand:hover {
  color: var(--brand-primary) !important;
  text-decoration: none;
}

.navbar-brand i {
  color: var(--brand-orange);
  font-size: 1.5rem;
}

/* Navigation Items Layout */
.navbar-nav {
  gap: var(--nav-item-spacing);
  align-items: center;
  height: var(--nav-height);
}

.navbar-nav .nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Primary Navigation Links */
.navbar-nav .nav-link {
  color: var(--nav-text) !important;
  font-weight: var(--nav-font-weight);
  font-size: var(--nav-font-size);
  padding: 0.75rem 1rem !important;
  border-radius: 0.375rem;
  transition: var(--nav-transition);
  border: 1px solid transparent;
  text-decoration: none;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

.navbar-nav .nav-link:hover {
  color: var(--nav-text-hover) !important;
  background-color: #f9fafb;
  border-color: #f3f4f6;
  box-shadow: var(--hover-shadow);
}

.navbar-nav .nav-link:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  color: var(--brand-primary) !important;
}

.navbar-nav .nav-link.active {
  color: var(--nav-text-active) !important;
  background-color: #eff6ff;
  border-color: #dbeafe;
  font-weight: 600;
}

/* Remove all icons from main navigation items */
.navbar-nav .nav-link i {
  display: none;
}

/* Exception: Keep icons only for dropdown toggles to indicate they're dropdowns */
.navbar-nav .dropdown-toggle::after {
  content: "▾";
  border: none;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.15s ease;
  color: var(--nav-text-secondary);
}

.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  color: var(--nav-text-hover);
}

/* Notification Icons - Special Treatment */
.nav-item.notification-item .nav-link {
  position: relative;
  padding: 0.625rem !important;
  min-width: 2.75rem;
  border-radius: 50%;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
}

.nav-item.notification-item .nav-link:hover {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  transform: translateY(-1px);
}

.nav-item.notification-item .nav-link i {
  display: block !important;
  font-size: 1.125rem;
  color: var(--nav-text);
  margin: 0;
}

/* Premium Notification Badges */
.notification-badge {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  background: var(--notification-bg);
  color: var(--notification-text);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nav-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: subtle-pulse 2s ease-in-out infinite;
}

/* Subtle pulse animation for notifications */
@keyframes subtle-pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.9; 
  }
}

/* Hide text labels for notification items */
.nav-item.notification-item .nav-text {
  display: none;
}

/* Premium Dropdown Menus */
.dropdown-menu {
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 0.5rem;
  box-shadow: var(--dropdown-shadow);
  margin-top: 0.5rem;
  padding: 0.5rem;
  min-width: 240px;
  max-width: 280px;
  z-index: 9999 !important;
  position: absolute !important;
}

/* Ensure dropdown container positioning */
.navbar .dropdown {
  position: relative !important;
}

/* Fix navbar dropdown positioning hierarchy */
.navbar-nav .dropdown {
  position: relative !important;
  z-index: 9998 !important;
}

/* Ensure all dropdown menus float above page content */
.navbar-nav .dropdown-menu {
  z-index: 9999 !important;
  position: absolute !important;
}

.dropdown-item {
  padding: 0.75rem 1rem;
  transition: var(--nav-transition);
  border-radius: 0.375rem;
  margin-bottom: 0.125rem;
  color: var(--nav-text);
  font-weight: var(--nav-font-weight);
  font-size: var(--nav-font-size);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-item:hover {
  background-color: #f9fafb;
  color: var(--nav-text-hover);
  transform: translateX(2px);
}

.dropdown-item:focus {
  background-color: #eff6ff;
  color: var(--brand-primary);
  outline: none;
}

.dropdown-item:last-child {
  margin-bottom: 0;
}

/* Dropdown icons - keep but make consistent */
.dropdown-item i {
  width: 1rem;
  text-align: center;
  color: var(--nav-text-secondary);
  font-size: 0.875rem;
}

.dropdown-item:hover i {
  color: var(--nav-text-hover);
}

/* Dropdown dividers */
.dropdown-divider {
  margin: 0.5rem 0;
  border-color: var(--nav-border);
  opacity: 1;
}

/* Special styling for logout and danger items */
.dropdown-item.text-danger {
  color: #dc2626 !important;
}

.dropdown-item.text-danger i {
  color: #dc2626 !important;
}

.dropdown-item.text-danger:hover {
  background-color: #fef2f2;
  color: #b91c1c !important;
}

.dropdown-item.text-danger:hover i {
  color: #b91c1c !important;
}

/* Mobile Navigation */
.navbar-toggler {
  border: 1px solid var(--nav-border);
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: transparent;
}

.navbar-toggler:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px var(--brand-primary);
  outline: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855, 65, 81, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Responsive Behavior - REAL MOBILE NAVIGATION FIX */
@media (max-width: 991.98px) {
  /* BOOTSTRAP-COMPLIANT MOBILE DROPDOWN POSITIONING */
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;         /* Let Bootstrap handle left positioning */
    right: 0 !important;          /* CRITICAL: Align with hamburger on right */
    width: 280px !important;       /* Fixed width for mobile dropdown */
    background: #ffffff !important; /* SOLID BACKGROUND - NO TRANSPARENCY */
    background-color: #ffffff !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--dropdown-shadow) !important;
    z-index: 10000 !important;
    margin: 0 !important;
    opacity: 1 !important;        /* ENSURE NO TRANSPARENCY */
    backdrop-filter: none !important;  /* REMOVE TRANSPARENCY EFFECTS */
    -webkit-backdrop-filter: none !important;
  }
  
  /* HAMBURGER BUTTON POSITIONING */
  .navbar-toggler {
    position: relative;
    z-index: 10001 !important;    /* Above dropdown */
  }
  
  .navbar-nav {
    gap: 0;
    margin: 0 !important;
    padding: 1rem !important;
    width: 100%;
    background: #ffffff !important; /* SOLID WHITE BACKGROUND */
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .navbar-nav .nav-item {
    width: 100%;
    height: auto;
    margin-bottom: 0.25rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.875rem 1rem !important;
    border-radius: 0.375rem;
    height: auto;
    justify-content: flex-start;
    background: transparent !important;
    color: var(--nav-text) !important;
    border: 1px solid transparent !important;
    transition: none !important;   /* DISABLE TRANSITIONS FOR MOBILE */
    animation: none !important;    /* NO ANIMATIONS */
    opacity: 1 !important;        /* FORCE SOLID OPACITY */
  }
  
  .navbar-nav .nav-link:hover {
    background: #f8f9fa !important;
    color: var(--nav-text-hover) !important;
    transition: none !important;   /* NO HOVER TRANSITIONS */
    opacity: 1 !important;        /* SOLID OPACITY ON HOVER */
  }
  
  .nav-item.notification-item .nav-link {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.875rem 1rem !important;
    justify-content: flex-start;
  }
  
  .nav-item.notification-item .nav-text {
    display: inline;
    margin-left: 0.5rem;
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
  }
  
  .notification-badge {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
    transform: none;
    animation: none;
  }
  
  /* MOBILE DROPDOWN SUBMENUS - SOLID BACKGROUNDS */
  .dropdown-menu {
    background: #ffffff !important;    /* SOLID WHITE - NO TRANSPARENCY */
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    margin-top: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }
  
  .dropdown-item {
    padding: 0.625rem 1rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    background: transparent !important;
    color: var(--nav-text) !important;
  }
  
  .dropdown-item:hover {
    background-color: #f8f9fa !important;  /* SOLID HOVER BACKGROUND */
    color: var(--nav-text-hover) !important;
    transform: none;
  }
  
  .dropdown-divider {
    margin: 0.375rem 0;
  }
}

@media (max-width: 575.98px) {
  .navbar .container {
    padding: 0 1rem;
  }
  
  .navbar-brand {
    font-size: 1.25rem;
    margin-right: 1rem;
  }
  
  .navbar-nav .nav-link {
    font-size: 0.875rem;
    padding: 0.75rem 0.875rem !important;
  }
  
  .dropdown-item {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
  }
}

/* Enhanced Professional Polish */
.navbar-nav .nav-link:active {
  transform: translateY(1px);
}

.dropdown-item:active {
  transform: translateX(1px) translateY(1px);
}

/* Loading States */
.nav-link.loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

.nav-link.loading::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nav-spinner 0.6s linear infinite;
}

@keyframes nav-spinner {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Accessibility Enhancements */
.navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  z-index: 10;
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

/* Premium Touch Interactions */
@media (hover: hover) {
  .navbar-nav .nav-link:hover {
    transform: translateY(-1px);
  }
  
  .nav-item.notification-item .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

/* High-end Typography */
.navbar-nav .nav-link {
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.dropdown-item {
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* Dropdown Animation - MOBILE TRANSPARENCY FIX */
.dropdown-menu {
  opacity: 1 !important;     /* FORCE SOLID OPACITY - NO ANIMATIONS */
  transform: none !important; /* DISABLE TRANSFORMS */
  transition: none !important; /* DISABLE ALL TRANSITIONS */
  display: block !important;
  visibility: visible !important; /* ALWAYS VISIBLE */
  background: #ffffff !important; /* FORCE SOLID BACKGROUND */
  background-color: #ffffff !important;
}

.dropdown-menu.show {
  opacity: 1 !important;     /* FORCE SOLID OPACITY */
  transform: none !important; /* NO TRANSFORMS */
  visibility: visible !important;
  background: #ffffff !important; /* ENSURE SOLID BACKGROUND */
  background-color: #ffffff !important;
}

/* MOBILE-SPECIFIC ANIMATION OVERRIDE */
@media (max-width: 991.98px) {
  .dropdown-menu {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  .dropdown-menu.show {
    opacity: 1 !important;
    transform: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

/* Professional Spacing */
.dropdown-menu .dropdown-header {
  padding: 0.5rem 1rem 0.25rem;
  color: var(--nav-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Clean separation between sections */
.dropdown-menu .dropdown-item + .dropdown-divider {
  margin-top: 0.5rem;
}

.dropdown-menu .dropdown-divider + .dropdown-item {
  margin-top: 0.5rem;
}

/* Premium Button Styling for CTA */
.navbar-nav .btn-primary {
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  color: white;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  transition: var(--nav-transition);
  margin-left: 0.5rem;
}

.navbar-nav .btn-primary:hover {
  background: #1e40af;
  border-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(29, 78, 216, 0.2);
}

/* Guest Navigation */
.navbar-nav .nav-link.guest-cta {
  background: var(--brand-primary);
  color: white !important;
  font-weight: 600;
  margin-left: 0.5rem;
}

.navbar-nav .nav-link.guest-cta:hover {
  background: #1e40af;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(29, 78, 216, 0.2);
}

/* Ultra-clean notification dot alternative */
.notification-dot {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--notification-dot);
  border-radius: 50%;
  border: 2px solid var(--nav-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Professional Search Integration (if needed) */
.navbar-search {
  position: relative;
  margin-right: 1rem;
}

.navbar-search input {
  border: 1px solid var(--nav-border);
  border-radius: 0.375rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  font-size: 0.875rem;
  width: 240px;
  transition: var(--nav-transition);
}

.navbar-search input:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  border-color: var(--brand-primary);
  width: 320px;
}

.navbar-search .search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nav-text-secondary);
  pointer-events: none;
}

/* Premium Visual Hierarchy */
.navbar-nav .nav-item:last-child {
  margin-left: 0.75rem;
}

.navbar-nav .nav-item:last-child .nav-link {
  border: 1px solid var(--nav-border);
  background: white;
}

.navbar-nav .nav-item:last-child .nav-link:hover {
  border-color: var(--brand-primary);
  background: #eff6ff;
}

/* Ultra-premium notification count styling */
.notification-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nav-bg);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  animation: notification-glow 3s ease-in-out infinite;
}

@keyframes notification-glow {
  0%, 100% { box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3); }
  50% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5), 0 0 0 3px rgba(220, 38, 38, 0.1); }
}

/* Text-only notification count for ultra-clean look */
.notification-count.text-only {
  background: none;
  color: var(--notification-bg);
  border: none;
  box-shadow: none;
  animation: none;
  font-weight: 600;
  position: relative;
  top: auto;
  right: auto;
  margin-left: 0.375rem;
  font-size: 0.8125rem;
}

/* Enterprise-level polish - MOBILE TRANSPARENCY FIX */
.navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dropdown-menu {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Subtle brand accent */
.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-orange));
}

/* Clean state management */
.nav-link[data-loading="true"] {
  opacity: 0.7;
  pointer-events: none;
}

.nav-link[data-active="true"] {
  color: var(--nav-text-active) !important;
  background-color: #eff6ff;
  border-color: #dbeafe;
}

/* Premium microinteractions */
.navbar-nav .nav-item {
  transform: translateZ(0);
}

.navbar-nav .nav-link {
  transform: translateZ(0);
  will-change: transform, background-color, border-color;
}

/* Professional typography refinements */
.navbar-brand {
  font-feature-settings: "kern" 1, "liga" 1;
}

.navbar-nav .nav-link {
  font-feature-settings: "kern" 1;
}

.dropdown-item {
  font-feature-settings: "kern" 1;
}

/* PAGE CONTENT Z-INDEX HIERARCHY FIX */
/* Ensure page content uses lower z-index values than navigation dropdowns */
.card,
.dashboard-card,
.contract-card,
.job-card,
.application-card,
.payment-card,
.invoice-card,
.profile-card {
  z-index: 1 !important;
}

/* Content containers */
.container,
.container-fluid,
.row,
.col {
  z-index: auto !important;
}

/* Page content sections */
.content-section,
.main-content,
.page-content {
  z-index: 2 !important;
}

/* Ensure modals and overlays use appropriate z-index but lower than nav dropdowns */
.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}

/* Toast notifications and alerts should be above dropdowns */
.toast,
.alert.position-fixed {
  z-index: 10000 !important;
}

/* Scroll progress indicators */
.scroll-progress {
  z-index: 1060 !important;
}

/* Page-level notification dropdowns (not navigation) */
.notification-dropdown:not(.navbar .dropdown-menu) {
  z-index: 1050 !important;
}

/* Search loaders and spinners */
.search-loader,
.loading-spinner {
  z-index: 100 !important;
}

/* Status indicators and badges */
.status-indicator,
.badge,
.notification-badge:not(.navbar .notification-badge) {
  z-index: 10 !important;
}

/* Ensure tables and their contents don't interfere */
.table,
.table-responsive {
  z-index: auto !important;
}

/* Fix any calendar or scheduling components */
.calendar-component,
.booking-component {
  z-index: 5 !important;
}

/* Analytics components */
.analytics-component,
.chart-container {
  z-index: 3 !important;
}

/* Form elements should not interfere */
.form-control,
.form-select,
.btn:not(.navbar .btn) {
  z-index: auto !important;
}

/* Dropdowns that are NOT part of navigation */
.dropdown:not(.navbar .dropdown) .dropdown-menu {
  z-index: 1040 !important;
}

/* CRITICAL: Override any inline z-index that might conflict */
body [style*="z-index"]:not(.navbar):not(.navbar *) {
  z-index: 1000 !important;
}

/* Ensure navigation always wins */
.navbar,
.navbar * {
  z-index: 9998 !important;
}

.navbar .dropdown-menu,
.navbar .dropdown-menu * {
  z-index: 9999 !important;
}