/* ═══════════════════════════════════════════════════════════════════════
   APPYCALL V2 — Skin sur composants V1 (jQuery/Bootstrap4/FA)
   Transforme visuellement les éléments V1 en V2 sans casser le JS.
   ═══════════════════════════════════════════════════════════════════════ */

body.acv2-skin {
  background: var(--acv2-surface-0);
  font-family: var(--acv2-font-sans);
  color: var(--acv2-text);
  font-size: 13px;
}
body.acv2-skin * { box-sizing: border-box; }

/* ═════════════════════════════════════════════════════════════
   TOPBAR V2 navbar principale
   ═════════════════════════════════════════════════════════════ */
.acv2-nav--main {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--acv2-space-4);
  height: 52px;
  background: var(--acv2-surface-0);
  border-bottom: 1px solid var(--acv2-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--acv2-shadow-sm);
}
.acv2-nav--main .acv2-nav-brand {
  display: inline-flex; align-items: center;
  font-weight: var(--acv2-weight-semibold);
  font-size: 16px; color: var(--acv2-text);
  text-decoration: none; padding: 0 10px 0 0;
  gap: 4px;
}
.acv2-nav--main .acv2-nav-brand img { height: 26px; }
.acv2-nav--main .acv2-nav-context {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--acv2-text-xs); color: var(--acv2-text-muted);
  padding: 4px 8px; background: var(--acv2-surface-1);
  border-radius: var(--acv2-radius-md);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acv2-nav--main .acv2-nav-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; height: 32px;
  font-size: 12.5px; color: var(--acv2-text-soft);
  text-decoration: none; border-radius: var(--acv2-radius-md);
  transition: all var(--acv2-duration-fast) var(--acv2-ease-out);
  white-space: nowrap;
}
.acv2-nav--main .acv2-nav-item:hover { background: var(--acv2-surface-1); color: var(--acv2-text); }
.acv2-nav--main .acv2-nav-item.is-active {
  background: var(--acv2-primary-50);
  color: var(--acv2-primary-700);
  font-weight: var(--acv2-weight-semibold);
}
.acv2-nav--main .acv2-nav-item .fa { font-size: 13px; }
.acv2-nav--main .acv2-nav-sp { flex: 1; }
.acv2-nav--main .acv2-nav-bell { cursor: pointer; }
.acv2-nav--main .acv2-divider--vert {
  width: 1px; height: 24px; background: var(--acv2-border);
  margin: 0 6px;
}

/* ═════════════════════════════════════════════════════════════
   BANNER pilote V2
   ═════════════════════════════════════════════════════════════ */
.v2-pilot-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top));
  background: linear-gradient(90deg, #1e40af, #7c3aed);
  color: #fff; font-size: var(--acv2-text-xs);
  font-weight: var(--acv2-weight-medium);
}
.v2-pilot-banner strong { font-weight: var(--acv2-weight-bold); }
.v2-pilot-banner a { color: #fff; text-decoration: underline; margin-left: auto; }

/* ═════════════════════════════════════════════════════════════
   Override des éléments V1 avec classes V2
   ═════════════════════════════════════════════════════════════ */
body.acv2-skin .container-fluid,
body.acv2-skin main.v2-main {
  max-width: 1800px;
  margin: 0 auto;
  padding: var(--acv2-space-4) var(--acv2-space-5);
}

/* Buttons bootstrap → V2 */
body.acv2-skin .btn {
  font-size: 12.5px; font-weight: var(--acv2-weight-medium);
  border-radius: var(--acv2-radius-md);
  padding: 6px 14px;
  transition: all var(--acv2-duration-fast) var(--acv2-ease-out);
  border: 1px solid transparent;
  letter-spacing: 0;
}
body.acv2-skin .btn-sm { padding: 4px 10px; font-size: 12px; }
body.acv2-skin .btn-xs { padding: 2px 8px; font-size: 11px; }
body.acv2-skin .btn-primary { background: var(--acv2-primary-500); border-color: var(--acv2-primary-500); }
body.acv2-skin .btn-primary:hover { background: var(--acv2-primary-600); border-color: var(--acv2-primary-600); }
body.acv2-skin .btn-success { background: var(--acv2-success-500); border-color: var(--acv2-success-500); }
body.acv2-skin .btn-success:hover { background: var(--acv2-success-600); border-color: var(--acv2-success-600); }
body.acv2-skin .btn-danger { background: var(--acv2-danger-500); border-color: var(--acv2-danger-500); }
body.acv2-skin .btn-danger:hover { background: var(--acv2-danger-600); border-color: var(--acv2-danger-600); }
body.acv2-skin .btn-outline-primary { color: var(--acv2-primary-600); border-color: var(--acv2-primary-300); background: transparent; }
body.acv2-skin .btn-outline-primary:hover { background: var(--acv2-primary-500); color: #fff; border-color: var(--acv2-primary-500); }
body.acv2-skin .btn-outline-secondary { color: var(--acv2-text-soft); border-color: var(--acv2-border); background: var(--acv2-surface-0); }
body.acv2-skin .btn-outline-secondary:hover { background: var(--acv2-surface-2); color: var(--acv2-text); }
body.acv2-skin .btn-outline-info { color: var(--acv2-info-600); border-color: var(--acv2-info-300); background: transparent; }
body.acv2-skin .btn-outline-info:hover { background: var(--acv2-info-500); color: #fff; }
body.acv2-skin .btn-outline-warning { color: var(--acv2-warning-600); border-color: var(--acv2-warning-300); background: transparent; }
body.acv2-skin .btn-outline-warning:hover { background: var(--acv2-warning-500); color: #fff; }
body.acv2-skin .btn-outline-danger { color: var(--acv2-danger-600); border-color: var(--acv2-danger-300); background: transparent; }
body.acv2-skin .btn-outline-danger:hover { background: var(--acv2-danger-500); color: #fff; border-color: var(--acv2-danger-500); }
body.acv2-skin .btn-outline-success { color: var(--acv2-success-700); border-color: var(--acv2-success-300); background: transparent; }
body.acv2-skin .btn-outline-success:hover { background: var(--acv2-success-500); color: #fff; border-color: var(--acv2-success-500); }

/* Audit pages oubliées : BS4 solid variants manquants */
body.acv2-skin .btn-warning { background: var(--acv2-warning-500); border-color: var(--acv2-warning-500); color: #fff; }
body.acv2-skin .btn-warning:hover { background: var(--acv2-warning-600); border-color: var(--acv2-warning-600); color: #fff; }
body.acv2-skin .btn-info { background: var(--acv2-info-500); border-color: var(--acv2-info-500); color: #fff; }
body.acv2-skin .btn-info:hover { background: var(--acv2-info-600); border-color: var(--acv2-info-600); }
body.acv2-skin .btn-secondary { background: var(--acv2-surface-2); border-color: var(--acv2-border); color: var(--acv2-text); }
body.acv2-skin .btn-secondary:hover { background: var(--acv2-surface-3, #e2e8f0); color: var(--acv2-text); }

/* Modal headers avec .bg-* : garde les couleurs mais aligne sur les tokens */
body.acv2-skin .bg-success { background-color: var(--acv2-success-500) !important; color: #fff; }
body.acv2-skin .bg-warning { background-color: var(--acv2-warning-500) !important; color: #fff; }
body.acv2-skin .bg-info { background-color: var(--acv2-info-500) !important; color: #fff; }
body.acv2-skin .bg-danger { background-color: var(--acv2-danger-500) !important; color: #fff; }
body.acv2-skin .bg-secondary { background-color: var(--acv2-surface-2) !important; color: var(--acv2-text); }

/* Forms */
body.acv2-skin .form-control, body.acv2-skin .custom-select {
  height: 34px; padding: 4px 10px;
  font-size: 13px; color: var(--acv2-text);
  background: var(--acv2-surface-0);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-md);
  transition: border-color var(--acv2-duration-fast), box-shadow var(--acv2-duration-fast);
}
body.acv2-skin .form-control:focus, body.acv2-skin .custom-select:focus {
  outline: none; border-color: var(--acv2-primary-500);
  box-shadow: var(--acv2-ring-focus);
}
body.acv2-skin .form-control-sm { height: 28px; padding: 2px 8px; font-size: 12px; }
body.acv2-skin label { font-size: 12px; color: var(--acv2-text-soft); font-weight: var(--acv2-weight-medium); margin-bottom: 4px; }

/* Cards bootstrap → V2 */
body.acv2-skin .card {
  background: var(--acv2-surface-0);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-lg);
  box-shadow: var(--acv2-shadow-sm);
}
body.acv2-skin .card-header {
  background: var(--acv2-surface-1);
  border-bottom: 1px solid var(--acv2-border);
  padding: 10px 14px;
  font-weight: var(--acv2-weight-semibold);
  font-size: 13px;
  border-radius: var(--acv2-radius-lg) var(--acv2-radius-lg) 0 0;
}
body.acv2-skin .card-body { padding: 14px; }
body.acv2-skin h1, body.acv2-skin h2, body.acv2-skin h3, body.acv2-skin h4, body.acv2-skin h5 {
  font-weight: var(--acv2-weight-semibold); letter-spacing: var(--acv2-tracking-tight);
  color: var(--acv2-text);
}
body.acv2-skin h1 { font-size: var(--acv2-text-2xl); }
body.acv2-skin h2 { font-size: var(--acv2-text-xl); }
body.acv2-skin h3 { font-size: var(--acv2-text-lg); }
body.acv2-skin h4 { font-size: var(--acv2-text-md); }
body.acv2-skin h5 { font-size: var(--acv2-text-base); }

/* Tables bootstrap → V2 */
body.acv2-skin .table {
  font-size: 12.5px; color: var(--acv2-text);
  margin-bottom: 0;
}
body.acv2-skin .table thead th {
  background: var(--acv2-surface-1);
  color: var(--acv2-text-muted);
  font-size: 11px; font-weight: var(--acv2-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--acv2-border);
  padding: 8px 10px;
}
body.acv2-skin .table tbody td {
  padding: 8px 10px;
  border-top: 1px solid var(--acv2-border-subtle);
  vertical-align: middle;
}
body.acv2-skin .table tbody tr:hover td { background: var(--acv2-surface-1); }
body.acv2-skin .table-sm td, body.acv2-skin .table-sm th { padding: 5px 8px; }

/* Call table spécifique */
body.acv2-skin .call-table th,
body.acv2-skin .call-th {
  background: var(--acv2-surface-1);
  font-size: 11px;
  font-weight: var(--acv2-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acv2-text-muted);
}

/* Dropdowns bootstrap → V2 */
body.acv2-skin .dropdown-menu {
  font-size: 12.5px;
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-md);
  box-shadow: var(--acv2-shadow-lg);
  padding: 4px;
  min-width: 200px;
}
body.acv2-skin .dropdown-item {
  padding: 6px 10px;
  border-radius: var(--acv2-radius-sm);
  color: var(--acv2-text);
  font-size: 12.5px;
  cursor: pointer;
}
body.acv2-skin .dropdown-item:hover { background: var(--acv2-surface-1); color: var(--acv2-text); }
body.acv2-skin .dropdown-divider { margin: 4px 0; border-top: 1px solid var(--acv2-border-subtle); }
body.acv2-skin .dropdown-header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--acv2-text-muted); padding: 6px 10px; }

/* Badges */
body.acv2-skin .badge {
  font-weight: var(--acv2-weight-semibold);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--acv2-radius-full);
}

/* Modals bootstrap → V2 */
body.acv2-skin .modal-content {
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-lg);
  box-shadow: var(--acv2-shadow-xl);
}
body.acv2-skin .modal-header {
  border-bottom: 1px solid var(--acv2-border);
  padding: 12px 16px;
  background: var(--acv2-surface-0);
  border-radius: var(--acv2-radius-lg) var(--acv2-radius-lg) 0 0;
}
body.acv2-skin .modal-header h5 { margin: 0; font-size: 15px; }
body.acv2-skin .modal-body { padding: 16px; }
body.acv2-skin .modal-footer {
  border-top: 1px solid var(--acv2-border);
  padding: 10px 16px;
  background: var(--acv2-surface-1);
  border-radius: 0 0 var(--acv2-radius-lg) var(--acv2-radius-lg);
}

/* Tabs bootstrap → V2 */
body.acv2-skin .nav-tabs {
  border-bottom: 1px solid var(--acv2-border);
  margin-bottom: 14px;
}
body.acv2-skin .nav-tabs .nav-link {
  border: 0;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--acv2-text-soft);
  font-weight: var(--acv2-weight-medium);
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -1px;
}
body.acv2-skin .nav-tabs .nav-link.active {
  color: var(--acv2-primary-600);
  border-bottom-color: var(--acv2-primary-500);
  background: transparent;
}
body.acv2-skin .nav-tabs .nav-link:hover { color: var(--acv2-text); border-bottom-color: var(--acv2-primary-200); }

/* Liens */
body.acv2-skin a { color: var(--acv2-primary-600); text-decoration: none; }
body.acv2-skin a:hover { color: var(--acv2-primary-700); text-decoration: underline; }

/* Call badges */
body.acv2-skin .call-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: var(--acv2-weight-semibold);
  border-radius: var(--acv2-radius-full);
  color: #fff;
}

/* V1 .call-filters skin */
body.acv2-skin .call-filters {
  background: var(--acv2-surface-0);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-lg);
  padding: 10px;
  margin-bottom: 10px;
}
body.acv2-skin .call-filters .form-row {
  gap: 4px;
  margin-bottom: 6px;
  align-items: center;
}
body.acv2-skin .call-filters .form-row:last-child { margin-bottom: 0; }

/* V1 action bar */
body.acv2-skin .call-action-bar {
  display: flex; gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: var(--acv2-surface-1);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-lg);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Polish léger des call-btn-* : garde les couleurs V1 natives (call.css),
   ajoute juste border-radius V2 cohérent. Ne force ni background ni color
   pour éviter toute altération visible par rapport à l'original. */
body.acv2-skin .call-btn-menu,
body.acv2-skin .call-btn-export,
body.acv2-skin .call-btn-modif,
body.acv2-skin .call-btn-blue,
body.acv2-skin .call-btn-filter-more,
body.acv2-skin .call-btn-presel {
  border-radius: var(--acv2-radius-md);
}
body.acv2-skin .call-counter, body.acv2-skin .call-counter-money {
  font-weight: var(--acv2-weight-semibold);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--acv2-surface-0);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-md);
  font-size: 12px;
}
body.acv2-skin .call-counter-money { color: var(--acv2-success-600); }
body.acv2-skin .call-bell { cursor: pointer; padding: 4px 8px; }

/* V1 filter chips */
body.acv2-skin .call-filter-chips {
  padding: 8px 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* V1 call panel (drawer fiche) */
body.acv2-skin .call-panel {
  background: var(--acv2-surface-0);
  box-shadow: var(--acv2-shadow-xl);
  border-left: 1px solid var(--acv2-border);
}
body.acv2-skin .call-panel-header {
  background: var(--acv2-surface-1);
  border-bottom: 1px solid var(--acv2-border);
  padding: 12px 16px;
}

/* V1 settings tiles */
body.acv2-skin .call-settings-tile {
  background: var(--acv2-surface-0);
  border: 1px solid var(--acv2-border);
  border-radius: var(--acv2-radius-lg);
  padding: 16px;
  transition: all var(--acv2-duration-fast) var(--acv2-ease-out);
}
body.acv2-skin .call-settings-tile:hover {
  border-color: var(--acv2-primary-300);
  box-shadow: var(--acv2-shadow-md);
}

/* Navbar V1 masquée UNIQUEMENT en V2 native (pas en V1 polish ni V3 wrap).
   Cible `.acv2-nav--main` qui est présent seulement dans base_v2.html.twig. */
body.acv2-skin:has(.acv2-nav--main) .call-navbar-white { display: none !important; }

/* Alertes bootstrap */
body.acv2-skin .alert {
  border-radius: var(--acv2-radius-md);
  padding: 10px 14px;
  font-size: 13px;
}
body.acv2-skin .alert-info { background: var(--acv2-bg-info-soft); color: var(--acv2-info-700); border-color: var(--acv2-info-200); }
body.acv2-skin .alert-success { background: var(--acv2-bg-success-soft); color: var(--acv2-success-700); border-color: var(--acv2-success-200); }
body.acv2-skin .alert-warning { background: var(--acv2-bg-warning-soft); color: var(--acv2-warning-700); border-color: var(--acv2-warning-200); }
body.acv2-skin .alert-danger { background: var(--acv2-bg-danger-soft); color: var(--acv2-danger-700); border-color: var(--acv2-danger-200); }

/* Custom switch bootstrap */
body.acv2-skin .custom-switch .custom-control-label::before {
  background: var(--acv2-surface-2);
  border-color: var(--acv2-border);
}
body.acv2-skin .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--acv2-primary-500);
  border-color: var(--acv2-primary-500);
}

/* Responsive : masque les labels des items nav sur petits écrans */
@media (max-width: 1100px) {
  .acv2-nav--main .acv2-nav-item span { display: none; }
  .acv2-nav--main .acv2-nav-brand span { display: inline; }
  .acv2-nav--main .acv2-nav-context { max-width: 80px; }
}
@media (max-width: 640px) {
  .acv2-nav--main { padding: 0 8px; gap: 1px; }
  .acv2-nav--main .acv2-nav-brand img { height: 22px; }
  .acv2-nav--main .acv2-nav-context { display: none; }
  .acv2-nav--main .acv2-divider--vert { display: none; }
  body.acv2-skin .container-fluid,
  body.acv2-skin main.v2-main { padding: 12px; }
  body.acv2-skin .call-action-bar { gap: 4px; padding: 6px; }
  body.acv2-skin .call-filters { padding: 6px; }
  body.acv2-skin .call-counter, body.acv2-skin .call-counter-money { font-size: 11px; padding: 3px 6px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Sprint 2.0 — Espacement standard pour les pages métier (Robot d'appel,
   Comptes SIP, Campagnes d'appel…). Évite que le titre H4 colle à la navbar.
────────────────────────────────────────────────────────────────────── */
.call-page {
  padding: 18px 16px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.call-page-header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--acv2-border, #e5e7eb);
}
.call-page-header h4 {
  font-weight: 600;
  color: var(--acv2-text, #111827);
}

/* ──────────────────────────────────────────────────────────────────────
   Sprint 2.x — Dialer mobile responsive (<768px)
   Stack vertical, boutons plein largeur, padding réduit.
   Activé sur vrai tactile uniquement (pointer: coarse).
────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) and (pointer: coarse) {
  .call-page { padding: 12px 8px 16px; }
  .call-page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .call-page-header h4 { font-size: 16px; }
  .call-page-header .badge { font-size: 10px; }

  /* Dialer : stack lead | actions verticalement */
  #dialerApp .row > .col-md-7,
  #dialerApp .row > .col-md-5 { flex: 0 0 100%; max-width: 100%; }
  #dialerApp .col-md-5 { margin-top: 12px; }

  /* Boutons disposition plein largeur, 1 col par 1 col */
  #dialerApp .d-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #dialerApp .btn-block, #dialerApp .btn-outline-success,
  #dialerApp .btn-outline-warning, #dialerApp .btn-outline-info,
  #dialerApp .btn-outline-secondary, #dialerApp .btn-outline-danger,
  #dialerApp .btn-outline-dark { font-size: 13px; padding: 8px 6px; }

  /* Stats live : 3 cols deviennent plus compactes */
  #dialerApp .h5, #dialerApp .h6 { font-size: 16px; }

  /* Header session : burger compact */
  #autoDialPauseBtn { width: 100%; }

  /* Form démarrage session : stack */
  #dialerApp .form-row > .col-md-5,
  #dialerApp .form-row > .col-md-2 { flex: 0 0 100%; max-width: 100%; margin-bottom: 8px; }
}

@media (max-width: 480px) {
  /* Très petit écran : 1 col pour les dispositions */
  #dialerApp .d-grid { grid-template-columns: 1fr !important; }
  .call-page-header h4 { font-size: 14px; }
}