/**
 * Gradient & Visual Effects
 *
 * Subtle, professional gradients and visual enhancements.
 * Uses brand colors with restrained transitions for a polished look.
 */

/* ===========================
   Gradient Definitions
   =========================== */

:root {
  /* Subtle gradients - same hue family, gentle transitions */
  /* Primary now uses sky blue (brighter) */
  --gradient-primary: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --gradient-danger: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  /* Info now uses deeper blue */
  --gradient-info: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
  --gradient-magenta: linear-gradient(135deg, #DB2777 0%, #EC4899 100%);

  /* Brand gradients - refined */
  --gradient-brand: linear-gradient(135deg, var(--mc-navy) 0%, #1a3a5c 100%);
  --gradient-ocean: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  --gradient-sunset: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
  --gradient-aurora: linear-gradient(135deg, #38BDF8 0%, #7C3AED 100%);

  /* Subtle background gradients */
  --gradient-surface: linear-gradient(180deg, var(--color-surface-0) 0%, var(--color-surface-1) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
}

/* Dark mode gradient adjustments */
[data-bs-theme="dark"] {
  --gradient-primary: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --gradient-danger: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
  --gradient-info: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}

/* ===========================
   Enhanced Stat Cards
   =========================== */

.stat-card {
  position: relative;
  background: var(--color-surface-0);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Subtle gradient accent bar at top */
.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Gradient variants for stat cards */
.stat-card.primary::before { background: var(--gradient-ocean); }
.stat-card.success::before { background: var(--gradient-success); }
.stat-card.warning::before { background: var(--gradient-sunset); }
.stat-card.danger::before { background: var(--gradient-danger); }
.stat-card.info::before { background: var(--gradient-info); }
.stat-card.purple::before { background: var(--gradient-purple); }
.stat-card.magenta::before { background: var(--gradient-magenta); }

/* Gradient icon background - softer appearance */
.stat-card .stat-icon {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  opacity: 1;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm);
}

.stat-card.primary .stat-icon { background: var(--gradient-ocean); }
.stat-card.success .stat-icon { background: var(--gradient-success); }
.stat-card.warning .stat-icon { background: var(--gradient-sunset); }
.stat-card.danger .stat-icon { background: var(--gradient-danger); }
.stat-card.info .stat-icon { background: var(--gradient-info); }
.stat-card.purple .stat-icon { background: var(--gradient-purple); }
.stat-card.magenta .stat-icon { background: var(--gradient-magenta); }

/* Subtle glow on hover */
.stat-card.primary:hover .stat-icon { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25); }
.stat-card.success:hover .stat-icon { box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25); }
.stat-card.warning:hover .stat-icon { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); }
.stat-card.danger:hover .stat-icon { box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25); }
.stat-card.info:hover .stat-icon { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
.stat-card.purple:hover .stat-icon { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); }
.stat-card.magenta:hover .stat-icon { box-shadow: 0 4px 12px rgba(219, 39, 119, 0.25); }

/* ===========================
   Filled Gradient Stat Cards
   =========================== */

.stat-card-filled {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  color: white;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card-filled::before {
  content: none;
}

.stat-card-filled:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-card-filled.primary { background: var(--gradient-ocean); }
.stat-card-filled.success { background: var(--gradient-success); }
.stat-card-filled.warning { background: var(--gradient-sunset); }
.stat-card-filled.danger { background: var(--gradient-danger); }
.stat-card-filled.info { background: var(--gradient-info); }
.stat-card-filled.purple { background: var(--gradient-purple); }
.stat-card-filled.magenta { background: var(--gradient-magenta); }
.stat-card-filled.brand { background: var(--gradient-brand); }
.stat-card-filled.aurora { background: var(--gradient-aurora); }

.stat-card-filled .stat-label {
  color: rgba(255, 255, 255, 0.9);
}

.stat-card-filled .stat-value {
  color: white;
}

.stat-card-filled .stat-subtext {
  color: rgba(255, 255, 255, 0.75);
}

.stat-card-filled .stat-trend {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.stat-card-filled .stat-icon {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

/* ===========================
   Gradient Buttons
   =========================== */

.btn-gradient {
  border: none;
  color: white;
  font-weight: var(--font-weight-medium);
  background-size: 150% auto;
  transition: background-position var(--transition-base), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn-gradient:hover {
  background-position: right center;
  transform: translateY(-1px);
  color: white;
}

.btn-gradient:active {
  transform: translateY(0);
}

.btn-gradient:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.btn-gradient-primary {
  background-image: linear-gradient(135deg, #0284C7 0%, #38BDF8 50%, #0284C7 100%);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.btn-gradient-primary:hover {
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.btn-gradient-success {
  background-image: linear-gradient(135deg, #047857 0%, #10B981 50%, #047857 100%);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

.btn-gradient-danger {
  background-image: linear-gradient(135deg, #B91C1C 0%, #EF4444 50%, #B91C1C 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.btn-gradient-purple {
  background-image: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 50%, #6D28D9 100%);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.btn-gradient-magenta {
  background-image: linear-gradient(135deg, #BE185D 0%, #EC4899 50%, #BE185D 100%);
  box-shadow: 0 2px 8px rgba(219, 39, 119, 0.2);
}

.btn-gradient-aurora {
  background-image: linear-gradient(135deg, #1D4ED8 0%, #7C3AED 50%, #1D4ED8 100%);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

/* ===========================
   Gradient Badges
   =========================== */

.badge-gradient {
  border: none;
  color: white;
  font-weight: var(--font-weight-medium);
}

.badge-gradient-primary { background: var(--gradient-ocean); }
.badge-gradient-success { background: var(--gradient-success); }
.badge-gradient-warning { background: var(--gradient-sunset); }
.badge-gradient-danger { background: var(--gradient-danger); }
.badge-gradient-info { background: var(--gradient-info); }
.badge-gradient-purple { background: var(--gradient-purple); }
.badge-gradient-magenta { background: var(--gradient-magenta); }

/* ===========================
   Card Enhancements
   =========================== */

/* Glass effect cards */
.card-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .card-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Gradient header cards */
.card-gradient-header .card-header {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.card-gradient-header.primary .card-header { background: var(--gradient-ocean); }
.card-gradient-header.success .card-header { background: var(--gradient-success); }
.card-gradient-header.purple .card-header { background: var(--gradient-purple); }
.card-gradient-header.magenta .card-header { background: var(--gradient-magenta); }

.card-gradient-header .card-header h1,
.card-gradient-header .card-header h2,
.card-gradient-header .card-header h3,
.card-gradient-header .card-header h4,
.card-gradient-header .card-header h5,
.card-gradient-header .card-header h6 {
  color: white;
}

/* ===========================
   Progress Bar Gradients
   =========================== */

.progress-gradient .progress-bar {
  background: var(--gradient-primary);
}

.progress-gradient.success .progress-bar { background: var(--gradient-success); }
.progress-gradient.warning .progress-bar { background: var(--gradient-sunset); }
.progress-gradient.danger .progress-bar { background: var(--gradient-danger); }
.progress-gradient.purple .progress-bar { background: var(--gradient-purple); }
.progress-gradient.magenta .progress-bar { background: var(--gradient-magenta); }

/* ===========================
   Dashboard Header
   =========================== */

.dashboard-header {
  background: var(--gradient-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  color: white;
  margin-bottom: var(--space-lg);
}

.dashboard-header h1,
.dashboard-header h2 {
  color: white;
  margin-bottom: var(--space-sm);
}

.dashboard-header p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

/* ===========================
   Responsive Adjustments
   =========================== */

@media (max-width: 768px) {
  .stat-card .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    right: var(--space-md);
  }

  .dashboard-header {
    padding: var(--space-lg);
  }
}

/* ===========================
   Reduced Motion Support
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .stat-card:hover,
  .stat-card-filled:hover,
  .btn-gradient:hover {
    transform: none;
  }
}