/* ==========================================================================
   Interface v2 — « Appels & conversations » : Journal, Session, Statistiques,
   Centre d'appels, Messagerie (refonte UX, 25/08/2026)
   ==========================================================================
   Compagnon de ui-v2-appels.js. Tout est scopé html.ui-v2 et préfixé v2ap-
   (ap comme appels) : sans la v2, ce fichier ne change RIEN. Jetons de
   design-tokens.css (thème clair posé par la coquille) et variables de
   ui-v2.css (--v2-bordure-douce). Règles du cahier : cartes blanches
   radius 12, boutons/champs radius 8, pastilles radius 4, grille 8 pt,
   cibles 44 px, un seul bouton primaire cuivre par écran (ici : « Appeler »
   en session, « Démarrer la session » quand aucune n'est ouverte), H1
   PT Serif. La peau v2ap-v1 en fin de fichier éclaircit les trois onglets
   restés en logique v1 (Statistiques, Centre d'appels, Messagerie) et le
   contenu v1 du Journal.
   ========================================================================== */

/* ------------------------------------------------------- en-tête d'écran */
html.ui-v2 .v2ap-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2ap-entete h1 {
  margin: 0;
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--sobria-nuit);
}

/* Onglets soulignés cuivre — le même dessin que les deux veilles (v2e). */
html.ui-v2 .v2ap-onglets {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--v2-bordure-douce);
  flex-wrap: wrap;
}
html.ui-v2 .v2ap-onglets a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-size: 14px;
  color: var(--texte-attenue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
html.ui-v2 .v2ap-onglets a:hover { color: var(--sobria-nuit); }
html.ui-v2 .v2ap-onglets a.v2ap-onglet-actif {
  color: var(--sobria-nuit);
  font-weight: 600;
  border-bottom-color: var(--sobria-cuivre);
}

/* ---------------------------------------------------------------- cartes */
html.ui-v2 .v2ap-carte {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
  padding: 16px;
}
html.ui-v2 .v2ap-carte-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
html.ui-v2 .v2ap-carte-tete h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ap-carte-tete h2 svg { width: 18px; height: 18px; color: var(--sobria-cuivre); }

html.ui-v2 .v2ap-meta {
  font-size: 12.5px;
  color: var(--texte-attenue);
  margin: 4px 0;
}
html.ui-v2 .v2ap-attenue { color: var(--texte-attenue); }
html.ui-v2 .v2ap-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--texte-attenue);
  font-size: 14px;
}
html.ui-v2 .v2ap-charge {
  padding: 40px;
  text-align: center;
  color: var(--texte-attenue);
}

/* -------------------------------------------------------------- pastilles */
html.ui-v2 .v2ap-pastille {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}
html.ui-v2 .v2ap-pastille-vert   { background: #eaf5ee; color: #3f8f5f; }
html.ui-v2 .v2ap-pastille-ambre  { background: #fdf3e3; color: #9a6b1a; }
html.ui-v2 .v2ap-pastille-bleu   { background: #eef3fb; color: #2f5fa8; }
html.ui-v2 .v2ap-pastille-rouge  { background: #fbeeec; color: #a3392b; }
html.ui-v2 .v2ap-pastille-neutre { background: #efeeec; color: #676d7c; }

/* ----------------------------------------------------------------- boutons */
/* Un seul primaire cuivre par écran : « Appeler » (ou « Démarrer ») — les
   autres restent blancs bordés, le danger ne se colore qu'au survol. */
html.ui-v2 .v2ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
html.ui-v2 .v2ap-btn:hover { background: #faf8f3; }
html.ui-v2 .v2ap-btn svg { width: 16px; height: 16px; flex: none; }
html.ui-v2 .v2ap-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
html.ui-v2 .v2ap-btn-primaire {
  border: 0;
  background: var(--sobria-cuivre);
  color: #fff;
  font-weight: 600;
}
html.ui-v2 .v2ap-btn-primaire:hover { background: #b06c33; }
/* #a3392b : rouge assombri lisible sur blanc — le jeton --erreur est calibré
   pour les fonds sombres (mesure du 07/08, reprise de v2e). */
html.ui-v2 .v2ap-btn-danger:hover { color: #a3392b; border-color: #a3392b; background: #fbeeec; }
html.ui-v2 .v2ap-pleine-largeur { width: 100%; margin-top: 12px; }

/* Le bouton d'appel : le widget v1 (tel-appel / tel-lien) rhabillé en
   primaire cuivre par ui-v2-appels.js — même délégation softphone. */
html.ui-v2 .v2ap-appeler { margin: 10px 0; }
html.ui-v2 .v2ap-appeler .v2ap-btn-appeler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--sobria-cuivre);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
html.ui-v2 .v2ap-appeler .v2ap-btn-appeler:hover { background: #b06c33; }
html.ui-v2 .v2ap-appeler .v2ap-btn-appeler svg { width: 18px; height: 18px; flex: none; }
html.ui-v2 .v2ap-avert { color: #9a6b1a; font-size: 13px; }

/* ----------------------------------------------------------------- champs */
html.ui-v2 .v2ap-champ,
html.ui-v2 .v2ap-select,
html.ui-v2 .v2ap-textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
  font-size: 13.5px;
  font-family: inherit;
}
html.ui-v2 .v2ap-textarea { resize: vertical; min-height: 88px; }
html.ui-v2 .v2ap-champ:disabled { background: #f2efe8; color: var(--texte-attenue); }
html.ui-v2 .v2ap-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte);
}
html.ui-v2 .v2ap-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html.ui-v2 .v2ap-prochaine {
  margin: 14px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
}
html.ui-v2 .v2ap-prochaine legend {
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texte);
}
html.ui-v2 .v2ap-prochaine [hidden] { display: none; }
html.ui-v2 .v2ap-case {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13.5px;
  cursor: pointer;
}
html.ui-v2 .v2ap-case input { width: 16px; height: 16px; accent-color: var(--sobria-cuivre); }
html.ui-v2 .v2ap-actions-cr { margin-top: 12px; }

/* ------------------------------------------- grille de l'onglet Session */
/* Maquette : 300px (file) · 1fr (compte rendu) · 320px (session + canaux). */
html.ui-v2 .v2ap-grille {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: 16px;
  align-items: start;
}
html.ui-v2 .v2ap-col-large { grid-column: 1 / 3; }
html.ui-v2 .v2ap-col-droite {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1023px) {
  html.ui-v2 .v2ap-grille { grid-template-columns: 1fr; }
  html.ui-v2 .v2ap-col-large { grid-column: auto; }
}

/* ------------------------------------------------------- file d'appels */
html.ui-v2 .v2ap-prospect {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
}
html.ui-v2 .v2ap-prospect-nom {
  font-weight: 600;
  color: var(--sobria-nuit);
  font-size: 15px;
}
html.ui-v2 .v2ap-notes-prospect {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--texte-attenue);
  white-space: pre-wrap;
  max-height: 130px;
  overflow: auto;
}
html.ui-v2 .v2ap-actions-file {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
html.ui-v2 .v2ap-note-file { margin-top: 12px; }

/* --------------------------------------------- anneau et compteurs (droite) */
html.ui-v2 .v2ap-anneau {
  position: relative;
  width: 148px;
  margin: 8px auto 0;
}
html.ui-v2 .v2ap-anneau svg { display: block; width: 100%; height: auto; }
html.ui-v2 .v2ap-anneau-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
html.ui-v2 .v2ap-anneau-centre strong {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 30px;
  line-height: 1;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ap-anneau-centre span {
  font-size: 12px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2ap-anneau-lbl { text-align: center; margin: 6px 0 12px; }

html.ui-v2 .v2ap-compteurs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html.ui-v2 .v2ap-compteur {
  padding: 10px 12px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
}
html.ui-v2 .v2ap-compteur-num {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 22px;
  line-height: 1.1;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ap-compteur-lbl {
  margin-top: 2px;
  font-size: 12px;
  color: var(--texte-attenue);
}
html.ui-v2 .v2ap-actions-session {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* -------------------------------------------------- carte canaux / dormant */
html.ui-v2 .v2ap-canal-phrase {
  margin: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sobria-nuit);
}
html.ui-v2 .v2ap-canal-nombres { margin: 6px 0; font-size: 15px; color: var(--sobria-nuit); }
html.ui-v2 .v2ap-canal-nombres strong {
  font-family: var(--font-head, "PT Serif", Georgia, serif);
  font-size: 24px;
}
html.ui-v2 .v2ap-dormant { max-width: 640px; }
html.ui-v2 .v2ap-dormant code {
  background: #f2efe8;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

/* ==========================================================================
   Peau v2ap-v1 — restyle LÉGER des contenus restés en logique v1 (Journal,
   Statistiques, Centre d'appels, Messagerie). Les variables inversées de la
   peau de compatibilité (ui-v2.css) rendent déjà ces écrans clairs ; ici on
   aligne seulement cartes, lignes et champs sur le dessin v2 — la logique et
   la structure v1 ne bougent pas.
   ========================================================================== */
html.ui-v2 #main.v2ap-v1 .card {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
  box-shadow: var(--ombre-1, 0 1px 2px rgba(20, 33, 59, .06));
}
html.ui-v2 #main.v2ap-v1 .card h2 { color: var(--sobria-nuit); font-size: 16px; }
/* Le survol v1 (blanc translucide) est invisible sur fond blanc. */
html.ui-v2 #main.v2ap-v1 .list-row:hover { background: rgba(20, 33, 59, .04); }
html.ui-v2 #main.v2ap-v1 .kpi {
  background: var(--fond-surface, #fff);
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 12px;
}
html.ui-v2 #main.v2ap-v1 .kpi-val { color: #a05f27; }
html.ui-v2 #main.v2ap-v1 .toolbar select,
html.ui-v2 #main.v2ap-v1 .toolbar input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--v2-bordure-douce);
  border-radius: 8px;
  background: var(--fond-surface, #fff);
  color: var(--texte);
}
html.ui-v2 #main.v2ap-v1 .btn {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--v2-bordure-douce);
}