/* ====================================================
 * MODULE COLORS SYSTEM
 * ====================================================*/

/* ====================================================
 * DYNAMIC MODULE COLORS
 * ====================================================*/

/* Styles pour les couleurs dynamiques des modules */

/* Styles pour les icônes des headers d'accordéon */
.accordion-item .accordion-header[data-module-color] i {
    color: var(--module-color);
}

/* Conteneur avec couleurs personnalisées des modules */
.accordion-item:not(.open) .accordion-header[data-module-color] .accordion-toggle::after {
    background-color: var(--module-color-border);
    outline-color: var(--module-color);
}

.accordion-item:not(.open) .accordion-header[data-module-color] .accordion-toggle::before {
    color: var(--module-color-dark);
}

/* Chevrons avec couleurs personnalisées des modules - hover */
.accordion-item:not(.open):hover .accordion-header[data-module-color] .accordion-toggle::after {
    outline-color: white;
}

.accordion-item:not(.open):hover .accordion-header[data-module-color] .accordion-toggle::before {
    color: white;
}

.accordion-item.open .accordion-header[data-module-color] .accordion-toggle::after {
    background-color: var(--module-color) !important;
}

.accordion-item.open .accordion-header[data-module-color] .accordion-toggle::before {
    color: white;
}

.accordion-header[data-module-color] .accordion-toggle:hover::before {
    color: var(--module-color);
    opacity: 0.8;
}

/* Styles pour les chevrons des headers d'accordéon - Géré dans board.css */

/* Styles pour les headers d'accordéon */
.grids-accordion .accordion-item[data-module-color] {
    border-color: var(--module-color) !important;
    border-bottom: 1px solid var(--module-color-border) !important;
}

/* NOUVEAU : Styles pour les accordéons verrouillés par une modale */
.accordion-item.locked[data-module-color]:hover {
    background: var(--module-color-border);
}

.grids-accordion .accordion-module-icon {
    color: var(--module-color);
    background: var(--module-color-border);
}  

.grids-accordion .accordion-content,
.grids-accordion .accordion-content .nav-tabs-custom {
    border-color: var(--module-color-border) !important;
}

/* Styles pour les labels de tous les modules */
[data-module-color] label,
[data-module-color] .label,
[data-module-color] .form-label,
[data-module-color] .control-label {
    color: var(--module-color) !important;
}

/* Styles pour les boutons dans les table-controls-container */
[data-module-color] .table-controls-container button,
[data-module-color] .table-buttons button {
    background-color: var(--module-color) !important;
    border-color: var(--module-color) !important;
    color: white !important;
}

[data-module-color] .table-controls-container button:hover,
[data-module-color] .table-buttons button:hover {
    background-color: var(--module-color-dark) !important;
    border-color: var(--module-color-dark) !important;
}

/* Styles pour les grilles avec couleurs dynamiques */
.tabulator-grid[data-module-color] .tabulator-page {
    border-color: var(--module-color) !important;
    background-color: var(--module-color-dark) !important;
    color: white !important;
    transition: all 0.2s ease;
}

.tabulator-grid[data-module-color] .tabulator-page:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

.tabulator-grid[data-module-color] .tabulator-page.active {
    background-color: var(--module-color-light) !important;
    color: var(--module-color-dark) !important;
    font-weight: bold;
}

/* Styles pour les éléments individuels avec data-module-color */
.tabulator-page[data-module-color] {
    border-color: var(--module-color) !important;
    background-color: var(--module-color-dark) !important;
    color: white !important;
    transition: all 0.2s ease;
}

.tabulator-page[data-module-color]:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

.tabulator-page[data-module-color].active {
    background-color: var(--module-color-light) !important;
    color: var(--module-color-dark) !important;
    font-weight: bold;
}

/* Styles pour le sélecteur de taille de page avec couleurs de modules */
.tabulator-grid[data-module-color] .tabulator-page-size-container .tabulator-page-size {
    color: var(--module-color-dark) !important;
    font-family: var(--font-title);
    font-size: 0.7rem;
    min-width: 80px;
    border-radius: 5px !important;
    transition: all 0.3s ease;
    border: 1px solid var(--module-color) !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
    min-height: 30px;
    background: white;
}

.tabulator-grid[data-module-color] .tabulator-page-size-container .tabulator-page-size:focus,
.tabulator-grid[data-module-color] .tabulator-page-size-container .tabulator-page-size:focus-visible {
    color: var(--module-color-dark) !important;
    box-shadow: 4px 4px 0 var(--module-color-dark) !important;
    border-radius: 10px !important;
    border-color: var(--module-color-dark) !important;
    outline: 2px solid var(--module-color-dark) !important;
    outline-offset: -2px;
}

.tabulator-grid[data-module-color] .tabulator-page-size-container .tabulator-page-size:hover {
    border-color: var(--module-color-dark) !important;
    box-shadow: 3px 3px 0 var(--module-color-dark) !important;
    color: black;
}

.tabulator-header[data-module-color] {
    border-bottom-color: var(--module-color) !important;
}

.tabulator-grid[data-module-color] .btn-edit,
.tabulator-grid[data-module-color] .btn-red,
.tabulator-grid[data-module-color] .btn-activation,
.tabulator-grid[data-module-color] .btn-deactivation {
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
}

.tabulator-grid[data-module-color] .btn-edit:hover,
.tabulator-grid[data-module-color] .btn-red:hover,
.tabulator-grid[data-module-color] .btn-activation:hover,
.tabulator-grid[data-module-color] .btn-deactivation:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

/* Styles pour les boutons individuels avec data-module-color */
.btn-edit[data-module-color],
.btn-red[data-module-color],
.btn-activation[data-module-color],
.btn-deactivation[data-module-color] {
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
}

.btn-edit[data-module-color]:hover,
.btn-red[data-module-color]:hover,
.btn-activation[data-module-color]:hover,
.btn-deactivation[data-module-color]:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

/* Gestion des conflits avec les classes de couleur existantes */
.tabulator-grid[data-module-color] .btn-edit.btn-blue,
.tabulator-grid[data-module-color] .btn-red,
.tabulator-grid[data-module-color] .btn-activation.btn-green,
.tabulator-grid[data-module-color] .btn-activation.btn-red {
    border-color: var(--module-color) !important;
}

.tabulator-grid[data-module-color] .btn-edit.btn-blue:hover,
.tabulator-grid[data-module-color] .btn-red:hover,
.tabulator-grid[data-module-color] .btn-activation.btn-green:hover,
.tabulator-grid[data-module-color] .btn-activation.btn-red:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

.tabulator-grid[data-module-color] .tabulator-header {
    border-bottom-color: var(--module-color) !important;
}

.tabulator-grid[data-module-color] button.tabulator-page:hover::after,
.tabulator-grid[data-module-color] button.tabulator-page:hover::before {
    text-shadow: 0 2px 0 var(--module-color-dark);
}

/* Styles pour les graphiques avec couleurs dynamiques */
.chart-container[data-module-color] .chart-header {
    border-bottom-color: var(--module-color) !important;
}

.chart-container[data-module-color] .export-btn {
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
}

.chart-container[data-module-color] .export-btn:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

/* Styles pour les boutons des modules enfants */
.btn-child-module[data-module-color] {
    color: var(--module-color) !important;
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
}

.btn-child-module[data-module-color]:hover {
    background-color: var(--module-color) !important;
    color: white !important;
}

/* Animation pour les couleurs dynamiques */
@keyframes colorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.stat-card[data-module-color],
.tabulator-grid[data-module-color],
.chart-container[data-module-color],
.btn-child-module[data-module-color] {
    animation: colorFadeIn 0.3s ease-out;
}

/* Responsive pour les couleurs dynamiques */
@media (max-width: 768px) {
    .stat-card[data-module-color] {
        border-left-width: 8px;
    }

    .btn-child-module[data-module-color] {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .stat-card[data-module-color] {
        border-left-width: 6px;
    }

    .btn-child-module[data-module-color] {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

/* ====================================================
 * MODAL GRID COLORS
 * ====================================================*/

/* Styles pour les modules Grid dans les modales */
/* Styles pour les boutons thumbnail dans les conteneurs de filtres avec couleurs de modules */
[data-module-color] .thumbnail-btn {
    color: var(--module-color) !important;
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
}

[data-module-color] .thumbnail-btn:hover {
    color: var(--module-color-dark) !important;
}

.filter-reset-container[data-module-color] .thumbnail-btn {
    border: 1px solid var(--module-color) !important;
    box-shadow: 4px 4px 0 var(--module-color-dark) !important;
}

.filter-reset-container[data-module-color] .thumbnail-btn:hover {
    border-color: var(--module-color-light) !important;
    transform: translate(2px, 2px);
    color: white !important;
    background-color: var(--module-color-dark) !important;
    box-shadow: 2px 2px 0 var(--module-color-light) !important;
}

/* Styles pour le bouton reset-filters désactivé avec couleurs de modules */
.filter-reset-container[data-module-color] .thumbnail-btn.disabled {
    border-color: var(--module-color-dark) !important;
    color: var(--module-color-light) !important;
    box-shadow: 1px 1px 0 var(--module-color-dark) !important;
}

.filter-reset-container[data-module-color] .thumbnail-btn.disabled:hover {
    border-color: var(--module-color-dark) !important;
    color: var(--module-color-light) !important;
    box-shadow: 1px 1px 0 var(--module-color-dark) !important;
}

[data-module-color] .select2-container .select2-dropdown {
    color: var(--module-color-dark);
}

/* Styles pour les éléments Select2 avec couleurs de modules */
[data-module-color] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--module-color-dark) !important;
}

[data-module-color] .select2-container--default .select2-selection--multiple {
    box-shadow: -4px 4px 0 var(--module-color-border) !important;
    border-color: var(--module-color-light);
}

[data-module-color] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--module-color-dark) !important;
}

[data-module-color] .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--module-color);
}

[data-module-color] .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: var(--module-color-light);
}

[data-module-color] .select2-container--default .select2-selection.select2-selection--multiple textarea {
    color: var(--module-color-light);
}

[data-module-color] .select2-container--default:hover .select2-selection--multiple,
[data-module-color] .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--module-color);
}

[data-module-color] .dashboard-controls .select2-container:hover,
[data-module-color] .select2-selection.select2-selection--multiple:hover {
    box-shadow: -4px 4px 0 var(--module-color) !important;
    border-color: var(--module-color);
}

[data-module-color] .select2-container--default.select2-container--focus .select2-selection.select2-selection--multiple textarea,
[data-module-color] .select2-container--default:hover .select2-selection.select2-selection--multiple textarea {
    color: var(--module-color);
}

/* Styles génériques pour les boutons thumbnail avec couleurs de modules */
.thumbnail-btn[data-module-color] {
    transition: all 0.2s ease;
}

.thumbnail-btn[data-module-color]:hover {
    border-color: var(--module-color-dark) !important;
}

/* Styles des boutons de pagination dans les modales - basés sur les styles initiaux */
.modal-body[data-module-color] button.tabulator-page {
    margin: 0.5rem;
    color: #fff;
    font-size: .6rem;
    text-decoration: none;
    font-family: var(--font-title);
    text-shadow: none;
    text-align: center;
    background-color: var(--module-color) !important;
    cursor: pointer;
    padding: 1rem;
    border-radius: 10px;
    min-width: 40px;
    transition: all 0.2s ease;
    border: 0px;
    box-shadow: 5px 5px 0px var(--module-color-dark) !important;
}

.modal-body[data-module-color] button.tabulator-page {
    margin: 0px;
    padding: 7px 17px;
    border-radius: 0;
    position: relative;
    background-color: var(--module-color) !important;
    box-shadow: 0px 5px 0px var(--module-color-dark) !important;
}

/* Icônes FontAwesome pour les boutons de pagination dans les modales */
/* Premier bouton (first) - icône à droite */
.modal-body[data-module-color] button.tabulator-page[data-page="first"]::after {
    content: "\f049";
    /* fa-backward-fast */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 5px;
}

/* Deuxième bouton (prev) - icône à gauche */
.modal-body[data-module-color] button.tabulator-page[data-page="prev"]::before {
    content: "\f048";
    /* fa-backward-step */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
}

/* Avant-dernier bouton (next) - icône à droite */
.modal-body[data-module-color] button.tabulator-page[data-page="next"]::after {
    content: "\f051";
    /* fa-forward-step */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 5px;
}

/* Dernier bouton (last) - icône à gauche */
.modal-body[data-module-color] button.tabulator-page[data-page="last"]::before {
    content: "\f050";
    /* fa-forward-fast */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
}

.modal-body[data-module-color] button.tabulator-page.active,
.modal-body[data-module-color] button.tabulator-page.active:hover {
    background-color: var(--module-color-dark) !important;
    box-shadow: 0px 3px 0px var(--module-color-dark) !important;
    color: white !important;
    transform: translate(0, 2px);
    cursor: auto;
}

.modal-body[data-module-color] button.tabulator-page:hover {
    margin: 0px;
    border-radius: 0;
    transform: translate(0, 2px);
    background-color: var(--module-color-dark) !important;
    box-shadow: 0px 3px 0px var(--module-color-dark) !important;
}

.modal-body[data-module-color] .btn-edit,
.modal-body[data-module-color] .btn-red,
.modal-body[data-module-color] .btn-activation,
.modal-body[data-module-color] .btn-deactivation {
    border-color: var(--module-color) !important;
    transition: all 0.2s ease;
    background-color: var(--module-color-light) !important;
}

.modal-body[data-module-color] .btn-edit:hover,
.modal-body[data-module-color] .btn-red:hover,
.modal-body[data-module-color] .btn-activation:hover,
.modal-body[data-module-color] .btn-deactivation:hover {
    background-color: var(--module-color) !important;
    color: white !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
}

.modal-body[data-module-color] .tabulator-header {
    border-bottom-color: var(--module-color) !important;
    background-color: var(--module-color-light) !important;
}

/* Gestion des conflits avec les classes de couleur existantes dans les modales */
.modal-body[data-module-color] .btn-edit.btn-blue,
.modal-body[data-module-color] .btn-red.btn-red,
.modal-body[data-module-color] .btn-activation.btn-green,
.modal-body[data-module-color] .btn-activation.btn-red {
    border-color: var(--module-color) !important;
}

.modal-body[data-module-color] .btn-edit.btn-blue:hover,
.modal-body[data-module-color] .btn-red.btn-red:hover,
.modal-body[data-module-color] .btn-activation.btn-green:hover,
.modal-body[data-module-color] .btn-activation.btn-red:hover {
    background-color: var(--module-color) !important;
    color: white !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
}

/* Header de la modale avec couleur du module */
.modal-header[data-module-color] {
    background-color: var(--module-color-dark) !important;
    border-top-color: var(--module-color) !important;
    box-shadow: 0 2px 8px var(--module-color-dark) !important;
}

/* Icone de la modale avec couleur du module */
.modal-header[data-module-color] span.icon {
    background-color: var(--module-color-dark);
}

/* Bouton close de la modale avec couleurs de modules */
.modal-header[data-module-color] .modal-header-right>span:hover,
.modal-header[data-module-color] .modal-header-right>span:focus {
    outline-color: var(--module-color-light) !important;
}

.modal-content[data-module-color] .icon>i.fa::before {
    background-color: var(--module-color);
}

/* État actif (plein écran) du bouton */
[data-module-color] .modal-header-right .fullscreen-toggle.fullscreen-active {
    color: var(--module-color) !important;
}

/* Styles pour le sélecteur de taille de page avec couleurs de modules */
.modal-body[data-module-color] .tabulator-page-size-container .tabulator-page-size {
    color: var(--module-color-dark) !important;
    /* font-family: var(--font-title);
    font-size: 0.7rem;
    min-width: 80px;
    border-radius: 5px !important;
    transition: all 0.3s ease; */
    border: 1px solid var(--module-color) !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
    /* min-height: 30px;
    background: white;
    padding: 0;
    padding-top: 0.2rem;
    padding-left: 10px;
    padding-right: 25px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px; */
}

.modal-body[data-module-color] .tabulator-page-size-container .tabulator-page-size:focus,
.modal-body[data-module-color] .tabulator-page-size-container .tabulator-page-size:focus-visible {
    color: var(--module-color-dark) !important;
    box-shadow: 4px 4px 0 var(--module-color-dark) !important;
    /* border-radius: 10px !important; */
    border-color: var(--module-color-dark) !important;
    outline: 2px solid var(--module-color-dark) !important;
    /* outline-offset: -2px; */
}

.modal-body[data-module-color] .tabulator-page-size-container .tabulator-page-size:hover {
    border-color: var(--module-color-dark) !important;
    box-shadow: 3px 3px 0 var(--module-color-dark) !important;
    color: black;
}

/* Styles pour le contenu de la modale avec couleurs de modules */
.modal-content[data-module-color] {
    border: 1px solid var(--module-color) !important;
    outline: 2px solid var(--module-color) !important;
    border-left: 5px solid var(--module-color) !important;
    border-bottom: 5px solid var(--module-color) !important;
    box-shadow: 0 4px 12px var(--module-color-dark) !important;
    /* transition: all 0.3s ease; */
}

/* .modal-content[data-module-color]:hover {
    box-shadow: 0 6px 16px var(--module-color-dark) !important;
    transform: translateY(-2px);
} */

/* Animation pour les couleurs dynamiques dans les modales */
/* @keyframes modalColorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

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

.modal-body[data-module-color],
.modal-header[data-module-color],
.modal-content[data-module-color] {
    animation: modalColorFadeIn 0.3s ease-out;
} */

/* ====================================================
 * FORM CONTROLS WITH MODULE COLORS
 * ====================================================*/

/* Styles pour les inputs form-control avec couleurs de modules */
.form-control[data-module-color] {
    color: var(--module-color) !important;
    border: 1px solid var(--module-color) !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
    /* transition: all 0.2s ease; */
}

.form-control[data-module-color]:focus,
.form-control[data-module-color]:focus-visible {
    color: var(--module-color-dark) !important;
    border-color: var(--module-color-dark) !important;
    box-shadow: 4px 4px 0 var(--module-color-dark) !important;
    outline: 2px solid var(--module-color-dark) !important;
    /* outline-offset: -2px; */
}

.form-control[data-module-color]:hover {
    border-color: var(--module-color-dark) !important;
    box-shadow: 3px 3px 0 var(--module-color-dark) !important;
}

/* Styles pour les inputs form-control dans les conteneurs avec couleurs de modules */
.form-control-container[data-module-color] .form-control,
.filter-reset-container[data-module-color] .form-control,
.modal-body[data-module-color] .form-control {
    color: var(--module-color) !important;
    border: 1px solid var(--module-color) !important;
    box-shadow: 2px 2px 0 var(--module-color-dark) !important;
    /* transition: all 0.2s ease; */
}

.form-control-container[data-module-color] .form-control:focus,
.filter-reset-container[data-module-color] .form-control:focus,
.modal-body[data-module-color] .form-control:focus,
.form-control-container[data-module-color] .form-control:focus-visible,
.filter-reset-container[data-module-color] .form-control:focus-visible,
.modal-body[data-module-color] .form-control:focus-visible {
    color: var(--module-color-dark) !important;
    border-color: var(--module-color-dark) !important;
    box-shadow: 4px 4px 0 var(--module-color-dark) !important;
    outline: 2px solid var(--module-color-dark) !important;
    /* outline-offset: -2px; */
}

.form-control-container[data-module-color] .form-control:hover,
.filter-reset-container[data-module-color] .form-control:hover,
.modal-body[data-module-color] .form-control:hover {
    border-color: var(--module-color-dark) !important;
    box-shadow: 3px 3px 0 var(--module-color-dark) !important;
}


/* Indicateurs de scroll avec pseudo-éléments absolus pour les couleurs de modules */
[data-module-color] .tabulator.scrollable-left::before,
[data-module-color] .tabulator.scrollable-both::before {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--module-color) 50%,
            transparent 100%);
}

[data-module-color] .tabulator.scrollable-right::after,
[data-module-color] .tabulator.scrollable-both::after {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--module-color) 50%,
            transparent 100%);
}

[data-module-color] .tabulator-row.tabulator-selected {
    background-color: var(--module-color-border) !important;
}


/* Styles des boutons enfants */
[data-module-color] .chart-header .child-modules-buttons button {
    background-color: var(--module-color);
}

/* ====================================================
 * MODAL TRAY COLORS
 * ====================================================*/

/* Styles pour les éléments du tray avec couleurs de modules */
.modal-tray-item[data-module-color] {
    /* Override des couleurs de base avec les couleurs du module */
    border: 1px solid var(--module-color) !important;
    background: linear-gradient(135deg, var(--module-color-light) 0%, var(--module-color) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px var(--module-color-dark) !important;
    border-top: 5px solid var(--module-color) !important;
}

.modal-tray-item[data-module-color]:hover {
    border: 1px solid var(--module-color-light) !important;
    background: linear-gradient(135deg, var(--module-color) 0%, var(--module-color-dark) 100%) !important;
    border-top: 5px solid var(--module-color-dark) !important;
    box-shadow: 0 4px 12px var(--module-color-dark) !important;
    /* Les autres propriétés (transform, etc.) sont héritées des styles de base */
}

.modal-tray-item[data-module-color] i {
    /* Override des couleurs de l'icône */
    color: white !important;
    background-color: var(--module-color-dark) !important;
}

.modal-tray-item[data-module-color]:hover i {
    background-color: var(--module-color-light) !important;
    /* Les autres propriétés (transform, etc.) sont héritées des styles de base */
}

.modal-tray-item[data-module-color] span {
    /* Override des couleurs du texte */
    color: white !important;
    text-shadow: 0 1px 2px var(--module-color-dark) !important;
}

.modal-tray-item[data-module-color]:hover span {
    color: white !important;
    /* Pas de changement de couleur au hover pour les éléments colorés */
}