html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}
#Card_Style {
    width: 183px;
    height: 110px;
    font-size: larger;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}
    #Card_Style::after {
        display: block;
        text-align: center;
    }
#Shortcut {
    width: 180px;
    height: 100px;
    font-size: larger;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0px rgb(128, 128, 128);
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

    #Shortcut::after {
        display: block;
        text-align: center;
    }
.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/tresorix.svg');
    mask: url('../images/tresorix.svg');
    /*        -webkit-mask-position: center;
*/ mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 180px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Style du Titre et Sous-titre du Dashboard */
.dashboard-wrapper .text-center h2 {
    font-weight: 800;
    color: #2c3e50;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.dashboard-wrapper .text-center p.text-muted {
    font-size: 1.1rem;
    color: #6c757d !important;
}

.welcome-emoji {
    animation: bounce 1s infinite;
    margin-right: 8px;
}


/*Css du défilement*/

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: White;
    color: black;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    position: relative;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-scroll 45s linear infinite;
}

.marquee-text {
    display: inline-block;
    padding-right: 50px; /* Espace entre les messages */
}

@keyframes marquee-scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}



.kpi-button {
    border: none;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    max-width: 350px;
    background-color: #ffffff; /* Par défaut blanc */
}
    /* Version sombre demandée */
    .kpi-button.dark {
        background-color: #1a202c !important; /* Fond très sombre */
        color: #ffffff !important;
    }

        .kpi-button.dark .kpi-label {
            color: #a0aec0 !important; /* Texte gris clair pour le label sur fond sombre */
        }

        .kpi-button.dark .kpi-value {
            color: #ffffff !important; /* Valeur en blanc */
        }
    .kpi-button:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 5px;
    display: block;
}
.kpi-add-action {
    width: 40px;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff; /* Ou la couleur de votre charte Trésorix */
}

    .kpi-add-action:hover {
        background-color: #0056b3;
    }

.kpi-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
}

/* Conteneur principal */
.welcome-container {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: auto;
    max-height: auto;/
    margin: 0 auto;
    text-align: center;
}



    .welcome-message strong {
        color: #4CAF50;
    }

/* Boîte de conseil */
.advice-box {
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 10px; /* Padding réduit */
    margin: 10px 0; /* Marge réduite */
    transition: background-color 0.3s ease;
    font-size: 1em; /* Taille de police réduite */
}

    .advice-box:hover {
        background-color: #e0e0e0;
    }

    .advice-box p {
        margin: 0;
        color: #555;
    }

/*    mise en forme du radio
*/
.dx-demo-radio-group-label {
    font-size: inherit;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

    .dx-demo-radio-group-label.dx-demo-small {
        font-size: 0.75rem;
    }

    .dx-demo-radio-group-label.dx-demo-large {
        font-size: 1rem;
    }

.dx-demo-radio-group {
    padding-bottom: 1rem;
}

  .dx-demo-radio-selected-value {
    max-width: 480px;
    width: 100%;
}
 
.radio-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}
.row.justify-content-center {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f0f4ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .radio-label input {
        display: none;
    }

    .radio-label:hover {
        background-color: #d0e0ff;
    }

    .radio-label input:checked + span {
        color: white;
        background-color: #0056b3;
        padding: 6px 14px;
        border-radius: 15px;
    }

.dx-demo-form-layout-width {
    max-width: 640px;
    width: 100%;
}

.dx-demo-editor-width {
    max-width: 320px;
    width: 100%;
}

.advice-box-kpi-container {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
/*affichage boutons mode mobile*/
    .advice-box-kpi-container .kpi-button {
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }



/* 4 colonnes sur desktop large */
@media (min-width: 1024px) {
    .advice-box-kpi-container .kpi-button {
        flex: 1 1 calc(25% - 12px);
        max-width: calc(25% - 12px);
    }


}
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}







.pulse-border {
    animation: pulse-red 2s infinite;
    border: 1px solid #dc3545 !important;
}
/* Grille principale pour l'alignement en haut */
.dashboard-header-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    align-items: center !important;
}
.home-btn {
    border-right: 1px solid rgba(255,255,255,0.2);
    padding-right: 15px;
    margin-right: 10px;
    color: #3498db !important; /* Couleur accentuée pour l'accueil */
}

    .home-btn:hover {
        background-color: rgba(52, 152, 219, 0.1) !important;
    }
/* Style de base des conteneurs */
.kpi-container {
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}
.header-right-side {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start !important;
}
@media (max-width: 576px) {
    .dashboard-header-grid {
        display: none;
    }
    .advice-box-kpi-container .kpi-button {
        flex: 1 1 100% !important; /* Un seul bouton par ligne sur très petit écran */
        max-width: 100% !important;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .welcome-message {
        font-size: 1.5rem !important; /* Réduit la taille du titre Bonjour */
    }
}
    .kpi-container:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

/* Bouton Principal (Chiffre) */
.kpi-button-main {
    flex: 1;
    padding: 15px;
    text-align: left;
    border: none !important;
}

.kpi-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Bouton + (Action rapide) */
.kpi-add-action {
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-left: 1px solid #edf2f7 !important;
    border-radius: 0 12px 12px 0 !important;
    color: #cbd5e0;
    transition: all 0.2s;
}

/* Accents de couleur pour la reconnaissance rapide */
.client-accent {
    border-top: 4px solid #4299e1;
}
/* Bleu */
.rdv-accent {
    border-top: 4px solid #48bb78;
}
/* Vert */
.payment-accent {
    border-top: 4px solid #ed8936;
}
/* Orange */
.expense-accent {
    border-top: 4px solid #f56565;
}
/* Rouge */

/* Interaction sur le bouton + au survol */
.kpi-container:hover .kpi-add-action {
    color: #ffffff;
}

.client-accent .kpi-add-action:hover {
    background-color: #4299e1 !important;
}

.rdv-accent .kpi-add-action:hover {
    background-color: #48bb78 !important;
}

.payment-accent .kpi-add-action:hover {
    background-color: #ed8936 !important;
}

.expense-accent .kpi-add-action:hover {
    background-color: #f56565 !important;
}


.advice-box-kpi {
    width: 220px;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    cursor: pointer;
    text-align: center;
    color: #fff; /* Texte en blanc pour tous les boutons */
}

    .advice-box-kpi:hover {
        transform: translateY(-5px);
    }

/* Styles spécifiques pour chaque bouton */
.advice-box-kpi-revenue {
    background-color: #28a745; /* Vert pour les revenus */
}

.advice-box-kpi-expenses {
    background-color: #dc3545; /* Rouge pour les dépenses */
}

.advice-box-kpi-net-balance {
    background-color: #17a2b8; /* Bleu pour le résultat net */
}

/* Conteneur principal des radios */
.radio-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    margin-bottom: 20px;
}

/* Style des boutons radio */
.dx-radiogroup-item {
    background-color: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 20px;
    padding: 5px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px;
}

    .dx-radiogroup-item:hover {
        background-color: #e0e0e0;
        border-color: #bbb;
    }

    /* Style appliqué quand le radio est sélectionné */
    .dx-radiogroup-item.dx-radiogroup-item-checked {
        background-color: #007bff !important;
        border-color: #0056b3 !important;
        color: #fff !important;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    /* Enlever le style par défaut du cercle radio */
    .dx-radiogroup-item .dx-radiobutton-icon {
        display: none;
    }
.messenger-bubble, .messenger-panel {
    pointer-events: all !important; /* ...mais le bouton et le panneau acceptent les clics */
}
/* Conteneur fixé en bas à droite de l'écran */
.messenger-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999; /* Pour passer devant les grilles XAF */
}

/* Style de la bulle ronde */
.messenger-bubble {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #0078d4; /* Bleu Trésorix */
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1 !important;
}

    .messenger-bubble:hover {
        transform: scale(1.1);
    }

    .messenger-bubble.active {
        background-color: #d83b01; /* Change de couleur à l'ouverture */
    }

/* Badge de notification sur la bulle */
.bubble-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffb900;
    color: #000;
    border-radius: 50%;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
}

/* Panneau qui "pop" au-dessus de la bulle */
.messenger-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    background: white;
    border-radius: 15px;
    z-index: 100 !important;
    overflow: visible !important; /* CRITIQUE : permet aux listes déroulantes de sortir du panneau */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@keyframes bubblePopup {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}






/* show and hide filters */


.radio-filters {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.fade-in {
    max-height: 300px; /* adapte selon le contenu */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 0.5rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.fade-out {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.toggle-button {
    background: none;
    border: none;
    color: #007acc;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem;
}

.toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1.1rem;
}

.rotated {
    transform: rotate(180deg);
}

.toggle-label {
    font-weight: 500;
}


/* css des apppintments */
.day-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.day-card {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 300px;
}

.day-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.appt-card {
    background-color: white;
    border-left: 5px solid #0d6efd;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

    .appt-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    }

.appt-time {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.appt-caption {
    font-weight: 600;
    font-size: 1rem;
    color: #212529;
}

.appt-desc {
    font-size: 0.9rem;
    color: #495057;
    margin-top: 0.25rem;
}
.next-appt-card {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.next-appt-header {
    font-weight: 700;
    font-size: 1.2rem;
    color: #856404;
    margin-bottom: 0.5rem;
}

.next-appt-caption {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.next-appt-time {
    font-size: 0.95rem;
    color: #495057;
    margin-bottom: 0.3rem;
}

.next-appt-desc {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}
/* Style pour les cartes d'indicateurs */
.next-appt-card, .kpi-button, .advice-box {
    background-color: #ffffff; /* Fond blanc pur pour détacher du gris clair */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre légère pour le relief */
    padding: 20px;
    margin-bottom: 15px;
}
.countdown {
    font-size: 1rem;
    font-weight: bold;
    color: #d39e00;
}

/*loading panel*/


    /*loading panel*/

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.splash-logo {
    max-width: 70vw;
    max-height: 25vh;
    margin-bottom: 30px;
}

.loading-text {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: #38CF0F;
    letter-spacing: 1px;
    text-align: center;
}

.dots-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

    .dots-loader span {
        width: 10px;
        height: 10px;
        background-color: #38CF0F;
        border-radius: 50%;
        animation: dotsBlink 1.2s infinite ease-in-out;
    }

        .dots-loader span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dots-loader span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes dotsBlink {
    0%, 80%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.footer {
    font-size: 0.75rem;
    color: #AAAAAA;
    text-align: center;
    padding: 10px;
}

    .footer strong {
        color: #38CF0F;
    }

@media (min-width: 600px) {
    .splash-logo {
        max-width: 300px;
        max-height: none;
    }

    .loading-text {
        font-size: 1.6rem;
    }

    .dots-loader span {
        width: 12px;
        height: 12px;
    }

    .footer {
        font-size: 0.85rem;
    }
}
/* Conteneur principal */
.tresorix-floating-container {
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    z-index: 9999 !important; /* Doit être au-dessus du main-window-template-component */
    pointer-events: none;
}

/* Style du bouton rond (FAB) */
.fab-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0078d4; /* Bleu Trésorix */
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.2s, background-color 0.2s;
}

    .fab-button:hover {
        transform: scale(1.1);
        background-color: #005a9e;
    }

    .fab-button.active {
        background-color: #d83b01; /* Change de couleur quand ouvert */
    }

/* Le panneau flottant */
.floating-panel {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #ddd;
    animation: slideUp 0.3s ease-out;
    z-index: 10001;
    overflow: visible !important;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.panel-body {
    padding: 15px;
    overflow: visible !important; /* CRITIQUE : indispensable pour DxTagBox */
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

/* Overlay transparent pour fermer en cliquant ailleurs */


@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge pour les entités sélectionnées */
.badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffb900;
    color: #333;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
}

/* --- AJOUTS POUR LE HEADER FLOTTANT TRESORIX --- */

/* 1. Décoller le header du haut */
.header-margin {
    margin: 10px 15px 5px 15px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    overflow: hidden;
}

/* 2. Ajuster le conteneur principal pour éviter les chevauchements */
#main-window-template-component {
    background-color: #f0f2f5 !important; /* Fond de page */
}

/* 3. Style spécifique pour l'icône Home bleue */
.home-btn i {
    color: #3498db !important;
    font-size: 18px !important;
    display: inline-block !important;
}
div[role="heading"] {
    margin-top: 5px !important;
    white-space: nowrap;
}
.justify-content-center.overflow-hidden {
    justify-content: flex-end !important;
    padding-right: 25px !important;
    margin-top: -15px !important; /* Remonte un peu le texte sous les boutons */
}
/* 4. Alignement de la grille KPI dans le header */
.dashboard-header-grid {
    display: flex !important;
    flex-wrap: wrap !important; /* Crucial pour le zoom 90% : passe sur 2 lignes proprement */
    justify-content: flex-end !important; /* Pousse les boutons vers la droite */
    gap: 8px !important;
    margin-left: auto !important; /* Utilise tout l'espace vide à gauche pour pousser vers la droite */
    margin-right: 15px !important;
    flex-grow: 1;
}

/* 5. Empêcher le contenu de remonter sous le header */
.xaf-flex-auto {
    margin-top: 5px;
}

/* 6. Correction visuelle des conteneurs KPI du header */
.header .kpi-container {
    height: 40px !important; /* Un peu plus compact pour le header */
    border-radius: 4px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
    .header .kpi-container:hover {
        background-color: #f8fafc !important;
        border-color: #cbd5e0 !important;
        transform: translateY(-1px);
    }

/* AJOUT : Amélioration visuelle des cellules du Scheduler */
.tresorix-scheduler .dxbs-sc-time-cell,
.tresorix-scheduler .dxbs-sc-date-cell {
    background-color: #ffffff;
    border-color: #f1f5f9 !important;
}

/* Style des rendez-vous pour plus de lisibilité */
.dxbs-sc-appointment {
    border-radius: 4px !important;
    border: none !important;
    padding: 2px !important;
}
/* Accent Violet pour les Devis */
.quote-accent {
    border-top: 4px solid #9b59b6 !important;
}

    .quote-accent .kpi-add-action:hover {
        background-color: #9b59b6 !important;
        color: white !important;
    }

/* Accent Jaune/Or pour les Factures */
.invoice-accent {
    border-top: 4px solid #f1c40f !important;
}

    .invoice-accent .kpi-add-action:hover {
        background-color: #f1c40f !important;
        color: white !important;
    }
.header .kpi-container, .legal-banner {
    height: 45px !important;
    box-sizing: border-box;
}
/* Container principal */
.tresorix-scheduler {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Style des cartes de rendez-vous */
.appointment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid #e1e8ed;
}

    .appointment-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1) !important;
    }

/* Distinction visuelle des en-têtes de colonnes (Resources) */
.dxbs-sc-resource-header {
    background-color: #fdfdfd !important;
    border-bottom: 3px solid #3498db !important;
}

/* Amélioration de la lisibilité du texte */
.appointment-title {
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e50;
    display: block;
    margin-bottom: 4px;
}
.scheduler-resource-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background-color: #fcfcfc;
    border-bottom: 2px solid #3498db; /* Ligne de séparation bleue */
}

.resource-initials {
    width: 28px;
    height: 28px;
    background-color: #3498db;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.header.header-margin {
    min-height: auto !important; /* On laisse le contenu définir la hauteur */
    padding: 10px 15px !important;
    display: flex;
    align-items: center !important; /* Centre verticalement le logo et la grille */
}
.resource-label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* 1. Donne une taille stricte pour que DevExpress réussisse son calcul vers le HAUT */
.dxbl-dropdown-popup .dxbl-listbox {
    max-height: 150px !important;
    min-height: 40px !important;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1) !important; /* Ombre vers le haut */
    border-radius: 8px !important;
}

/* 2. Sécurité : force la popup à rester visible et interactive */
.dxbl-popup-root {
    pointer-events: auto !important;
    display: block !important;
    z-index: 99999 !important;
}
/* Force les popups des dropdowns DevExpress au-dessus des panels flottants */
.dx-dropdownlist-popup-wrapper,
.high-z-index-dropdown .dx-dropdownlist-popup-wrapper {
    z-index: 10000 !important;
}