/* ==========================================================================
   UNA Import — styles de l'application (Bootstrap 5.3 + variables CSS)
   Toutes les couleurs personnalisées passent par les variables ci-dessous,
   redéfinies pour le mode sombre.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --una-fond: #f4f6f9;
    --una-barre-fond: #ffffff;
    --una-carte-fond: #ffffff;
    --una-bordure: rgba(0, 0, 0, .08);
    --una-survol: rgba(13, 110, 253, .07);
    --una-actif-fond: rgba(13, 110, 253, .1);
    --una-actif-texte: #0b5ed7;
    --una-texte-discret: #6c757d;
    --una-ombre: 0 1px 2px rgba(16, 24, 40, .05);
    /* Graphiques du tableau de bord (couleur de série validée contre le fond des cartes) */
    --una-graph-serie: #2a78d6;
    --una-graph-serie-survol: #1c5cab;
    --una-graph-grille: #e1e0d9;
    --una-graph-axe: #c3c2b7;
    --una-graph-bulle-fond: #212529;
    --una-graph-bulle-texte: #ffffff;
}

[data-bs-theme="dark"] {
    --una-fond: #121418;
    --una-barre-fond: #181b21;
    --una-carte-fond: #1c2027;
    --una-bordure: rgba(255, 255, 255, .08);
    --una-survol: rgba(110, 168, 254, .08);
    --una-actif-fond: rgba(110, 168, 254, .15);
    --una-actif-texte: #8bb9fe;
    --una-texte-discret: #9aa3ad;
    --una-ombre: 0 1px 2px rgba(0, 0, 0, .3);
    --una-graph-serie: #3987e5;
    --una-graph-serie-survol: #6da7ec;
    --una-graph-grille: #2c2f36;
    --una-graph-axe: #454a54;
    --una-graph-bulle-fond: #f0efec;
    --una-graph-bulle-texte: #121418;
}

:root {
    --una-largeur-barre: 240px;
    --una-largeur-barre-repliee: 72px;
    --una-hauteur-barre-sup: 60px;
}

body {
    background-color: var(--una-fond);
}

/* --- Structure ----------------------------------------------------------- */

.una-principal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

.una-contenu {
    flex: 1;
    padding: 1.5rem;
}

@media (max-width: 575.98px) {
    .una-contenu {
        padding: 1rem;
    }
}

/* --- Barre latérale ------------------------------------------------------ */

.una-barre-laterale {
    display: flex;
    flex-direction: column;
    background-color: var(--una-barre-fond) !important;
    border-right: 1px solid var(--una-bordure);
    width: var(--una-largeur-barre);
}

@media (min-width: 992px) {
    .una-barre-laterale {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1030;
        transition: width .2s ease;
        overflow-x: hidden;
    }

    .una-principal {
        margin-left: var(--una-largeur-barre);
    }

    /* Barre repliée : icônes seules */
    .barre-repliee .una-barre-laterale {
        width: var(--una-largeur-barre-repliee);
    }

    .barre-repliee .una-principal {
        margin-left: var(--una-largeur-barre-repliee);
    }

    .barre-repliee .una-barre-laterale .una-libelle {
        display: none !important;
    }

    .barre-repliee .una-lien {
        justify-content: center;
    }
}

.una-marque {
    display: flex;
    align-items: center;
    height: var(--una-hauteur-barre-sup);
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--una-bordure);
    flex-shrink: 0;
}

.barre-repliee .una-marque {
    padding: 0;
    justify-content: center;
}

.una-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.una-menu {
    flex: 1;
    padding: 1rem .75rem;
    overflow-y: auto;
}

.una-menu-titre {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--una-texte-discret);
    padding: 0 .75rem .4rem;
}

.una-lien {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    margin-bottom: 2px;
    border-radius: .5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
}

.una-lien i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
}

.una-lien:hover {
    background-color: var(--una-survol);
    color: var(--bs-body-color);
}

.una-lien.active {
    background-color: var(--una-actif-fond);
    color: var(--una-actif-texte);
    font-weight: 600;
}

.una-lien.disabled {
    opacity: .55;
    cursor: default;
}

.una-lien .badge {
    font-size: .65rem;
    font-weight: 500;
}

.una-lien.disabled:hover {
    background-color: transparent;
}

.una-pied-barre {
    padding: .75rem 1.25rem;
    font-size: .75rem;
    color: var(--una-texte-discret);
    border-top: 1px solid var(--una-bordure);
}

/* --- Barre supérieure ---------------------------------------------------- */

.una-barre-superieure {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--una-hauteur-barre-sup);
    padding: 0 1.5rem;
    background-color: var(--una-barre-fond);
    border-bottom: 1px solid var(--una-bordure);
}

@media (max-width: 575.98px) {
    .una-barre-superieure {
        padding: 0 1rem;
    }
}

.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    color: var(--bs-body-color);
}

.btn-icone:hover,
.btn-icone:focus-visible {
    background-color: var(--una-survol);
    color: var(--bs-body-color);
}

/* Icône du bouton de thème : lune en clair, soleil en sombre */
.icone-theme-sombre {
    display: none;
}

[data-bs-theme="dark"] .icone-theme-clair {
    display: none;
}

[data-bs-theme="dark"] .icone-theme-sombre {
    display: inline;
}

/* --- Cartes -------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--una-carte-fond);
    --bs-card-border-color: var(--una-bordure);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--una-ombre);
}

.carte-stat .carte-stat-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: .6rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.carte-stat .carte-stat-valeur {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;       /* .card de Bootstrap coupe les mots trop longs */
    overflow-wrap: normal;
}

.carte-stat .carte-stat-libelle {
    font-size: .8rem;
    color: var(--una-texte-discret);
}

/* --- États vides --------------------------------------------------------- */

.etat-vide {
    text-align: center;
    padding: 3rem 1rem;
}

.etat-vide-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--una-actif-fond);
    color: var(--una-actif-texte);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.etat-vide-message {
    color: var(--una-texte-discret);
    max-width: 28rem;
    margin: 0 auto;
}

/* --- Barre de progression ------------------------------------------------ */

.barre-progression .progress {
    height: .6rem;
}

.barre-progression-texte {
    font-size: .8rem;
    color: var(--una-texte-discret);
    font-variant-numeric: tabular-nums;
}

/* --- Zone de dépôt et cartes de fichiers --------------------------------- */

.zone-depot {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.zone-depot.survol {
    border-color: var(--bs-primary);
    background-color: var(--una-actif-fond);
}

.carte-import-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .5rem;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Récapitulatif final d'un import */
.recap-grille {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--una-bordure);
}

.recap-valeur {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.recap-libelle {
    font-size: .75rem;
    color: var(--una-texte-discret);
}

.recap-erreurs {
    --bs-table-bg: transparent;
}

.recap-erreurs th {
    font-weight: 600;
    color: var(--una-texte-discret);
    white-space: nowrap;
}

/* --- Historique et rapport ----------------------------------------------- */

.tableau-imports th,
.card .table thead th {
    font-size: .8rem;
    font-weight: 600;
    color: var(--una-texte-discret);
    white-space: nowrap;
}

.card .table {
    --bs-table-bg: transparent;
}

.mw-fichier {
    min-width: 14rem;
    max-width: 26rem;
}

.details-import dt {
    font-weight: 500;
    color: var(--una-texte-discret);
}

.details-import dd {
    margin-bottom: .25rem;
}

.journal-entree {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--una-bordure);
    font-size: .9rem;
}

.journal-entree:last-child {
    border-bottom: 0;
}

.journal-heure {
    color: var(--una-texte-discret);
    font-size: .8rem;
    white-space: nowrap;
}

.valeur-avant {
    color: var(--bs-danger-text-emphasis);
}

.valeur-apres {
    color: var(--bs-success-text-emphasis);
}

/* --- Page « Données » ---------------------------------------------------- */

/* Défilement horizontal et vertical dans le cadre, en-tête collant */
.tableau-donnees-conteneur {
    overflow: auto;
    max-height: calc(100vh - 330px);
    min-height: 240px;
}

.tableau-donnees th,
.tableau-donnees td {
    white-space: nowrap;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.tableau-donnees thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--una-carte-fond);
    box-shadow: inset 0 -1px 0 var(--una-bordure);
}

/* La première colonne (id_total) reste visible lors du défilement horizontal */
.tableau-donnees [data-col="id_total"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--una-carte-fond);
    box-shadow: inset -1px 0 0 var(--una-bordure);
}

.tableau-donnees thead [data-col="id_total"] {
    z-index: 3;
}

.tableau-donnees tbody tr {
    cursor: pointer;
}

.tableau-donnees tbody tr:hover [data-col="id_total"] {
    background-color: var(--bs-table-hover-bg);
}

.tableau-donnees tbody tr:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.lien-tri {
    color: inherit;
    text-decoration: none;
}

.lien-tri:hover,
.lien-tri.actif {
    color: var(--una-actif-texte);
}

.menu-colonnes {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 19rem;
}

.fiche-detail dt {
    font-weight: 500;
    margin-bottom: .5rem;
}

.fiche-detail dt code {
    font-size: .75em;
}

.fiche-detail dd {
    margin-bottom: .5rem;
}

/* --- Reporting agents (couleurs du modèle Excel, identiques en clair et en sombre) --- */

.tableau-reporting-conteneur {
    max-height: calc(100vh - 290px);
}

.tableau-reporting {
    --bs-table-bg: transparent;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

/* « .card » : plus précis que la règle générale des tableaux (qui empêche le retour à la ligne) */
.card .tableau-reporting thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 5.6rem;
    max-width: 7.5rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    color: var(--una-texte-discret);
}

.tableau-reporting td {
    text-align: center;
    white-space: nowrap;
}

.tableau-reporting [data-col="manager"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 8.5rem;
    text-align: left;
    font-weight: 600;
}

.tableau-reporting thead [data-col="manager"] {
    z-index: 3;
    text-align: center;
}

.tableau-reporting tbody td:not([style]),
.tableau-reporting tfoot td:not([style]) {
    background-color: var(--una-carte-fond);
}

.tableau-reporting tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--bs-border-color);
}

/* --- Réalisations CALL1 (couleurs du modèle Excel) ----------------------- */

.tableau-realisations-conteneur {
    max-height: calc(100vh - 250px);
}

.tableau-realisations {
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    border-color: #808080;
}

.tableau-realisations th,
.tableau-realisations td {
    text-align: center;
    white-space: nowrap;
    padding: .2rem .45rem;
}

.card .tableau-realisations thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 700;
    min-width: 5.2rem;
}

.card .tableau-realisations thead tr.ligne-dates th {
    top: 1.55rem;
}

.tableau-realisations .col-libelle {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 25rem;
    text-align: left;
    font-weight: 700;
}

.card .tableau-realisations thead .col-libelle {
    z-index: 3;
    text-align: center;
}

.tableau-realisations .ligne-separateur td {
    height: .9rem;
    padding: 0;
    background-color: var(--una-carte-fond);
    border-left-color: transparent;
    border-right-color: transparent;
}

/* --- Badges -------------------------------------------------------------- */

/* Le badge « gris foncé » (annulé / supprimé) reste lisible en mode sombre */
[data-bs-theme="dark"] .badge.text-bg-dark {
    background-color: #495057 !important;
    color: #fff !important;
}

/* --- Tableau de bord ----------------------------------------------------- */

.graphique-zone {
    position: relative;
    height: 300px;          /* hauteur totale, étiquettes des axes comprises */
}

.graphique-zone.graphique-qualif1,
.graphique-zone.graphique-qualif2 {
    height: 360px;
}

.graphique-tableau {
    max-height: 360px;
    overflow-y: auto;
}

.tableau-graphique {
    --bs-table-bg: transparent;
    font-size: .85rem;
}

.tableau-graphique td.text-end,
.tableau-graphique th.text-end {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tableau-graphique thead th {
    position: sticky;
    top: 0;
    background-color: var(--una-carte-fond);
}

@media (max-width: 575.98px) {
    .graphique-zone {
        height: 260px;
    }
}

/* --- Divers -------------------------------------------------------------- */

.texte-discret {
    color: var(--una-texte-discret);
}

.min-w-0 {
    min-width: 0;
}

.chiffres {
    font-variant-numeric: tabular-nums;
}