/* ===========================
   NOTIFICATIONS STYLES
   =========================== */

/* Boutons de filtres améliorés */
.filter-btn {
  @apply px-4 py-2 text-sm rounded-lg transition-all duration-200;
  @apply text-muted-foreground hover:text-foreground;
  @apply hover:bg-secondary/50;
  @apply border border-transparent;
  @apply font-medium;
  position: relative;
  overflow: hidden;
}

.filter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.filter-btn:hover::before {
  left: 100%;
}

.filter-btn.active {
  @apply bg-gradient-to-r from-primary/10 to-primary/5 text-primary border-primary/30;
  @apply font-semibold shadow-sm;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.1);
}

/* Toast de notifications */
.notification-toast {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.notification-toast.toast-visible {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Cartes de notifications avec hover améliorées */
.notification-card {
  @apply relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.notification-card:hover .notification-actions {
  @apply opacity-100;
}

.notification-actions {
  @apply opacity-0 transition-all duration-200;
  transform: translateX(10px);
}

.notification-card:hover .notification-actions {
  transform: translateX(0);
}

/* Icônes de notifications avec animations */
.notification-icon {
  @apply transition-transform duration-200;
}

.notification-icon:hover {
  @apply scale-110;
}

/* Badge de notification non lue avec glow effect */
.notification-unread-dot {
  @apply w-2.5 h-2.5 bg-primary rounded-full flex-shrink-0;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.7);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 59, 130, 246), 0.7);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 59, 130, 246), 0);
  }
}

/* Toggle switch pour les préférences */
.toggle-switch {
  @apply relative inline-block w-11 h-6;
}

.toggle-switch input {
  @apply sr-only;
}

.toggle-switch .slider {
  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0;
  @apply bg-muted rounded-full transition-all duration-200;
}

.toggle-switch .slider:before {
  @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5;
  @apply bg-white rounded-full transition-all duration-200;
}

.toggle-switch input:checked + .slider {
  @apply bg-primary;
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(20px);
}

.toggle-switch input:focus + .slider {
  @apply ring-2 ring-primary ring-offset-2;
}

/* Groupement de notifications */
.notification-group-badge {
  @apply inline-flex items-center justify-center;
  @apply px-2 py-0.5 text-xs font-medium;
  @apply bg-primary/10 text-primary rounded-full;
}

/* Panel dropdown de notifications avec effet glassmorphism */
.notifications-dropdown {
  @apply absolute right-0 mt-2 w-96;
  @apply border border-border rounded-xl overflow-hidden;
  @apply animate-fade-in-up;
  z-index: 50;
  background: rgba(var(--card-rgb, 255, 255, 255), 0.95);
  backdrop-filter: blur(12px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  max-height: 600px;
}

.notifications-dropdown-tabs {
  @apply flex border-b border-border;
}

.notifications-dropdown-tab {
  @apply flex-1 px-4 py-3 text-sm font-medium text-muted-foreground;
  @apply hover:text-foreground hover:bg-secondary/30;
  @apply transition-all duration-200 cursor-pointer;
  @apply border-b-2 border-transparent;
}

.notifications-dropdown-tab.active {
  @apply text-primary border-primary;
}

.notifications-list {
  @apply overflow-y-auto max-h-96;
}

/* Scrollbar personnalisée */
.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
  @apply bg-border rounded-full;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground;
}

/* États de chargement */
.notification-skeleton {
  @apply animate-pulse;
}

.notification-skeleton-avatar {
  @apply w-10 h-10 bg-muted rounded-full;
}

.notification-skeleton-text {
  @apply h-4 bg-muted rounded;
}

/* Transitions fluides */
.notification-item {
  @apply transition-all duration-200;
}

.notification-item:hover {
  @apply transform scale-[1.02];
}

/* Responsive */
@media (max-width: 640px) {
  .notifications-dropdown {
    @apply w-screen max-w-full left-0 right-0;
    @apply mx-4;
  }

  .filter-btn {
    @apply text-xs px-2 py-1;
  }
}

/* Dark mode adjustments (si nécessaire) */
@media (prefers-color-scheme: dark) {
  .notification-toast {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
  }
}

/* Animation pour les actions en masse */
.bulk-actions-toolbar {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* États interactifs améliorés */
.notification-checkbox {
  @apply w-4 h-4 rounded border-border text-primary;
  @apply focus:ring-primary focus:ring-offset-0;
  @apply cursor-pointer transition-all duration-150;
}

.notification-checkbox:hover {
  @apply border-primary;
}

/* Amélioration visuelle des icônes colorées */
.notification-icon-wrapper {
  @apply transition-all duration-200;
}

.notification-icon-wrapper:hover {
  @apply shadow-lg;
}

/* Indicateur de notification importante */
.notification-important {
  @apply border-l-4 border-l-primary;
}

/* Animation de suppression */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.notification-removing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Avatars professionnels avec ring et glow */
.notification-avatar {
  @apply relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-avatar:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.notification-avatar img {
  @apply ring-2 ring-border;
  transition: ring-color 0.3s ease;
}

.notification-avatar:hover img {
  @apply ring-primary/50;
}

/* Badge de groupe stylisé */
.notification-group-badge {
  @apply inline-flex items-center justify-center;
  @apply px-2.5 py-1 text-xs font-bold;
  @apply bg-gradient-to-br from-primary to-primary/80 text-primary-foreground rounded-full;
  @apply shadow-sm;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

/* Icônes de notifications colorées avec effet */
.notification-icon-colored {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-icon-colored:hover {
  transform: scale(1.15) rotate(5deg);
  filter: brightness(1.2);
}

/* Amélioration des checkboxes */
.notification-checkbox {
  @apply w-5 h-5 rounded-md border-2 border-border;
  @apply text-primary cursor-pointer;
  @apply transition-all duration-200;
  @apply focus:ring-2 focus:ring-primary focus:ring-offset-2;
}

.notification-checkbox:hover {
  @apply border-primary/50 scale-110;
}

.notification-checkbox:checked {
  @apply bg-gradient-to-br from-primary to-primary/80 border-primary;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

/* Preview images avec hover effect */
.notification-preview-img {
  @apply transition-all duration-300;
  @apply border border-border rounded-lg;
}

.notification-preview-img:hover {
  @apply border-primary/50 scale-105;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Toolbar d'actions en masse améliorée */
.bulk-actions-toolbar {
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  @apply backdrop-blur-sm;
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 59, 130, 246), 0.15), rgba(var(--primary-rgb, 59, 130, 246), 0.05));
}

/* Amélioration des boutons d'action */
.notification-action-btn {
  @apply p-2.5 rounded-lg transition-all duration-200;
  @apply text-muted-foreground hover:text-foreground;
  @apply hover:scale-110;
  position: relative;
  overflow: hidden;
}

.notification-action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.notification-action-btn:hover::before {
  width: 100%;
  height: 100%;
}

.notification-action-btn svg {
  position: relative;
  z-index: 1;
}

/* État vide stylisé */
.notification-empty-state {
  @apply backdrop-blur-sm;
  background: linear-gradient(135deg, rgba(var(--card-rgb, 255, 255, 255), 0.8), rgba(var(--card-rgb, 255, 255, 255), 0.6));
}

.notification-empty-state-icon {
  @apply transition-transform duration-300;
}

.notification-empty-state:hover .notification-empty-state-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Amélioration des tabs dropdown */
.notifications-dropdown-tab {
  @apply relative;
  transition: all 0.2s ease;
}

.notifications-dropdown-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.notifications-dropdown-tab.active::after {
  width: 60%;
}

.notifications-dropdown-tab:hover:not(.active) {
  @apply text-foreground;
  background: rgba(var(--secondary-rgb, 244, 244, 245), 0.5);
}

/* Animation smooth pour les notifications individuelles */
.notification-item {
  @apply transition-all duration-300;
  animation: slideInNotif 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInNotif {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Badge earned special styling */
.notification-badge-icon {
  @apply transition-all duration-300;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.notification-badge-icon:hover {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
/* ========================================
   SKILLS PAGE STYLES
   Uses theme CSS variables for dark mode compatibility
   ======================================== */

/* ----------------------------------------
   SVG Icons - Force sizing
   ---------------------------------------- */
svg.skill-logo,
svg.category-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}

svg.skill-logo {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

svg.category-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

/* ----------------------------------------
   Skill Card Editable (drag & drop items)
   ---------------------------------------- */
.skill-card-editable {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.skill-card-editable:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.drag-handle {
  cursor: grab;
  padding: 0.25rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.drag-handle:hover {
  opacity: 1;
}

.drag-handle:active {
  cursor: grabbing;
}

/* ----------------------------------------
   Proficiency Selector (level buttons)
   ---------------------------------------- */
.proficiency-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--secondary);
  border-radius: var(--radius);
}

/* button_to generates a form, so we need to style it as inline-flex */
.proficiency-selector form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.proficiency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  margin: 0;
}

.proficiency-btn:hover {
  background: var(--muted);
}

.proficiency-btn.active {
  border-color: var(--foreground);
  background: var(--secondary);
  transform: scale(1.1);
}

.proficiency-dot {
  display: block !important;
  width: 0.625rem !important;
  height: 0.625rem !important;
  min-width: 0.625rem !important;
  min-height: 0.625rem !important;
  border-radius: 50% !important;
  transition: all 0.15s ease;
  opacity: 0.4 !important;
  visibility: visible !important;
}

/* Active dot is bigger and fully opaque */
.proficiency-btn.active .proficiency-dot {
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  opacity: 1 !important;
  box-shadow: 0 0 6px currentColor;
}

/* Hover state for non-active buttons */
.proficiency-btn:not(.active):hover .proficiency-dot {
  opacity: 0.7 !important;
  transform: scale(1.15);
}

/* Dot colors by level */
.proficiency-dot-beginner {
  background-color: #94a3b8 !important;
}

.proficiency-dot-intermediate {
  background-color: #3b82f6 !important;
}

.proficiency-dot-expert {
  background-color: #10b981 !important;
}

/* Legend dots - always full opacity */
.proficiency-legend .proficiency-dot {
  opacity: 1 !important;
  width: 0.625rem !important;
  height: 0.625rem !important;
}

/* ----------------------------------------
   Proficiency Legend
   ---------------------------------------- */
.proficiency-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.proficiency-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ----------------------------------------
   Remove Skill Button
   ---------------------------------------- */
.skill-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.skill-remove-btn:hover {
  color: var(--destructive);
  background: rgba(239, 68, 68, 0.1);
}

/* ----------------------------------------
   Available Skill Button
   ---------------------------------------- */
.available-skill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.available-skill-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* ----------------------------------------
   Suggestion Skill Button
   ---------------------------------------- */
/* Form wrapper must be inline */
form.inline {
  display: inline;
}

.suggestion-skill-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Primary (Recommandé pour toi) */
.suggestion-skill-btn.suggestion-skill-btn-primary {
  background: rgba(168, 162, 132, 0.1) !important;
  color: var(--primary) !important;
  border-color: rgba(168, 162, 132, 0.5) !important;
}
.suggestion-skill-btn.suggestion-skill-btn-primary:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-style: solid;
  border-color: var(--primary) !important;
}

/* Emerald (Complete ta stack) */
.suggestion-skill-btn.suggestion-skill-btn-emerald {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}
.suggestion-skill-btn.suggestion-skill-btn-emerald:hover {
  background: #10b981 !important;
  color: white !important;
  border-style: solid;
  border-color: #10b981 !important;
}

/* Blue (Populaires) */
.suggestion-skill-btn.suggestion-skill-btn-blue {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}
.suggestion-skill-btn.suggestion-skill-btn-blue:hover {
  background: #3b82f6 !important;
  color: white !important;
  border-style: solid;
  border-color: #3b82f6 !important;
}

/* Orange (Tendances) */
.suggestion-skill-btn.suggestion-skill-btn-orange {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
}
.suggestion-skill-btn.suggestion-skill-btn-orange:hover {
  background: #f97316 !important;
  color: white !important;
  border-style: solid;
  border-color: #f97316 !important;
}

/* ----------------------------------------
   Skill Profile Card (user profile view)
   ---------------------------------------- */
.skill-profile-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}

.skill-profile-card:hover {
  border-color: rgba(168, 162, 132, 0.5);
}

/* ----------------------------------------
   Proficiency Badges
   ---------------------------------------- */
.skill-proficiency-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9999px;
}

.skill-proficiency-beginner {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.skill-proficiency-intermediate {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.skill-proficiency-expert {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* ----------------------------------------
   Endorse Button
   ---------------------------------------- */
.endorse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.endorse-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(168, 162, 132, 0.1);
}

.endorse-btn.endorsed {
  color: var(--primary);
  background: rgba(168, 162, 132, 0.15);
  border-color: rgba(168, 162, 132, 0.5);
}

.endorse-btn.endorsed:hover {
  color: var(--destructive);
  border-color: var(--destructive);
  background: rgba(239, 68, 68, 0.1);
}

.endorse-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ----------------------------------------
   Sortable.js animations
   ---------------------------------------- */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  background: rgba(168, 162, 132, 0.05);
  border-color: var(--primary);
}

.sortable-drag {
  opacity: 1;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------
   Legacy styles (kept for compatibility)
   ---------------------------------------- */
.skills-page {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.search-bar {
  margin-bottom: 1.5rem;
}

.search-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--secondary);
  color: var(--foreground);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.categories {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.category-tag {
  padding: 0.5rem 1rem;
  background: var(--secondary);
  border-radius: 20px;
  text-decoration: none;
  color: var(--secondary-foreground);
  transition: all 0.2s;
}

.category-tag:hover {
  background: var(--muted);
}

.category-tag.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.skills-section {
  margin-bottom: 2rem;
}

.skills-section h3 {
  margin-bottom: 1rem;
  color: var(--foreground);
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.skill-pill {
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 25px;
  background: var(--card);
  color: var(--card-foreground);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
  font-weight: 500;
}

.skill-pill.available:hover {
  border-color: var(--primary);
  background: rgba(168, 162, 132, 0.1);
  transform: translateY(-2px);
}

.skill-pill.selected {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.skill-pill.selected .remove {
  margin-left: 0.5rem;
  font-weight: bold;
  opacity: 0.8;
}

.skill-pill.selected:hover {
  background: var(--destructive);
  border-color: var(--destructive);
}

.empty-state {
  color: var(--muted-foreground);
  font-style: italic;
  padding: 2rem;
  text-align: center;
  background: var(--secondary);
  border-radius: var(--radius);
}

.my-skills {
  background: rgba(168, 162, 132, 0.05);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 2px dashed rgba(168, 162, 132, 0.3);
}

/* ----------------------------------------
   Autocomplete Dropdown
   ---------------------------------------- */
[data-skill-autocomplete-target="dropdown"] {
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.autocomplete-item {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  display: flex !important;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.autocomplete-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.autocomplete-item:only-child {
  border-radius: var(--radius);
}

/* Scrollbar webkit */
[data-skill-autocomplete-target="dropdown"]::-webkit-scrollbar {
  width: 6px;
}

[data-skill-autocomplete-target="dropdown"]::-webkit-scrollbar-track {
  background: transparent;
}

[data-skill-autocomplete-target="dropdown"]::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

[data-skill-autocomplete-target="dropdown"]::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* ----------------------------------------
   Collapse Animation
   ---------------------------------------- */
.collapse-content {
  transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

[data-collapse-target="icon"] {
  transition: transform 0.2s ease-in-out;
}

/* ----------------------------------------
   Search Results Animation (AJAX)
   ---------------------------------------- */
.search-results-card {
  animation: searchResultFadeIn 0.2s ease-out forwards;
}

@keyframes searchResultFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === NEXP DESIGN SYSTEM === */
/* Direction Artistique : Landing Page SaaS - Dark Theme Only */

/* === CSS VARIABLES - DARK THEME (default) === */
/* Palette NexP Dark: noir profond + accents kaki signature */
/* Glassmorphism 2.0 Design System */
:root,
html.dark,
[data-theme="dark"] {
  /* Backgrounds (deep black) */
  --background: #0a0a0a;
  --foreground: #fafafa;

  /* Card */
  --card: #141414;
  --card-foreground: #fafafa;

  /* Popover */
  --popover: #141414;
  --popover-foreground: #fafafa;

  /* Primary (Kaki en dark mode) */
  --primary: #8fa66b;
  --primary-foreground: #0a0a0a;

  /* Secondary */
  --secondary: #1f1f1f;
  --secondary-foreground: #fafafa;

  /* Muted */
  --muted: #1f1f1f;
  --muted-foreground: #737373;

  /* Accent (Kaki en dark mode) */
  --accent: #8fa66b;
  --accent-foreground: #0a0a0a;

  /* Destructive */
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;

  /* Border and Input */
  --border: #262626;
  --border-subtle: rgba(143, 166, 107, 0.15);
  --input: #262626;
  --ring: #8fa66b;

  /* Chart colors (Kaki unifié) */
  --chart-1: #8fa66b;
  --chart-2: #8fa66b;
  --chart-3: #8fa66b;
  --chart-4: #8fa66b;
  --chart-5: #8fa66b;

  /* === GLASSMORPHISM 2.0 - Border Radius (Harmonisé) === */
  --radius: 1rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  /* === GLASSMORPHISM 2.0 - Glass Backgrounds (Kaki tint) === */
  --glass-bg: rgba(143, 166, 107, 0.03);
  --glass-bg-light: rgba(143, 166, 107, 0.05);
  --glass-bg-medium: rgba(143, 166, 107, 0.08);
  --glass-bg-heavy: rgba(20, 20, 20, 0.5);

  /* === GLASSMORPHISM 2.0 - Blur Intensities (Optimized for performance) === */
  --blur-xs: 2px;
  --blur-sm: 4px;
  --blur-md: 6px;
  --blur-lg: 8px;
  --blur-xl: 10px;

  /* === GLASSMORPHISM 2.0 - Glow Borders (Kaki) === */
  --glow-border: rgba(143, 166, 107, 0.3);
  --glow-border-hover: rgba(143, 166, 107, 0.5);
  --glow-border-subtle: rgba(143, 166, 107, 0.15);
  --glow-border-white: rgba(143, 166, 107, 0.2);
  --glow-border-inner: rgba(143, 166, 107, 0.08);

  /* === GLASSMORPHISM 2.0 - Shadow Glow (Kaki) === */
  --shadow-glow-sm: 0 4px 30px rgba(143, 166, 107, 0.12), 0 0 1px rgba(143, 166, 107, 0.15);
  --shadow-glow-md: 0 8px 40px rgba(143, 166, 107, 0.18), 0 0 1px rgba(143, 166, 107, 0.2);
  --shadow-glow-lg: 0 12px 60px rgba(143, 166, 107, 0.22), 0 0 1px rgba(143, 166, 107, 0.25);
  --shadow-glow-xl: 0 16px 80px rgba(143, 166, 107, 0.28), 0 0 2px rgba(143, 166, 107, 0.3);

  /* === GLASSMORPHISM 2.0 - Inner Shadows === */
  --inner-glow: inset 0 1px 1px rgba(143, 166, 107, 0.15);
  --inner-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);

  /* === GLASSMORPHISM 2.0 - Gradients (Kaki) === */
  --gradient-glass: linear-gradient(135deg, rgba(143,166,107,0.1) 0%, rgba(143,166,107,0.02) 100%);
  --gradient-shine: linear-gradient(180deg, rgba(143,166,107,0.15) 0%, transparent 40%);
  --gradient-border-top: linear-gradient(90deg, transparent 0%, rgba(143,166,107,0.3) 50%, transparent 100%);
  --gradient-border-glow: linear-gradient(90deg, transparent 0%, var(--glow-border) 50%, transparent 100%);

  /* Sidebar (Kaki en dark mode) */
  --sidebar: #141414;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #8fa66b;
  --sidebar-primary-foreground: #0a0a0a;
  --sidebar-accent: #1f1f1f;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #262626;
  --sidebar-ring: #8fa66b;

  /* Status colors */
  --success: #8fa66b;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #8fa66b;
}

/* === CSS VARIABLES - LIGHT THEME === */
/* Palette NexP Light: Design System Premium - Sophistiqué et Raffiné */
/* Glassmorphism 2.0 Design System - Luxury Edition */
html.light,
html[data-theme="light"],
[data-theme="light"],
.light {
  /* Backgrounds (Gradient subtil premium) */
  --background: #fafbfd !important;
  --foreground: #0f172a !important;

  /* Card (Blanc pur avec nuance) */
  --card: #ffffff !important;
  --card-foreground: #0f172a !important;

  /* Popover */
  --popover: #ffffff !important;
  --popover-foreground: #0f172a !important;

  /* Primary (Bleu sophistiqué - Plus profond et élégant) */
  --primary: #2563eb;
  --primary-foreground: #ffffff;

  /* Secondary (Gris élégant) */
  --secondary: #f1f5f9 !important;
  --secondary-foreground: #0f172a !important;

  /* Muted (Tons raffinés) */
  --muted: #f8fafc;
  --muted-foreground: #64748b;

  /* Accent (Indigo premium) */
  --accent: #6366f1;
  --accent-foreground: #ffffff;

  /* Destructive */
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  /* Border and Input (Subtil et élégant) */
  --border: #e2e8f0;
  --border-subtle: rgba(37, 99, 235, 0.08);
  --input: #f1f5f9;
  --ring: #2563eb;

  /* Chart colors (Palette premium harmonisée) */
  --chart-1: #2563eb;
  --chart-2: #6366f1;
  --chart-3: #8b5cf6;
  --chart-4: #d946ef;
  --chart-5: #10b981;

  /* === GLASSMORPHISM 2.0 - Border Radius (Premium) === */
  --radius: 0.875rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  /* === GLASSMORPHISM 2.0 - Glass Backgrounds (Light Mode Premium) === */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-bg-medium: rgba(255, 255, 255, 0.92);
  --glass-bg-heavy: rgba(255, 255, 255, 0.98);

  /* === GLASSMORPHISM 2.0 - Blur Intensities (Optimisé) === */
  --blur-xs: 10px;
  --blur-sm: 16px;
  --blur-md: 24px;
  --blur-lg: 40px;
  --blur-xl: 56px;

  /* === GLASSMORPHISM 2.0 - Glow Borders (Light Mode - Premium) === */
  --glow-border: rgba(37, 99, 235, 0.15);
  --glow-border-hover: rgba(37, 99, 235, 0.3);
  --glow-border-subtle: rgba(15, 23, 42, 0.08);
  --glow-border-white: rgba(255, 255, 255, 0.95);
  --glow-border-inner: rgba(255, 255, 255, 0.9);

  /* === GLASSMORPHISM 2.0 - Shadow (Light Mode - Premium Natural) === */
  --shadow-glow-sm: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-glow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.1);
  --shadow-glow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.12);
  --shadow-glow-xl: 0 24px 48px rgba(15, 23, 42, 0.1), 0 12px 24px rgba(15, 23, 42, 0.14);

  /* === GLASSMORPHISM 2.0 - Inner Shadows (Premium) === */
  --inner-glow: inset 0 1px 2px rgba(255, 255, 255, 0.95);
  --inner-shadow: inset 0 -1px 2px rgba(15, 23, 42, 0.02);

  /* === GLASSMORPHISM 2.0 - Gradients (Light Mode - Sophistiqué) === */
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.8) 100%);
  --gradient-shine: linear-gradient(180deg, rgba(255,255,255,1) 0%, transparent 50%);
  --gradient-border-top: linear-gradient(90deg, transparent 0%, rgba(37,99,235,0.1) 50%, transparent 100%);
  --gradient-border-glow: linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.15) 50%, transparent 100%);

  /* Sidebar (Premium) */
  --sidebar: #ffffff !important;
  --sidebar-foreground: #0f172a !important;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f8fafc;
  --sidebar-accent-foreground: #0f172a !important;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #2563eb;

  /* Status colors (Premium) */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #2563eb;
}

/* === BASE LAYER === */
@layer base {
  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Light mode body styles - Premium gradient background */
  html.light body,
  [data-theme="light"] body {
    background: linear-gradient(135deg, #fafbfd 0%, #f0f4f8 50%, #e8f0f8 100%) !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
  }

  html.light body *,
  [data-theme="light"] body * {
    --foreground: #0f172a;
    --card-foreground: #0f172a;
  }
}

/* === COMPONENT LAYER === */
@layer components {
  /* === GLASSMORPHISM 2.0 - Glass Utilities === */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glow-border-subtle);
    box-shadow: var(--inner-glow), var(--inner-shadow);
  }

  .glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glow-border-subtle);
    box-shadow: var(--inner-glow);
  }

  .glass-heavy {
    background: var(--glass-bg-heavy);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--glow-border-white);
    box-shadow: var(--inner-glow), var(--inner-shadow);
  }

  .glass-glow {
    background: var(--glass-bg-medium);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glow-border);
    box-shadow: var(--shadow-glow-sm), var(--inner-glow);
  }

  .glass-glow:hover {
    border-color: var(--glow-border-hover);
    box-shadow: var(--shadow-glow-md), var(--inner-glow);
  }

  /* === GLASSMORPHISM 2.0 - Cards (GPU-optimized) === */
  .card {
    color: var(--card-foreground);
    padding: 1.5rem;
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glow-border-subtle);
    border-radius: var(--radius);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--inner-glow), 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateZ(0); /* Force GPU acceleration */
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-border-top);
  }

  .card:hover {
    border-color: var(--glow-border);
    box-shadow: var(--shadow-glow-sm), var(--inner-glow);
    transform: translateY(-2px) translateZ(0);
  }

  /* Landing Card Style - Glassmorphism 2.0 (GPU-optimized) */
  .landing-card {
    padding: 2rem;
    background: var(--glass-bg-medium);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--glow-border-subtle);
    border-radius: var(--radius-lg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--inner-glow), 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateZ(0); /* Force GPU acceleration */
  }

  .landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-border-top);
  }

  .landing-card:hover {
    border-color: var(--glow-border-hover);
    box-shadow: var(--shadow-glow-md), var(--inner-glow);
    transform: translateY(-4px);
  }

  /* === GLASSMORPHISM 2.0 - Buttons === */
  .btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid rgba(143, 166, 107, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(143, 166, 107, 0.2), var(--inner-glow);
  }

  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--gradient-shine);
    pointer-events: none;
    border-radius: inherit;
  }

  .btn-primary:hover {
    box-shadow: 0 4px 24px rgba(143, 166, 107, 0.35), var(--inner-glow);
    transform: translateY(-1px);
  }

  .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(143, 166, 107, 0.25);
  }

  .btn-secondary {
    color: var(--foreground);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glow-border-subtle);
    border-radius: var(--radius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glass);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }

  .btn-secondary:hover {
    border-color: var(--glow-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(143, 166, 107, 0.15);
  }

  .btn-secondary:hover::before {
    opacity: 0.5;
  }

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

  .btn-ghost {
    color: var(--muted-foreground);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }

  .btn-ghost:hover {
    color: var(--foreground);
    background: var(--glass-bg);
    border-color: var(--glow-border-subtle);
  }

  .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: var(--radius-sm);
  }

  .btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    line-height: 1.5rem;
    height: 3rem;
    border-radius: var(--radius);
  }

  .btn-accent {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(143, 166, 107, 0.2);
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(143, 166, 107, 0.2);
  }

  .btn-accent:hover {
    box-shadow: 0 4px 16px rgba(143, 166, 107, 0.3);
    transform: translateY(-1px);
  }

  /* === GLASSMORPHISM 2.0 - Inputs === */
  .input {
    color: var(--foreground);
    padding: 0.75rem 1rem;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glow-border-subtle);
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    box-shadow: var(--inner-shadow);
  }

  .input:focus {
    outline: none;
    border-color: var(--glow-border);
    box-shadow: 0 0 0 3px rgba(143, 166, 107, 0.15), var(--shadow-glow-sm);
    background: var(--glass-bg-light);
  }

  .input::placeholder {
    color: var(--muted-foreground);
  }

  select.input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
  }

  /* Links */
  a {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }

  .link-muted {
    color: var(--muted-foreground);
  }

  .link-muted:hover {
    color: var(--foreground);
  }

  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }
}

/* === GLASSMORPHISM 2.0 - LANDING PAGE SPECIFIC === */
/* Header Landing */
.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-bottom: 1px solid var(--glow-border-subtle);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

html.light .landing-header,
[data-theme="light"] .landing-header {
  background: var(--glass-bg-heavy);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.landing-header-inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 4rem;
  max-width: 72rem;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Logo */
.logo {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.logo-accent {
  color: var(--primary);
}

/* Section containers */
.section-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 72rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* === GLASSMORPHISM 2.0 - Stats grid === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--inner-glow), 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-item {
  padding: 1.5rem;
  text-align: center;
  transition: all 0.15s ease;
  background: transparent;
  border-right: 1px solid var(--glow-border-subtle);
  border-bottom: 1px solid var(--glow-border-subtle);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:nth-child(n+3) {
  border-bottom: none;
}

@media (min-width: 768px) {
  .stat-item:nth-child(n+3) {
    border-bottom: 1px solid var(--glow-border-subtle);
  }
  .stat-item:nth-child(n+5) {
    border-bottom: none;
  }
  .stat-item:nth-child(4n) {
    border-right: none;
  }
}

.stat-item:hover {
  background: var(--glass-bg);
}

.stat-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .stat-item {
    padding: 2rem;
  }
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-label {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
}

/* === GLASSMORPHISM 2.0 - Feature cards === */
.feature-card {
  position: relative;
  padding: 2rem;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-lg);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: var(--inner-glow), 0 4px 24px rgba(0, 0, 0, 0.08);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border-top);
}

.feature-card:hover {
  border-color: var(--glow-border);
  box-shadow: var(--shadow-glow-md), var(--inner-glow);
  transform: translateY(-4px);
}

/* Dark mode: glow kaki unifié */
.feature-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 500ms ease;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(143, 166, 107, 0.15) 0%, rgba(143, 166, 107, 0.08) 30%, transparent 60%);
}

/* Light mode: glow premium et subtil */
html.light .feature-card-glow,
[data-theme="light"] .feature-card-glow {
  background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.12) 0%, rgba(99, 102, 241, 0.05) 25%, transparent 60%);
}

.feature-icon {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--inner-glow);
}

.feature-card:hover .feature-icon {
  background: rgba(143, 166, 107, 0.18);
  border-color: var(--glow-border);
  box-shadow: var(--shadow-glow-sm);
}

/* Light mode: feature icon bleu vif */
html.light .feature-card:hover .feature-icon,
[data-theme="light"] .feature-card:hover .feature-icon {
  background: rgba(59, 130, 246, 0.15);
}

.feature-icon svg {
  height: 1.5rem;
  width: 1.5rem;
  color: var(--foreground);
  transition: color 0.15s ease;
}

.feature-card:hover .feature-icon svg {
  color: var(--primary);
}

.feature-card:hover .feature-card-glow {
  opacity: 1;
}

html.light .feature-icon svg,
[data-theme="light"] .feature-icon svg {
  color: var(--foreground);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.1));
}

html.light .feature-card:hover .feature-icon svg,
[data-theme="light"] .feature-card:hover .feature-icon svg {
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.2));
  transform: scale(1.05);
}

/* === GLASSMORPHISM 2.0 - Pricing cards === */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: var(--radius-lg);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card-default {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glow-border-subtle);
  box-shadow: var(--inner-glow), 0 4px 24px rgba(0, 0, 0, 0.08);
}

.pricing-card-default::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border-top);
}

.pricing-card-default:hover {
  border-color: var(--glow-border);
  box-shadow: var(--shadow-glow-sm), var(--inner-glow);
}

.pricing-card-popular {
  background: var(--glass-bg-medium);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border: 1px solid var(--glow-border);
  box-shadow: var(--shadow-glow-md), var(--inner-glow);
  overflow: visible;
}

.pricing-card-popular::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border-glow);
}

.pricing-card-popular:hover {
  box-shadow: var(--shadow-glow-lg), var(--inner-glow);
  border-color: var(--glow-border-hover);
}

.pricing-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.2;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(143, 166, 107, 0.25) 0%, rgba(143, 166, 107, 0.12) 30%, transparent 60%);
}

.pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--primary-foreground);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(143, 166, 107, 0.25);
  z-index: 10;
}

/* Light mode: pricing premium sophistiqué */
html.light .pricing-card-glow,
[data-theme="light"] .pricing-card-glow {
  background: radial-gradient(circle at 50% 0%,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(37, 99, 235, 0.06) 30%,
    transparent 60%);
}

html.light .pricing-badge,
[data-theme="light"] .pricing-badge {
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.3),
    0 2px 6px rgba(99, 102, 241, 0.2);
}

/* === GLASSMORPHISM 2.0 - Testimonial === */
.testimonial {
  padding: 2rem;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-lg);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--inner-glow), 0 4px 24px rgba(0, 0, 0, 0.08);
}

.testimonial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-border-top);
}

.testimonial:hover {
  border-color: var(--glow-border);
  box-shadow: var(--shadow-glow-sm), var(--inner-glow);
  transform: translateY(-2px);
}

/* Footer */
.landing-footer {
  border-top: 1px solid rgba(38, 38, 38, 0.4);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .testimonial {
    padding: 3rem;
  }
}

/* === SIDEBAR STYLES === */
.sidebar {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-right: 1px solid var(--glow-border-subtle);
  height: 100vh;
  width: 16rem;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease, transform 0.3s ease;
  z-index: 40;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
}

/* === SIDEBAR LOGO === */
.sidebar-logo-link {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.sidebar-logo-full {
  display: block;
}

.sidebar-logo-compact {
  display: none;
  width: 2.5rem;
  height: auto;
}

/* === SIDEBAR TOGGLE BUTTONS === */
.sidebar-toggle-inside,
.sidebar-toggle-outside {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: var(--glass-bg-light);
  border: 1px solid var(--glow-border-subtle);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.sidebar-toggle-inside:hover,
.sidebar-toggle-outside:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glow-border);
  color: var(--primary);
}

.sidebar-toggle-inside svg,
.sidebar-toggle-outside svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Toggle outside - fixed position */
.sidebar-toggle-outside {
  position: fixed;
  left: calc(5rem + 12px);
  top: calc(1rem + 2px);
  z-index: 100;
}

/* Desktop: show inside toggle when expanded */
@media (min-width: 768px) {
  .sidebar-toggle-inside {
    display: flex;
  }

  /* Hide inside, show outside when collapsed */
  .sidebar.collapsed ~ .sidebar-toggle-outside {
    display: flex;
  }

  .sidebar.collapsed .sidebar-toggle-inside {
    display: none;
  }
}

/* === SIDEBAR COLLAPSED STATE === */
/* Mobile: slide out */
.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Desktop: shrink to icon-only */
@media (min-width: 768px) {
  .sidebar.collapsed {
    transform: translateX(0);
    width: 5rem;
    overflow: visible;
  }

  .sidebar.collapsed .sidebar-logo-full {
    display: none;
  }

  .sidebar.collapsed .sidebar-logo-compact {
    display: block;
  }

  .sidebar.collapsed .sidebar-logo-link {
    display: flex;
    justify-content: center;
    width: 100%;
  }

}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--muted-foreground);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  margin: 0.25rem 0.5rem;
  border: 1px solid transparent;
}

.sidebar-link:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glow-border-subtle);
  color: var(--foreground);
  box-shadow: var(--inner-glow);
}

.sidebar-link:hover svg {
  color: var(--foreground);
}

.sidebar-link.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 2px 12px rgba(143, 166, 107, 0.25);
  border-color: rgba(143, 166, 107, 0.2);
}

.sidebar-link.active svg {
  color: var(--primary-foreground);
}

.sidebar-link.active:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 4px 16px rgba(143, 166, 107, 0.35);
}

.sidebar-link.active:hover svg {
  color: var(--primary-foreground);
}

.sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* === SIDEBAR COLLAPSED - DESKTOP STYLES === */
@media (min-width: 768px) {
  .sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0.75rem;
    margin: 0.25rem 0.5rem;
  }

  .sidebar.collapsed .sidebar-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0;
  }

  .sidebar.collapsed .sidebar-text {
    display: none;
  }

  .sidebar.collapsed .sidebar-user-info {
    justify-content: center;
  }

  .sidebar.collapsed .sidebar-user-info > div:not(:first-child) {
    display: none;
  }

  .sidebar.collapsed .sidebar-logout-btn {
    justify-content: center;
    padding: 0.625rem;
  }

  .sidebar.collapsed .sidebar-logout-btn .sidebar-text {
    display: none;
  }

  .sidebar.collapsed .sidebar-logout-icon {
    display: block;
  }
}

/* === GLASSMORPHISM 2.0 - NAVBAR === */
.navbar {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-bottom: 1px solid var(--glow-border-subtle);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 16rem;
  height: 4rem;
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-bottom: 1px solid var(--glow-border-subtle);
  z-index: 40;
  transition: left 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

html.light .top-navbar,
[data-theme="light"] .top-navbar {
  background: var(--glass-bg-heavy);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .top-navbar {
    left: 0 !important;
  }
}

.sidebar.collapsed ~ .top-navbar {
  left: 5rem;
}

@media (max-width: 768px) {
  .sidebar.collapsed ~ .top-navbar {
    left: 0;
  }
}

/* === AVAILABILITY TOGGLE === */
.availability-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.availability-toggle-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.availability-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--secondary);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  border-radius: 26px;
}

.availability-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: var(--foreground);
  transition: all 0.3s ease;
  border-radius: 50%;
}

.availability-toggle-checkbox:checked + .availability-toggle-slider {
  background: var(--success);
  border-color: var(--success);
}

.availability-toggle-checkbox:checked + .availability-toggle-slider:before {
  transform: translateX(22px);
}

.availability-toggle-slider:hover {
  border-color: var(--primary);
}

/* === GLASSMORPHISM 2.0 - ANIMATED BACKGROUND === */
.animated-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Dark mode: grille kaki */
.animated-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 166, 107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 166, 107, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-fade 8s ease-in-out infinite;
}

/* Light mode: grille premium sophistiquée */
html.light .animated-grid,
[data-theme="light"] .animated-grid {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Dark mode: orbe kaki (optimized for performance) */
.animated-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  height: 800px;
  width: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 166, 107, 0.15) 0%, rgba(143, 166, 107, 0.06) 30%, rgba(143, 166, 107, 0.02) 50%, transparent 70%);
  filter: blur(30px);
  animation: pulse-glow 8s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Light mode: orbe premium sophistiqué (optimized) */
html.light .animated-glow,
[data-theme="light"] .animated-glow {
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(37, 99, 235, 0.08) 20%,
    rgba(139, 92, 246, 0.05) 40%,
    rgba(59, 130, 246, 0.02) 60%,
    transparent 80%);
  filter: blur(40px);
}

/* Orbes secondaires - Harmonisés par mode (optimized) */
.orb-secondary {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  will-change: transform;
}

/* Dark mode: orbes kaki */
.orb-1 {
  top: 55%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(143, 166, 107, 0.1) 0%, rgba(143, 166, 107, 0.04) 40%, transparent 70%);
  animation: float-orb 18s ease-in-out infinite;
}

.orb-2 {
  top: 20%;
  right: 0%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(143, 166, 107, 0.08) 0%, rgba(143, 166, 107, 0.03) 40%, transparent 70%);
  animation: float-orb 22s ease-in-out infinite reverse;
}

.orb-3 {
  bottom: 5%;
  right: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(143, 166, 107, 0.06) 0%, rgba(143, 166, 107, 0.02) 40%, transparent 70%);
  animation: float-orb 25s ease-in-out infinite;
}

/* Light mode: orbes premium harmonisés */
html.light .orb-1,
[data-theme="light"] .orb-1 {
  background: radial-gradient(circle,
    rgba(37, 99, 235, 0.1) 0%,
    rgba(99, 102, 241, 0.06) 30%,
    rgba(59, 130, 246, 0.03) 50%,
    transparent 75%);
}

html.light .orb-2,
[data-theme="light"] .orb-2 {
  background: radial-gradient(circle,
    rgba(99, 102, 241, 0.09) 0%,
    rgba(139, 92, 246, 0.05) 30%,
    rgba(99, 102, 241, 0.02) 50%,
    transparent 75%);
}

html.light .orb-3,
[data-theme="light"] .orb-3 {
  background: radial-gradient(circle,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(217, 70, 239, 0.04) 30%,
    rgba(139, 92, 246, 0.02) 50%,
    transparent 75%);
}

/* Dark mode: particules kaki (optimized - simplified shadows) */
.floating-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(143, 166, 107, 0.5);
  box-shadow: 0 0 20px rgba(143, 166, 107, 0.25);
  opacity: 0.3;
  will-change: transform;
}

/* Light mode: particules premium élégantes (optimized) */
html.light .floating-particle,
[data-theme="light"] .floating-particle {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  opacity: 0.3;
}

/* Dark mode: lignes kaki */
.decorative-line {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(143, 166, 107, 0.2) 50%, transparent 100%);
}

/* Light mode: lignes élégantes premium */
html.light .decorative-line,
[data-theme="light"] .decorative-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.08) 25%,
    rgba(37, 99, 235, 0.12) 50%,
    rgba(99, 102, 241, 0.08) 75%,
    transparent 100%);
}

/* Vignette - Plus subtile pour ne pas masquer les orbes */
.vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, var(--background) 90%);
  transition: background 0.3s ease;
}

/* Noise texture overlay */
.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)'/%3E%3C/svg%3E");
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(20px, 30px) scale(1.02); }
}

/* === ANIMATIONS === */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(-10px) translateX(-5px); }
  75% { transform: translateY(-25px) translateX(5px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.05); }
}

@keyframes grid-fade {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Animation utility classes (GPU-accelerated) */
.animate-float {
  animation: float 20s ease-in-out infinite;
  will-change: transform;
}
.animate-float-delayed {
  animation: float 25s ease-in-out infinite;
  animation-delay: -5s;
  will-change: transform;
}
.animate-float-slow {
  animation: float 30s ease-in-out infinite;
  animation-delay: -10s;
  will-change: transform;
}
.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
  will-change: transform, opacity;
}
.animate-grid-fade {
  animation: grid-fade 8s ease-in-out infinite;
  will-change: opacity;
}
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  will-change: transform, opacity;
}
.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
  will-change: opacity;
}
.animate-scale-in {
  animation: scale-in 0.5s ease-out forwards;
  will-change: transform, opacity;
}
.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out forwards;
  will-change: transform, opacity;
}
.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out forwards;
  will-change: transform, opacity;
}

/* Scroll animation states */
.scroll-animate {
  opacity: 0;
  transform: translateZ(0); /* Force GPU acceleration */
}

.scroll-animate.is-visible {
  opacity: 1;
}

/* Animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* === MAIN CONTENT LAYOUT === */
.main-content {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

@media (min-width: 768px) {
  .main-content {
    margin-left: 16rem;
  }

  .sidebar.collapsed ~ .main-content {
    margin-left: 5rem;
  }
}

/* === GLASSMORPHISM 2.0 - BADGE/TAG STYLES === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

.badge-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 2px 8px rgba(143, 166, 107, 0.25);
  border: 1px solid rgba(143, 166, 107, 0.2);
}

.badge-secondary {
  background: var(--glass-bg-light);
  border: 1px solid var(--glow-border-subtle);
  color: var(--foreground);
  box-shadow: var(--inner-glow);
}

.badge-muted {
  background: var(--glass-bg);
  border: 1px solid var(--glow-border-subtle);
  color: var(--muted-foreground);
}

/* === STATUS BADGES === */
.status-open {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.status-in-progress {
  background-color: var(--chart-2);
  color: white;
}

.status-completed {
  background-color: var(--success);
  color: white;
}

.status-archived {
  background-color: var(--muted);
  color: var(--muted-foreground);
}

/* === GLASSMORPHISM 2.0 - FLASH MESSAGES === */
.flash-notice {
  color: var(--foreground);
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(143, 166, 107, 0.1);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glow-border);
  border-radius: var(--radius);
  animation: fade-in-up 0.3s ease-out;
  box-shadow: var(--inner-glow), 0 4px 20px rgba(143, 166, 107, 0.15);
}

.flash-alert {
  color: var(--foreground);
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: rgba(220, 38, 38, 0.1);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--radius);
  animation: fade-in-up 0.3s ease-out;
  box-shadow: var(--inner-glow), 0 4px 20px rgba(220, 38, 38, 0.1);
}

/* Light mode flash-notice - Premium élégant */
html.light .flash-notice,
[data-theme="light"] .flash-notice {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(37, 99, 235, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* === MOBILE MENU === */
.mobile-menu {
  border-top: 1px solid rgba(38, 38, 38, 0.4);
  background-color: var(--background);
  padding: 1rem 1.5rem;
}

.mobile-menu-link {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}

.mobile-menu-link:hover {
  color: var(--foreground);
}

/* === GRADIENTS === */
/* Dark mode: kaki unifié */
.gradient-radial-primary {
  background: radial-gradient(ellipse at top, rgba(143, 166, 107, 0.15) 0%, rgba(143, 166, 107, 0.08) 40%, transparent 70%);
}

.gradient-radial-center {
  background: radial-gradient(circle, rgba(143, 166, 107, 0.12) 0%, rgba(143, 166, 107, 0.06) 50%, transparent 80%);
}

/* Light mode: gradients premium raffinés */
html.light .gradient-radial-primary,
[data-theme="light"] .gradient-radial-primary {
  background: radial-gradient(ellipse at top,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(37, 99, 235, 0.06) 30%,
    transparent 70%);
}

html.light .gradient-radial-center,
[data-theme="light"] .gradient-radial-center {
  background: radial-gradient(circle,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.04) 40%,
    transparent 80%);
}

/* === GLASSMORPHISM 2.0 - FORM STYLES === */
.form-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--foreground);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  box-shadow: var(--inner-shadow);
}

.form-input::placeholder {
  color: var(--muted-foreground);
}

.form-input:focus {
  outline: none;
  border-color: var(--glow-border);
  box-shadow: 0 0 0 3px rgba(143, 166, 107, 0.15), var(--shadow-glow-sm);
  background: var(--glass-bg-light);
}


.form-error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--destructive);
  margin-top: 0.25rem;
}

/* === DIVIDER === */
.divider {
  border-top: 1px solid rgba(38, 38, 38, 0.4);
}

/* === CHECK LIST === */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.check-icon {
  height: 1rem;
  width: 1rem;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}

.group:hover .check-icon {
  color: var(--primary);
}

/* === BULLET POINT === */
.bullet-point {
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 9999px;
  background-color: var(--primary);
  transition: transform 0.15s ease;
}

.group:hover .bullet-point {
  transform: scale(1.5);
}

/* === STAT GRADIENTS (Dashboard) === */
/* Dark mode: kaki unifié avec variations d'opacité */
.stat-gradient-primary {
  background: linear-gradient(135deg, #8fa66b 0%, rgba(143, 166, 107, 0.8) 100%);
}

.stat-gradient-blue {
  background: linear-gradient(135deg, #8fa66b 0%, rgba(143, 166, 107, 0.7) 100%);
}

.stat-gradient-purple {
  background: linear-gradient(135deg, #8fa66b 0%, rgba(143, 166, 107, 0.6) 100%);
}

.stat-gradient-orange {
  background: linear-gradient(135deg, #8fa66b 0%, rgba(143, 166, 107, 0.75) 100%);
}

/* Light mode stat gradients - Premium sophistiqué */
html.light .stat-gradient-primary,
[data-theme="light"] .stat-gradient-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  box-shadow:
    0 4px 16px rgba(37, 99, 235, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

html.light .stat-gradient-blue,
[data-theme="light"] .stat-gradient-blue {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

html.light .stat-gradient-purple,
[data-theme="light"] .stat-gradient-purple {
  background: linear-gradient(135deg, #d946ef 0%, #ec4899 50%, #f472b6 100%);
  box-shadow:
    0 4px 16px rgba(236, 72, 153, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

html.light .stat-gradient-orange,
[data-theme="light"] .stat-gradient-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fde047 100%);
  box-shadow:
    0 4px 16px rgba(245, 158, 11, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* === LIGHT MODE TEXT FIX === */
/* Ensure text-foreground is visible in light mode */
html.light,
[data-theme="light"] {
  /* Force foreground colors to be dark in light mode */
  --foreground: #1a1a1a;
  --card-foreground: #1a1a1a;
  --secondary-foreground: #1a1a1a;
  --sidebar-foreground: #1a1a1a;
  --sidebar-accent-foreground: #1a1a1a;
}

/* Explicit light mode text overrides for maximum specificity */
html.light .text-foreground,
[data-theme="light"] .text-foreground {
  color: #1a1a1a !important;
}

html.light .text-card-foreground,
[data-theme="light"] .text-card-foreground {
  color: #1a1a1a !important;
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #1a1a1a;
}

/* Ensure card content text is visible in light mode */
html.light .card,
[data-theme="light"] .card {
  color: #1a1a1a;
}

html.light .card p,
html.light .card h1,
html.light .card h2,
html.light .card h3,
html.light .card span:not(.badge):not(.badge-primary):not(.badge-secondary),
[data-theme="light"] .card p,
[data-theme="light"] .card h1,
[data-theme="light"] .card h2,
[data-theme="light"] .card h3,
[data-theme="light"] .card span:not(.badge):not(.badge-primary):not(.badge-secondary) {
  color: inherit;
}

/* Light mode buttons - Premium sophistiqué */
html.light .btn-primary,
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.1);
  box-shadow:
    0 2px 8px rgba(37, 99, 235, 0.2),
    0 1px 4px rgba(37, 99, 235, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

html.light .btn-primary:hover,
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  box-shadow:
    0 4px 16px rgba(37, 99, 235, 0.3),
    0 2px 8px rgba(37, 99, 235, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

html.light .btn-accent,
[data-theme="light"] .btn-accent {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid rgba(99, 102, 241, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.25),
    0 1px 4px rgba(99, 102, 241, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

html.light .btn-accent:hover,
[data-theme="light"] .btn-accent:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.35),
    0 2px 8px rgba(99, 102, 241, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
}

/* Light mode sidebar active - Premium */
html.light .sidebar-link.active,
[data-theme="light"] .sidebar-link.active {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff !important;
  box-shadow:
    0 2px 8px rgba(37, 99, 235, 0.25),
    0 1px 4px rgba(37, 99, 235, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

html.light .sidebar-link.active svg,
[data-theme="light"] .sidebar-link.active svg {
  color: #ffffff !important;
}

html.light .sidebar-link.active:hover,
[data-theme="light"] .sidebar-link.active:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff !important;
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.35),
    0 2px 6px rgba(37, 99, 235, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

html.light .sidebar-link.active:hover svg,
[data-theme="light"] .sidebar-link.active:hover svg {
  color: #ffffff !important;
}

/* Light mode sidebar link hover - Élégant */
html.light .sidebar-link:hover,
[data-theme="light"] .sidebar-link:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
  color: #2563eb;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.1);
}

html.light .sidebar-link:hover svg,
[data-theme="light"] .sidebar-link:hover svg {
  color: #2563eb;
}

/* Light mode badges - Premium */
html.light .badge-primary,
[data-theme="light"] .badge-primary {
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* === LIGHT MODE HOVER REFINEMENTS - PREMIUM === */
/* Cards - hover sophistiqué avec depth */
html.light .card:hover,
[data-theme="light"] .card:hover {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(37, 99, 235, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
}

html.light .landing-card:hover,
[data-theme="light"] .landing-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.1),
    0 8px 20px rgba(37, 99, 235, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.95);
  transform: translateY(-5px);
}

/* Feature cards - hover premium */
html.light .feature-card:hover,
[data-theme="light"] .feature-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.1),
    0 6px 16px rgba(37, 99, 235, 0.08),
    0 0 0 1px rgba(99, 102, 241, 0.05);
  transform: translateY(-5px);
}

html.light .feature-card:hover .feature-icon,
[data-theme="light"] .feature-card:hover .feature-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Pricing cards - hover premium élégant */
html.light .pricing-card-default:hover,
[data-theme="light"] .pricing-card-default:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.1),
    0 6px 16px rgba(37, 99, 235, 0.06);
}

html.light .pricing-card-popular:hover,
[data-theme="light"] .pricing-card-popular:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.12),
    0 10px 24px rgba(37, 99, 235, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* Testimonial hover - Subtil et élégant */
html.light .testimonial:hover,
[data-theme="light"] .testimonial:hover {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.08),
    0 4px 10px rgba(37, 99, 235, 0.06);
  transform: translateY(-3px);
}

/* Glass elements hover - Premium glow */
html.light .glass-glow:hover,
[data-theme="light"] .glass-glow:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.1),
    0 4px 12px rgba(37, 99, 235, 0.08);
}

/* Light mode btn-secondary - Clean et premium */
html.light .btn-secondary,
[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.light .btn-secondary::before,
[data-theme="light"] .btn-secondary::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
}

/* Btn secondary hover - Sophistiqué */
html.light .btn-secondary:hover,
[data-theme="light"] .btn-secondary:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 1);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.1),
    0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-3px);
}

html.light .btn-secondary:hover::before,
[data-theme="light"] .btn-secondary:hover::before {
  opacity: 1;
}

/* Btn ghost hover - Élégant */
html.light .btn-ghost:hover,
[data-theme="light"] .btn-ghost:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  border-color: rgba(99, 102, 241, 0.15);
  color: #2563eb;
}

/* Stat items hover - Subtil */
html.light .stat-item:hover,
[data-theme="light"] .stat-item:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(37, 99, 235, 0.03) 100%);
}

/* Input focus - Premium ring effect */
html.light .input:focus,
[data-theme="light"] .input:focus,
html.light .form-input:focus,
[data-theme="light"] .form-input:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.12),
    0 2px 8px rgba(37, 99, 235, 0.08);
}

/* === MODERN FILTER BAR === */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--secondary);
  border-radius: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
}

.filter-tab:hover {
  color: var(--foreground);
  background: var(--background);
}

.filter-tab-active {
  color: var(--foreground);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.filter-tab-active .filter-tab-icon {
  color: var(--primary);
}

.filter-tab-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

/* Dropdown filter */
.filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
}

.filter-dropdown-btn:hover {
  color: var(--foreground);
  background: var(--background);
}

.filter-dropdown-btn-active {
  color: var(--foreground);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Light mode adjustments */
html.light .filter-bar,
[data-theme="light"] .filter-bar {
  background: rgba(0, 0, 0, 0.04);
}

html.light .filter-tab-active,
[data-theme="light"] .filter-tab-active,
html.light .filter-dropdown-btn-active,
[data-theme="light"] .filter-dropdown-btn-active {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Legacy filter-chip support */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 9999px;
  transition: all 0.15s ease;
  background: var(--glass-bg);
  border: 1px solid var(--glow-border-subtle);
  color: var(--muted-foreground);
}

.filter-chip:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glow-border);
  color: var(--foreground);
}

.filter-chip-active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(143, 166, 107, 0.25);
}

.filter-chip-active:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

html.light .filter-chip-active,
[data-theme="light"] .filter-chip-active {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* === SEARCH RESULTS DROPDOWN === */
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.search-result-item:hover {
  background-color: rgba(31, 31, 31, 0.5);
}

/* === NOTIFICATIONS PANEL === */
.notifications-panel {
  animation: slide-in-down 0.2s ease-out;
}

@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === BADGE PILLS === */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.badge-pill:hover {
  background: color-mix(in srgb, var(--badge-color) 15%, var(--secondary));
  border-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
  transform: translateY(-1px);
}

.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--badge-color);
  flex-shrink: 0;
}

.badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Light mode badge pills */
html.light .badge-pill,
[data-theme="light"] .badge-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

html.light .badge-pill:hover,
[data-theme="light"] .badge-pill:hover {
  background: #f1f5f9;
}

/* === CRITICAL LIGHT MODE TEXT OVERRIDES === */
/* These override any Tailwind-generated or inherited styles */

/* All elements with text-foreground class */
html.light *[class*="text-foreground"],
[data-theme="light"] *[class*="text-foreground"],
.light *[class*="text-foreground"] {
  color: #1a1a1a !important;
}

/* Dashboard specific elements */
html.light .main-content h1,
html.light .main-content h2,
html.light .main-content h3,
html.light .main-content .text-4xl,
html.light .main-content .text-3xl,
html.light .main-content .text-2xl,
html.light .main-content .text-xl,
html.light .main-content .font-bold,
html.light .main-content .font-semibold,
[data-theme="light"] .main-content h1,
[data-theme="light"] .main-content h2,
[data-theme="light"] .main-content h3,
[data-theme="light"] .main-content .text-4xl,
[data-theme="light"] .main-content .text-3xl,
[data-theme="light"] .main-content .text-2xl,
[data-theme="light"] .main-content .text-xl,
[data-theme="light"] .main-content .font-bold,
[data-theme="light"] .main-content .font-semibold {
  color: #1a1a1a !important;
}

/* Card content in light mode */
html.light .card h3,
html.light .card .font-semibold,
[data-theme="light"] .card h3,
[data-theme="light"] .card .font-semibold {
  color: #1a1a1a !important;
}

/* Links should use primary color - Premium */
html.light a.text-primary,
[data-theme="light"] a.text-primary {
  color: #2563eb !important;
  transition: color 0.2s ease;
}

html.light a.text-primary:hover,
[data-theme="light"] a.text-primary:hover {
  color: #6366f1 !important;
}

html.light .text-primary,
[data-theme="light"] .text-primary {
  color: #2563eb !important;
}

/* Dark mode primary color */
html.dark .text-primary,
[data-theme="dark"] .text-primary {
  color: #8fa66b !important;
}

/* Muted text stays muted */
html.light .text-muted-foreground,
[data-theme="light"] .text-muted-foreground {
  color: #6b6b6b !important;
}

/* === GLASSMORPHISM 2.0 - PERFORMANCE OPTIMIZATIONS === */

/* Réduction du blur sur mobile pour meilleures performances */
@media (max-width: 768px) {
  :root,
  html.dark,
  [data-theme="dark"],
  html.light,
  [data-theme="light"] {
    --blur-xs: 0px;
    --blur-sm: 2px;
    --blur-md: 3px;
    --blur-lg: 4px;
    --blur-xl: 6px;
  }

  .glass,
  .glass-light,
  .glass-heavy,
  .card,
  .landing-card,
  .feature-card,
  .pricing-card,
  .sidebar,
  .top-navbar,
  .landing-header,
  .testimonial {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Orbes plus petits sur mobile */
  .animated-glow {
    width: 600px;
    height: 600px;
  }

  .orb-1, .orb-2, .orb-3 {
    opacity: 0.4;
  }
}

/* Respect des préférences utilisateur pour les animations réduites */
@media (prefers-reduced-motion: reduce) {
  .animated-glow,
  .orb-secondary,
  .floating-particle,
  .animate-float,
  .animate-float-delayed,
  .animate-float-slow {
    animation: none !important;
  }

  .card,
  .landing-card,
  .feature-card,
  .pricing-card,
  .btn-primary,
  .btn-secondary,
  .sidebar-link,
  .testimonial {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root,
  html.dark,
  [data-theme="dark"] {
    --glow-border-subtle: rgba(143, 166, 107, 0.3);
    --glow-border: rgba(143, 166, 107, 0.5);
    --glow-border-hover: rgba(143, 166, 107, 0.7);
  }

  html.light,
  [data-theme="light"] {
    --glow-border-subtle: rgba(59, 130, 246, 0.2);
    --glow-border: rgba(59, 130, 246, 0.5);
    --glow-border-hover: rgba(59, 130, 246, 0.7);
  }
}

/* === SKILL CARDS === */
.skill-card-editable {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--glass-bg-light);
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.skill-card-editable:hover {
  background: var(--glass-bg-medium);
  border-color: var(--glow-border);
}

.drag-handle {
  cursor: grab;
  padding: 0.25rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.drag-handle:hover {
  opacity: 1;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Sortable ghost/drag states */
.sortable-ghost {
  opacity: 0.4;
  background: var(--primary) !important;
}

.sortable-chosen {
  box-shadow: var(--shadow-glow-md);
}

.sortable-drag {
  opacity: 1;
  background: var(--card) !important;
  box-shadow: var(--shadow-glow-lg);
}

/* Proficiency selector */
.proficiency-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.proficiency-btn {
  padding: 0.25rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.4;
}

.proficiency-btn:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

.proficiency-btn.active {
  opacity: 1;
  transform: scale(1.15);
}

.proficiency-dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

/* Skill remove button */
.skill-remove-btn {
  padding: 0.375rem;
  color: var(--muted-foreground);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.skill-remove-btn:hover {
  color: var(--destructive);
  background: rgba(239, 68, 68, 0.1);
}

/* Available skill button */
.available-skill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.available-skill-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Suggestion skill button */
.suggestion-skill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: rgba(143, 166, 107, 0.1);
  color: var(--foreground);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-skill-btn:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  border-style: solid;
  transform: translateY(-1px);
}

/* Light mode skill buttons */
html.light .available-skill-btn:hover,
[data-theme="light"] .available-skill-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: #2563eb;
  color: #ffffff;
}

html.light .suggestion-skill-btn,
[data-theme="light"] .suggestion-skill-btn {
  background: rgba(37, 99, 235, 0.08);
  border-color: #3b82f6;
}

html.light .suggestion-skill-btn:hover,
[data-theme="light"] .suggestion-skill-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

/* Skill logo */
.skill-logo {
  flex-shrink: 0;
}

/* Category icon */
.category-icon {
  flex-shrink: 0;
}

/* Skill card for profile display */
.skill-profile-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--glass-bg-light);
  border: 1px solid var(--glow-border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.skill-profile-card:hover {
  border-color: var(--glow-border);
  transform: translateY(-1px);
}

.skill-proficiency-badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.skill-proficiency-beginner {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.2);
}

.skill-proficiency-intermediate {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.2);
}

.skill-proficiency-expert {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.skill-endorsement-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.skill-endorsement-count svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Endorse button */
.endorse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.endorse-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(143, 166, 107, 0.1);
}

.endorse-btn.endorsed {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(143, 166, 107, 0.15);
}

html.light .endorse-btn:hover,
[data-theme="light"] .endorse-btn:hover {
  color: #2563eb;
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

html.light .endorse-btn.endorsed,
[data-theme="light"] .endorse-btn.endorsed {
  color: #2563eb;
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.15);
}

.endorse-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--secondary);
  border-radius: 9999px;
}

/* === SVG ICON SIZING === */
/* Force proper sizing for skill logos and category icons */
svg.skill-logo {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 24px;
  max-height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

svg.category-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 24px;
  max-height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */