@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500&display=swap");

/** @format */
/* Blue theme sidebar styles */
/* Blue gradient effects */
.blue-glow {
  position: relative;
}
.blue-glow::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #2196f3, #1976d2, #0d47a1);
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  animation: bluePulse 4s ease-in-out infinite;
  filter: blur(6px);
  opacity: 0.3;
}
@keyframes bluePulse {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.3;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.5;
  }
}
/* Blue border animation */
.blue-border {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.blue-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #2196f3, #1976d2, #0d47a1, #2196f3);
  border-radius: inherit;
  z-index: -1;
  animation: borderFlow 3s linear infinite;
  background-size: 300% 300%;
}
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Subtle bounce animation for active items */
@keyframes subtleBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
.active-bounce {
  animation: subtleBounce 2s ease-in-out infinite;
}
/* Blue shimmer effect */
.blue-shimmer {
  position: relative;
  overflow: hidden;
}
.blue-shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(33, 150, 243, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(30deg);
  animation: blueShimmer 4s infinite;
}
@keyframes blueShimmer {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}
/* Blue hover transition */
.blue-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.blue-transition:hover {
  background: linear-gradient(
    135deg,
    rgba(33, 150, 243, 0.1) 0%,
    rgba(25, 118, 210, 0.2) 100%
  );
}
/* Blue gradient text */
.blue-gradient-text {
  background: linear-gradient(135deg, #2196f3, #0d47a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Responsive adjustments */
@media (max-width: 600px) {
  .blue-glow::before {
    filter: blur(3px);
  }
}
/* Custom scrollbar with blue theme */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(33, 150, 243, 0.05);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #2196f3, #1976d2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #1976d2, #0d47a1);
}
/* Blue pulse animation for notifications */
@keyframes bluePulseDot {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    transform: scale(1.1);
  }
}
.blue-pulse {
  animation: bluePulseDot 2s infinite;
}
/* Glass morphism effect with blue tint */
.blue-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(33, 150, 243, 0.2);
}
.dark-blue-glass {
  background: rgba(13, 71, 161, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(33, 150, 243, 0.3);
}
/* Blue wave animation */
@keyframes blueWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.blue-wave {
  background: linear-gradient(
    270deg,
    #2196f3,
    #1976d2,
    #0d47a1,
    #1976d2,
    #2196f3
  );
  background-size: 400% 400%;
  animation: blueWave 8s ease infinite;
}
/* Subttye float animation */
@keyframes subtleFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}
.float-animation {
  animation: subtleFloat 3s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Smooth transitions */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}