#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* SKELETOR */
:root {
    --erpcolor-primary: #767676;
    --erpcolor-secondary: #dd3393;
    --erpcolor-background: #ffffff;
    --erpcolor-background-header: #ebe7e1;
    --erpcolor-background-footer: #ad9d90;

}

html, body {
    overscroll-behavior-y: none;
}

body {
    background-image: none !important;
    background-color: #ffffff !important; /* ou ta couleur de fond actuelle */
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }
}


.toast {
    animation: fadeInUp .3s ease-out;
}

.toast-custom {
    background: rgba(30, 41, 59, 0.75); /* couleur + transparence */
    color: white;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 12px 20px;
}

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

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

main {
    flex: 1;
}

.main-mt {
    margin-top: 0px;
    background-color: var(--erpcolor-background);
}

.header-row {
    position: sticky;
    z-index: 3000; /* Assure que l'en-tête est au-dessus du contenu */
    height: 60px;
    border-bottom: 1px solid var(--erpcolor-secondary);
    top: 0;
    left: 0;
    width: 100%;
}

.header-bg {
    background-color: var(--erpcolor-background-header);
}

.header-co {
    color: var(--erpcolor-primary);
}

.header-logo-h {
    height: 60px;
}

.sticky-tabs {
    /*position: sticky;
    top: 60px;
    z-index: 1010;
    overflow: visible;*/
    background-color: #ffffff;
    padding-top: 0.0rem;
}

.sticky-toolsbar {
    /*position: sticky;
    top: 120px; 
    z-index: 1020;*/
    padding-top: 0.5rem;
}

.tab-content {
    z-index: 1000;
    position: relative;
    overflow: visible;
}

.container-fluid {
    overflow: visible !important;
    z-index: auto !important;
}

.btn-primary {
    color: #ffff;
    background-color: var(--erpcolor-primary);
    border-color: var(--erpcolor-primary);
}

.Tools-primary {
    color: var(--erpcolor-primary) !important;
    font-size: 32px;
}



.btn.btn-primary:disabled,
.btn.btn-primary[disabled] {
    background-color: #e9ecef !important; /* Gris clair, ajuste selon ton goût */
    color: #6c757d !important; /* Texte gris pour lisibilité, optionnel */
    opacity: 1 !important; /* Rétablit l'opacité pour un look plus net */
    cursor: not-allowed; /* Indique que le bouton est désactivé */
    border-color: #ced4da !important; /* Bordure gris clair pour cohérence */
}

.btn.btn-primary:hover {
    color: var(--erpcolor-secondary) !important;
    background-color: var(--erpcolor-primary);
}

.label-primary {
    color: var(--erpcolor-primary) !important;
}

.label-secondary {
    color: var(--erpcolor-secondary) !important;
}

.label-counter {
    color: var(--erpcolor-counter) !important;
}

.title-primary {
    color: var(--erpcolor-primary);
}

.footer-bg {
    background-color: var(--erpcolor-background-footer);
}

.hover-card {
    cursor: pointer;
}

.card-title {
    color: var(--erpcolor-secondary) !important;
    font-weight: 700;
}

.custom-icon-32 {
    font-size: 32px !important; /* Force la taille à 32px */
    width: 32px; /* Assure une largeur fixe */
    height: 32px; /* Assure une hauteur fixe */
    line-height: 32px; /* Centre verticalement le glyphe */
}

.bi.display-4 {
    font-size: 32px !important; /* Surcharge display-4 pour toutes les icônes */
    width: 32px;
    height: 32px;
    line-height: 32px;
}

/* Style pour la table avec en-têtes fixes */
.table-container {
    flex-grow: 1;
    overflow-y: auto;
    max-height: calc(100vh - 200px); /* Ajuste selon la hauteur des zones du haut et des boutons */
    z-index: 1000;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Assure que les colonnes occupent toute la largeur */
}

thead th {
    position: sticky;
    top: 0;
    color: var(--erpcolor-primary) !important;
    background-color: #f7f7f7 !important; /* Fond clair pour les en-têtes */
    z-index: 1; /* Pour s'assurer que les en-têtes restent au-dessus du contenu */
}

th, td {
    word-wrap: break-word;
    Permet le retour à la ligne pour les longues données
}

@media (min-width: 641px) {
    table td,
    table th {
        border-top: none !important;
        border-bottom: none !important;
    }

    table td,
    table th {
        border-right: 1px solid #bbb !important;
    }

        table td:last-child,
        table th:last-child {
            border-right: none !important;
        }
}

@media (max-width: 641px) {
    /* Ajustements responsifs pour la table */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        border: 1px solid #dee2e6;
        margin-bottom: 0.5rem;
    }

    td {
        display: flex;
        flex-direction: column; /* Empile label et contenu verticalement */
        align-items: start; /* Aligne à gauche */
        padding: 0.5rem;
        position: relative;
        border: none !important;
    }

        td:before {
            content: attr(data-label);
            font-weight: bold;
            margin-bottom: 0.2rem;
            color: #333; /* Assure que le label est visible */
        }
}

@media (max-width: 1800px) {
    .nav-tabs .tab .tab-text {
        display: none !important; /* Masquer le texte en mode réduit avec priorité élevée */
    }

    .nav-tabs .tab img {
        margin-right: 0; /* Retirer la marge à droite en mode réduit */
    }

    /* Nouveaux styles pour réduire la largeur des onglets */
    .nav-tabs {
        flex-wrap: nowrap; /* Empêche les onglets de passer à la ligne suivante */
        /*overflow-x: auto; */ /* Ajoute un défilement horizontal si nécessaire */
        white-space: nowrap; /* Empêche le texte de s'enrouler */
    }

        .nav-tabs .nav-item {
            margin-right: 0px; /* Réduit l'espace entre les onglets */
            flex: 0 0 auto; /* Permet aux onglets de prendre uniquement l'espace nécessaire */
        }

        .nav-tabs .tab {
            padding: 0.25rem 0.5rem; /* Réduit le padding interne des onglets */
            min-width: 0; /* Supprime toute largeur minimale imposée */
        }

            .nav-tabs .tab img {
                width: 24px;
                height: 24px;
            }
}

@media (max-width: 641px) {
    /* Masquer les onglets de vue en mode réduit */
    .nav-tabs .view-tab {
        display: none;
    }

    /* Afficher le faux select */
    .view-nav-dropdown {
        display: block;
    }
}

@media (min-width: 641px) {

    /* Masquer le faux select en mode PC */
    .view-nav-dropdown {
        display: none;
    }
}

.tab-text {
    display: inline; /* Par défaut, le texte est visible */
}

.tab {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 4px solid transparent;
    transition: border-color 0.3s;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    color: var(--erpcolor-primary);
}

    .tab:hover {
        border-bottom-color: var(--erpcolor-secondary);
    }

    .tab.active {
        border-bottom-color: var(--erpcolor-primary);
    }


.nav-tabs {
    border: none !important;
}

    .nav-tabs .tab img {
        width: 32px;
        height: 32px;
        margin-right: 4px;
    }

.action-column {
    width: 80px;
    min-width: 80px;
}


.dropdown-item {
    background-color: transparent !important; /* Fond transparent par défaut */
    color: var(--erpcolor-primary) !important; /* Couleur du texte par défaut (noir, ajustable) */
}

    .dropdown-item:hover {
        background-color: #f8f9fa !important; /* Fond léger au survol (optionnel, ajustable) */
        color: var(--erpcolor-secondary) !important; /* Conserver la couleur du texte au survol */
    }

    .dropdown-item:focus, .dropdown-item:active {
        background-color: transparent !important; /* Pas de changement au clic ou focus */
        color: #000 !important; /* Conserver la couleur du texte */
    }

    .dropdown-item.text-danger {
        color: #dc3545 !important; /* Garder la couleur rouge pour "Supprimer" */
    }

        .dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus, .dropdown-item.text-danger:active {
            color: #dc3545 !important; /* Conserver la couleur rouge au survol/clic */
            background-color: #f8f9fa !important; /* Fond léger au survol (optionnel) */
        }


/* Styles pour le faux select */
.view-nav-dropdown {
    position: relative; /* Crée un contexte pour le menu */
}

.custom-select-button {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
}

    .custom-select-button img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
    }

    .custom-select-button:hover img {
        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(10deg) brightness(94%) contrast(95%); /* Simule --erpcolor-secondary */
    }

.custom-select-menu {
    position: absolute;
    top: 100%; /* Place le menu juste en dessous du bouton */
    right: 0; /* Aligné à droite */
    min-width: 150px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2000; /* Au-dessus de tout */
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-select-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    color: var(--erpcolor-primary);
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
}

    .custom-select-item:hover {
        background-color: #f8f9fa;
        color: var(--erpcolor-secondary);
    }

    .custom-select-item:focus, .custom-select-item:active {
        background-color: transparent;
        color: var(--erpcolor-primary);
    }

/* Styles pour la popup de filtre */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9000; /* Augmenté pour être au-dessus de sticky-tabs et sticky-toolsbar */
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9001; /* Au-dessus du backdrop */
    display: block;
    margin-top: 1.75rem;
    height: auto !important; /*Centrage dans l'écran*/
    max-width: 1500px !important;
}

.modal-dialog-sk {
    position: relative;
    width: auto;
    max-width: 1280px;
    margin: var(--bs-modal-margin);
    pointer-events: none;
}


.modal-content {
    background-color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    position: relative;
    min-height: 200px; /* Assurer une hauteur minimale pour la visibilité */
}



.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

    .modal-close img {
        width: 24px;
        height: 24px;
    }

    .modal-close:hover img {
        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(10deg) brightness(94%) contrast(95%);
    }

.modal-body {
    margin-bottom: 1rem;
}

.modal-header {
    display: flex;
    justify-content: center;
    border-bottom: var(--bs-modal-header-border-width) solid var(--erpcolor-secondary) !important;
    border-top-left-radius: var(--erpcolor-secondary) !important;
    border-top-right-radius: var(--erpcolor-secondary) !important;
    padding: 0px !important;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}

.btn-100 {
    width: 100px;
}

.filter-zone {
    border-color: var(--erpcolor-secondary) !important;
    transition: all 0.3s ease;
}

    .filter-zone:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.task {
    padding: 4px;
    margin: 4px;
    color: #1D60A6;
    background-color: #F2F2F2;
    border-radius: 4px;
}

.task_title {
    cursor: pointer;
}


.task:hover {
    background-color: #EDF5FA;
}

/* Supprime les flèches des champs numériques Chrome / Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Supprime les flèches sur Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.upload-container {
    max-width: 500px;
    margin: auto;
}

    .upload-container label {
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upload-container i {
        font-size: 1.4rem;
    }

.bi {
    transition: all 0.3s ease-in-out;
}

/* Taille réelle de la checkbox */
.larger-checkbox {
    width: 24px;
    height: 24px;
}

/* Taille du label et espacement */
.form-check {
    padding: 10px 0;
}

.form-check-label {
    font-size: 1.15rem;
    margin-left: 10px;
    cursor: pointer;
}

/* alignement checkbox + label */
.form-check-input {
    margin-top: 0.25rem;
}

    .form-check-input:checked {
        background-color: var(--erpcolor-secondary) !important;
        border-color: var(--erpcolor-secondary) !important;
    }

.blazored-toast-container {
    z-index: 9999 !important; /* Ou plus haut que tes autres éléments */
}

.blazored-toast {
    z-index: 9999 !important;
}

.leaflet-tooltip.vehicle-label {
    background: rgba(255, 255, 255, 1);
    border: 1px solid #333;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    color: var(--erpcolor-secondary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.leaflet-tooltip.vehicle-label {
    opacity: 1;
    transition: opacity 0.2s ease;
}

fleet-panel {
    height: calc(100vh - 120px); /* header ERP */
}

.speed-warning {
    background-color: rgba(255, 165, 0, 0.2);
    color: #b45309;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.speed-danger {
    background-color: rgba(220, 38, 38, 0.25);
    color: #991b1b;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.kpi-table td,
.kpi-table th {
    border: none !important;
    background: transparent;
    padding: 0.25rem 0.5rem; /* ajustable */
}

.activity-icon {
    display: none; /* icône masquée hors mobile */
}

.activity-separator {
    display: none;
}

/* Desktop */
.activity-icon {
    display: none;
}

.activity-separator {
    display: none;
}

.activity-rupture {
    background-color: #1D61A6 !important;
    color: white !important;
}

.activity-total-general td {
    background-color: #1D61A6 !important;
    color: white !important;
    border-top: 2px solid #000;
}

/* Mobile */
@media (max-width: 641px) {

    table[data-responsive="true"] tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        padding-right: 1rem;
        white-space: nowrap;
    }

    table[data-responsive="true"] tbody td.activity-date {
        font-weight: 700;
        font-size: 1rem;
        color: var(--erpcolor-primary);
        border-bottom: 1px solid #dee2e6;
    }

        table[data-responsive="true"] tbody td.activity-date::before {
            content: none;
        }

    /* 🔑 le vrai fix est ici */
    .activity-date-content {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .activity-icon {
        display: inline-block;
        font-size: 0.95rem;
        opacity: 0.75;
    }

    .activity-separator {
        display: block;
        margin-top: 0.25rem;
    }
}