/**
 * Design System myCFiia - Glass Morphism Effects
 * 3 niveaux d'intensité de glass effect
 */

/* ====================================
   Glass Effect - Niveau Subtle
   Usage : Arrière-plans discrets, overlays légers
   ==================================== */
.glass-subtle {
    background: var(--glass-subtle);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* ====================================
   Glass Effect - Niveau Light
   Usage : Cards principales, conteneurs de contenu
   ==================================== */
.glass-light {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* ====================================
   Glass Effect - Niveau Intense
   Usage : Modales, éléments au premier plan
   ==================================== */
.glass-intense {
    background: var(--glass-intense);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* ====================================
   Glass Effect Hover States
   ==================================== */
.glass-subtle:hover,
.glass-light:hover,
.glass-intense:hover {
    box-shadow: var(--shadow-hover);
    transition: box-shadow var(--transition-normal);
}

/* ====================================
   Glass Effect avec couleur de fond
   ==================================== */
.glass-primary {
    background: linear-gradient(110deg, rgba(29, 62, 130, 0.3) 0%, rgba(29, 62, 130, 0.025) 100%);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* ====================================
   Utilities pour composants spécifiques
   ==================================== */

/* Chat input avec glass effect */
.chat-input-glass {
    background: var(--chat-input-bg);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-message-user);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card avec glass effect et padding */
.glass-card {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
}

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

/* Sidebar avec glass effect */
.glass-sidebar {
    background: var(--glass-light);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border-right: var(--glass-border);
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
}