/* ============================================================
   VDCloud — Design tokens
   ============================================================ */
   :root{
    --vd-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  
    /* Couleurs de marque */
    --vd-primary:      #2f9cf4;
    --vd-primary-soft: #e6f1f7;
    --vd-blue:         #2f9cf4;
    --vd-purple:       #9b51e0;
    --vd-orange:       #f4581c;
  
    /* Neutres */
    --vd-bg:        #eef1f5;
    --vd-surface:   #ffffff;
    --vd-surface-2: #f6f8fa;
    --vd-line:      #eef0f4;
    --vd-input-border: #d8dde5;
    --vd-track:     #eef0f4;
    --vd-ink:       #16202c;
    --vd-ink-soft:  #6b7a90;
    --vd-ink-faint: #9aa7b8;
  
    /* Badges de statut */
    --vd-ok-fg:#00a06a; --vd-ok-bg:#e6f7f0;
    --vd-wa-fg:#d98200; --vd-wa-bg:#fdf3e3;
    --vd-in-fg:#1a7fd4; --vd-in-bg:#e8f3fd;
    --vd-da-fg:#e8410d; --vd-da-bg:#fdece6;
    --vd-mu-fg:#6b7a90; --vd-mu-bg:#f1f3f6;

    /* Statuts agent — supervision temps réel (Supervisions.php / Show_Reel) */
    --vd-status-ready:   #d7b30b;
    --vd-status-dial:    #c97a1b;
    --vd-status-incall:  #008b85;
    --vd-status-preview: #4a356c;
    --vd-status-dead:    #085298;
    --vd-status-deadm:   #7c8ea3;
    --vd-status-dispo:   #4f506c;
    --vd-status-listen:  #3b3f45;
    --vd-status-queue:   #429ccd;
    --vd-status-manual:  #509ce4;
    --vd-status-paused:  #0b2c4b;
    --vd-status-alert:   #d70c0c;

    /* Graphiques */
    --vd-grid:    #e9edf2;
    --vd-tooltip: #16202c;
  
    --vd-shell-shadow: 0 6px 34px rgba(22,32,44,.07);
  
    /* Dégradés des cartes KPI */
    --vd-grad-1: linear-gradient(135deg,#00c489 0%,#00a06a 100%);
    --vd-grad-2: linear-gradient(135deg,#3fa9f5 0%,#1a7fd4 100%);
    --vd-grad-3: linear-gradient(135deg,#a55ce8 0%,#7a2fd0 100%);
    --vd-grad-4: linear-gradient(135deg,#fa6a2c 0%,#e8410d 100%);
    --vd-grad-5: linear-gradient(135deg,#ff6b5b 0%,#e8410d 100%);
    --vd-grad-6: linear-gradient(135deg,#2dd4c8 0%,#0d9488 100%);
    --vd-grad-7: linear-gradient(135deg,#5b7fd6 0%,#2c4a9e 100%);
    --vd-grad-8: linear-gradient(135deg,#c65b7a 0%,#8e1f3f 100%);
    --vd-grad-9: linear-gradient(135deg,#a3b83c 0%,#6b7a1f 100%);

    /* Composant "console" (visualiseur de logs) : reste sombre dans les deux
       thèmes (comportement volontaire d'un composant de type terminal), mais
       nommé via des tokens pour éviter toute couleur en dur dans les vues. */
    --vd-console-bg: #1a1f26;
    --vd-console-fg: #7cf29c;
    --vd-console-line: #2a323c;

    --vd-radius:    18px;
    --vd-radius-sm: 12px;
    --vd-shadow:    0 2px 14px rgba(22,32,44,.05);
    --vd-sidebar-w: 250px;
  
    color-scheme: light;
  }
  
  /* ------------------------------------------------------------
     MODE SOMBRE — on ne réécrit que les tokens, aucun composant
     ------------------------------------------------------------ */
  body.vd-dark{
    --vd-primary:      #12c98a;
    --vd-primary-soft: rgba(18,201,138,.14);
  
    --vd-bg:        #0d1319;
    --vd-surface:   #161e27;
    --vd-surface-2: #1e2833;
    --vd-line:      #26313d;
    --vd-input-border: #3a4856;
    --vd-track:     #26313d;
    --vd-ink:       #e9eff6;
    --vd-ink-soft:  #93a3b6;
    --vd-ink-faint: #6d7d91;
  
    --vd-ok-fg:#2fd39a; --vd-ok-bg:rgba(47,211,154,.13);
    --vd-wa-fg:#f2b64c; --vd-wa-bg:rgba(242,182,76,.13);
    --vd-in-fg:#59b0f7; --vd-in-bg:rgba(89,176,247,.13);
    --vd-da-fg:#ff7a52; --vd-da-bg:rgba(255,122,82,.13);
    --vd-mu-fg:#93a3b6; --vd-mu-bg:rgba(147,163,182,.12);

    /* Statuts agent — supervision temps réel : légèrement éclaircis pour rester
       lisibles sur fond sombre tout en gardant une teinte proche du mode clair */
    --vd-status-ready:   #e8c531;
    --vd-status-dial:    #e2952f;
    --vd-status-incall:  #17b0a8;
    --vd-status-preview: #7a5aa8;
    --vd-status-dead:    #2f7fc4;
    --vd-status-deadm:   #8fa0b3;
    --vd-status-dispo:   #6d7094;
    --vd-status-listen:  #5b6470;
    --vd-status-queue:   #55b4e0;
    --vd-status-manual:  #6fb2ee;
    --vd-status-paused:  #17436d;
    --vd-status-alert:   #ff5757;

    --vd-grid:    #26313d;
    --vd-tooltip: #2b3947;
  
    --vd-shell-shadow: 0 6px 34px rgba(0,0,0,.35);
  
    color-scheme: dark;
  }
  /* Les dégradés des cartes KPI sont légèrement assombris en dark */
  body.vd-dark{
    --vd-grad-1: linear-gradient(135deg,#00a874 0%,#00714b 100%);
    --vd-grad-2: linear-gradient(135deg,#2b8fd6 0%,#155e9e 100%);
    --vd-grad-3: linear-gradient(135deg,#8a4bc9 0%,#5e21a3 100%);
    --vd-grad-4: linear-gradient(135deg,#d95a26 0%,#b0300a 100%);
    --vd-grad-5: linear-gradient(135deg,#c94a37 0%,#8f2607 100%);
    --vd-grad-6: linear-gradient(135deg,#189085 0%,#0a4d46 100%);
    --vd-grad-7: linear-gradient(135deg,#3f5cad 0%,#1c2f6b 100%);
    --vd-grad-8: linear-gradient(135deg,#9c4460 0%,#5e132b 100%);
    --vd-grad-9: linear-gradient(135deg,#7c8c30 0%,#4c5716 100%);
  }
  
  *{ -webkit-font-smoothing:antialiased; }
  body{
    font-family:var(--vd-font);
    background:var(--vd-bg);
    color:var(--vd-ink);
    font-size:14px;
    margin:0;
  }
  h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--vd-ink); }
  a{ text-decoration:none; }
  .text-soft{ color:var(--vd-ink-soft)!important; }
  .text-faint{ color:var(--vd-ink-faint)!important; }
  /* Chiffres alignés (obligatoire sur toute valeur numérique affichée) */
  .num{ font-variant-numeric:tabular-nums; }
  
  /* ============================================================
     Coque : la carte blanche qui contient toute l'application
     ============================================================ */
  .vd-shell{
    display:flex;
    min-height:calc(100vh - 32px);
    margin:16px 16px 16px calc(var(--vd-sidebar-w) + 32px);
    background:var(--vd-surface);
    border-radius:26px;
    overflow:hidden;
    box-shadow:var(--vd-shell-shadow);
    transition:margin-left .22s ease;
  }
  @media (max-width: 991.98px){
    .vd-shell{ margin:0; border-radius:0; min-height:100vh; }
  }
  
  /* ============================================================
     Sidebar — fixe : reste en place pendant que le contenu défile
     ============================================================ */
  body.vd-collapsed{ --vd-sidebar-w:78px; }
  
  .vd-sidebar{
    position:fixed; top:16px; left:16px; bottom:16px;
    width:var(--vd-sidebar-w);
    background:var(--vd-surface);
    border-radius:26px;
    box-shadow:var(--vd-shell-shadow);
    display:flex;
    flex-direction:column;
    padding:26px 0 20px;
    overflow-y:auto;
    z-index:1020;
    transition:width .22s ease;
  }
  .vd-brand{
    display:flex; align-items:center; gap:10px;
    padding:0 26px 26px;
    white-space:nowrap;
  }
  .vd-brand-logo{
    height:34px; width:auto; display:block;
  }
  
  .vd-nav{ list-style:none; padding:0 14px; margin:0; }
  .vd-nav .nav-label{
    font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--vd-ink-faint); padding:16px 12px 8px; white-space:nowrap;
  }
  .vd-nav a{
    display:flex; align-items:center; gap:13px;
    padding:11px 12px; margin-bottom:2px;
    border-radius:10px;
    color:var(--vd-ink-soft); font-weight:600; font-size:14.5px;
    position:relative; white-space:nowrap;
    transition:background .15s, color .15s;
  }
  .vd-nav a .bi{ font-size:17px; flex:0 0 17px; }
  .vd-nav a:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-nav a.active{ background:var(--vd-primary-soft); color:var(--vd-primary); }
  .vd-nav a.active::before{
    content:""; position:absolute; left:-14px; top:8px; bottom:8px;
    width:4px; border-radius:0 4px 4px 0; background:var(--vd-primary);
  }
  .vd-nav .badge-count{
    margin-left:auto; background:var(--vd-primary); color:#fff;
    font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px;
  }
  .vd-sidebar-footer{ margin-top:auto; padding:0 14px; }
  
  /* Mode réduit (collapsed) — desktop : --vd-sidebar-w (redéfini ci-dessus)
     met à jour la largeur de la sidebar et le décalage du shell en un seul endroit */
  body.vd-collapsed .vd-sidebar .vd-brand{ padding-left:0; justify-content:center; }
  body.vd-collapsed .vd-sidebar .vd-brand-logo{ height:30px; }
  body.vd-collapsed .vd-sidebar .nav-text,
  body.vd-collapsed .vd-sidebar .nav-label,
  body.vd-collapsed .vd-sidebar .badge-count{ display:none; }
  body.vd-collapsed .vd-sidebar .vd-nav a{ justify-content:center; padding:12px 0; }
  
  /* ============================================================
     Contenu principal
     ============================================================ */
  .vd-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .vd-topbar{
    display:flex; align-items:center; gap:14px;
    padding:24px 28px 10px;
  }
  .vd-hello{ font-size:20px; font-weight:800; margin:0; letter-spacing:-.3px; }
  .vd-hello small{ display:block; font-size:12.5px; font-weight:500; color:var(--vd-ink-soft); margin-top:2px; letter-spacing:0; }
  
  .vd-search{ position:relative; width:250px; }
  .vd-search .bi{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color:var(--vd-ink-faint); font-size:13px;
  }
  .vd-search .form-control{
    height:38px; border-radius:12px; padding-left:35px;
    border:1px solid transparent; background:var(--vd-surface-2); color:var(--vd-ink); font-size:12.5px;
  }
  .vd-search .form-control::placeholder{ color:var(--vd-ink-faint); }
  .vd-search .form-control:focus{
    border-color:var(--vd-primary); background:var(--vd-surface);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--vd-primary) 12%, transparent);
  }
  /* Variante compacte (ex. recherche rapide dans l'en-tête d'une carte tableau) */
  .vd-search.vd-search-sm{ width:200px; }
  .vd-search.vd-search-sm .bi{ left:12px; font-size:12.5px; }
  .vd-search.vd-search-sm .form-control{ height:34px; padding-left:30px; font-size:12.5px; }
  .vd-icon-btn{
    width:38px; height:38px; border-radius:13px;
    border:1px solid var(--vd-line); background:var(--vd-surface);
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--vd-ink-soft); font-size:15.5px; position:relative;
  }
  .vd-icon-btn:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-icon-btn:disabled{ opacity:.45; pointer-events:none; }
  .vd-icon-btn .dot{
    position:absolute; top:9px; right:11px; width:7px; height:7px;
    border-radius:50%; background:var(--vd-orange); border:2px solid var(--vd-surface);
  }
  .vd-lang-btn.show{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-dropdown-menu{
    min-width:190px; margin-top:10px; padding:6px;
    border-radius:14px; border:1px solid var(--vd-line);
    background:var(--vd-surface); box-shadow:var(--vd-shadow);
  }
  .vd-lang-item{
    display:flex; align-items:center; gap:10px;
    border-radius:10px; padding:8px 10px; font-size:13.5px;
    color:var(--vd-ink-soft);
  }
  .vd-lang-item:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-lang-item.active{ color:var(--vd-ink); font-weight:600; }
  .vd-lang-flag{ font-size:16px; line-height:1; }
  .vd-lang-check{ margin-left:auto; opacity:0; color:var(--vd-primary); }
  .vd-lang-item.active .vd-lang-check{ opacity:1; }

  /* ---------- Menu profil (topbar) : thème, langue, paramètres ---------- */
  .vd-profile-btn{
    background:none; border:none; padding:2px; border-radius:50%;
    display:inline-flex; line-height:0;
  }
  .vd-profile-btn:hover, .vd-profile-btn.show{ box-shadow:0 0 0 3px var(--vd-surface-2); }
  .vd-profile-menu{ min-width:230px; }
  .vd-profile-submenu-label{
    padding:10px 10px 4px; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--vd-ink-faint);
  }
  .vd-profile-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    border-radius:10px; padding:8px 10px; font-size:13.5px;
    color:var(--vd-ink-soft); cursor:pointer;
  }
  .vd-profile-row:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-profile-row .bi{ font-size:15px; }
  .vd-avatar{
    width:42px; height:42px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; color:#fff; font-size:14px; flex:0 0 42px;
    background:var(--vd-grad-1);
  }
  /* Avatar du profil dans la topbar uniquement : légèrement plus petit
     que les avatars des tableaux/listes, pour rester aligné avec les
     vd-icon-btn (38px) du même bandeau. */
  .vd-topbar .vd-avatar{ width:38px; height:38px; flex:0 0 38px; font-size:13px; }

  /* En-tête du menu profil : avatar + nom complet de l'utilisateur connecté */
  .vd-profile-head{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 10px 12px; text-align:center;
  }
  .vd-avatar-lg{ width:56px; height:56px; flex:0 0 56px; font-size:19px; }
  .vd-profile-name{
    font-size:14px; font-weight:700; color:var(--vd-ink);
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Rangée des deux icônes (langue / thème) du menu profil */
  .vd-profile-quick{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:8px 10px 4px;
  }

  /* Panneau des langues, replié par défaut : révélé au clic sur l'icône langue */
  .vd-lang-panel{ display:none; flex-direction:column; gap:2px; padding:2px 4px 4px; }
  .vd-lang-panel.show{ display:flex; }

  /* ---------- Menu "accès rapide" (topbar) : grille de raccourcis ---------- */
  .vd-quicknav-menu{ min-width:264px; padding:10px; }
  .vd-quicknav-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
  }
  .vd-quicknav-item{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:12px 6px; border-radius:12px; text-align:center;
    color:var(--vd-ink-soft);
  }
  .vd-quicknav-item:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .vd-quicknav-icon{
    width:40px; height:40px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; background:var(--vd-surface-2); color:var(--vd-primary);
  }
  .vd-quicknav-item:hover .vd-quicknav-icon{ background:var(--vd-primary); color:#fff; }
  .vd-quicknav-label{ font-size:11px; font-weight:600; line-height:1.25; }

  .vd-content{ padding:14px 28px 30px; }
  
  /* ============================================================
     Cartes KPI (dégradés)
     ============================================================ */
  .vd-stat{
    border-radius:var(--vd-radius);
    padding:20px 22px;
    color:#fff; height:100%;
    position:relative; overflow:hidden;
  }
  .vd-stat::after{
    content:""; position:absolute; right:-40px; bottom:-60px;
    width:150px; height:150px; border-radius:50%;
    background:rgba(255,255,255,.09);
  }
  .vd-stat.g1{ background:var(--vd-grad-1); }
  .vd-stat.g2{ background:var(--vd-grad-2); }
  .vd-stat.g3{ background:var(--vd-grad-3); }
  .vd-stat.g4{ background:var(--vd-grad-4); }
  .vd-stat.g5{ background:var(--vd-grad-5); }
  .vd-stat.g6{ background:var(--vd-grad-6); }
  .vd-stat.g7{ background:var(--vd-grad-7); }
  .vd-stat.g8{ background:var(--vd-grad-8); }
  .vd-stat.g9{ background:var(--vd-grad-9); }
  .vd-stat .stat-label{ font-size:13px; font-weight:600; opacity:.9; }
  .vd-stat .stat-value{ font-size:32px; font-weight:800; line-height:1.15; margin-top:2px; letter-spacing:-1px; }
  .vd-stat .stat-icon{
    position:absolute; top:18px; right:20px;
    width:44px; height:44px; border-radius:13px;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:21px; z-index:1;
  }
  .vd-stat hr{ border-color:rgba(255,255,255,.28); opacity:1; margin:14px 0 10px; }
  .vd-stat .stat-foot{
    display:flex; justify-content:space-between; align-items:center;
    font-size:12.5px; font-weight:600; opacity:.92; position:relative; z-index:1;
  }
  .vd-stat .stat-line{
    display:flex; justify-content:space-between;
    font-size:12.5px; font-weight:600; opacity:.92;
    margin-top:4px; position:relative; z-index:1;
  }
  /* Jauge miniature à l'intérieur d'une carte KPI colorée (.vd-stat) : le
     blanc translucide est volontaire ici (comme .stat-icon/.stat-value/hr
     ci-dessus) car le fond de la carte est toujours un dégradé de couleur,
     dans les deux thèmes — ce n'est pas une couleur "en dur" au sens de la
     règle car il n'y a pas d'alternative dark/light à prévoir sur ce fond. */
  .vd-stat .stat-gauge{
    position:relative; z-index:1; height:6px; border-radius:99px;
    background:rgba(255,255,255,.25); margin-top:12px; overflow:hidden;
  }
  .vd-stat .stat-gauge .bar{
    height:100%; border-radius:99px; background:#fff;
    transition:width .4s ease;
  }


  /* ============================================================
     Cartes de contenu
     ============================================================ */
  .vd-card{
    background:var(--vd-surface);
    border:1px solid var(--vd-line);
    border-radius:var(--vd-radius);
    box-shadow:var(--vd-shadow);
    height:100%;
  }
  .vd-card-head{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px; padding:18px 22px 0;
  }
  .vd-card-head h5{ margin:0; font-size:16.5px; font-weight:700; }
  .vd-card-body{ padding:16px 22px 20px; }

  /* Carte agrandie en plein écran (ex. Roster supervision) : classe CSS
     plutôt que l'API Fullscreen native, pour garder notre propre style/scroll
     et éviter les soucis de permission navigateur en iframe. */
  .vd-card-fullscreen{
    position:fixed; inset:16px; z-index:1050;
    display:flex; flex-direction:column;
    height:auto; box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
  .vd-card-fullscreen .vd-card-body{ flex:1 1 auto; overflow:auto; }
  body.vd-fullscreen-lock{ overflow:hidden; }
  
  /* Cartes pleine largeur, hors grille .row (ex. Clients, Formulaire) :
     .vd-content est un item flex (colonne) de .vd-main, ce qui rend sa hauteur
     "définie" pour la résolution des pourcentages — sans ce correctif,
     height:100% ci-dessus ferait gonfler ces cartes pour remplir tout
     l'espace disponible au lieu de s'ajuster à leur contenu. */
  .vd-content > .vd-card{ height:auto; }
  
  /* Onglets */
  .vd-tabs{ border-bottom:1px solid var(--vd-line); padding:0 22px; margin-top:14px; }
  .vd-tabs .nav-link{
    border:0; padding:10px 0; margin-right:26px;
    color:var(--vd-ink-soft); font-weight:600; font-size:13.5px;
    border-bottom:2px solid transparent; border-radius:0;
  }
  .vd-tabs .nav-link.active{ color:var(--vd-primary); border-bottom-color:var(--vd-primary); background:none; }
  /* Onglets .vd-tabs imbriqués dans un .modal-body (déjà paddé horizontalement) :
     éviter le double padding plutôt que de dupliquer le composant. */
  .vd-modal .modal-body .vd-tabs{ padding-left:0; padding-right:0; margin-top:0; }

  /* Tableaux */
  .vd-table{ width:100%; margin:0; }
  .vd-table th{
    font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--vd-ink-faint); padding:10px 12px; border-bottom:1px solid var(--vd-line);
    white-space:nowrap;
  }
  .vd-table td{
    padding:13px 12px; border-bottom:1px solid var(--vd-line);
    vertical-align:middle; font-size:13.5px; color:var(--vd-ink-soft);
  }
  .vd-table tbody tr:last-child td{ border-bottom:0; }
  .vd-table tbody tr:hover{ background:var(--vd-surface-2); }
  .vd-table .t-main{ font-weight:700; color:var(--vd-ink); font-size:13.5px; }
  .vd-table .t-sub{ font-size:12px; color:var(--vd-ink-faint); }

  /* Ligne mise en évidence par sévérité — calculée côté contrôleur (ex.
     Supervisions::Show_Reel(), status[3]), jamais déduite en JS. !important
     nécessaire pour rester au-dessus de .vd-table tbody tr:hover. */
  .vd-table tbody tr.row-warn td{ background:var(--vd-wa-bg) !important; }
  .vd-table tbody tr.row-critical td{ background:var(--vd-da-bg) !important; }

  /* Ligne d'en-tête de groupe (roster Supervision, filtre "Regrouper par" —
     pilotée par l'utilisateur, pas affichée par défaut). */
  .vd-table tbody tr.vd-group-row td{
    background:var(--vd-surface-2); font-weight:700; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.06em; color:var(--vd-ink-faint);
    padding:8px 12px;
  }
  .vd-table tbody tr.vd-group-row:hover{ background:none; }

  .vd-thumb{
    width:38px; height:38px; border-radius:11px; flex:0 0 38px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:17px;
  }
  
  /* Badges de statut */
  .vd-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px;
  }
  .vd-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .vd-badge.ok      { color:var(--vd-ok-fg); background:var(--vd-ok-bg); }
  .vd-badge.warn    { color:var(--vd-wa-fg); background:var(--vd-wa-bg); }
  .vd-badge.info    { color:var(--vd-in-fg); background:var(--vd-in-bg); }
  .vd-badge.danger  { color:var(--vd-da-fg); background:var(--vd-da-bg); }
  .vd-badge.muted   { color:var(--vd-mu-fg); background:var(--vd-mu-bg); }
  /* Variante clignotante (ex. indicateur "LIVE" d'un flux temps réel) */
  .vd-badge.pulse{ animation:vd-badge-pulse 1.5s infinite; }
  @keyframes vd-badge-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

  /* Ligne d'en-tête de sous-section dans un tableau clé/valeur .vd-table
     (ex. regrouper "Redis" puis "PHP-FPM / Système" dans une même table). */
  .vd-table .t-section td{
    background:var(--vd-surface-2); color:var(--vd-ink-faint);
    font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  }

  /* Pastille de statut agent — supervision temps réel (Supervisions/Show_Reel).
     La couleur de fond est fournie par le contrôleur : soit une référence à un
     token --vd-status-* (statuts fixes ci-dessus), soit — pour les pauses
     personnalisées — la couleur configurée par l'administrateur dans "Pauses"
     (donnée métier, pas une couleur de design en dur). */
  .vd-status-badge{
    display:inline-flex; align-items:center; justify-content:center;
    gap:6px; min-width:104px; padding:6px 10px; border-radius:var(--vd-radius-sm);
    color:#fff; font-size:12px; font-weight:700; text-align:center; line-height:1.2;
  }

  /* Alertes inline (ex. validation du mapping d'import de fichier) */
  .vd-alert{
    font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:var(--vd-radius-sm);
    border:1px solid transparent; margin-bottom:12px;
  }
  .vd-alert.warn  { color:var(--vd-wa-fg); background:var(--vd-wa-bg); border-color:var(--vd-wa-fg); }
  .vd-alert.danger{ color:var(--vd-da-fg); background:var(--vd-da-bg); border-color:var(--vd-da-fg); }

  /* État de validation d'un select de mapping (ex. colonne "Téléphone") */
  .vd-form-select.vd-field-ok    { border-color:var(--vd-ok-fg); }
  .vd-form-select.vd-field-danger{ border-color:var(--vd-da-fg); }

  /* Modales (Bootstrap .modal, reskin avec les tokens --vd-*) */
  .vd-modal .modal-content{
    background:var(--vd-surface); color:var(--vd-ink);
    border:1px solid var(--vd-line); border-radius:var(--vd-radius);
    box-shadow:var(--vd-shadow);
  }
  .vd-modal .modal-header{ border-bottom:1px solid var(--vd-line); padding:16px 22px; }
  .vd-modal .modal-title{ font-size:16.5px; font-weight:700; color:var(--vd-ink); }
  .vd-modal .modal-body{ padding:18px 22px; color:var(--vd-ink-soft); }
  .vd-modal .modal-footer{ border-top:1px solid var(--vd-line); padding:14px 22px; }
  .vd-modal .btn-close{ filter:none; }
  body.vd-dark .vd-modal .btn-close{ filter:invert(1) grayscale(100%) brightness(200%); }

  /* .modal-dialog-scrollable ne suffit pas à elle seule quand deux .vd-card
     (dont la règle générique .vd-card{height:100%}, pensée pour des cartes de
     grille de hauteur égale) sont empilées à l'intérieur : chaque carte essaie
     de remplir 100% de la hauteur flex-calculée du .modal-body, ce qui casse le
     calcul de scrollHeight côté navigateur dès que le contenu déborde (ex. le
     modal de recyclage multi-listes avec beaucoup de statuts). On neutralise
     height:100% pour ces cartes et on borne .modal-body à une hauteur fixe avec
     son propre overflow-y, indépendant du calcul flex ambigu. */
  #supRecycleListsModal .modal-body{ max-height:60vh; overflow-y:auto; }
  #supRecycleListsModal .vd-card{ height:auto; }

  /* Modale "Modifier le groupe de droits" (#accesmodal) : la grille de
     permissions (AGENT, CAMPAIGNS, LISTS, USERS, SCRIPTS, TEAMS, ...) est
     trop haute pour certains groupes (ex. SUP). Une hauteur fixe en vh sur
     .modal-body (ancienne approche) ne tient pas compte de la hauteur réelle
     de l'en-tête/pied de page et peut pousser les boutons Enregistrer/Annuler
     hors de l'écran sur les petits viewports. On force donc .modal-content en
     colonne flex bornée à 90vh : l'en-tête garde sa taille naturelle
     (flex:0 0 auto) et .modal-body se partage le reste de l'espace
     (flex:1 1 auto, min-height:0) avec son propre overflow-y.
     Important : .modal-body et .modal-footer ne sont PAS des enfants directs
     de .modal-content — ils sont enveloppés dans le <form id="add_new">
     (voir Right_list.php). Sans règle sur ce <form>, .modal-content ne voit
     que 2 items flex (.modal-header et le <form> en bloc plein contenu), ce
     qui casse toute la chaîne flex : .modal-body/.modal-footer ignorent
     alors leurs flex/min-height et le <form>, jamais contraint, déborde du
     .modal-content{overflow:hidden}, ce qui masque le pied de page. Le
     <form> doit donc lui-même devenir un item flex contraint ET un conteneur
     flex colonne pour propager la contrainte à ses enfants. */
  #accesmodal .modal-content{
    max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
  }
  #accesmodal .modal-content > .modal-header{ flex:0 0 auto; }
  #accesmodal .modal-content > form{
    flex:1 1 auto; min-height:0; overflow:hidden;
    display:flex; flex-direction:column;
  }
  #accesmodal .modal-body{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column;
  }
  #accesmodal .modal-footer{ flex:0 0 auto; }

  /* Notifications toast (Bootstrap 5 .toast, reskin avec les tokens --vd-*) */
  .vd-toast-container{ z-index:1080; }
  .vd-toast{
    min-width:280px; background:var(--vd-surface); color:var(--vd-ink);
    border:1px solid var(--vd-line);
    border-left:4px solid var(--vd-toast-accent, var(--vd-primary));
    border-radius:var(--vd-radius-sm); box-shadow:var(--vd-shadow);
  }
  .vd-toast.vd-toast-success{ --vd-toast-accent:var(--vd-ok-fg); }
  .vd-toast.vd-toast-warning{ --vd-toast-accent:var(--vd-wa-fg); }
  .vd-toast.vd-toast-danger { --vd-toast-accent:var(--vd-da-fg); }
  .vd-toast .toast-body{ font-size:13px; }
  .vd-toast .toast-body strong{ display:block; margin-bottom:2px; color:var(--vd-ink); }
  .vd-toast .vd-toast-msg{ color:var(--vd-ink-soft); }
  .vd-toast .btn-close{ filter:none; }
  body.vd-dark .vd-toast .btn-close{ filter:invert(1) grayscale(100%) brightness(200%); }

  /* Bannière d'alerte pleine largeur (ex. dépassement de seuil ARCEP), bordure gauche colorée */
  .vd-alert-banner{
    display:flex; align-items:flex-start; gap:14px;
    padding:14px 18px; margin-bottom:18px;
    background:var(--vd-surface); color:var(--vd-ink);
    border:1px solid var(--vd-line);
    border-left:4px solid var(--vd-banner-accent, var(--vd-primary));
    border-radius:var(--vd-radius-sm); box-shadow:var(--vd-shadow);
  }
  .vd-alert-banner .bi{ font-size:20px; flex-shrink:0; margin-top:1px; }
  .vd-alert-banner-body{ flex:1 1 auto; min-width:0; }
  .vd-alert-banner-title{ font-weight:700; font-size:13.5px; color:var(--vd-ink); }
  .vd-alert-banner-sub{ font-size:12.5px; color:var(--vd-ink-soft); margin-top:2px; }
  .vd-alert-banner-action{ flex-shrink:0; }
  .vd-alert-banner.critical{ --vd-banner-accent:var(--vd-da-fg); background:var(--vd-da-bg); }
  .vd-alert-banner.critical .bi{ color:var(--vd-da-fg); }
  .vd-alert-banner.warning { --vd-banner-accent:var(--vd-wa-fg); background:var(--vd-wa-bg); }
  .vd-alert-banner.warning .bi{ color:var(--vd-wa-fg); }

  /* Liste (participants / activité) */
  .vd-list-row{
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--vd-line);
  }
  .vd-list-row:last-child{ border-bottom:0; }
  
  /* Légende du donut */
  .vd-legend{ list-style:none; padding:0; margin:0; }
  .vd-legend li{
    display:flex; align-items:center; gap:9px;
    font-size:13px; color:var(--vd-ink-soft); padding:5px 0; font-weight:600;
  }
  .vd-legend .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
  .vd-legend .val{ margin-left:auto; color:var(--vd-ink); font-weight:700; }
  
  /* Sélecteur discret dans les entêtes de carte */
  .vd-select{
    border:0; background:none; color:var(--vd-primary);
    font-weight:700; font-size:13px; padding:2px 18px 2px 4px; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300b074'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right center; background-size:13px;
  }
  .vd-select:focus{ outline:none; }

  /* Champ texte/nombre minimal, même habillage que .vd-select mais sans flèche
     (ex. bornes min/max d'une barre de filtres) */
  .vd-select-input{
    border:0; background:none; color:var(--vd-primary);
    font-weight:700; font-size:13px; padding:2px 4px; outline:none;
  }
  .vd-select-input::placeholder{ color:var(--vd-primary); opacity:.55; }
  .vd-select-input::-webkit-inner-spin-button,
  .vd-select-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  .vd-select-input[type="number"]{ -moz-appearance:textfield; }

  /* Boutons */
  .btn-vd{
    background:var(--vd-primary); border:0; color:#fff; font-weight:700;
    border-radius:11px; padding:9px 18px; font-size:13.5px;
    transition:background-color .15s ease, box-shadow .15s ease;
  }
  .btn-vd:hover{ background:color-mix(in srgb, var(--vd-primary) 80%, black); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--vd-primary) 45%, transparent); }
  .btn-vd:active{ background:color-mix(in srgb, var(--vd-primary) 70%, black); box-shadow:none; }
  .btn-vd-soft{
    background:var(--vd-primary-soft); border:0; color:var(--vd-primary);
    font-weight:700; border-radius:11px; padding:9px 18px; font-size:13.5px;
  }
  .btn-vd-soft:hover{ background:color-mix(in srgb, var(--vd-primary) 20%, var(--vd-primary-soft)); color:var(--vd-primary); }

  /* Variante compacte : ajouter .btn-sm (déjà la classe Bootstrap standard)
     à .btn-vd/.btn-vd-soft pour la taille de bouton utilisée dans une
     topbar/barre de filtres/toolbar d'actions groupées (ex. Liste noire) —
     même gabarit que .btn-danger.btn-sm natif de Bootstrap, pour que les
     boutons vd-system et danger d'une même barre soient homogènes. */
  .btn-vd.btn-sm,
  .btn-vd-soft.btn-sm{
    padding:.25rem .5rem; font-size:.875rem; border-radius:.2rem;
  }

  /* Pagination */
  .vd-pagination .page-link{
    border:1px solid var(--vd-line); color:var(--vd-ink-soft); background:transparent;
    border-radius:9px!important; margin:0 3px; font-weight:600; font-size:13px;
    min-width:34px; text-align:center;
  }
  .vd-pagination .page-item.active .page-link{
    background:var(--vd-primary); border-color:var(--vd-primary); color:#fff;
  }
  
  /* Progression fine */
  .vd-progress{ height:6px; border-radius:99px; background:var(--vd-track); }
  .vd-progress .bar{ height:100%; border-radius:99px; }
  /* Variante multi-segments (ex. répartition des fiches d'une liste) */
  .vd-progress-multi{ display:flex; overflow:hidden; }
  .vd-progress-multi .bar{ border-radius:0; }
  .vd-progress-multi .bar:first-child{ border-radius:99px 0 0 99px; }
  .vd-progress-multi .bar:last-child{ border-radius:0 99px 99px 0; }
  
  /* Sidebar mobile (offcanvas) */
  @media (max-width: 991.98px){
    .vd-sidebar{
      top:0; left:0; bottom:0; width:var(--vd-sidebar-w); z-index:1045;
      border-radius:0; border-right:1px solid var(--vd-line);
      transform:translateX(-100%); transition:transform .25s ease;
      box-shadow:0 0 40px rgba(0,0,0,.12);
    }
    body.vd-mobile-open .vd-sidebar{ transform:translateX(0); }
    .vd-backdrop{
      position:fixed; inset:0; background:rgba(16,24,32,.35);
      z-index:1040; display:none;
    }
    body.vd-mobile-open .vd-backdrop{ display:block; }
    .vd-topbar{ padding:16px 16px 8px; flex-wrap:wrap; }
    .vd-content{ padding:10px 16px 24px; }
    .vd-search{ width:100%; order:5; }
  }
  
  /* ============================================================
     Formulaire
     ============================================================ */
  .vd-form-label{
    font-size:13px; font-weight:600; color:var(--vd-ink-soft);
    margin-bottom:7px; display:block;
  }
  
  /* Champs texte / textarea / select */
  .vd-form-control{
    width:100%; height:42px; border-radius:var(--vd-radius-sm);
    border:1px solid var(--vd-input-border); background:var(--vd-surface); color:var(--vd-ink);
    font-size:13.5px; padding:0 14px; font-family:var(--vd-font);
  }
  .vd-form-control::placeholder{ color:var(--vd-ink-faint); }
  .vd-form-control:focus{
    outline:none; border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .vd-form-textarea{ height:auto; padding:12px 14px; resize:vertical; line-height:1.5; }

  /* Groupe icône/unité + champ texte (ex. recherche libre dans une barre de
     filtres, ou champ numérique avec unité en suffixe). La légende peut être
     en préfixe (premier enfant) ou en suffixe (dernier enfant) — la bordure
     de séparation se place du côté du champ dans les deux cas. */
  .vd-input-group{
    display:flex; align-items:stretch; height:42px; border-radius:var(--vd-radius-sm);
    border:1px solid var(--vd-input-border); background:var(--vd-surface); overflow:hidden;
  }
  .vd-input-group:focus-within{ border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft); }
  .vd-input-group-text{
    display:flex; align-items:center; padding:0 12px; font-size:14px;
    color:var(--vd-ink-faint); background:var(--vd-surface-2); flex-shrink:0;
  }
  .vd-input-group-text:first-child{ border-right:1px solid var(--vd-input-border); }
  .vd-input-group-text:last-child{ border-left:1px solid var(--vd-input-border); }
  .vd-input-group input{
    flex:1; min-width:0; border:0; background:transparent; color:var(--vd-ink);
    font-size:13.5px; font-family:var(--vd-font); padding:0 14px; outline:none;
  }
  .vd-input-group input::placeholder{ color:var(--vd-ink-faint); }
  /* Masque les spinners natifs des champs number (ex. durée min/max) */
  .vd-input-group input[type="number"]::-webkit-inner-spin-button,
  .vd-input-group input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  .vd-input-group input[type="number"]{ -moz-appearance:textfield; }
  /* Gabarit compact dans une barre de filtres */
  .vd-filter-bar .vd-input-group{ height:34px; }
  .vd-filter-bar .vd-input-group-text{ padding:0 10px; font-size:12px; }
  .vd-filter-bar .vd-input-group input{ padding:0 10px; font-size:12.5px; }
  select.vd-form-control[multiple]{ height:auto; padding:6px 8px; }
  select.vd-form-control[multiple] option{ padding:5px 8px; border-radius:4px; }
  
  /* Champs de date */
  input[type="date"].vd-form-control{ color-scheme:light; }
  body.vd-dark input[type="date"].vd-form-control{ color-scheme:dark; }
  input[type="date"].vd-form-control::-webkit-calendar-picker-indicator{
    cursor:pointer; opacity:.6; filter:none;
  }
  input[type="date"].vd-form-control::-webkit-calendar-picker-indicator:hover{ opacity:1; }
  
  /* Plage de dates — un seul champ, ouvre un calendrier à deux mois (daterangepicker.js) */
  .vd-date-range{ position:relative; }
  .vd-date-range .bi{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--vd-ink-faint); font-size:15px; pointer-events:none;
  }
  .vd-date-range .vd-form-control{ padding-left:40px; cursor:pointer; background:var(--vd-surface); }
  
  /* Reskin du widget daterangepicker.js avec les tokens --vd-* */
  .daterangepicker{
    font-family:var(--vd-font); font-size:13px;
    background:var(--vd-surface); color:var(--vd-ink);
    border:1px solid var(--vd-line); border-radius:var(--vd-radius);
    box-shadow:var(--vd-shadow);
  }
  .daterangepicker:before{ border-bottom-color:var(--vd-line); }
  .daterangepicker:after{ border-bottom-color:var(--vd-surface); }
  .daterangepicker .drp-calendar.left{ border-right:1px solid var(--vd-line); }
  .daterangepicker .calendar-table{ background:var(--vd-surface); border:0; }
  .daterangepicker td, .daterangepicker th{ color:var(--vd-ink-soft); }
  .daterangepicker th.month{ color:var(--vd-ink); font-weight:700; }
  .daterangepicker th.next span, .daterangepicker th.prev span{ border-color:var(--vd-ink-soft); }
  .daterangepicker th.next:hover, .daterangepicker th.prev:hover{ background:var(--vd-surface-2); }
  .daterangepicker td.available:hover, .daterangepicker th.available:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
    background:transparent; color:var(--vd-ink-faint); opacity:.45;
  }
  .daterangepicker td.in-range{ background:var(--vd-primary-soft); color:var(--vd-ink); }
  .daterangepicker td.active, .daterangepicker td.active:hover{ background:var(--vd-primary); color:#fff; }
  .daterangepicker select.monthselect, .daterangepicker select.yearselect{
    background:var(--vd-surface); color:var(--vd-ink); border:1px solid var(--vd-line); border-radius:6px;
  }
  .daterangepicker .drp-buttons{ border-top:1px solid var(--vd-line); }
  .daterangepicker .drp-selected{ color:var(--vd-ink-soft); font-size:12px; }
  .daterangepicker .cancelBtn{
    background:var(--vd-surface-2); border:0; color:var(--vd-ink-soft);
    border-radius:9px; font-weight:700; font-size:12.5px; padding:6px 14px;
  }
  .daterangepicker .applyBtn{
    background:var(--vd-primary); border:0; color:#fff;
    border-radius:9px; font-weight:700; font-size:12.5px; padding:6px 14px;
  }
  .daterangepicker .applyBtn:hover{ filter:brightness(.9); }
  
  /* Responsive : les deux mois s'empilent au lieu de déborder sur petit écran */
  @media (max-width: 576px){
    .daterangepicker{ width:94vw!important; max-width:320px; }
    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right{
      float:none; width:100%; max-width:100%; border-right:0;
    }
    .daterangepicker .drp-calendar.left{ border-bottom:1px solid var(--vd-line); }
  }
  .vd-form-select{
    cursor:pointer; padding-right:36px;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7a90'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  }

  /* Variantes compactes (ex. cellules d'en-tête d'un tableau de mapping de colonnes) */
  .vd-form-control-sm{ height:34px; font-size:12.5px; padding:0 10px; }
  .vd-form-select-sm{ height:34px; font-size:12.5px; padding-top:0; padding-bottom:0; padding-left:10px; background-position:right 10px center; }

  /* Reskin Select2 (select avec champ de recherche) avec les tokens --vd-* */
  .select2-container{ font-family:var(--vd-font); }
  .select2-container--default .select2-selection--single{
    height:42px; border-radius:var(--vd-radius-sm); border:1px solid var(--vd-input-border);
    background:var(--vd-surface); display:flex; align-items:center; padding:0 14px;
    transition:border-color .15s, box-shadow .15s;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--vd-ink); font-size:13.5px; line-height:normal; padding:0;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px; right:8px; }
  .select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:var(--vd-ink-faint) transparent transparent transparent;
  }
  .select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent var(--vd-ink-faint) transparent;
  }
  .select2-container--default.select2-container--open .select2-selection--single{
    border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .select2-dropdown{
    border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm);
    background:var(--vd-surface); box-shadow:var(--vd-shadow); overflow:hidden;
  }
  .select2-search--dropdown{ padding:8px; background:var(--vd-surface); }
  .select2-search--dropdown .select2-search__field{
    border:1px solid var(--vd-input-border); border-radius:9px; background:var(--vd-surface);
    color:var(--vd-ink); padding:7px 10px; font-size:13px; outline:none;
  }
  .select2-search--dropdown .select2-search__field:focus{
    border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .select2-results__option{ color:var(--vd-ink-soft); font-size:13.5px; padding:8px 14px; }
  .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:var(--vd-primary); color:#fff;
  }
  .select2-container--default .select2-results__option[aria-selected="true"]{
    background:var(--vd-primary-soft); color:var(--vd-ink);
  }
  .select2-results__message{ color:var(--vd-ink-faint); font-size:13px; }
  
  /* Select2 — multiselect : mêmes tokens que .vd-form-control, mais hauteur
     libre (min 42px) avec retour à la ligne des puces plutôt qu'un défilement
     horizontal masqué — dans une barre de filtres étroite, un overflow-x caché
     rendait les puces sélectionnées invisibles sans aucun indice visuel. */
  .select2-container--default .select2-selection--multiple{
    min-height:42px; border-radius:var(--vd-radius-sm); border:1px solid var(--vd-input-border);
    background:var(--vd-surface); padding:5px 10px;
    display:flex; align-items:center;
    transition:border-color .15s, box-shadow .15s;
  }
  .select2-container--default.select2-container--open .select2-selection--multiple{
    border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0;
    width:100%;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    flex:0 0 auto; white-space:nowrap; margin:0; padding:3px 8px 3px 10px; border-radius:999px; border:0;
    background:var(--vd-primary-soft); color:var(--vd-primary);
    font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    order:2; border:0; color:var(--vd-primary); opacity:.7; font-weight:700;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    opacity:1; background:transparent; color:var(--vd-primary);
  }
  .select2-container--default .select2-selection--multiple .select2-search--inline{ flex:0 0 auto; }
  .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field{
    color:var(--vd-ink); font-size:13px; margin:0; padding:0; height:26px;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__placeholder{
    color:var(--vd-ink-faint); font-size:13.5px;
  }

  /* Select2 dans une barre de filtres — même habillage que .vd-select (pas de
     cadre/fond, texte bleu gras, une seule ligne). Les puces individuelles
     select2 sont masquées : .vd-select2-summary (injecté en JS, voir
     Revision.js) affiche à la place "Tous les agents" / le nom / "N agents
     sélectionnés", en frère de .select2-selection__rendered pour survivre au
     cycle de rendu de select2 — qui lui reste géré normalement (recherche,
     ouverture du menu) pour ne rien casser fonctionnellement. */
  .vd-filter-bar .select2-container--default .select2-selection--single,
  .vd-filter-bar .select2-container--default .select2-selection--multiple{
    border:0; background:none; padding:2px 4px; min-height:auto; height:auto;
  }
  .vd-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--vd-primary); font-weight:700; font-size:13px; padding-left:0;
  }
  .vd-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow{ height:28px; }
  .vd-filter-bar .select2-container--default .select2-selection--multiple .select2-selection__choice{
    display:none;
  }
  .vd-filter-bar .select2-container--default .select2-selection--multiple .select2-search__field::placeholder{
    color:var(--vd-primary); font-weight:700; opacity:1;
  }
  .vd-filter-bar .vd-select2-summary{
    color:var(--vd-primary); font-weight:700; font-size:13px; white-space:nowrap; padding-right:4px;
  }
  
  /* Dual listbox (bootstrap-duallistbox) — reskin avec les tokens --vd-*,
     la librairie cible Bootstrap 3/Glyphicons : on remplace ses icônes par Bootstrap Icons. */
  .bootstrap-duallistbox-container{ display:flex; flex-wrap:wrap; gap:16px; }
  .bootstrap-duallistbox-container .box1,
  .bootstrap-duallistbox-container .box2{ flex:1 1 240px; min-width:220px; }
  .bootstrap-duallistbox-container label{
    font-size:13px; font-weight:600; color:var(--vd-ink-soft); margin-bottom:6px;
  }
  .bootstrap-duallistbox-container .info-container{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
  }
  .bootstrap-duallistbox-container .info{ font-size:11.5px; color:var(--vd-ink-faint); }
  .bootstrap-duallistbox-container .info .label{
    display:inline-block; background:var(--vd-primary-soft); color:var(--vd-primary);
    border-radius:999px; padding:1px 7px; font-size:10.5px; font-weight:700; margin-right:4px;
  }
  .bootstrap-duallistbox-container .clear1,
  .bootstrap-duallistbox-container .clear2{
    border:0; background:none; color:var(--vd-primary); font-size:11px; font-weight:700; padding:0;
  }
  .bootstrap-duallistbox-container .filter{
    width:100%; height:36px; border-radius:var(--vd-radius-sm); border:1px solid var(--vd-input-border);
    background:var(--vd-surface); color:var(--vd-ink); font-size:13px; padding:0 12px;
    margin:0 0 8px; font-family:var(--vd-font);
  }
  .bootstrap-duallistbox-container .filter:focus{
    outline:none; border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .bootstrap-duallistbox-container .filter.placeholder{ color:var(--vd-ink-faint); }
  .bootstrap-duallistbox-container .filter::placeholder{ color:var(--vd-ink-faint); }
  .bootstrap-duallistbox-container .buttons{ display:flex; gap:6px; margin-bottom:8px; }
  .bootstrap-duallistbox-container .buttons .btn{
    flex:1 1 auto; height:32px; border-radius:9px; border:1px solid var(--vd-line);
    background:var(--vd-surface-2); color:var(--vd-ink-soft);
    display:flex; align-items:center; justify-content:center; gap:1px;
  }
  .bootstrap-duallistbox-container .buttons .btn:hover{
    background:var(--vd-primary-soft); color:var(--vd-primary); border-color:var(--vd-primary-soft);
  }
  .bootstrap-duallistbox-container .buttons .btn i{ font-style:normal; width:14px; height:14px; }
  .bootstrap-duallistbox-container .move i::before,
  .bootstrap-duallistbox-container .moveall i:first-child::before{
    font-family:"bootstrap-icons"!important; font-style:normal; font-size:13px;
  }
  .bootstrap-duallistbox-container .move i::before{ content:"\f285"; }
  .bootstrap-duallistbox-container .moveall i:first-child::before{ content:"\f280"; }
  .bootstrap-duallistbox-container .moveall i:last-child{ display:none; }
  .bootstrap-duallistbox-container .remove i::before,
  .bootstrap-duallistbox-container .removeall i:first-child::before{
    font-family:"bootstrap-icons"!important; font-style:normal; font-size:13px;
  }
  .bootstrap-duallistbox-container .remove i::before{ content:"\f284"; }
  .bootstrap-duallistbox-container .removeall i:first-child::before{ content:"\f27f"; }
  .bootstrap-duallistbox-container .removeall i:last-child{ display:none; }
  .bootstrap-duallistbox-container select{
    width:100%; height:300px; padding:8px; box-sizing:border-box;
    border:1px solid var(--vd-input-border); border-radius:var(--vd-radius-sm);
    background:var(--vd-surface); color:var(--vd-ink); font-size:13.5px; font-family:var(--vd-font);
    color-scheme:light;
  }
  body.vd-dark .bootstrap-duallistbox-container select{ color-scheme:dark; }
  .bootstrap-duallistbox-container select:focus{
    outline:none; border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }
  .bootstrap-duallistbox-container select option{ padding:7px 8px; border-radius:6px; }
  .bootstrap-duallistbox-container select option:checked{
    background:var(--vd-primary) linear-gradient(0deg, var(--vd-primary) 0%, var(--vd-primary) 100%);
    color:#fff;
  }
  
  /* Summernote (éditeur enrichi) — reskin avec les tokens --vd-* */
  .note-editor.note-frame{
    border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); overflow:hidden;
  }
  .note-editor.note-frame.codeview .note-editing-area .note-codable{
    background:var(--vd-surface-2); color:var(--vd-ink); font-size:13px;
  }
  .note-toolbar{
    background:var(--vd-surface-2); border-bottom:1px solid var(--vd-line); padding:6px;
  }
  .note-btn{
    background:var(--vd-surface); border:1px solid var(--vd-line)!important; color:var(--vd-ink-soft)!important;
    border-radius:8px!important; margin:2px;
  }
  .note-btn:hover, .note-btn:focus, .note-btn.active{
    background:var(--vd-primary-soft)!important; color:var(--vd-primary)!important; border-color:var(--vd-primary-soft)!important;
  }
  .note-btn-group{ margin-right:4px; }
  .note-editing-area .note-editable{
    background:var(--vd-surface); color:var(--vd-ink); font-family:var(--vd-font); font-size:13.5px; padding:12px 14px;
  }
  .note-editing-area .note-editable[contenteditable="true"]:empty:before{ color:var(--vd-ink-faint); }
  .note-status-output{ display:none; }
  .note-statusbar{ background:var(--vd-surface-2); border-top:1px solid var(--vd-line); }
  .note-statusbar .note-resizebar{ background:transparent; }
  .note-editor .dropdown-menu{
    background:var(--vd-surface); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); box-shadow:var(--vd-shadow);
  }
  .note-editor .dropdown-item{ color:var(--vd-ink-soft); font-size:13px; }
  .note-editor .dropdown-item:hover{ background:var(--vd-surface-2); color:var(--vd-ink); }
  .note-editor .note-popover .popover-content, .note-toolbar-wrapper{ background:var(--vd-surface); }
  .note-modal .modal-content{ background:var(--vd-surface); color:var(--vd-ink); }
  .note-modal .form-control{
    background:var(--vd-surface); border:1px solid var(--vd-line); color:var(--vd-ink);
  }
  
  /* Titre de section dans un formulaire (groupes de champs / permissions) */
  .vd-section-title{
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--vd-ink-soft); margin-bottom:10px; padding-bottom:6px;
    border-bottom:1px solid var(--vd-line);
  }

  /* Cases à cocher */
  .vd-checkbox{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
  .vd-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
  .vd-checkbox-box{
    width:20px; height:20px; flex:0 0 20px; border-radius:6px;
    border:1.5px solid var(--vd-line); background:var(--vd-surface);
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px; line-height:1; transition:background .15s, border-color .15s;
  }
  .vd-checkbox input:checked + .vd-checkbox-box{ background:var(--vd-primary); border-color:var(--vd-primary); }
  .vd-checkbox input:focus-visible + .vd-checkbox-box{ box-shadow:0 0 0 3px var(--vd-primary-soft); }
  .vd-checkbox-label{ font-size:13.5px; font-weight:600; color:var(--vd-ink-soft); }
  
  /* Boutons radio */
  .vd-radio{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
  .vd-radio input{ position:absolute; opacity:0; width:0; height:0; }
  .vd-radio-box{
    width:20px; height:20px; flex:0 0 20px; border-radius:50%;
    border:1.5px solid var(--vd-line); background:var(--vd-surface);
    display:inline-flex; align-items:center; justify-content:center;
    transition:border-color .15s;
  }
  .vd-radio-box::after{
    content:""; width:9px; height:9px; border-radius:50%;
    background:var(--vd-primary); opacity:0; transform:scale(.4); transition:opacity .15s, transform .15s;
  }
  .vd-radio input:checked + .vd-radio-box{ border-color:var(--vd-primary); }
  .vd-radio input:checked + .vd-radio-box::after{ opacity:1; transform:scale(1); }
  .vd-radio input:focus-visible + .vd-radio-box{ box-shadow:0 0 0 3px var(--vd-primary-soft); }
  .vd-radio-label{ font-size:13.5px; font-weight:600; color:var(--vd-ink-soft); }
  
  /* Interrupteur (switch) */
  .vd-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
  .vd-switch input{ position:absolute; opacity:0; width:0; height:0; }
  .vd-switch-track{
    width:40px; height:22px; flex:0 0 40px; border-radius:99px;
    background:var(--vd-track); position:relative; transition:background .2s;
  }
  .vd-switch-track::after{
    content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
    border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(22,32,44,.25);
    transition:transform .2s;
  }
  .vd-switch input:checked + .vd-switch-track{ background:var(--vd-primary); }
  .vd-switch input:checked + .vd-switch-track::after{ transform:translateX(18px); }
  .vd-switch input:focus-visible + .vd-switch-track{ box-shadow:0 0 0 3px var(--vd-primary-soft); }
  .vd-switch-label{ font-size:13.5px; font-weight:600; color:var(--vd-ink-soft); }

  /* Cartes de permissions (ex. modale "Groupe de droits" — une carte par
     catégorie AGENT/CAMPAGNES/LISTES/…, avec bascule "Tout sélectionner"). */
  .vd-perm-toolbar{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:14px;
  }
  .vd-perm-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:768px){ .vd-perm-grid{ grid-template-columns:1fr 1fr; } }
  .vd-perm-card{
    border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm);
    background:var(--vd-surface-2); overflow:hidden;
  }
  .vd-perm-card-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 14px; border-bottom:1px solid var(--vd-line); background:var(--vd-surface);
  }
  .vd-perm-card-title{
    font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--vd-ink-soft); margin:0;
  }
  .vd-perm-card-toggle{ font-size:11.5px; }
  .vd-perm-card-toggle .vd-checkbox-box{ width:17px; height:17px; flex:0 0 17px; font-size:11px; }
  .vd-perm-card-toggle .vd-checkbox-label{ font-size:11.5px; color:var(--vd-ink-faint); }
  .vd-perm-card-body{ padding:8px 8px; display:flex; flex-direction:column; gap:2px; }
  .vd-perm-card-body .vd-checkbox{
    width:100%; padding:7px 8px; border-radius:8px; transition:background .12s;
  }
  .vd-perm-card-body .vd-checkbox:hover{ background:var(--vd-surface); }
  .vd-perm-card-body .vd-checkbox-box{ width:22px; height:22px; flex:0 0 22px; font-size:15px; }
  .vd-perm-card-body .vd-checkbox input:checked ~ .vd-checkbox-label{ color:var(--vd-ink); }
  .vd-perm-card-body .vd-checkbox.is-checked{ background:var(--vd-primary-soft); }

  /* Grille de cartes de permissions : occupe tout l'espace restant du
     .modal-body flex (voir #accesmodal .modal-body plus haut) et défile de
     façon indépendante — le nom/description/actif restent au-dessus, hors de
     cette zone, et le pied de modale (Annuler/Enregistrer) reste fixe.
     max-height en plus de flex:1 : filet de sécurité pour garantir un
     défilement propre même si la chaîne flex (.modal-content > .modal-body >
     .vd-perm-scroll) ne se contraint pas correctement sur certains
     navigateurs — sans lui, un .modal-body de hauteur "auto" peut laisser
     .vd-perm-scroll grandir librement au lieu de défiler. */
  .vd-perm-scroll{
    flex:1 1 auto; min-height:0; max-height:55vh; overflow-y:auto; padding-right:4px;
  }
  .vd-perm-scroll::-webkit-scrollbar{ width:5px; }
  .vd-perm-scroll::-webkit-scrollbar-thumb{ background:var(--vd-line); border-radius:99px; }

  /* Curseur (range) */
  .vd-range{
    flex:1 1 auto; height:6px; border-radius:99px; background:var(--vd-track);
    outline:none; -webkit-appearance:none; appearance:none;
  }
  .vd-range::-webkit-slider-thumb{
    -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
    background:var(--vd-primary); border:3px solid var(--vd-surface);
    box-shadow:0 1px 4px rgba(22,32,44,.25); cursor:pointer;
  }
  .vd-range::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%; background:var(--vd-primary);
    border:3px solid var(--vd-surface); box-shadow:0 1px 4px rgba(22,32,44,.25); cursor:pointer;
  }

  /* Sélecteur de couleur (ex. couleur d'un statut de campagne) */
  .vd-color-input{
    width:38px; height:38px; flex:0 0 38px; padding:2px; border-radius:10px;
    border:1.5px solid var(--vd-line); background:var(--vd-surface); cursor:pointer;
  }
  .vd-range-val{
    flex:0 0 auto; min-width:46px; text-align:right;
    font-size:13px; font-weight:700; color:var(--vd-ink);
  }
  
  /* Fichier (dropzone) */
  .vd-file{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border:1.5px dashed var(--vd-input-border); border-radius:var(--vd-radius-sm);
    background:var(--vd-surface-2); color:var(--vd-ink-soft);
    padding:20px 14px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .vd-file:hover{ border-color:var(--vd-primary); background:var(--vd-primary-soft); }
  .vd-file input[type="file"]{ display:none; }
  .vd-file .bi{ font-size:22px; color:var(--vd-primary); }
  .vd-file-text{ font-size:13px; font-weight:600; }
  .vd-file-name{ font-size:12px; color:var(--vd-ink-faint); }
  
  /* Scrollbar discrète */
  .vd-scroll{ max-height:335px; overflow-y:auto; }
  .vd-scroll::-webkit-scrollbar{ width:5px; }
  .vd-scroll::-webkit-scrollbar-thumb{ background:var(--vd-line); border-radius:99px; }

  /* Surcouche de chargement (ex. import de fichier en cours) */
  .vd-overlay{
    position:absolute; inset:0; z-index:5; border-radius:var(--vd-radius);
    display:flex; align-items:center; justify-content:center;
    background:var(--vd-surface); opacity:.92;
  }
  .vd-overlay .bi{ font-size:30px; color:var(--vd-primary); animation:vd-spin 1s linear infinite; }

  @keyframes vd-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

  /* ============================================================
     Tableau de bord "Accueil" — mini-cartes KPI, statut des agents,
     étiquettes de coaching (Dashboard/Accueil_view.php)
     ============================================================ */
  .vd-kpi-mini{
    background:var(--vd-surface); border:1px solid var(--vd-line);
    border-radius:var(--vd-radius); box-shadow:var(--vd-shadow);
    padding:16px 18px; height:100%;
  }
  .vd-kpi-mini .kpi-label{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--vd-ink-faint); margin-bottom:6px;
  }
  .vd-kpi-mini .kpi-value{
    font-size:24px; font-weight:800; color:var(--vd-ink); line-height:1.1;
  }
  .vd-kpi-mini .kpi-delta{ font-size:12px; font-weight:600; margin-top:4px; display:inline-flex; align-items:center; gap:2px; }
  .vd-kpi-mini .kpi-delta.up   { color:var(--vd-ok-fg); }
  .vd-kpi-mini .kpi-delta.down { color:var(--vd-da-fg); }
  .vd-kpi-mini .kpi-delta.warn { color:var(--vd-wa-fg); }
  /* Alerte tuile "Total appels" : agents READY en attente mais aucun appel
     en cours (numéroteur à l'arrêt) — voir loadSupervision() dans
     Supervisions.js, toggle de la classe sur #testatt. */
  .vd-kpi-mini.blink-alert{ animation:vd-kpi-blink 1s step-start infinite; border-color:var(--vd-da-fg); }
  .vd-kpi-mini.blink-alert .kpi-value{ color:var(--vd-da-fg); }
  @keyframes vd-kpi-blink{ 0%,49%{ background:var(--vd-surface); } 50%,100%{ background:var(--vd-da-bg); } }

  /* Tuiles mini-KPI de comptage agents (READY/INCALL/MANUAL/DEAD/PAUSED) :
     fond teinté + valeur colorée reprenant la couleur de statut déjà
     utilisée par les points .status-dot / .agt-stat-item ci-dessus, pour
     qu'un compteur reste identifiable même sans lire le libellé. */
  .vd-kpi-mini.kpi-wait   { background:var(--vd-in-bg); border-color:var(--vd-in-fg); }
  .vd-kpi-mini.kpi-wait   .kpi-value{ color:var(--vd-in-fg); }
  .vd-kpi-mini.kpi-calling{ background:var(--vd-ok-bg); border-color:var(--vd-ok-fg); }
  .vd-kpi-mini.kpi-calling .kpi-value{ color:var(--vd-ok-fg); }
  .vd-kpi-mini.kpi-end    { background:var(--vd-wa-bg); border-color:var(--vd-wa-fg); }
  .vd-kpi-mini.kpi-end    .kpi-value{ color:var(--vd-wa-fg); }
  .vd-kpi-mini.kpi-pause  { background:var(--vd-mu-bg); border-color:var(--vd-mu-fg); }
  .vd-kpi-mini.kpi-pause  .kpi-value{ color:var(--vd-mu-fg); }
  .vd-kpi-mini.kpi-manual { background:color-mix(in srgb, var(--vd-purple) 14%, transparent); border-color:var(--vd-purple); }
  .vd-kpi-mini.kpi-manual .kpi-value{ color:var(--vd-purple); }
  .sparkbox{ height:48px; margin-top:8px; }

  /* ============================================================
     Monitoring temps réel (page Performance)
     ============================================================ */
  /* Zone d'un graphique Chart.js dans une carte (hauteur fixe) */
  .vd-chart-box{ position:relative; height:180px; }

  /* Indicateur textuel discret (ex. compte à rebours d'auto-rafraîchissement) */
  .vd-refresh-counter{ font-size:.78rem; color:var(--vd-ink-faint); }

  /* Visualiseur de logs façon terminal : reste sombre dans les deux thèmes,
     voir les tokens --vd-console-* définis en tête de fichier. */
  .vd-log-box{
    font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size:.78rem; background:var(--vd-console-bg); color:var(--vd-console-fg);
    border:1px solid var(--vd-console-line); border-radius:var(--vd-radius-sm);
    padding:10px 14px; max-height:110px; overflow-y:auto; line-height:1.6;
    white-space:pre-wrap; word-break:break-word;
  }

  /* Grille des statuts d'agents (carte "Agents en ligne") */
  .agent-status-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px;
  }
  .agt-stat-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:var(--vd-radius-sm); background:var(--vd-surface-2);
  }
  .agt-stat-item .cnt{ font-size:19px; font-weight:800; color:var(--vd-ink); line-height:1; }
  .agt-stat-item .lbl{ font-size:11px; font-weight:600; color:var(--vd-ink-faint); margin-top:2px; }

  /* Pastille de statut — base réutilisée par la grille de statuts d'agents
     (.agt-stat-item, couleur fixée par modificateur ci-dessous) et par le
     roster Supervision (.vd-table, couleur fournie inline par le contrôleur,
     voir .vd-status-badge plus haut pour le détail de cette convention). */
  .status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 9px; vertical-align:middle; }
  /* Statut du roster supervision : pastille pleine (fond teinté + texte de
     la même couleur) au lieu d'un simple point + texte discret, pour rester
     lisible d'un coup d'oeil sur la table temps réel. */
  .vd-status-pill{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
    color:var(--pill-color); background:color-mix(in srgb, var(--pill-color) 16%, transparent);
  }
  .vd-status-pill .status-dot{ background:var(--pill-color); }
  .agt-stat-item .status-dot.calling{ background:var(--vd-ok-fg); }
  .agt-stat-item .status-dot.end    { background:var(--vd-wa-fg); }
  .agt-stat-item .status-dot.pause  { background:var(--vd-mu-fg); }
  .agt-stat-item .status-dot.wait   { background:var(--vd-in-fg); }
  .agt-stat-item .status-dot.manual { background:var(--vd-purple); }

  /* Fil de messages (modal #supAgentChatModal — Supervision outbound) */
  .vd-chat-body{
    max-height:320px; overflow-y:auto; padding:4px 2px;
  }
  .vd-chat-bubble{
    display:inline-block; max-width:85%;
    background:var(--vd-surface-2); color:var(--vd-ink);
    border-radius:var(--vd-radius-sm); padding:8px 12px; font-size:13px;
  }

  /* Étiquette de coaching (carte "Coaching requis") */
  .coaching-tag{
    display:inline-flex; align-items:center; gap:4px;
    font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
    color:var(--vd-da-fg); background:var(--vd-da-bg);
  }

  /* Carte "campagne" (dashboard Supervision outbound) : bordure supérieure
     colorée selon le mode de numérotation (prédictif/manuel) — pas de notion
     gauche/droite, donc pas de miroir RTL nécessaire. */
  .vd-camp-card{
    background:var(--vd-surface); border:1px solid var(--vd-line);
    border-top:4px solid var(--vd-primary);
    border-radius:var(--vd-radius); box-shadow:var(--vd-shadow);
    padding:16px 18px; height:100%;
  }
  .vd-camp-card.predictif{ border-top-color:var(--vd-in-fg); }
  .vd-camp-card.manuel{ border-top-color:var(--vd-ok-fg); }
  .vd-camp-card .camp-name{ font-size:14px; font-weight:700; color:var(--vd-ink); margin-bottom:4px; }
  .vd-camp-card .camp-meta{ font-size:12px; color:var(--vd-ink-faint); margin-bottom:10px; }
  .vd-camp-card .camp-kpi{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12.5px; padding:4px 0;
  }
  .vd-camp-card .camp-kpi-label{ color:var(--vd-ink-soft); }
  .vd-camp-card .camp-kpi-value{ font-weight:700; color:var(--vd-ink); }
  /* Noms dédiés (kpi-warn/kpi-danger) plutôt que les utilitaires Bootstrap
     .text-warning/.text-danger : ceux-ci s'appliquent avec !important sur des
     couleurs Bootstrap fixes qui ne suivent pas les tokens --vd-* du thème sombre. */
  .vd-camp-card .camp-kpi-value.kpi-warn{ color:var(--vd-wa-fg); }
  .vd-camp-card .camp-kpi-value.kpi-danger{ color:var(--vd-da-fg); }

  /* Sélecteur de campagne de la page Accueil (le contrôleur Dashboard::index()
     génère ce <select> via form_dropdown() avec d'anciennes classes Bootstrap —
     on le reskin uniquement par CSS ciblé sur son id, sans toucher au HTML
     généré côté contrôleur). */
  #Campaigns.custom-select{
    width:100%; height:42px; border-radius:var(--vd-radius-sm);
    border:1px solid var(--vd-input-border); background:var(--vd-surface); color:var(--vd-ink);
    font-size:13.5px; padding:0 36px 0 14px; font-family:var(--vd-font);
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7a90'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  }
  #Campaigns.custom-select:focus{
    outline:none; border-color:var(--vd-primary); box-shadow:0 0 0 3px var(--vd-primary-soft);
  }

  /* Emplacement topbar du sélecteur de campagne (injecté via $vd_topbar_action,
     voir Dashboard::index()) : même reskin que ci-dessus mais à la hauteur des
     autres contrôles de la topbar (.vd-icon-btn / .vd-search = 38px). */
  .vd-topbar-camp{ width:200px; }
  .vd-topbar-camp #Campaigns.custom-select{ height:38px; font-size:12.5px; }
  @media (max-width: 991.98px){
    .vd-topbar-camp{ width:100%; order:6; }
  }

  /* ============================================================
     Champ avec icône — générique (ex. identifiant/mot de passe de
     la page de connexion). Même principe que .vd-date-range mais
     réutilisable pour n'importe quel champ texte/mot de passe.
     ============================================================ */
  .vd-field-icon{ position:relative; }
  .vd-field-icon .bi{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--vd-ink-faint); font-size:15px; pointer-events:none;
  }
  .vd-field-icon .vd-form-control{ padding-left:40px; }

  /* ============================================================
     Page de connexion (Login.php) — layout autonome, non authentifié :
     pas de sidebar/topbar (assets/parcial/topbar.php suppose un
     utilisateur déjà connecté), juste une carte centrée sur fond --vd-bg.
     ============================================================ */
  .vd-auth-page{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--vd-bg); padding:24px;
  }
  .vd-auth-shell{ width:100%; max-width:400px; }
  .vd-auth-card{ padding:36px 32px 30px; }
  .vd-auth-card .vd-brand{ justify-content:center; padding:0 0 24px; }
  .vd-auth-title{ text-align:center; font-size:21px; margin:0 0 6px; }
  .vd-auth-subtitle{ text-align:center; font-size:13px; color:var(--vd-ink-soft); margin:0 0 22px; }
  .vd-auth-submit{ width:100%; margin-top:8px; padding:11px 18px; font-size:14px; }
  .vd-auth-copyright{ text-align:center; font-size:12px; color:var(--vd-ink-faint); margin-top:18px; }
  .vd-auth-copyright a{ color:var(--vd-ink-faint); font-weight:600; }

  /* ============================================================
     Rapport Global (Rapport.php / Rapport/Rapport_global_view.php) —
     barre de filtres (pills de période), entonnoir de conversion,
     heatmap appels/heure. Pas de plugin DataTables : les tableaux de
     classement suivent le pattern "Clients" (voir templeate.php).
     ============================================================ */
  .vd-filter-bar{
    background:var(--vd-surface); border:1px solid var(--vd-line);
    border-radius:var(--vd-radius); box-shadow:var(--vd-shadow);
    padding:12px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin-bottom:16px;
  }
  .vd-filter-sep{ width:1px; height:20px; background:var(--vd-line); }

  .vd-period-pill{
    display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px;
    font-size:12.5px; font-weight:600; cursor:pointer; user-select:none;
    border:1.5px solid var(--vd-line); background:var(--vd-surface); color:var(--vd-ink-soft);
    transition:background .18s, border-color .18s, color .18s;
  }
  .vd-period-pill:hover{ background:var(--vd-primary-soft); border-color:var(--vd-primary); color:var(--vd-primary); }
  .vd-period-pill.active{ background:var(--vd-primary); border-color:var(--vd-primary); color:#fff; }

  /* Entonnoir de conversion (carte "Rapport Global") */
  .funnel-step{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .funnel-step:last-child{ margin-bottom:0; }
  .funnel-label{ font-size:12px; font-weight:600; color:var(--vd-ink-soft); min-width:130px; flex-shrink:0; text-align:right; }
  .funnel-bar-wrap{ flex:1; background:var(--vd-track); border-radius:6px; height:30px; overflow:hidden; }
  .funnel-bar-fill{
    height:100%; border-radius:6px; display:flex; align-items:center; justify-content:flex-end;
    padding-right:10px; font-size:12px; font-weight:700; color:#fff; transition:width .3s ease;
  }
  .funnel-val{ font-size:12.5px; font-weight:700; min-width:55px; color:var(--vd-ink); }
  .funnel-pct{ font-size:11.5px; color:var(--vd-ink-faint); min-width:42px; }

  /* Heatmap appels/heure (carte "Rapport Global") */
  .vd-heatmap{ border-collapse:separate; border-spacing:3px; width:100%; }
  .vd-heatmap th{ font-size:10px; font-weight:600; color:var(--vd-ink-faint); padding:3px 5px; text-align:center; }
  .vd-heatmap th.heat-row-label{ text-align:right; white-space:nowrap; color:var(--vd-ink-faint); padding-inline-end:8px; }
  .heat-cell{
    border-radius:4px; height:28px; display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--vd-ink);
  }
  .vd-auth-copyright a:hover{ color:var(--vd-primary); }

/* ============================================================
   Script editor (Scripts/Edit) — variable chips, mention
   dropdown, inline var panel, sticky action bar, live preview.
   ============================================================ */
.vd-var-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px 2px 6px; margin:0 1px; border-radius:999px;
  background:var(--vd-in-bg); color:var(--vd-in-fg);
  font-size:12.5px; font-weight:600; line-height:1.6;
  white-space:nowrap; user-select:none; cursor:default;
}
.vd-var-chip i{ font-size:11px; }

.note-editable{ min-height:400px; }

.vd-form-help{ font-size:12px; color:var(--vd-ink-faint); margin-top:4px; }

/* Panel "Variables" — liste compacte défilante remplaçant la table paginée */
.vd-varpanel-list{ max-height:350px; overflow-y:auto; }
.vd-var-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 2px; border-bottom:1px solid var(--vd-line);
}
.vd-var-row:last-child{ border-bottom:0; }
.vd-var-row-main{ display:flex; align-items:center; gap:8px; min-width:0; }
.vd-var-row-name{ font-weight:700; font-size:13.5px; color:var(--vd-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-var-row-actions{ display:flex; align-items:center; gap:2px; flex-shrink:0; }

.vd-var-inline-form{
  background:var(--vd-surface-2); border:1px solid var(--vd-line);
  border-radius:var(--vd-radius-sm); padding:14px;
}

/* Barre d'action en bas de page (Annuler / Mettre à jour) — dans le flux
   normal de la page, pas flottante/collée à l'écran. */
.vd-form-actionbar{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  margin-top:20px; padding:16px 22px;
  background:var(--vd-surface); border:1px solid var(--vd-line); border-radius:var(--vd-radius);
}
@media (max-width:991.98px){
  .vd-form-actionbar{ padding:12px 16px; }
}

/* Autocomplete flottant déclenché par "{{" ou le bouton toolbar "Variables" */
.vd-mention-dropdown{
  position:absolute; z-index:1090; width:240px; max-height:260px;
  background:var(--vd-surface); border:1px solid var(--vd-line);
  border-radius:var(--vd-radius-sm); box-shadow:var(--vd-shell-shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.vd-mention-dropdown .vd-mention-search{ margin:8px; width:calc(100% - 16px); height:34px; }
.vd-mention-list{ overflow-y:auto; max-height:220px; padding:4px; }
.vd-mention-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 9px; border-radius:6px; cursor:pointer; font-size:13px;
}
.vd-mention-item:hover{ background:var(--vd-surface-2); }
.vd-mention-item-name{ font-weight:600; color:var(--vd-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-mention-empty{ padding:10px; font-size:12.5px; text-align:center; }

/* Aperçu dynamique — chips remplacés par des champs de saisie inline */
.vd-preview-body{ font-size:14px; line-height:1.8; color:var(--vd-ink); }
.vd-preview-input{
  display:inline-block; width:auto; min-width:120px; height:30px;
  padding:0 8px; margin:0 2px; font-size:13px;
  border-radius:6px; border:1px dashed var(--vd-primary);
  background:var(--vd-primary-soft); color:var(--vd-ink);
}

/* Script editor — follow-up: back link, system-variables section, system chip variant */
.vd-back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--vd-ink-soft); text-decoration:none;
}
.vd-back-link:hover{ color:var(--vd-primary); }

.vd-var-section-title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--vd-ink-faint); margin:4px 0 8px;
}

.vd-sysvars-section{
  background:var(--vd-in-bg); border:1px solid var(--vd-line);
  border-radius:var(--vd-radius-sm); padding:10px;
}
.vd-sysvars-title{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--vd-in-fg); margin-bottom:6px;
}
.vd-var-row-system{ cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--vd-in-fg) 14%, transparent); }
.vd-var-row-system:last-child{ border-bottom:0; }
.vd-var-row-system:hover{ background:color-mix(in srgb, var(--vd-in-fg) 8%, transparent); border-radius:8px; }

/* Chip système — visuellement distinct du chip variable personnalisée (bleu) */
.vd-var-chip-system{
  background:var(--vd-mu-bg); color:var(--vd-mu-fg);
}

.vd-preview-system-slot{
  display:inline-block; padding:1px 4px; margin:0 1px;
  font-style:italic; color:var(--vd-ink-faint);
}

.vd-mention-item-system{ background:color-mix(in srgb, var(--vd-in-fg) 6%, transparent); }

/* ============================================================
   Interface d'appel agent (Calls, reconstruction) — coque dédiée,
   sans le menu de navigation standard : consigne explicite du chantier,
   l'agent ne doit pas naviguer vers d'autres pages de l'app pendant qu'il
   est sur l'interface d'appel (voir
   docs/soufiane/todo_2026-08-22_calls_refactor_step7_rebuild_plan.md).
   Phase 1 : sidebar dashboard (cartes de campagne + stats + rappels).
   ============================================================ */
/* Hauteur figée (pas min-height) : un contenu plus haut que l'écran (ex. le
   panneau de qualification) doit défiler à l'intérieur de .vd-callside/
   .vd-content, pas faire grandir toute la page — sans quoi la topbar et le
   contenu principal se décalent avec la sidebar au lieu de rester en place. */
.vd-callshell{
  display:flex;
  height:100vh;
  background:var(--vd-bg);
}
.vd-callmain{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
.vd-callmain .vd-content{ flex:1 1 auto; min-height:0; overflow-y:auto; }

.vd-call-topbar{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:18px 28px; background:var(--vd-surface); border-bottom:1px solid var(--vd-line);
}
.vd-call-topbar-item{ display:flex; flex-direction:column; gap:2px; }
.vd-call-topbar-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--vd-ink-faint); }
.vd-call-topbar-value{ font-size:14px; font-weight:700; color:var(--vd-ink); }

.vd-callside{
  width:380px; flex:0 0 380px;
  background:var(--vd-surface);
  border-right:1px solid var(--vd-line);
  overflow-y:auto;
  padding:18px 16px 30px;
}

.vd-callside-sipstatus{ margin-bottom:12px; }
.vd-callside-sipstatus .vd-status-pill{ width:100%; justify-content:center; }

.vd-callside-tabs{
  display:flex; gap:4px; margin-bottom:16px;
  background:var(--vd-surface-2); border-radius:999px; padding:4px;
}
.vd-callside-tab{
  flex:1 1 auto; text-align:center; padding:8px 6px; border-radius:999px;
  font-size:12px; font-weight:700; color:var(--vd-ink-soft); cursor:pointer;
  border:none; background:none;
}
.vd-callside-tab.active{ background:var(--vd-primary); color:#fff; }
.vd-callside-pane{ display:none; }
.vd-callside-pane.active{ display:block; }

/* En appel (Phase 5) : navigation entre onglets de la sidebar verrouillée sur
   "Campagnes" (là où vivent les contrôles d'appel) — l'agent ne doit pas
   pouvoir consulter Rappels/Stats/Chat pendant un appel en cours. */
.vd-callside-tabs.locked .vd-callside-tab:not(.active){
  opacity:.4; pointer-events:none; cursor:not-allowed;
}

.vd-camp-card{
  border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm);
  padding:14px; margin-bottom:12px; background:var(--vd-surface-2);
}
.vd-camp-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.vd-camp-card-name{ font-weight:700; font-size:13.5px; color:var(--vd-ink); }
.vd-camp-card-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.vd-camp-card-stat{ background:var(--vd-surface); border-radius:10px; padding:8px; text-align:center; }
.vd-camp-card-stat .val{ font-size:15px; font-weight:700; color:var(--vd-ink); display:block; }
.vd-camp-card-stat .lbl{ font-size:9.5px; font-weight:600; color:var(--vd-ink-faint); text-transform:uppercase; letter-spacing:.03em; }
.vd-camp-card-next{ font-size:11.5px; color:var(--vd-ink-soft); margin-bottom:10px; }
.vd-camp-card-next strong{ color:var(--vd-ink); }
.vd-camp-card-connect{ width:100%; }

.vd-callback-list{ display:flex; flex-direction:column; gap:8px; }
.vd-callback-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--vd-line); background:var(--vd-surface-2);
  font-size:12.5px;
}
.vd-callback-row.late{ border-color:var(--vd-da-fg); }
.vd-callback-phone{ font-weight:700; color:var(--vd-ink); }
.vd-callback-time{ color:var(--vd-ink-soft); font-variant-numeric:tabular-nums; }

.vd-callside-filterbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.vd-callside-filterbar .vd-date-range{ flex:1 1 auto; min-width:0; }
.vd-callside-filterbar .vd-date-range .vd-form-control{ height:34px; font-size:12px; }
.vd-callside-filterbar .vd-date-range .bi{ font-size:13px; }

.vd-chat-stub{
  border:1px dashed var(--vd-line); border-radius:var(--vd-radius-sm);
  padding:24px 16px; text-align:center; color:var(--vd-ink-faint); font-size:12.5px;
}

/* Phase 2 : boutons de mode (Manuel/Preview/Prédictif) et Pause — même gabarit
   que .btn-vd-soft (déjà appliqué en classe de base dans le HTML), une couleur
   sémantique distincte par bouton via les tokens de badge existants (déjà
   corrects en dark mode, pas de nouvelle couleur inventée). */
.vd-call-mode-btn[data-mode="MANUAL"]{ background:var(--vd-mu-bg); color:var(--vd-mu-fg); }
.vd-call-mode-btn[data-mode="MANUAL"]:hover{ background:color-mix(in srgb, var(--vd-mu-fg) 18%, var(--vd-mu-bg)); }
.vd-call-mode-btn[data-mode="PRE"]{ background:var(--vd-ok-bg); color:var(--vd-ok-fg); }
.vd-call-mode-btn[data-mode="PRE"]:hover{ background:color-mix(in srgb, var(--vd-ok-fg) 18%, var(--vd-ok-bg)); }
.vd-call-mode-btn[data-mode="AUTO"]{ background:var(--vd-in-bg); color:var(--vd-in-fg); }
.vd-call-mode-btn[data-mode="AUTO"]:hover{ background:color-mix(in srgb, var(--vd-in-fg) 18%, var(--vd-in-bg)); }
#callBtnPause{ background:var(--vd-wa-bg); color:var(--vd-wa-fg); }
#callBtnPause:hover{ background:color-mix(in srgb, var(--vd-wa-fg) 18%, var(--vd-wa-bg)); }

/* Mode actif : anneau dans la couleur du bouton lui-même (currentColor) plutôt
   qu'un aplat unique qui écraserait la couleur distinctive de chaque mode. */
.vd-call-mode-btn.active{
  box-shadow: 0 0 0 2px var(--vd-surface-2), 0 0 0 4px currentColor;
}

/* Offcanvas de qualification (Phase 5) : même largeur/bord que .vd-callside
   (380px, --bs-offcanvas-width) pour donner l'impression qu'il se substitue à
   la sidebar plutôt que d'ouvrir une fenêtre flottante au centre de l'écran. */
.vd-qualif-offcanvas{
  --bs-offcanvas-width:380px;
  background:var(--vd-surface); color:var(--vd-ink);
  border-right:1px solid var(--vd-line);
}
/* Corps en colonne flex, sans son propre scroll global (Bootstrap met
   overflow-y:auto par défaut) : seule la liste des statuts doit défiler en
   interne et prendre toute la place disponible, pas le body entier — le
   footer (Valider/Annuler), lui, reste fixe hors de ce flux. */
.vd-qualif-offcanvas .offcanvas-body{
  padding:18px 16px; display:flex; flex-direction:column; overflow:hidden;
}
.vd-qualif-offcanvas .vd-disposition-list{
  flex:1 1 auto; min-height:80px; max-height:none; margin-bottom:0;
}
.vd-qualif-footer{
  flex:0 0 auto; padding:14px 16px;
  border-top:1px solid var(--vd-line); background:var(--vd-surface);
}

/* Panneau de qualification (Phase 5) : liste des dispositions à hauteur fixe et
   défilement interne — toutes visibles/scrollables d'un coup plutôt que
   repliées dans un <select>, sans jamais faire grandir la sidebar/la page
   (cf. .vd-callshell en hauteur figée ci-dessus). */
.vd-disposition-list{
  max-height:220px; overflow-y:auto;
  border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm);
  padding:6px;
}
.vd-disposition-group-label{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--vd-ink-faint); padding:7px 8px 4px;
}
.vd-disposition-option{
  display:flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:8px; font-size:12.5px; cursor:pointer; color:var(--vd-ink-soft);
}
.vd-disposition-option:hover{ background:var(--vd-surface-2); }
.vd-disposition-option.selected{ background:var(--vd-primary-soft); color:var(--vd-primary); font-weight:700; }
.vd-disposition-option .status-dot{ flex-shrink:0; }