/* ============================================================================
   THEMES - Variables CSS Complètes
   ============================================================================ */

/* ============================================================================
   THÈME PAR DÉFAUT
   ============================================================================ */
body[data-theme="default"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Textes */
    --text-color: #e8e8e8;           /* Blanc cassé (lisible) */
    --text-primary: #f0f0f0;         /* Presque blanc  #f0f0f0;*/
    --text-secondary: #002729;       /* Gris clair #c0c0c0; */
    --text-tertiary: #a0a0a0;        /* Gris moyen */
    
    /* Backgrounds - LÉGÈREMENT PLUS CLAIR QUE TON TEST */
    --background-color: #2a2a3e;     /* Bleu-gris foncé (moins noir) */
    --card-background: linear-gradient(135deg, 
        rgba(248, 246, 255, 0.5) 0%,    /* Violet 60% transparent */
        rgba(240, 247, 255, 0.2) 100%);   /* Bleu-gris moyen */
    --background-card: rgba(58, 58, 82, 0.50);  /* Semi-transparent élégant */
    
    /* Bordures */
    --border-color: #4a4a62;         /* Bordures visibles mais discrètes */
    
    /* Couleurs d'interaction */
    --primary-color: #818cf8;        /* Violet clair (cohérent avec gradient) */
    --hover-background: rgba(129, 140, 248, 0.15);  /* Hover subtil */
    --selected-background: linear-gradient(135deg, rgba(129, 140, 248, 0.2) 0%, rgba(58, 58, 82, 0.9) 100%);
    
    /* Tags */
    --tag-background: rgba(129, 140, 248, 0.2);
    
    /* Progress bars */
    --progress-bg: rgba(255, 255, 255, 0.1);
    
    /* Ombres */
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    /* Spinner */
    --spinner-bg: rgba(129, 140, 248, 0.3);
}

/* ============================================================================
   THÈME SOMBRE
   ============================================================================ */
body[data-theme="dark"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
    
    /* Texte */
    --text-color: #e5e5e5;
    --text-primary: #e0e0e0;
    --text-secondary: #b3b3b3;
    --text-tertiary: #808080;
    
    /* Backgrounds */
    --background-color: #1a1a1a;
    --card-background: #2d2d2d;
    --background-card: rgba(0, 0, 0, 0.5);
    
    /* Bordures */
    --border-color: #404040;
    
    /* Couleurs d'interaction */
    --primary-color: #818cf8;
    --hover-background: #383838;
    --selected-background: linear-gradient(135deg, #2d2d3d 0%, #1a1a1a 100%);
    
    /* Tags */
    --tag-background: #3d3d4d;
    
    /* Progress bars */
    --progress-bg: rgba(255, 255, 255, 0.1);
    
    /* Ombres */
    --shadow-color: rgba(129, 140, 248, 0.2);
    
    /* Spinner */
    --spinner-bg: rgba(129, 140, 248, 0.3);
}

/* ============================================================================
   THÈME COLORÉ
   ============================================================================ */
body[data-theme="colorful"] {
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 50%, #FFE66D 100%);
    
    /* Texte */
    --text-color: #1f2937;
    --text-primary: #1f2937;
    --text-secondary: #374151;
    --text-tertiary: #6b7280;
    
    /* Backgrounds */
    --background-color: #fef3c7;
    --card-background: #fde68a;
    --background-card: rgba(253, 230, 138, 0.9);
    
    /* Bordures */
    --border-color: #fbbf24;
    
    /* Couleurs d'interaction */
    --primary-color: #f59e0b;
    --hover-background: #fef3c7;
    --selected-background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    
    /* Tags */
    --tag-background: #fef3c7;
    
    /* Progress bars */
    --progress-bg: rgba(245, 158, 11, 0.2);
    
    /* Ombres */
    --shadow-color: rgba(245, 158, 11, 0.3);
    
    /* Spinner */
    --spinner-bg: rgba(245, 158, 11, 0.3);
}

/* ============================================================================
   THÈME MINIMAL
   ============================================================================ */
body[data-theme="minimal"] {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    
    /* Texte */
    --text-color: #111827;
    --text-primary: #333;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    /* Backgrounds */
    --background-color: #f9fafb;
    --card-background: #ffffff;
    --background-card: rgba(255, 255, 255, 0.9);
    
    /* Bordures */
    --border-color: #d1d5db;
    
    /* Couleurs d'interaction */
    --primary-color: #4b5563;
    --hover-background: #f3f4f6;
    --selected-background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
    
    /* Tags */
    --tag-background: #f3f4f6;
    
    /* Progress bars */
    --progress-bg: rgba(75, 85, 99, 0.1);
    
    /* Ombres */
    --shadow-color: rgba(75, 85, 99, 0.1);
    
    /* Spinner */
    --spinner-bg: rgba(75, 85, 99, 0.2);
}

/* ============================================================================
   STYLES COMMUNS (Indépendants du thème)
   ============================================================================ */

/* Assurer que tous les éléments héritent des variables */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ============================================================================
   PACK BROWSER - CARDS PROFIL USER
   ============================================================================ */

.user-profile-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Base profile card */
.profile-card {
    padding: 1.25rem;
    border-radius: 12px;
    border: 2px solid;
}

.profile-card h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ============================================================================
   THÈME PAR DÉFAUT - Cards Profil
   ============================================================================ */

body[data-theme="default"] .profile-card-strengths {
    background: rgba(52, 211, 153, 0.15);  /* Vert avec transparence */
    border-color: rgba(52, 211, 153, 0.4);
}

body[data-theme="default"] .profile-card-strengths h3 {
    color: #34d399;
}

body[data-theme="default"] .profile-card-weaknesses {
    background: rgba(248, 113, 113, 0.15);  /* Rouge avec transparence */
    border-color: rgba(248, 113, 113, 0.4);
}

body[data-theme="default"] .profile-card-weaknesses h3 {
    color: #f87171;
}

body[data-theme="default"] .profile-card-recommendations {
    background: rgba(251, 191, 36, 0.15);  /* Jaune avec transparence */
    border-color: rgba(251, 191, 36, 0.4);
}

body[data-theme="default"] .profile-card-recommendations h3 {
    color: #fbbf24;
}

/* ============================================================================
   THÈME SOMBRE - Cards Profil
   ============================================================================ */

body[data-theme="dark"] .profile-card-strengths {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

body[data-theme="dark"] .profile-card-strengths h3 {
    color: #10b981;
}

body[data-theme="dark"] .profile-card-weaknesses {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

body[data-theme="dark"] .profile-card-weaknesses h3 {
    color: #ef4444;
}

body[data-theme="dark"] .profile-card-recommendations {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

body[data-theme="dark"] .profile-card-recommendations h3 {
    color: #f59e0b;
}

/* ============================================================================
   THÈME COLORÉ - Cards Profil
   ============================================================================ */

body[data-theme="colorful"] .profile-card-strengths {
    background: rgba(52, 211, 153, 0.25);
    border-color: rgba(52, 211, 153, 0.6);
}

body[data-theme="colorful"] .profile-card-strengths h3 {
    color: #059669;
}

body[data-theme="colorful"] .profile-card-weaknesses {
    background: rgba(248, 113, 113, 0.25);
    border-color: rgba(248, 113, 113, 0.6);
}

body[data-theme="colorful"] .profile-card-weaknesses h3 {
    color: #dc2626;
}

body[data-theme="colorful"] .profile-card-recommendations {
    background: rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.6);
}

body[data-theme="colorful"] .profile-card-recommendations h3 {
    color: #d97706;
}

/* ============================================================================
   THÈME MINIMAL - Cards Profil
   ============================================================================ */

body[data-theme="minimal"] .profile-card-strengths {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

body[data-theme="minimal"] .profile-card-strengths h3 {
    color: #16a34a;
}

body[data-theme="minimal"] .profile-card-weaknesses {
    background: #fef2f2;
    border-color: #fecaca;
}

body[data-theme="minimal"] .profile-card-weaknesses h3 {
    color: #dc2626;
}

body[data-theme="minimal"] .profile-card-recommendations {
    background: #fffbeb;
    border-color: #fde68a;
}

body[data-theme="minimal"] .profile-card-recommendations h3 {
    color: #ca8a04;
}

/* ============================================================================
   CONTENU CARDS - Placeholder & Items
   ============================================================================ */

.placeholder-text {
    color: var(--text-secondary, #999);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    padding: 1rem;
    opacity: 0.7;
}

/* Items dans les cards */
.strength-item,
.weakness-item,
.recommendation-item {
    padding: 0.75rem;
    background: var(--background-card, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-left: 3px solid;
}

.strength-item {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.weakness-item {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}


.recommendation-item {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    cursor: pointer;
    transition: all 0.2s;
}


.recommendation-item:hover {
    background: rgba(251, 191, 36, 0.15);
    transform: translateX(3px);
}


.item-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color, #fff);
}

.item-percentage {
    font-size: 0.85rem;
    color: var(--text-secondary, #ccc);
}

.item-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.item-progress-fill {
    height: 100%;
    transition: width 0.6s ease;
}

/* Couleurs barres progress selon type */
.strength-item .item-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.weakness-item .item-progress-fill {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.recommendation-item .item-progress-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}