<?php
// app/view/admin/pedagogie/module/create-edit/modal.php
// Ce fichier est inclus dans la page principale
// Les variables $module, $isEdit, $filieresList, $semestresList sont définies avant l'inclusion
?>

<div class="modal-overlay" id="moduleModal">
    <div class="modal modal-lg">
        <div class="modal-header">
            <h2 id="modalTitle"><?= isset($isEdit) && $isEdit ? 'Modifier le Module' : 'Nouveau Module' ?></h2>
            <button class="modal-close" onclick="closeModuleModal()">&times;</button>
        </div>

        <div class="modal-body">
            <form id="moduleForm">
                <input type="hidden" id="moduleId" value="<?= isset($isEdit) && $isEdit && isset($module) ? $module['id'] : '' ?>">

                <!-- ===================== -->
                <!-- INFORMATIONS GENERALES -->
                <!-- ===================== -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-info-circle"></i>
                        Informations générales
                    </h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Libellé <span class="required">*</span></label>
                            <input type="text"
                                   id="libelle"
                                   class="form-control"
                                   placeholder="Ex: Algorithmique"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? htmlspecialchars($module['libelle'] ?? '') : '' ?>"
                                   required>
                            <small class="form-text text-muted">Nom complet du module</small>
                        </div>

                        <div class="form-group">
                            <label>Code <span class="required">*</span></label>
                            <input type="text"
                                   id="code"
                                   class="form-control"
                                   placeholder="Ex: ALGO1"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? htmlspecialchars($module['code'] ?? '') : '' ?>"
                                   required>
                            <small class="form-text text-muted">Code unique du module</small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Filière <span class="required">*</span></label>
                            <select id="filiere_id" class="form-control" required>
                                <option value="">Sélectionner une filière</option>
                                <?php
                                $filieres = isset($filieresList) ? $filieresList : [];
                                foreach ($filieres as $filiere):
                                    $selected = (isset($isEdit) && $isEdit && isset($module) && isset($module['filiere_id']) && $module['filiere_id'] == $filiere['id']) ? 'selected' : '';
                                ?>
                                    <option value="<?= $filiere['id'] ?>" <?= $selected ?>>
                                        <?= htmlspecialchars($filiere['libelle']) ?> (<?= htmlspecialchars($filiere['code']) ?>)
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            <small class="form-text text-muted">Filière du module</small>
                        </div>

                        <div class="form-group">
                            <label>Semestre <span class="required">*</span></label>
                            <select id="semestre_id" class="form-control" required>
                                <option value="">Sélectionner un semestre</option>
                                <?php
                                $semestres = isset($semestresList) ? $semestresList : [];
                                foreach ($semestres as $semestre):
                                    $selected = (isset($isEdit) && $isEdit && isset($module) && isset($module['semestre_id']) && $module['semestre_id'] == $semestre['id']) ? 'selected' : '';
                                ?>
                                    <option value="<?= $semestre['id'] ?>" <?= $selected ?>>
                                        <?= htmlspecialchars($semestre['libelle']) ?> (<?= htmlspecialchars($semestre['code']) ?>)
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            <small class="form-text text-muted">Semestre du module</small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Année universitaire <span class="required">*</span></label>
                            <select id="annee_universitaire" class="form-control" required>
                                <option value="">Sélectionner une année</option>
                                <?php
                                $currentYear = date('Y');
                                for ($i = 0; $i < 5; $i++) {
                                    $year = $currentYear - $i;
                                    $selected = (isset($isEdit) && $isEdit && isset($module) && isset($module['annee_universitaire']) && $module['annee_universitaire'] == $year) ? 'selected' : '';
                                    echo "<option value='$year' $selected>$year - " . ($year + 1) . "</option>";
                                }
                                ?>
                            </select>
                            <small class="form-text text-muted">Année universitaire du module</small>
                        </div>
                    </div>
                </div>

                <!-- ===================== -->
                <!-- CHARGES HORAIRES -->
                <!-- ===================== -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-clock"></i>
                        Charges horaires
                    </h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Cours (heures)</label>
                            <input type="number"
                                   id="charge_horaire_cours"
                                   class="form-control"
                                   placeholder="0"
                                   min="0"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['charge_horaire_cours'] ?? 0) : 0 ?>">
                            <small class="form-text text-muted">Volume horaire de cours</small>
                        </div>

                        <div class="form-group">
                            <label>TP (heures)</label>
                            <input type="number"
                                   id="charge_horaire_tp"
                                   class="form-control"
                                   placeholder="0"
                                   min="0"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['charge_horaire_tp'] ?? 0) : 0 ?>">
                            <small class="form-text text-muted">Volume horaire de travaux pratiques</small>
                        </div>

                        <div class="form-group">
                            <label>TD (heures)</label>
                            <input type="number"
                                   id="charge_horaire_td"
                                   class="form-control"
                                   placeholder="0"
                                   min="0"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['charge_horaire_td'] ?? 0) : 0 ?>">
                            <small class="form-text text-muted">Volume horaire de travaux dirigés</small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Total heures</label>
                            <input type="text"
                                   id="totalHeures"
                                   class="form-control"
                                   readonly
                                   style="background: #f0f2f5; font-weight: bold; color: #27ae60; font-size: 18px; text-align: center;">
                            <small class="form-text text-muted text-center" style="display: block; text-align: center;">Total des heures (Cours + TP + TD)</small>
                        </div>
                    </div>
                </div>

                <!-- ===================== -->
                <!-- NOMBRE DE GROUPES -->
                <!-- ===================== -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-users"></i>
                        Groupes
                    </h3>

                    <div class="form-row">
                        <div class="form-group">
                            <label>Nombre de groupes Cours</label>
                            <input type="number"
                                   id="nombre_groupe_cours"
                                   class="form-control"
                                   placeholder="1"
                                   min="1"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['nombre_groupe_cours'] ?? 1) : 1 ?>">
                            <small class="form-text text-muted">Nombre de groupes pour les cours</small>
                        </div>

                        <div class="form-group">
                            <label>Nombre de groupes TP</label>
                            <input type="number"
                                   id="nombre_groupe_tp"
                                   class="form-control"
                                   placeholder="1"
                                   min="1"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['nombre_groupe_tp'] ?? 1) : 1 ?>">
                            <small class="form-text text-muted">Nombre de groupes pour les TP</small>
                        </div>

                        <div class="form-group">
                            <label>Nombre de groupes TD</label>
                            <input type="number"
                                   id="nombre_groupe_td"
                                   class="form-control"
                                   placeholder="1"
                                   min="1"
                                   value="<?= isset($isEdit) && $isEdit && isset($module) ? ($module['nombre_groupe_td'] ?? 1) : 1 ?>">
                            <small class="form-text text-muted">Nombre de groupes pour les TD</small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Total groupes</label>
                            <input type="text"
                                   id="totalGroupes"
                                   class="form-control"
                                   readonly
                                   style="background: #f0f2f5; font-weight: bold; color: #e67e22; font-size: 18px; text-align: center;">
                            <small class="form-text text-muted text-center" style="display: block; text-align: center;">Total des groupes (Cours + TP + TD)</small>
                        </div>
                    </div>
                </div>

                <!-- ===================== -->
                <!-- DESCRIPTION -->
                <!-- ===================== -->
                <div class="form-section">
                    <h3 class="section-title">
                        <i class="fas fa-align-left"></i>
                        Description
                    </h3>

                    <div class="form-row">
                        <div class="form-group full-width">
                            <label>Description</label>
                            <textarea id="description"
                                      class="form-control"
                                      rows="4"
                                      placeholder="Description du module..."><?= isset($isEdit) && $isEdit && isset($module) ? htmlspecialchars($module['description'] ?? '') : '' ?></textarea>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <!-- ===================== -->
        <!-- FOOTER -->
        <!-- ===================== -->
        <div class="modal-footer">
            <div class="modal-footer-left">
                <?php if (isset($isEdit) && $isEdit && isset($module) && isset($module['id'])): ?>
                    <button class="btn btn-danger" onclick="deleteModule(<?= $module['id'] ?>)">
                        <i class="fas fa-trash"></i> Supprimer
                    </button>
                <?php endif; ?>
            </div>
            <div class="modal-footer-right">
                <button class="btn btn-secondary" onclick="closeModuleModal()">
                    <i class="fas fa-times"></i> Annuler
                </button>
                <button class="btn btn-primary" onclick="saveModule()">
                    <i class="fas fa-save"></i> Enregistrer
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// =========================================
// MODULE MODAL FUNCTIONS
// =========================================

function openModuleModal(data = null) {
    const modal = document.getElementById('moduleModal');
    const title = document.getElementById('modalTitle');
    const form = document.getElementById('moduleForm');

    if (data && data.id) {
        // Mode édition
        title.textContent = 'Modifier le Module';
        document.getElementById('moduleId').value = data.id;
        document.getElementById('libelle').value = data.libelle || '';
        document.getElementById('code').value = data.code || '';
        document.getElementById('filiere_id').value = data.filiere_id || '';
        document.getElementById('semestre_id').value = data.semestre_id || '';
        document.getElementById('annee_universitaire').value = data.annee_universitaire || '';
        document.getElementById('charge_horaire_cours').value = data.charge_horaire_cours || 0;
        document.getElementById('charge_horaire_tp').value = data.charge_horaire_tp || 0;
        document.getElementById('charge_horaire_td').value = data.charge_horaire_td || 0;
        document.getElementById('nombre_groupe_cours').value = data.nombre_groupe_cours || 1;
        document.getElementById('nombre_groupe_tp').value = data.nombre_groupe_tp || 1;
        document.getElementById('nombre_groupe_td').value = data.nombre_groupe_td || 1;
        document.getElementById('description').value = data.description || '';
    } else {
        // Mode création
        title.textContent = 'Nouveau Module';
        form.reset();
        document.getElementById('moduleId').value = '';
        document.getElementById('charge_horaire_cours').value = 0;
        document.getElementById('charge_horaire_tp').value = 0;
        document.getElementById('charge_horaire_td').value = 0;
        document.getElementById('nombre_groupe_cours').value = 1;
        document.getElementById('nombre_groupe_tp').value = 1;
        document.getElementById('nombre_groupe_td').value = 1;
        document.getElementById('annee_universitaire').value = '';
    }

    // Calculer les totaux
    calculateTotalHeures();
    calculateTotalGroupes();

    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeModuleModal() {
    const modal = document.getElementById('moduleModal');
    modal.classList.remove('active');
    document.body.style.overflow = '';
}

function calculateTotalHeures() {
    const cours = parseInt(document.getElementById('charge_horaire_cours').value) || 0;
    const tp = parseInt(document.getElementById('charge_horaire_tp').value) || 0;
    const td = parseInt(document.getElementById('charge_horaire_td').value) || 0;
    const total = cours + tp + td;
    document.getElementById('totalHeures').value = total + 'h';
}

function calculateTotalGroupes() {
    const cours = parseInt(document.getElementById('nombre_groupe_cours').value) || 0;
    const tp = parseInt(document.getElementById('nombre_groupe_tp').value) || 0;
    const td = parseInt(document.getElementById('nombre_groupe_td').value) || 0;
    const total = cours + tp + td;
    document.getElementById('totalGroupes').value = total;
}

// Auto-calcul des totaux
document.addEventListener('DOMContentLoaded', function() {
    // Heures
    ['charge_horaire_cours', 'charge_horaire_tp', 'charge_horaire_td'].forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', calculateTotalHeures);
            input.addEventListener('change', calculateTotalHeures);
        }
    });

    // Groupes
    ['nombre_groupe_cours', 'nombre_groupe_tp', 'nombre_groupe_td'].forEach(id => {
        const input = document.getElementById(id);
        if (input) {
            input.addEventListener('input', calculateTotalGroupes);
            input.addEventListener('change', calculateTotalGroupes);
        }
    });
});

async function saveModule() {
    const id = document.getElementById('moduleId').value;
    const data = {
        libelle: document.getElementById('libelle').value.trim(),
        code: document.getElementById('code').value.trim(),
        filiere_id: parseInt(document.getElementById('filiere_id').value) || null,
        semestre_id: parseInt(document.getElementById('semestre_id').value) || null,
        annee_universitaire: parseInt(document.getElementById('annee_universitaire').value) || null,
        charge_horaire_cours: parseInt(document.getElementById('charge_horaire_cours').value) || 0,
        charge_horaire_tp: parseInt(document.getElementById('charge_horaire_tp').value) || 0,
        charge_horaire_td: parseInt(document.getElementById('charge_horaire_td').value) || 0,
        nombre_groupe_cours: parseInt(document.getElementById('nombre_groupe_cours').value) || 1,
        nombre_groupe_tp: parseInt(document.getElementById('nombre_groupe_tp').value) || 1,
        nombre_groupe_td: parseInt(document.getElementById('nombre_groupe_td').value) || 1,
        description: document.getElementById('description').value.trim()
    };

    // Validation
    if (!data.libelle) {
        showToast('Veuillez saisir le libellé du module', 'warning');
        document.getElementById('libelle').focus();
        return;
    }
    if (!data.code) {
        showToast('Veuillez saisir le code du module', 'warning');
        document.getElementById('code').focus();
        return;
    }
    if (!data.filiere_id) {
        showToast('Veuillez sélectionner une filière', 'warning');
        document.getElementById('filiere_id').focus();
        return;
    }
    if (!data.semestre_id) {
        showToast('Veuillez sélectionner un semestre', 'warning');
        document.getElementById('semestre_id').focus();
        return;
    }
    if (!data.annee_universitaire) {
        showToast('Veuillez sélectionner l\'année universitaire', 'warning');
        document.getElementById('annee_universitaire').focus();
        return;
    }

    const method = id ? 'PUT' : 'POST';
    const url = id
        ? `/est-concours/model/api/module.php?id=${id}`
        : '/est-concours/model/api/module.php';

    const saveBtn = document.querySelector('#moduleModal .btn-primary');
    const orig = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enregistrement...';
    saveBtn.disabled = true;

    try {
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (result.success) {
            showToast(result.message, 'success');
            closeModuleModal();
            // Rafraîchir la liste
            if (typeof loadModules === 'function') {
                loadModules();
            }
            if (typeof loadStats === 'function') {
                loadStats();
            }
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('Erreur: ' + result.message, 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Une erreur est survenue lors de l\'enregistrement', 'error');
    } finally {
        saveBtn.innerHTML = orig;
        saveBtn.disabled = false;
    }
}

function deleteModule(id) {
    if (!confirm('⚠️ Supprimer ce module ?\n\nCette action est irréversible.')) {
        return;
    }

    const deleteBtn = document.querySelector('#moduleModal .btn-danger');
    const orig = deleteBtn ? deleteBtn.innerHTML : '';
    if (deleteBtn) {
        deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        deleteBtn.disabled = true;
    }

    fetch(`/est-concours/model/api/module.php?id=${id}`, { method: 'DELETE' })
        .then(r => r.json())
        .then(result => {
            if (deleteBtn) {
                deleteBtn.innerHTML = orig;
                deleteBtn.disabled = false;
            }
            if (result.success) {
                showToast(result.message, 'success');
                closeModuleModal();
                if (typeof loadModules === 'function') loadModules();
                if (typeof loadStats === 'function') loadStats();
                setTimeout(() => location.reload(), 1500);
            } else {
                showToast('Erreur: ' + result.message, 'error');
            }
        })
        .catch(() => {
            if (deleteBtn) {
                deleteBtn.innerHTML = orig;
                deleteBtn.disabled = false;
            }
            showToast('Erreur de connexion', 'error');
        });
}

// Fermeture du modal
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('moduleModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeModuleModal();
            }
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModuleModal();
        }
    });
});

// Fonctions globales pour les notifications
function showToast(message, type = 'info') {
    const container = document.getElementById('toastContainer');
    if (!container) {
        alert(message);
        return;
    }
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `<span>${message}</span><button onclick="this.parentElement.remove()">&times;</button>`;
    container.appendChild(toast);
    setTimeout(() => {
        if (toast.parentElement) toast.remove();
    }, 4000);
}
</script>

<style>
/* Styles pour le modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: white;
    border-radius: 12px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    animation: slideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-lg {
    max-width: 900px;
}

.modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.modal-header h2 i {
    color: #27ae60;
    margin-right: 10px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #95a5a6;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0 5px;
}

.modal-close:hover {
    color: #e74c3c;
}

.modal-body {
    padding: 25px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-footer-left {
    display: flex;
    gap: 10px;
}

.modal-footer-right {
    display: flex;
    gap: 10px;
}

.form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f2f5;
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i {
    color: #27ae60;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 500;
    font-size: 13px;
    color: #34495e;
    margin-bottom: 5px;
}

.form-group label .required {
    color: #e74c3c;
    font-weight: 700;
}

.form-control {
    padding: 10px 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    background: #f8f9fa;
}

.form-control:focus {
    border-color: #27ae60;
    outline: none;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.12);
    background: white;
}

.form-control.is-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}

.form-control[readonly] {
    cursor: not-allowed;
    opacity: 0.8;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2334495e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.form-text {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 4px;
}

.text-center {
    text-align: center;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
}

.btn-primary {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1e8449, #27ae60);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: #ecf0f1;
    color: #34495e;
}

.btn-secondary:hover {
    background: #dde1e3;
}

.btn-danger {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
}

.btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.toast {
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease;
    font-size: 14px;
}

.toast-success {
    background: #d4edda;
    color: #155724;
    border-left: 4px solid #27ae60;
}

.toast-error {
    background: #f8d7da;
    color: #721c24;
    border-left: 4px solid #e74c3c;
}

.toast-warning {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #f39c12;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    max-width: 400px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.spinner-border {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .modal {
        max-width: 95%;
        margin: 10px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-header {
        padding: 15px 20px;
    }

    .modal-header h2 {
        font-size: 17px;
    }

    .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .modal-footer-left,
    .modal-footer-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .modal-footer-left .btn,
    .modal-footer-right .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modal-footer-left,
    .modal-footer-right {
        flex-direction: column;
    }

    .modal-footer-left .btn,
    .modal-footer-right .btn {
        width: 100%;
    }
}
</style>