/* Ninja CVV Theme - Additional styling */

/* Ninja-inspired elements */
.sidebar-logo-icon {
  background-color: hsl(var(--primary) / 0.9) !important;
  color: white !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.dark .sidebar-logo-icon {
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}

/* Ninja-inspired active elements */
.sidebar a.active {
  background-color: hsl(var(--primary) / 0.15) !important;
  color: hsl(var(--primary)) !important;
  border-left: 3px solid hsl(var(--primary)) !important;
  padding-left: calc(0.75rem - 3px) !important;
}

.dark .sidebar a.active {
  background-color: rgba(220, 38, 38, 0.2) !important;
  color: rgba(248, 113, 113, 1) !important;
}

/* Ninja-inspired buttons */
.button-primary {
  background-color: hsl(var(--primary)) !important;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.3) !important;
  transition: all 0.2s ease !important;
}

.button-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4) !important;
}

.button-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3) !important;
}

/* Ninja-inspired card styling */
.card {
  border-top: 3px solid transparent !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  border-top-color: hsl(var(--primary)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.dark .card:hover {
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -5px rgba(0, 0, 0, 0.1) !important;
}

/* Ninja-inspired form elements */
.input:focus,
.textarea:focus,
.select:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Ninja-inspired tab triggers */
.tab-trigger.active {
  border-bottom-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 600 !important;
}

/* Ninja-inspired progress bars */
progress::-webkit-progress-value {
  background-color: hsl(var(--primary)) !important;
  transition: width 0.3s ease !important;
}

progress::-moz-progress-bar {
  background-color: hsl(var(--primary)) !important;
  transition: width 0.3s ease !important;
}

/* Ninja-inspired animations */
@keyframes ninja-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ninja-animate {
  animation: ninja-fade-in 0.3s ease-out forwards;
}

/* Ninja-inspired scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 38, 38, 0.5);
}

/* Ninja-inspired focus styles */
*:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.5) !important;
  outline-offset: 2px !important;
}

/* Ninja-inspired badges */
.badge {
  background-color: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary) / 0.2) !important;
}

/* Ninja-inspired alerts */
.alert-success {
  border-left: 4px solid #10b981 !important;
}

.alert-warning {
  border-left: 4px solid #f59e0b !important;
}

.alert-error {
  border-left: 4px solid hsl(var(--primary)) !important;
}

.alert-info {
  border-left: 4px solid #3b82f6 !important;
}

/* Ninja-inspired tooltips */
[data-tooltip]:hover:after {
  background-color: hsl(var(--primary)) !important;
  color: white !important;
}

/* Ninja-inspired loading spinner */
.spinner {
  border-top-color: hsl(var(--primary)) !important;
}

/* Ninja-inspired theme toggle */
.theme-toggle-btn:hover {
  background-color: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
}

/* Ninja-inspired selection */
::selection {
  background-color: hsl(var(--primary) / 0.2) !important;
  color: hsl(var(--primary)) !important;
}

body {
  transition: opacity 0.1s;
}

.transition-colors {
  transition-duration: 150ms;
}