/**
 * JPKLES Tutorial Custom Styles
 *
 * Styles personnalisés pour les tutoriels interactifs Driver.js
 * Utilise les couleurs et la typographie de JPKLES pour une expérience cohérente
 *
 * @package JPKLES
 * @version 1.0.0
 * @date 2026-01-14
 */

/* ============================================
   VARIABLES DE COULEURS JPKLES
   ============================================ */
:root {
    --jpkles-primary: #007ed3;
    --jpkles-secondary: #667eea;
    --jpkles-success: #34bfa3;
    --jpkles-warning: #ffb822;
    --jpkles-danger: #f4516c;
    --jpkles-dark: #2f2f2f;
    --jpkles-gray: #6c757d;
    --jpkles-light: #f8f9fa;
}

/* ============================================
   POPOVER PRINCIPAL
   ============================================ */
.driver-popover {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 126, 211, 0.15) !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    border: 1px solid rgba(0, 126, 211, 0.1) !important;
    max-width: 380px !important;
}

/* ============================================
   TITRE DU POPOVER
   ============================================ */
.driver-popover-title {
    color: var(--jpkles-primary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* ============================================
   DESCRIPTION DU POPOVER
   ============================================ */
.driver-popover-description {
    color: var(--jpkles-dark) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
}

/* ============================================
   FOOTER DU POPOVER
   ============================================ */
.driver-popover-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e4e6ef !important;
}

/* ============================================
   BOUTONS
   ============================================ */
.driver-popover-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

/* Bouton Suivant / Terminer */
.driver-popover-next-btn {
    background: var(--jpkles-primary) !important;
    color: white !important;
}

.driver-popover-next-btn:hover {
    background: #006bb8 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 126, 211, 0.2) !important;
}

/* Bouton Précédent */
.driver-popover-prev-btn {
    background: var(--jpkles-light) !important;
    color: var(--jpkles-dark) !important;
    border: 1px solid #dee2e6 !important;
}

.driver-popover-prev-btn:hover {
    background: #e9ecef !important;
}

/* Bouton Fermer (X) */
.driver-popover-close-btn {
    color: var(--jpkles-gray) !important;
    background: transparent !important;
    font-size: 20px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.driver-popover-close-btn:hover {
    background: var(--jpkles-light) !important;
    color: var(--jpkles-dark) !important;
}

/* ============================================
   BOUTONS PERSONNALISÉS
   ============================================ */
/* Bouton "Ne plus afficher" */
.tutorial-dismiss-btn {
    background: var(--jpkles-gray) !important;
    color: white !important;
}

.tutorial-dismiss-btn:hover {
    background: #5a6268 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

/* Bouton "Plus tard" */
.tutorial-later-btn {
    background: var(--jpkles-light) !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

.tutorial-later-btn:hover {
    background: #e9ecef !important;
    border-color: #cbd3da !important;
}

/* Conteneur des boutons personnalisés */
.tutorial-custom-buttons {
    display: flex !important;
    gap: 8px !important;
    margin-right: auto !important;
}

/* ============================================
   OVERLAY (FOND SOMBRE)
   ============================================ */
.driver-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    animation: fadeIn 0.3s ease !important;
}

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

/* ============================================
   BARRE DE PROGRESSION
   ============================================ */
.driver-popover-progress-text {
    color: var(--jpkles-gray) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ============================================
   ÉLÉMENT HIGHLIGHTÉ
   ============================================ */
.driver-active-element {
    position: relative !important;
    z-index: 10001 !important;
}

/* Animation de pulsation pour l'élément actif */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 126, 211, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 126, 211, 0);
    }
}

.driver-active-element.driver-highlight-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   FLÈCHE DU POPOVER
   ============================================ */
.driver-popover-arrow {
    border-color: white !important;
}

.driver-popover-arrow-side-top {
    border-top-color: white !important;
}

.driver-popover-arrow-side-bottom {
    border-bottom-color: white !important;
}

.driver-popover-arrow-side-left {
    border-left-color: white !important;
}

.driver-popover-arrow-side-right {
    border-right-color: white !important;
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .driver-popover {
        max-width: 90vw !important;
        font-size: 13px !important;
        padding: 16px !important;
    }

    .driver-popover-title {
        font-size: 14px !important;
    }

    .driver-popover-description {
        font-size: 13px !important;
    }

    .driver-popover-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .driver-popover-footer {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tutorial-custom-buttons {
        width: 100% !important;
        justify-content: center !important;
        order: 2 !important;
    }

    .driver-popover-navigation-btns {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        order: 1 !important;
    }
}

/* ============================================
   MENU D'AIDE (TOPMENU WIDGET)
   ============================================ */
.tutorial-menu-item {
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    border-radius: 4px !important;
    margin: 4px 0 !important;
}

.tutorial-menu-item:hover {
    background-color: var(--jpkles-light) !important;
}

.tutorial-menu-item .kt-notification__item-icon {
    margin-right: 12px !important;
}

.tutorial-menu-item .kt-notification__item-icon i {
    font-size: 24px !important;
}

.tutorial-menu-item .kt-notification__item-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--jpkles-dark) !important;
}

.tutorial-menu-item .badge-success {
    background-color: var(--jpkles-success) !important;
    font-size: 12px !important;
}

/* ============================================
   ANIMATIONS D'ENTRÉE
   ============================================ */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.driver-popover {
    animation: slideIn 0.3s ease !important;
}

/* ============================================
   SUPPORT DARK MODE (OPTIONNEL)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .driver-popover {
        background: #2b2b2b !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .driver-popover-title {
        color: #4da3ff !important;
    }

    .driver-popover-description {
        color: #e4e6ef !important;
    }

    .driver-popover-footer {
        border-top-color: rgba(255, 255, 255, 0.1) !important;
    }

    .driver-overlay {
        background: rgba(0, 0, 0, 0.8) !important;
    }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */
/* Focus visible pour navigation clavier */
.driver-popover-btn:focus {
    outline: 2px solid var(--jpkles-primary) !important;
    outline-offset: 2px !important;
}

/* Réduire les animations pour utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
    .driver-popover,
    .driver-overlay,
    .driver-popover-btn,
    .driver-active-element {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   ÉTATS DE CHARGEMENT
   ============================================ */
.tutorial-loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 126, 211, 0.2);
    border-top-color: var(--jpkles-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   PRINT MODE (DÉSACTIVER LES TUTORIELS)
   ============================================ */
@media print {
    .driver-popover,
    .driver-overlay,
    .tutorial-menu-item {
        display: none !important;
    }
}