[data-bs-theme=light] body:not(.app-blank) {
    background: #f3f3f3;
}

#kt_header {
    background: #9600ff;
}

[data-bs-theme=dark] body:not(.app-blank) {
    background-image: url("https://preview.keenthemes.com/metronic8/demo2/assets/media/patterns/header-bg-dark.png");
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px #393945 solid;
}

.swal2-container {
    z-index: 3000;
}

.tooltip {
    z-index: 9999 !important;
}

.blockui-message-container {
    position:fixed;
    top: 50% !important;
    left: 50%; /* Centrer horizontalement */
    background-color: white;
    padding: 20px !important;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    z-index: 5000 !important;
}

.ui-datepicker {
    z-index: 9000 !important;
}

.ag-theme-balham .ag-cell {
    font-size: 11px;
}

.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover {
    border-bottom: 2px solid var(--bs-info) !important; /* Utilise la couleur "info" pour le soulignage */
}

.modal-spinner {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.hide {
    display: none !important;
}

.arrow[aria-expanded="false"] .bi-chevron-down {
    transform: rotate(0);
    transition: transform 0.3s;
}

.arrow[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* Gris semi-transparent */
}

#financed_amount_display, #duration_display, #rent_amount_display, #firstRentAmount_display {
    font-weight: 600;
}

.form-label {
    font-weight: 600;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.btn-check:active + .btn.btn-active-info, .btn-check:checked + .btn.btn-active-info, .btn.btn-active-info.active, .btn.btn-active-info.show, .btn.btn-active-info:active:not(.btn-active), .btn.btn-active-info:focus:not(.btn-active), .btn.btn-active-info:hover:not(.btn-active), .show > .btn.btn-active-info {
    color: var(--bs-white);
    border-color: var(--bs-info) !important;
}

.btn-check:active + .btn.btn-active-secondary, .btn-check:checked + .btn.btn-active-secondary, .btn.btn-active-secondary.active, .btn.btn-active-secondary.show, .btn.btn-active-secondary:active:not(.btn-active), .btn.btn-active-secondary:focus:not(.btn-active), .btn.btn-active-secondary:hover:not(.btn-active), .show > .btn.btn-active-secondary {
    color: var(--bs-white);
    border-color: var(--bs-info) !important;
    background-color: var(--bs-info) !important;
}

.btn.btn-outline-dashed-info {
    border-color: var(--bs-info) !important;
}

.btnPlan {
    --bs-btn-color: var(--bs-info)
}

#block_result .form-check {
    display: none;
}

/* Modifier le style des en-têtes de colonnes */
.tabulator .tabulator-header .tabulator-col {
    font-weight: normal; /* enlève le gras */
    font-size: 12px; /* taille de la police réduite pour les en-têtes */
}

/* Modifier le style des cellules du tableau */
.tabulator .tabulator-cell {
    font-size: 12px; /* taille de la police pour le contenu des cellules */
}

/*.swal2-popup {*/
/*    width: 800px !important;*/
/*    text-align: left !important;*/
/*}*/

.swal-wide {
    width: 600px !important;
    height: 550px !important;
}

.swal2-container .swal2-html-container {
    max-height: 550px !important;
    text-align: left !important;
}


.dragover {
    background-color: #85A7DCCF !important;
}

table td, table th {
    vertical-align: middle;
}

#notif_button {
    position: relative; /* Établit une référence de position pour le badge */
}

#notif_button .badge {
    position: absolute;
    bottom: -10px; /* Déplace le badge vers le bas en dehors du bouton */
    right: -10px; /* Déplace le badge vers la droite en dehors du bouton */
    border-radius: 50%; /* Rend le badge rond */
    width: 20px; /* Taille du badge */
    height: 20px; /* Taille du badge */
    display: flex;
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    font-size: 12px; /* Taille du texte dans le badge */
    padding: 0; /* Ajuste le padding si nécessaire */
    /*background-color: red; !* Couleur de fond du badge pour visibilité *!*/
    /*color: white; !* Couleur du texte *!*/
}

.collapsible .fa-sort-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.collapsible.collapsed .fa-sort-down {
    transform: rotate(0deg);
    background-color: white;
}

.list-group-item:nth-child(odd) {
    background-color: #f8f9fa;  // Gris clair pour les lignes impaires
}

.form-check-input {
    border-color: #AAA; /* Rend la bordure plus épaisse et plus sombre */
}

.address-row{
    display:flex;
    align-items:baseline;      /* aligne l’icône avec la 1ère ligne du texte */
    gap:6px;
}

.address-row i{
    line-height:1;             /* évite l’interligne supplémentaire */
    margin:0;
    font-size:1rem;            /* ajuste si besoin */
}

.address-row .address{
    display:inline-block;
    line-height:1.2;           /* compact */
}

.address-row .address br{
    line-height:0;             /* supprime l'espace vertical autour des <br> */
}

/* ========================================
   SKELETON CARD LOADER
   ======================================== */

.skeleton-card {
    pointer-events: none;
    user-select: none;
}

/* Animation shimmer/pulse */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Élément de base pour tous les skeletons */
.skeleton-card .skeleton-title,
.skeleton-card .skeleton-button,
.skeleton-card .skeleton-line {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f0f0f0 25%,
        #f8f8f8 50%,
        #f0f0f0 75%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s linear infinite;
    border-radius: 4px;
}

/* Titre dans le header */
.skeleton-card .skeleton-title {
    height: 24px;
    width: 150px;
}

/* Bouton dans la toolbar */
.skeleton-card .skeleton-button {
    height: 32px;
    width: 80px;
    border-radius: 6px;
}

/* Lignes de contenu */
.skeleton-card .skeleton-line {
    height: 20px;
    width: 100%;
}

.skeleton-card .skeleton-line.short {
    width: 60%;
}

/* Mode dark */
[data-bs-theme=dark] .skeleton-card .skeleton-title,
[data-bs-theme=dark] .skeleton-card .skeleton-button,
[data-bs-theme=dark] .skeleton-card .skeleton-line {
    background: linear-gradient(
        90deg,
        #2a2a2a 0%,
        #2a2a2a 25%,
        #3a3a3a 50%,
        #2a2a2a 75%,
        #2a2a2a 100%
    );
    background-size: 200% 100%;
}

/* ========================================
   GLOBAL SEARCH — overlay centré (command palette)
   Seul le CSS non-couvrable par Bootstrap est conservé ici.
   Le reste utilise des classes utilitaires BS5 dans le HTML/JS.
   ======================================== */

/* Backdrop semi-transparent (pas d'équivalent BS pour backdrop-filter) */
.global-search-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);
}

.global-search-backdrop.show { display: block; }

/* Panneau — positionnement fixe centré + animation d'entrée */
.global-search-panel {
    display: none;
    position: fixed;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 720px;
    max-width: 92vw;
    max-height: 78vh;
    animation: gsearch-enter .15s ease-out;
}

.global-search-panel.show { display: flex; flex-direction: column; }

@keyframes gsearch-enter {
    from { opacity: 0; transform: translateX(-50%) scale(.97); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Suppression outline sur l'input (pas de classe BS pour ça) */
.global-search-panel input { outline: none; }

/* Bouton effacer → rouge au hover */
#global-search-clear:hover { color: var(--bs-danger) !important; }

/* Pills : display flex natif (d-none BS le masque via !important) */
.search-pills { display: flex; }

/* Ligne de résultat — curseur + hover background */
.search-result-row { cursor: pointer; transition: background-color .12s; }
.search-result-row:hover { background-color: var(--bs-tertiary-bg, #f5f8fa); }

/* Icône résultat — dimensions fixes */
.search-result-icon { width: 36px; height: 36px; font-size: 0.95rem; }

/* Lien résultat — couleur héritée + primary au hover */
.search-result-link { color: inherit; }
a.search-result-link:hover { color: var(--bs-info); }

/* Séparateur entre catégories */
.search-category-title:not(:first-child) {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color, #e4e6ef);
}

/* Icône état vide — taille spécifique */
.search-empty-icon { font-size: 3rem; }

/* ── Skeleton loader (animation custom) ── */

.search-skeleton-group { margin-bottom: 0.85rem; }

.search-skeleton-title,
.search-skeleton-icon,
.search-skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s linear infinite;
    border-radius: 4px;
}

.search-skeleton-title { height: 10px; width: 70px; margin-bottom: 0.5rem; }
.search-skeleton-icon  { width: 36px; height: 36px; border-radius: 0.45rem; }
.search-skeleton-line  { height: 11px; width: 100%; margin-bottom: 0.3rem; }
.search-skeleton-line.short { width: 50%; }

/* ── Dark mode ── */

[data-bs-theme=dark] .global-search-backdrop { background: rgba(0, 0, 0, .55); }

[data-bs-theme=dark] .search-skeleton-title,
[data-bs-theme=dark] .search-skeleton-icon,
[data-bs-theme=dark] .search-skeleton-line {
    background: linear-gradient(90deg, #2a2a2a 0%, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%, #2a2a2a 100%);
    background-size: 200% 100%;
}

@media (max-width: 600px) {
    .global-search-panel { top: 4%; width: 96vw; max-height: 85vh; }
}

.modal-xxl {
    max-width: 90vw;
    width: 90vw;
}

.modal-xxl .modal-content {
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-xxl .modal-body {
    overflow-y: auto;
    flex: 1;
}