/* --- Variables Globales MedixFlow --- */
:root {
    --medix-green: #2ecc71;
    --medix-dark-green: #27ae60;
    --medix-bg-light: #f4f7f6;
    --medix-bg-dark: #1a1a1a;
    --medix-card-light: #ffffff;
    --medix-card-dark: #252525;
    --medix-text-light: #333333;
    --medix-text-dark: #eeeeee;
    --success-color: #2ecc71;
    --error-color: #e74c3c;
}

/* --- Style Général --- */
body {
    background-color: var(--medix-bg-light);
    color: var(--medix-text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

[data-bs-theme="dark"] body {
    background-color: var(--medix-bg-dark);
    color: var(--medix-text-dark);
}

.text-medix-green { color: var(--medix-green); }

/* --- Cartes style React --- */
.card-react {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background-color: var(--medix-card-light);
    transition: background-color 0.3s;
}

[data-bs-theme="dark"] .card-react {
    background-color: var(--medix-card-dark);
}

/* --- Boutons --- */
.btn-medix {
    background-color: var(--medix-green);
    color: white;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-medix:hover {
    background-color: var(--medix-dark-green);
    transform: translateY(-2px);
    color: white;
}

/* --- Prévisualisation Image --- */
.preview-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--medix-green);
}

/* =========================================
   === Système de Notifications (Toasts) ===
   ========================================= */

/* Container des notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.medix-toast {
    background-color: var(--medix-card-light);
    color: var(--medix-text-light);
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 450px;
    /* Animation d'entrée */
    animation: slideInRight 0.5s ease forwards;
}

[data-bs-theme="dark"] .medix-toast {
    background-color: var(--medix-card-dark);
    color: var(--medix-text-dark);
}

/* Styles selon le type */
.toast-success { border-left: 5px solid var(--success-color); }
.toast-error { border-left: 5px solid var(--error-color); }
.toast-warning { border-left: 5px solid #f39c12; }
.toast-info { border-left: 5px solid #3498db; }

/* Contenu du toast */
.toast-content { flex-grow: 1; font-size: 0.95rem; }
.toast-icon { font-size: 1.3rem; }

/* Barre de progression */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    /* L'animation est définie en JS pour la durée */
    animation: progressLinear linear forwards;
}

/* Couleurs de la barre de progression */
.toast-success .toast-progress { background: rgba(46, 204, 113, 0.5); }
.toast-error .toast-progress { background: rgba(231, 76, 60, 0.5); }

/* --- Animations --- */
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

@keyframes progressLinear {
    from { width: 100%; }
    to { width: 0%; }
}