/**
 * Styles pour l'optimisation de l'interface du calendrier
 */

/* Cacher complètement le bandeau jusqu'à ce qu'il soit prêt */
.cdcal-not-ready {
    display: none !important;
}

/* La barre de raccourcis est maintenant toujours cachée (remplacée par le modal) */
.cdcal-quick-actions-bar {
    display: none !important;
}

/* S'assurer que le conteneur principal du calendrier gère correctement l'ordre des éléments */
#cdclient-calendar-display-calendar-admin {
    position: relative;
}


/* Boutons de contrôle positionnés dans le calendrier */
.cdcal-control-buttons {
    position: relative; /* Changé de absolute à relative pour éviter la superposition */
    margin-bottom: -50px;
    display: flex;
    align-items: flex-start; /* Aligner tous les éléments en haut */
    justify-content: space-between; /* Répartir les éléments */
    gap: 0.5rem;
    z-index: 7;
    overflow: visible; /* S'assurer que le contenu n'est pas coupé */
}

/* Conteneur pour les boutons de droite */
.cdcal-control-buttons-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cdcal-control-buttons .button {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid #e2e8f0;
    color: #4a5568;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cdcal-control-buttons .button:hover {
    background: white;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cdcal-control-buttons .button i {
    margin-right: 0;
}

/* Cacher les textes des boutons sur desktop aussi */
.cdcal-control-buttons .button span {
    display: none !important;
}

/* Style spécifique pour le sélecteur de vue intégré */
.cdcal-control-buttons .fc-custom-select {
    display: inline-block;
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: auto !important;
    align-self: auto !important;
    justify-content: initial !important;
}

.cdcal-control-buttons #fc-select-trigger {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid #e2e8f0;
    color: #4a5568;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height: auto;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0 !important;
}

.cdcal-control-buttons #fc-select-trigger:hover {
    background: white;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Ajuster la position de la liste déroulante */
.cdcal-control-buttons .fc-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
}

/* Barre d'actions rapide repliable */
.cdcal-quick-actions-bar {
    transition: all 0.3s ease;
    margin-bottom: 1rem !important;
    position: relative;
    overflow: hidden;
}

.cdcal-quick-actions-bar.cdcal-collapsed {
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.cdcal-quick-actions-content {
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Conserver la disposition originale de la navbar */
.cdcal-quick-actions-bar:not(.cdcal-collapsed) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    padding: 1rem !important;
}

.cdcal-quick-actions-bar > * {
    flex-shrink: 0;
}

/* Ajustement du calendrier pour les boutons en absolute */
.cdclient-calendrier-shortcode #cdclient-calendar-display-calendar-admin {
    position: relative !important;
}

/* Calendrier pleine hauteur */
.cdclient-calendrier-shortcode #cdclient-calendar-display-calendar-admin,
.cdclient-calendrier-shortcode #cdclient-calendar-display-calendar-admin-table {
    transition: min-height 0.3s ease;
}

/* Modal des statistiques - style amélioré */
#cdcal-stats-modal .modal-card {
    width: 90%;
    max-width: 800px;
}

#cdcal-stats-modal .modal-card-body {
    max-height: 80vh;
    overflow-y: auto;
}

/* Amélioration responsive */
@media (max-width: 768px) {
    .cdcal-control-buttons {
        margin-bottom: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.25rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        z-index: 10; /* Garder un z-index plus élevé sur mobile */
    }
    
    .cdcal-control-buttons-right {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0.25rem;
        justify-content: center;
        min-width: auto;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Forcer l'affichage de TOUS les boutons sur mobile */
    .cdcal-control-buttons-right .button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .cdcal-control-buttons .button {
        padding: 0.5rem;
        min-width: auto;
        font-size: 14px;
        height: 36px;
        width: 36px;
        white-space: nowrap;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
    }
    
    /* Cacher les textes sur mobile - icônes uniquement */
    .cdcal-control-buttons .button span {
        display: none !important;
    }
    
    .cdcal-control-buttons .button i {
        margin-right: 0;
        font-size: 16px;
    }
    
    /* S'assurer que le sélecteur de vue est compact sur mobile */
    .cdcal-control-buttons .fc-custom-select {
        min-width: auto;
        margin-right: 0;
    }
    
    /* Style du bouton sélecteur pour qu'il corresponde aux autres */
    .cdcal-control-buttons .fc-select-trigger.button {
        height: 36px !important;
        width: 36px !important;
        padding: 0.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
        font-size: 14px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* Cacher le texte du sélecteur sur mobile aussi */
    .cdcal-control-buttons .fc-select-trigger #fc-current-label {
        display: none !important;
    }
    
    /* Cacher aussi l'icône de dropdown */
    .cdcal-control-buttons .fc-select-trigger .fa-caret-down {
        display: none !important;
    }
    
    /* S'assurer que l'icône principale est centrée */
    .cdcal-control-buttons .fc-select-trigger #fc-current-icon {
        margin: 0 !important;
        font-size: 16px !important;
    }
    
    /* Hover state pour le sélecteur de vue sur mobile */
    .cdcal-control-buttons .fc-select-trigger.button:hover {
        background: white !important;
        border-color: #cbd5e0 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    }
    
    /* Debug - Forcer la visibilité des boutons spécifiques */
    #cdcal-toggle-quick-actions,
    #cdcal-open-stats {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    #cdcal-stats-modal .modal-card {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        margin: 0;
    }
    
    #cdcal-stats-modal .modal-card-body {
        max-height: calc(100vh - 3.25rem);
    }
}

/* Animation pour le collapse */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cdcal-quick-actions-content {
    animation: slideDown 0.3s ease-out;
}

/* Indicateur visuel pour la barre repliée */
.cdcal-quick-actions-bar.cdcal-collapsed::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
}

/* Style pour le sélecteur de vue du calendrier - supprimé car maintenant dans les boutons de contrôle */

/* Optimisation de l'espace */
.cdclient-calendrier-shortcode .contenu-principal > .box:first-child {
    margin-top: 0 !important;
}

/* Bouton utilisateur transformé en avatar seul */
#cdcal-open-users-selector {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    position: relative !important;
}

#cdcal-open-users-selector:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
}

#cdcal-open-users-selector:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    pointer-events: none;
}

/* Avatar dans le bouton */
.cdcal-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    cursor: pointer;
}

/* Cacher le texte complètement */
#cdcal-open-users-selector .cdcal-user-name-text {
    display: none !important;
}

/* Forcer le modal intervenant au-dessus de tout */
#cdcal-intervenant-modal.cdcal-modal--visible {
    z-index: 100001 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Backdrop du modal intervenant */
#cdcal-intervenant-modal.cdcal-modal--visible::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* Modal des utilisateurs */
.cdcal-users-modal {
    max-width: 600px !important;
    width: 90% !important;
}

/* Modal des raccourcis */
.cdcal-quick-actions-modal {
    max-width: 600px !important;
    width: 95% !important;
}

.cdcal-quick-actions-modal .swal2-popup {
    padding: 1rem !important;
}

.cdcal-quick-actions-modal .swal2-title {
    padding: 0 0 0.5rem 0 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
}

.cdcal-quick-actions-modal .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
}

.cdcal-quick-actions-modal-content {
    padding: 7px;
}


.cdcal-quick-actions-modal .cdcal-quick-actions-field {
    width: 100% !important;
    margin-bottom: 1rem;
}

.cdcal-quick-actions-modal .cdcal-quick-actions-field:last-child {
    margin-bottom: 0;
}


.cdcal-quick-actions-modal .label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.cdcal-quick-actions-modal .input,
.cdcal-quick-actions-modal .cdcal-select {
    width: 100% !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

.cdcal-quick-actions-modal .cdcal-intervenant-select {
    width: 100% !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

/* Styles pour les éléments du formulaire dans le modal */
.cdcal-quick-actions-modal .cdcal-time-inputs {
    display: flex;
    gap: 1rem;
}

.cdcal-quick-actions-modal .cdcal-time-field {
    flex: 1;
}

.cdcal-quick-actions-modal .cdcal-color-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cdcal-quick-actions-modal .cdcal-color-presets {
    display: flex;
    gap: 0.5rem;
}

.cdcal-quick-actions-modal .cdcal-text-color-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Styles spécifiques pour les éléments du modal */
.cdcal-quick-actions-modal .cdcal-color-option {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.cdcal-quick-actions-modal .cdcal-color-option.cdcal-selected,
.cdcal-quick-actions-modal .cdcal-color-option:hover {
    border-color: #333;
    transform: scale(1.1);
}

.cdcal-quick-actions-modal .cdcal-text-color-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.cdcal-quick-actions-modal .cdcal-text-color-btn.cdcal-text-white {
    background: #333;
    color: white;
}

.cdcal-quick-actions-modal .cdcal-text-color-btn.cdcal-text-black {
    background: white;
    color: #333;
}

.cdcal-quick-actions-modal .cdcal-text-color-btn.cdcal-selected {
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

.cdcal-quick-actions-modal .cdcal-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.cdcal-quick-actions-modal .cdcal-select:hover {
    border-color: #999;
}

/* Responsive pour le modal de raccourcis */
@media (max-width: 768px) {
    .cdcal-quick-actions-modal {
        width: 100% !important;
        margin: 0 !important;
        max-width: none !important;
    }
    
    .cdcal-quick-actions-modal .swal2-popup {
        padding: 0.75rem !important;
        margin: 0.5rem !important;
    }
    
    .cdcal-quick-actions-modal .swal2-title {
        font-size: 1.1rem !important;
    }
    
    .cdcal-quick-actions-modal .cdcal-quick-actions-field {
        margin-bottom: 0.75rem;
    }
    
    .cdcal-quick-actions-modal .cdcal-time-inputs {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .cdcal-quick-actions-modal .cdcal-color-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cdcal-quick-actions-modal .label {
        font-size: 0.85rem;
    }
    
    .cdcal-quick-actions-modal .input {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
}

.cdcal-users-modal .swal2-html-container {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0.5em !important;
}

.cdcal-users-modal-content {
    max-height: 70vh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px;
}

.cdcal-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 20px 0;
}

.cdcal-user-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.cdcal-user-item:hover {
    background-color: #f5f5f5;
    transform: translateY(-2px);
}

.cdcal-user-item.active {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
}

.cdcal-user-avatar-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 8px;
    overflow: hidden;
}

.cdcal-user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdcal-user-avatar-large span {
    font-weight: bold;
}

.cdcal-user-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-top: 4px;
}

.cdcal-user-company {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.cdcal-user-badge {
    font-size: 10px;
    color: #e94b3c;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
}

/* Modal des participants */
.cdcal-participants-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.cdcal-checkbox-label {
    display: block;
    padding: 10px;
    margin: 5px 0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.cdcal-checkbox-label:hover {
    background: #e3f2fd;
    transform: translateX(5px);
}

.cdcal-checkbox-label input[type="checkbox"] {
    margin-right: 10px;
}

.cdcal-checkbox-label span {
    font-weight: 500;
    color: #333;
}

.cdcal-company-info {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
}

.cdcal-participants-selection {
    margin-top: 20px;
}

/* Contenu Elementor dans le modal */
.cdcal-elementor-content {
    margin: 10px 0;
    /* Pas de max-height ni overflow pour afficher tout le contenu */
}

/* Ajustements pour le contenu Elementor */
.cdcal-elementor-content .elementor {
    margin: 0;
}

.cdcal-elementor-content .elementor-section {
    margin: 0;
    padding: 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
    
    /* Modal responsive sur mobile */
    .cdcal-users-modal {
        width: 95% !important;
        margin: 0 !important;
        max-width: none !important;
    }
    
    .cdcal-users-modal-content {
        max-height: 60vh;
        padding: 0.5rem !important;
    }
    
    .cdcal-users-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 10px;
        padding: 10px 0;
    }
    
    .cdcal-user-item {
        padding: 8px;
    }
    
    .cdcal-user-avatar-large {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .cdcal-user-name {
        font-size: 12px;
    }
    
    .cdcal-user-company {
        font-size: 10px;
    }
}