/* Manager client V2 : surcharges AdminLTE 3. --brand = couleur du client / revendeur (session COLOR) */

:root {
    --brand: #2a78d6;
    --ink-secondary: #52514e;
    --ink-muted: #898781;
    --grid: #e1e0d9;
}

/* Couleur de marque */
.btn-brand,
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-brand:hover { filter: brightness(0.92); }
.card-brand.card-outline { border-top: 3px solid var(--brand); }
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-treeview > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: var(--brand);
    color: #fff;
}
.sidebar-light-primary .nav-sidebar > .nav-item.menu-open > .nav-link.active {
    background-color: transparent;
    color: var(--brand);
    font-weight: 600;
}
a.brand-link { padding: .6rem; }
.brand-logo-v2 { max-height: 44px; max-width: 100%; }
.sidebar-collapse .brand-logo-v2 { max-height: 28px; }
.login-logo-v2 { max-width: 220px; max-height: 90px; }

/* Barre de filtres */
.filters-bar { position: sticky; top: 57px; z-index: 1000; }
.filters-nums { min-width: 320px; max-height: 360px; overflow-y: auto; }
.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* Sablier de chargement (v2.js : initLoader). Le voile bloque les clics tout de suite,
   il n'apparaît qu'après 150 ms pour ne pas clignoter sur les pages rapides. */
.page-loader {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .6); cursor: wait;
}
.page-loading .page-loader { display: flex; animation: page-loader-in .2s ease .15s both; }
.page-loader-box {
    background: #fff; border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
    padding: 1rem 1.5rem; font-weight: 600; color: var(--ink-secondary);
}
.page-loader-box .fa-hourglass-half { color: var(--brand); font-size: 1.4rem; vertical-align: middle; animation: hourglass 1.6s ease-in-out infinite; }
@keyframes page-loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }

/* Indicateurs */
.stat-tile .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-tile .stat-label { color: var(--ink-secondary); }
.stat-tile .stat-sub { color: var(--ink-muted); font-size: .875rem; }
.stat-tile .stat-icon { font-size: 1.6rem; color: var(--ink-muted); }

.table-num td, .table-num th { font-variant-numeric: tabular-nums; }
.share-bar { height: 6px; background: var(--grid); border-radius: 3px; min-width: 80px; }
.share-bar > span { display: block; height: 100%; border-radius: 3px; background: #2a78d6; }

/* Carte forfait : lignes à gauche, consommation à droite (empilées sous lg) */
.forfait-conso { border-top: 1px solid rgba(0, 0, 0, .125); }
@media (min-width: 992px) {
    .forfait-conso { border-top: 0; border-left: 1px solid rgba(0, 0, 0, .125); }
}

/* Messagerie vocale : liste à gauche, message sélectionné à droite (reste visible au défilement) */
.vm-item { cursor: pointer; border-left: 3px solid transparent; }
.vm-item:hover { background: #f7f7f5; }
.vm-item.selected { background: #eef4fc; border-left-color: var(--brand); }
.vm-dot { color: var(--brand); font-size: .5rem; vertical-align: middle; }
.vm-transcript { white-space: pre-wrap; background: #f7f7f5; border-radius: 4px; padding: .75rem 1rem; line-height: 1.6; }
@media (min-width: 992px) {
    .vm-detail { position: sticky; top: 70px; }
}

/* Journal : pointage des rappels (couleur selon le statut) et commentaire */
.suivi-statut { min-width: 125px; }
.suivi-statut.suivi-a_rappeler { border-color: #eda100; background-color: #fff6e0; }
.suivi-statut.suivi-rappele { border-color: #2a78d6; background-color: #eaf2fc; }
.suivi-statut.suivi-traite { border-color: #1baf7a; background-color: #e6f7f0; }
.suivi-statut.suivi-sans_suite { color: var(--ink-muted); }
.suivi-comment { min-width: 200px; }
.journal-tools + .dataTables_filter, .journal-tools ~ .dataTables_filter label { margin-bottom: 0; }
/* Journal : appel arrivé avec l'actualisation en temps réel */
@keyframes journal-new { from { background-color: #fff3c4; } to { background-color: transparent; } }
#journal tbody tr.journal-new > td { animation: journal-new 6s ease-out; }
/* Journal : bouton « Temps réel » et statut, à droite de « Afficher N éléments » */
#journal_wrapper .dataTables_length label { margin-bottom: 0; }
.journal-live { display: flex; align-items: center; gap: .5rem; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #dee2e6; font-size: .8125rem; min-height: 31px; }
.live-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border: 1px solid #dee2e6; border-radius: 999px;
    background: #fff; color: var(--ink-secondary); font-size: .8125rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.live-toggle:hover { background: #f4f6f9; }
.live-toggle:focus { outline: 0; }
.live-toggle:focus-visible { box-shadow: 0 0 0 .2rem rgba(42, 120, 214, .25); }
.live-toggle.is-on { border-color: #b7e4d2; background: #e6f7f0; color: #147a56; }
.live-toggle.is-on:hover { background: #d8f1e7; }
.live-toggle.is-disabled { cursor: default; color: var(--ink-muted); background: #f8f9fa; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #adb5bd; flex: none; }
.live-toggle.is-on .live-dot { background: #1baf7a; animation: live-pulse 2s ease-out infinite; }
.live-toggle.is-on.is-busy .live-dot { animation-duration: .7s; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(27, 175, 122, .55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(27, 175, 122, 0); } }
.live-status { color: var(--ink-muted); white-space: nowrap; cursor: default; }
.live-status[data-state="error"] { color: #b06d00; }
.live-status .live-new { margin-left: .25rem; font-weight: 600; }
@media (max-width: 575.98px) {
    .journal-live { width: 100%; margin: .5rem 0 0; padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot, #journal tbody tr.journal-new > td { animation: none !important; }
}
/* Journal : appel terminé sur le répondeur, lien vers le message */
.vm-pill { border: 1px solid #c9dcf4; background: #eaf2fc; color: #1d5fae; font-weight: 500; }
.vm-pill:hover, .vm-pill:focus { background: #d6e6f9; color: #164c8c; text-decoration: none; }
.vm-pill.is-new::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .35rem; border-radius: 50%; background: var(--brand); vertical-align: middle; }
/* Menu : messages jamais écoutés */
.nav-unread { min-width: 1.4rem; font-variant-numeric: tabular-nums; }
.nav-unread.is-bump { animation: unread-bump .6s ease-out; }
@keyframes unread-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-unread.is-bump { animation: none; } }
/* Messagerie vocale : message ouvert depuis le journal */
.vm-item.vm-target { animation: journal-new 4s ease-out; }
.call-group { font-weight: 500; color: var(--ink-secondary); cursor: help; }
.call-group .fa-layer-group { color: var(--brand); }

/* Configuration : grille de la plage horaire (lundi -> dimanche, 0 h -> 24 h) */
.tc-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.tc-available { background: #2a78d6; }
.tc-slot1 { background: #eda100; }
.tc-slot2 { background: #1baf7a; }
.tc-slot3 { background: #e34948; }
.tc-none { background: #e1e0d9; }
.tc-grid { border: 1px solid var(--grid); border-radius: 4px; padding: .5rem .75rem; }
.tc-row { display: flex; align-items: center; }
.tc-row + .tc-row { margin-top: 6px; }
.tc-day { width: 90px; flex-shrink: 0; font-weight: 600; font-size: .875rem; }
.tc-track { position: relative; flex: 1; height: 30px; background: repeating-linear-gradient(90deg, #f0efec 0, #f0efec calc(100% / 12 - 1px), #fff calc(100% / 12 - 1px), #fff calc(100% / 12)); border-radius: 3px; cursor: copy; }
.tc-axis .tc-track { height: 16px; background: none; cursor: default; }
.tc-axis .tc-track span { position: absolute; transform: translateX(-50%); font-size: .7rem; color: var(--ink-muted); }
.tc-slot { position: absolute; top: 2px; bottom: 2px; border: 0; border-radius: 3px; color: #fff; font-size: .7rem; overflow: hidden; white-space: nowrap; padding: 0 4px; cursor: pointer; }
.tc-slot:hover, .tc-slot:focus { outline: 2px solid #0b0b0b; z-index: 1; }
.tc-slot span { pointer-events: none; }
[data-slot] .tc-chip { margin-right: .5rem; }

/* Conditions générales d'utilisation */
.cgu { max-width: 860px; line-height: 1.7; color: #2b2a28; }
.cgu p { margin-bottom: .75rem; text-align: justify; hyphens: auto; }
.cgu-article { scroll-margin-top: 70px; }
.cgu-article + .cgu-article { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--grid); }
.cgu-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .9rem; }
.cgu-num { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: .15rem; }
.cgu-list { padding-left: 1.25rem; margin-bottom: .75rem; }
.cgu-toc { position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; }
.cgu-toc .nav-link { color: var(--ink-secondary); border-radius: 3px; }
.cgu-toc .nav-link:hover { background: #f0efec; color: #0b0b0b; }
@media print {
    .main-header, .main-sidebar, .main-footer, .content-header { display: none !important; }
    .content-wrapper { margin-left: 0 !important; }
    .cgu-article { break-inside: avoid-page; }
}

.chart-box { position: relative; height: 280px; }
.chart-box.chart-tall { height: 360px; }
.chart-box.chart-legend { height: 340px; } /* place pour la légende des courbes par numéro */

/* Carte de chaleur jour x heure (rampe séquentielle bleue) */
.heatmap { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: .75rem; }
.heatmap th { color: var(--ink-muted); font-weight: 400; text-align: center; }
.heatmap th.day { text-align: right; padding-right: .4rem; white-space: nowrap; }
.heatmap td { height: 26px; border-radius: 3px; background: #f0efec; text-align: center; color: transparent; cursor: default; }
.heatmap td:hover { outline: 2px solid #0b0b0b; color: inherit; }
.heatmap td.l1 { background: #cde2fb; }
.heatmap td.l2 { background: #9ec5f4; }
.heatmap td.l3 { background: #6da7ec; }
.heatmap td.l4 { background: #3987e5; color: transparent; }
.heatmap td.l5 { background: #1c5cab; }
.heatmap td.l4:hover, .heatmap td.l5:hover { color: #fff; }
.fr-map { display: block; width: 100%; max-height: 560px; }
.fr-map path { fill: #f0efec; stroke: #fff; stroke-width: .8; cursor: default; }
.fr-map path:hover { stroke: #0b0b0b; stroke-width: 1.5; }
.fr-map path.l1 { fill: #cde2fb; }
.fr-map path.l2 { fill: #9ec5f4; }
.fr-map path.l3 { fill: #6da7ec; }
.fr-map path.l4 { fill: #3987e5; }
.fr-map path.l5 { fill: #1c5cab; }
.heatmap-legend span { display: inline-block; width: 22px; height: 10px; border-radius: 2px; vertical-align: middle; }