/**
 * Home Page Styles
 * Styles spécifiques à la page d'accueil
 */

/* Message d'accueil */
.welcome-msg {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--clr-primary);
  margin: 2rem auto 0;
}

body.dark-mode .welcome-msg {
  color: var(--clr-text);
}

/* Cartes d'application */
body.dark-mode .app-card .material-symbols-outlined {
  color: var(--clr-text);
}

body.dark-mode .app-card {
  color: var(--clr-text);
}

/* ================================================================
   Menu Dropdown Styles
   ================================================================
   NOTE: Menu dropdown styles have been moved to main.css
   for consistency across all pages (home, chat, routine, etc.)
   ================================================================ */

/* Police par défaut */
body.home-selector {
  font-family: "Segoe UI", "Inter", "Calibri", sans-serif;
}

/* Card Badges */
.app-card {
  position: relative;
}

.card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.card-badge.legacy {
  background: linear-gradient(135deg, #64748b, #475569);
  color: #ffffff;
}

.card-badge.v2 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
}

.card-badge.new {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  animation: pulse-badge 2s ease-in-out infinite;
}

.card-badge.demo {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
}

@keyframes pulse-badge {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
  }
}

/* Featured Cards */
.app-card.featured {
  border: 2px solid #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
}

.app-card.featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #059669, #10b981);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.app-card.featured:hover {
  border-color: #059669;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.25);
  transform: translateY(-4px);
}

.app-card.demo {
  border: 2px solid #f59e0b;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.app-card.demo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.app-card.demo:hover {
  border-color: #d97706;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.25);
  transform: translateY(-4px);
}

@keyframes shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

/* Dark mode adjustments */
body.dark-mode .card-badge.legacy {
  background: linear-gradient(135deg, #475569, #334155);
}

body.dark-mode .card-badge.v2 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

body.dark-mode .card-badge.new {
  background: linear-gradient(135deg, #10b981, #059669);
}

body.dark-mode .card-badge.demo {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

body.dark-mode .app-card.featured {
  border-color: #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}

body.dark-mode .app-card.featured:hover {
  border-color: #34d399;
  box-shadow: 0 12px 32px rgba(52, 211, 153, 0.35);
}

body.dark-mode .app-card.demo {
  border-color: #f59e0b;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}

body.dark-mode .app-card.demo:hover {
  border-color: #fbbf24;
  box-shadow: 0 12px 32px rgba(251, 191, 36, 0.35);
}

/* Clean Architecture Cards */
.card-badge.clean {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  animation: pulse-badge-clean 2s ease-in-out infinite;
}

@keyframes pulse-badge-clean {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
  }
}

.app-card.clean-arch {
  border: 2px solid #8b5cf6;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
  position: relative;
  overflow: hidden;
}

.app-card.clean-arch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.app-card.clean-arch:hover {
  border-color: #6366f1;
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25);
  transform: translateY(-4px);
}

/* Dark mode - Clean Architecture */
body.dark-mode .card-badge.clean {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

body.dark-mode .app-card.clean-arch {
  border-color: #8b5cf6;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
}

body.dark-mode .app-card.clean-arch:hover {
  border-color: #a78bfa;
  box-shadow: 0 12px 32px rgba(167, 139, 250, 0.35);
}