/* GLASSSMORPHIC SIDEBAR REDESIGN */
.new-sidebar-design {
  background: radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.4), rgba(15, 23, 42, 0.85)) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 30px !important;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1), 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 15px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  color: #fff !important;
  width: 320px !important;
  max-width: 90vw !important;
}

.new-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 25px !important;
  position: relative !important;
}

.golden-orb-container {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

.golden-orb-3d {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffd700 20%, #b8860b 60%, #4a3600 100%) !important;
  box-shadow: 
    inset -5px -5px 15px rgba(0,0,0,0.6), 
    inset 5px 5px 15px rgba(255,255,255,0.9),
    0 5px 15px rgba(0,0,0,0.4),
    0 0 10px rgba(255, 215, 0, 0.5) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  position: relative !important;
}
.golden-orb-3d::after {
  content: '';
  position: absolute;
  top: 5px; left: 10px;
  width: 15px; height: 8px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  transform: rotate(-45deg);
  filter: blur(1px);
}

.new-sidebar-title {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: #60a5fa !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 10px rgba(96, 165, 250, 0.4) !important;
  margin: 0 !important;
  font-family: 'Cairo', sans-serif !important;
}

.sidebar-close-glass {
  background: radial-gradient(circle at 30% 30%, #fff 0%, #d4af37 40%, #8b6508 100%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: 
    inset -3px -3px 8px rgba(0,0,0,0.5), 
    inset 2px 2px 8px rgba(255,255,255,0.8),
    0 5px 10px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  position: absolute !important;
  top: -10px !important;
  right: -5px !important;
}

.pill-3d {
  width: 85% !important;
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px 15px !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.pill-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}

.pill-3d:active { transform: scale(0.96) !important; }

/* Dynamic Pill Colors matching screenshot */
.pill-cyan { background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.4), 0 5px 15px rgba(2, 132, 199, 0.4) !important; }
.pill-gold { background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(180, 83, 9, 0.4) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.8)!important; }
.pill-purple { background: linear-gradient(180deg, #c084fc 0%, #6b21a8 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(107, 33, 168, 0.4) !important; }
.pill-silver { background: linear-gradient(180deg, #e2e8f0 0%, #64748b 100%) !important; color: #1e293b !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.3), 0 5px 15px rgba(100, 116, 139, 0.4) !important; text-shadow: 0 1px 1px rgba(255,255,255,0.8)!important; }
.pill-navy { background: linear-gradient(180deg, #60a5fa 0%, #1e3a8a 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(30, 58, 138, 0.4) !important; }
.pill-red { background: linear-gradient(180deg, #f87171 0%, #991b1b 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(153, 27, 27, 0.4) !important; }
.pill-brown { background: linear-gradient(180deg, #d97706 0%, #78350f 100%) !important; box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(120, 53, 15, 0.4) !important; }

.pill-outline {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.1) !important;
  color: #cbd5e1 !important;
  flex: 1 !important;
  margin-bottom: 0 !important;
}

.metallic-divider {
  width: 90% !important;
  height: 4px !important;
  margin: 15px auto !important;
  background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%) !important;
  border-top: 1px solid #ffffff !important;
  border-bottom: 1px solid #475569 !important;
  opacity: 0.8 !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

.glass-action-text {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  justify-content: flex-end !important;
  width: 100% !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  font-family: 'Cairo', sans-serif !important;
}
.glass-action-text:hover { filter: brightness(1.2) !important; }

/* Make the list area flexible */
.new-sidebar-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-right: 5px;
}
.new-sidebar-scroll-area::-webkit-scrollbar { width: 4px; }
.new-sidebar-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

/* GLASSSMORPHIC TOP NAV REDESIGN */
.glass-top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 
    inset 0 0 20px rgba(255, 255, 255, 0.2), 
    0 15px 35px rgba(0, 0, 0, 0.3) !important;
  padding: 12px 30px !important;
  margin: 15px auto !important;
  width: max-content !important;
  min-width: 280px !important;
  z-index: 100 !important;
}

/* 3D Glass Icons inside the Nav */
.glass-top-nav button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

.glass-top-nav button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-3px) scale(1.1) !important;
  filter: drop-shadow(0 5px 10px rgba(255,255,255,0.3)) !important;
}

.glass-top-nav button:active {
  transform: translateY(1px) scale(0.95) !important;
}

/* The actual SVG Icons styling to make them look 3D and match the colors in screenshot */
.nav-icon-chart { color: #8b5cf6 !important; filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.6)); stroke-width: 2.5; }
.nav-icon-trash { color: #94a3b8 !important; filter: drop-shadow(0 2px 4px rgba(148, 163, 184, 0.6)); stroke-width: 2.5; }
.nav-icon-menu { color: #f8fafc !important; filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.6)); stroke-width: 3; }
.nav-icon-settings { color: #8b5cf6 !important; filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.6)); stroke-width: 2.5; }

/* Responsive adjustments for mobile so it looks clear and not squished */
@media (max-width: 768px) {
  .new-sidebar-design {
    border-radius: 0 20px 20px 0 !important;
    padding: 15px 10px !important;
  }
  .pill-3d {
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .new-sidebar-title {
    font-size: 1.3rem !important;
  }
  .glass-action-text {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }
  .golden-orb-3d {
    width: 40px !important;
    height: 40px !important;
  }
}