/* Bootstrap-compatible utility classes */

.mh-400 {
  max-height: 400px !important;
}

.h-400 {
  height: 400px !important;
}

.avatar-60 {
  width: 60px !important;
  height: 60px !important;
}

/* Fix dropdown z-index issues */
.navbar .dropdown-menu {
  z-index: 1050 !important;
}

.navbar .dropdown {
  position: relative !important;
}

/* Ensure navbar is positioned properly */
.navbar {
  z-index: 1040 !important;
} 

/* Modern Family-Friendly Theme */
[data-bs-theme="modern-family"] {
  /* Vibrant color palette appealing to both parents and kids */
  --primary-blue: #4f46e5;
  --primary-purple: #7c3aed;
  --accent-pink: #ec4899;
  --accent-orange: #f97316;
  --accent-green: #10b981;
  --accent-yellow: #eab308;
  
  /* Neutral base colors */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Bootstrap variable overrides */
  --bs-body-color: var(--gray-700);
  --bs-body-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --bs-emphasis-color: var(--gray-800);
  --bs-secondary-color: var(--gray-600);
  --bs-secondary-bg: var(--gray-100);
  --bs-tertiary-color: var(--gray-500);
  --bs-tertiary-bg: var(--gray-50);

  /* Primary colors */
  --bs-primary: var(--primary-blue);
  --bs-primary-rgb: 79, 70, 229;
  --bs-secondary: var(--gray-600);
  --bs-secondary-rgb: 71, 85, 105;
  --bs-success: var(--accent-green);
  --bs-success-rgb: 16, 185, 129;
  --bs-info: var(--primary-purple);
  --bs-info-rgb: 124, 58, 237;
  --bs-warning: var(--accent-yellow);
  --bs-warning-rgb: 234, 179, 8;
  --bs-danger: #ef4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: var(--gray-100);
  --bs-light-rgb: 241, 245, 249;
  --bs-dark: var(--gray-800);
  --bs-dark-rgb: 30, 41, 59;

  /* Background colors */
  --bs-primary-bg-subtle: rgba(79, 70, 229, 0.1);
  --bs-secondary-bg-subtle: rgba(71, 85, 105, 0.1);
  --bs-success-bg-subtle: rgba(16, 185, 129, 0.1);
  --bs-info-bg-subtle: rgba(124, 58, 237, 0.1);
  --bs-warning-bg-subtle: rgba(234, 179, 8, 0.1);
  --bs-danger-bg-subtle: rgba(239, 68, 68, 0.1);

  /* Border colors */
  --bs-border-color: rgba(71, 85, 105, 0.2);
  --bs-border-color-translucent: rgba(71, 85, 105, 0.1);

  /* Glass morphism variables */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: rgba(0, 0, 0, 0.1);
  --glass-backdrop: blur(20px);
}

/* Modern Glass Components */
body {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-bs-theme="modern-family"] .card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: var(--glass-backdrop) !important;
  -webkit-backdrop-filter: var(--glass-backdrop) !important;
  box-shadow: 0 8px 32px var(--glass-shadow), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-bs-theme="modern-family"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--primary-blue), 
    var(--primary-purple), 
    var(--accent-pink), 
    transparent
  );
  opacity: 0.7;
}

[data-bs-theme="modern-family"] .card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
}

/* Modern Button Styles */
[data-bs-theme="modern-family"] .btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: relative;
  overflow: hidden;
}

[data-bs-theme="modern-family"] .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

[data-bs-theme="modern-family"] .btn:hover::before {
  left: 100%;
}

[data-bs-theme="modern-family"] .btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4) !important;
}

[data-bs-theme="modern-family"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink)) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5) !important;
}

[data-bs-theme="modern-family"] .btn-secondary {
  background: rgba(71, 85, 105, 0.1) !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
  color: var(--gray-700) !important;
}

[data-bs-theme="modern-family"] .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(71, 85, 105, 0.3) !important;
}

[data-bs-theme="modern-family"] .btn-success {
  background: linear-gradient(135deg, var(--accent-green), #059669) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
}

[data-bs-theme="modern-family"] .btn-success:hover {
  background: linear-gradient(135deg, #059669, var(--accent-green)) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5) !important;
}

[data-bs-theme="modern-family"] .btn-warning {
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange)) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4) !important;
}

[data-bs-theme="modern-family"] .btn-warning:hover {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink)) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(234, 179, 8, 0.5) !important;
}

[data-bs-theme="modern-family"] .btn-info {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink)) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
}

[data-bs-theme="modern-family"] .btn-info:hover {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange)) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5) !important;
}

[data-bs-theme="modern-family"] .btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}

[data-bs-theme="modern-family"] .btn-outline-primary:hover {
  background: var(--primary-blue) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.3) !important;
}

/* Modern Modal Styles */
[data-bs-theme="modern-family"] .modal-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.15) !important;
  border-radius: 24px !important;
  overflow: hidden;
}

[data-bs-theme="modern-family"] .modal-backdrop {
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

[data-bs-theme="modern-family"] .modal-header {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  color: white !important;
  border: none !important;
  padding: 1.5rem !important;
}

[data-bs-theme="modern-family"] .modal-title {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: white !important;
}

[data-bs-theme="modern-family"] .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.8 !important;
}

[data-bs-theme="modern-family"] .modal-header .btn-close:hover {
  opacity: 1 !important;
}

/* Modern Navigation Styles */
[data-bs-theme="modern-family"] .navbar {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(79, 70, 229, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 1rem 0 !important;
}

[data-bs-theme="modern-family"] .navbar-brand {
  color: var(--primary-blue) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-bs-theme="modern-family"] .navbar-brand:hover {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  transform: scale(1.05) !important;
  transition: all 0.3s ease !important;
}

[data-bs-theme="modern-family"] .nav-link {
  color: var(--gray-600) !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem !important;
}

[data-bs-theme="modern-family"] .nav-link:hover {
  color: var(--primary-blue) !important;
  background: rgba(79, 70, 229, 0.1) !important;
  transform: translateY(-1px) !important;
}

[data-bs-theme="modern-family"] .nav-link.active {
  color: white !important;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3) !important;
}

[data-bs-theme="modern-family"] .notification-badge {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange)) !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  animation: pulse 2s infinite !important;
}

/* Modern Form Styles */
[data-bs-theme="modern-family"] .form-control {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 2px solid rgba(203, 213, 225, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--gray-700) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
}

[data-bs-theme="modern-family"] .form-control:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
  transform: translateY(-1px) !important;
}

[data-bs-theme="modern-family"] .form-control::placeholder {
  color: var(--gray-400) !important;
  opacity: 0.8;
}

[data-bs-theme="modern-family"] .form-label {
  color: var(--gray-700) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Modern Table Styles */
[data-bs-theme="modern-family"] .table {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(203, 213, 225, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="modern-family"] .table th {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  border: none !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 1rem !important;
}

[data-bs-theme="modern-family"] .table td {
  border-color: rgba(203, 213, 225, 0.2) !important;
  color: var(--gray-700) !important;
  padding: 1rem !important;
}

[data-bs-theme="modern-family"] .table-hover tbody tr:hover {
  background: rgba(79, 70, 229, 0.05) !important;
  transform: scale(1.01) !important;
  transition: all 0.2s ease !important;
}

/* Modern Alert Styles */
[data-bs-theme="modern-family"] .alert {
  border: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  border-left: 4px solid !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="modern-family"] .alert-primary {
  background: rgba(79, 70, 229, 0.1) !important;
  border-left-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}

[data-bs-theme="modern-family"] .alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  border-left-color: var(--accent-green) !important;
  color: var(--accent-green) !important;
}

/* Modern Dropdown Styles */
[data-bs-theme="modern-family"] .dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(203, 213, 225, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
  border-radius: 16px !important;
  padding: 0.5rem !important;
}

[data-bs-theme="modern-family"] .dropdown-item {
  color: var(--gray-700) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
  margin: 0.25rem 0 !important;
  padding: 0.5rem 1rem !important;
}

[data-bs-theme="modern-family"] .dropdown-item:hover {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  color: white !important;
  transform: translateX(4px) !important;
}

/* Modern Badge Styles */
[data-bs-theme="modern-family"] .badge {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 50px !important;
  padding: 0.4rem 0.8rem !important;
  font-weight: 600 !important;
}

[data-bs-theme="modern-family"] .badge.bg-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
}

[data-bs-theme="modern-family"] .badge.bg-secondary {
  background: linear-gradient(135deg, var(--gray-500), var(--gray-600)) !important;
}

[data-bs-theme="modern-family"] .badge.bg-success {
  background: linear-gradient(135deg, var(--accent-green), #059669) !important;
}

[data-bs-theme="modern-family"] .badge.bg-warning {
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange)) !important;
}

[data-bs-theme="modern-family"] .badge.bg-info {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink)) !important;
}

/* Modern Scrollbar */
[data-bs-theme="modern-family"] ::-webkit-scrollbar {
  width: 8px;
}

[data-bs-theme="modern-family"] ::-webkit-scrollbar-track {
  background: rgba(203, 213, 225, 0.3);
  border-radius: 8px;
}

[data-bs-theme="modern-family"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-bs-theme="modern-family"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink));
}

/* Modern Text Selection */
[data-bs-theme="modern-family"] ::selection {
  background: rgba(79, 70, 229, 0.2);
  color: var(--primary-blue);
}

[data-bs-theme="modern-family"] ::-moz-selection {
  background: rgba(79, 70, 229, 0.2);
  color: var(--primary-blue);
}

/* Modern Focus Rings */
[data-bs-theme="modern-family"] :focus {
  outline: 3px solid rgba(79, 70, 229, 0.3) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

[data-bs-theme="modern-family"] .btn-close {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange)) !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
}

[data-bs-theme="modern-family"] .btn-close:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Playful Animations for Kids */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0,-1px,0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Utility Classes for Playful Interactions */
.bounce {
  animation: bounce 1s infinite;
}

.pulse {
  animation: pulse 2s infinite;
}

.float {
  animation: float 3s ease-in-out infinite;
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  background-size: 200px 100%;
  animation: shimmer 2s infinite;
}

/* Fun Chore-specific Classes */
.chore-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.chore-card:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.03) !important;
}

.coin-sparkle {
  position: relative;
  overflow: hidden;
}

.coin-sparkle::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.2rem;
  animation: float 2s ease-in-out infinite;
}

/* Modern Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  margin-bottom: 1rem !important;
}

h1 {
  font-size: 2.5rem !important;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient-success {
  background: linear-gradient(135deg, var(--accent-green), #059669) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.text-gradient-warning {
  background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Professional Parent-friendly Styles */
.professional-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(203, 213, 225, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.professional-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-4px) !important;
}

.stats-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9)) !important;
  border: 1px solid rgba(79, 70, 229, 0.1) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), var(--accent-pink));
}

/* Kid-friendly fun elements */
.kid-dashboard {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.kid-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(79, 70, 229, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
  pointer-events: none;
}