/**
 * Bootstrap Tab Enhancer v1.0
 * Drop-in CSS enhancement for existing Bootstrap tab systems
 * 
 * Usage: Just include this CSS file after Bootstrap CSS
 * Works with existing .main-nav.nav-tabs and .nav-link classes
 */

/* ====================== ENHANCED BOOTSTRAP TABS ====================== */

/* Override Bootstrap tab container */
.main-nav.nav-tabs {
  border-bottom: none !important;
  background: #f8fafc;
  padding: 0.75rem;
  border-radius: 16px;
  gap: 0.5rem;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Enhanced tab items */
.main-nav.nav-tabs .nav-link {
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  background: white !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Hover states */
.main-nav.nav-tabs .nav-link:hover {
  color: #1c2a48 !important;
  border-color: #e0e7ff !important;
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Active states */
.main-nav.nav-tabs .nav-link.active {
  color: #1c2a48 !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border-color: #1c2a48 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15) !important;
}

/* Enhanced tab icons */
.main-nav.nav-tabs .nav-link i {
  transition: transform 0.2s ease;
  margin-right: 0.5rem;
}

.main-nav.nav-tabs .nav-link:hover i {
  transform: scale(1.1);
}

.main-nav.nav-tabs .nav-link.active i {
  transform: scale(1.05);
}

/* Enhanced badges */
.main-nav.nav-tabs .badge {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  border-radius: 12px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin-left: 0.5rem !important;
  transition: all 0.2s ease !important;
}

.main-nav.nav-tabs .nav-link.active .badge {
  background: #1c2a48 !important;
  color: white !important;
}

.main-nav.nav-tabs .nav-link:hover .badge {
  background: #d1d5db !important;
  color: #374151 !important;
}

/* ====================== SLIDING INDICATOR ====================== */

/* Auto-added indicator */
.main-nav.nav-tabs::after {
  content: '';
  position: absolute;
  bottom: 0.75rem;
  height: 3px;
  background: #1c2a48;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  /* Will be positioned by JavaScript */
}