/* ══════════════════════════════════════════════════════════════════════
   CallFlow — COUCHE DE REFONTE VISUELLE (10/09)
   Chargée APRÈS style.css : elle surcharge sans rien supprimer.
   Pour revenir au rendu précédent, il suffit de retirer le <link> de cette
   feuille dans base.html / login.html / register.html.

   Parti pris : donner de la profondeur RÉELLE (verre dépoli, ombres
   étagées, liseré lumineux) au lieu d'aplats, un fond « aurore » qui vit
   doucement, et une hiérarchie typographique plus marquée.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --cf-r: 18px;
  --cf-r-sm: 12px;
  --cf-grad-accent: linear-gradient(135deg, #6c7bff 0%, #3ecbff 55%, #23e0a8 100%);
  --cf-glass-brd: rgba(255, 255, 255, 0.09);
  --cf-depth:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 -18px 40px -30px rgba(0,0,0,0.9) inset,
      0 22px 44px -22px rgba(0,0,0,0.85),
      0 4px 12px -6px rgba(0,0,0,0.6);
  --cf-depth-hi:
      0 1px 0 rgba(255,255,255,0.10) inset,
      0 28px 60px -24px rgba(0,0,0,0.9),
      0 0 44px -12px rgba(108,123,255,0.35);
}

/* ---------- Fond « aurore » : nappes de couleur qui dérivent ------------ */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 22% 28%, rgba(108,123,255,0.30), transparent 65%),
    radial-gradient(32% 28% at 78% 18%, rgba(35,224,168,0.20), transparent 62%),
    radial-gradient(34% 30% at 62% 82%, rgba(62,203,255,0.20), transparent 65%),
    radial-gradient(26% 24% at 12% 78%, rgba(255,77,109,0.13), transparent 60%);
  filter: blur(58px) saturate(125%);
  opacity: 0.85;
  animation: cfAurora 26s ease-in-out infinite alternate;
}
@keyframes cfAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
[data-bs-theme="light"] body::before { opacity: 0.42; filter: blur(70px) saturate(115%); }
.sidebar, .content, .topbar { position: relative; z-index: 1; }

/* ---------- Cartes : verre dépoli + liseré lumineux --------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--cf-panel);
  border: 1px solid var(--cf-glass-brd);
  border-radius: var(--cf-r);
  box-shadow: var(--cf-depth);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,123,255,.85), rgba(35,224,168,.65), transparent);
  opacity: .75;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(108,123,255,0.34);
  box-shadow: var(--cf-depth-hi);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cf-glass-brd);
  font-weight: 650;
  letter-spacing: .015em;
  padding: .9rem 1.1rem;
}
[data-bs-theme="light"] .card {
  background: #fff;
  border-color: #e9ecf7;
  box-shadow: 0 18px 40px -28px rgba(23,27,52,.35), 0 2px 6px -3px rgba(23,27,52,.12);
}

/* ---------- Chiffres clés en dégradé ------------------------------------ */
.kpi-value {
  font-weight: 750;
  letter-spacing: -.02em;
  background: var(--cf-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-bs-theme="light"] .kpi-value { filter: saturate(1.15) brightness(.85); }

/* ---------- Navigation : pastille active + barre lumineuse -------------- */
.sidebar {
  border-right: 1px solid var(--cf-glass-brd);
  backdrop-filter: blur(16px);
}
.sidebar .nav-link {
  border-radius: var(--cf-r-sm);
  margin: 2px 8px;
  padding: .62rem .8rem;
  color: var(--cf-text-muted);
  position: relative;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.045);
  color: var(--cf-text);
  transform: translateX(3px);
}
.sidebar .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(108,123,255,.24), rgba(62,203,255,.08) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 62%;
  border-radius: 0 4px 4px 0;
  background: var(--cf-grad-accent);
  box-shadow: 0 0 14px rgba(108,123,255,.9);
}
.sidebar .nav-link i { width: 1.15rem; text-align: center; }

/* ---------- Barre supérieure : verre collant --------------------------- */
.topbar {
  background: rgba(10, 13, 30, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--cf-glass-brd);
  position: sticky;
  top: 0;
  z-index: 20;
  padding: .7rem 1.15rem;
}
[data-bs-theme="light"] .topbar { background: rgba(255,255,255,.72); }

/* ---------- Boutons ----------------------------------------------------- */
.btn {
  border-radius: var(--cf-r-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.btn-primary {
  background: var(--cf-grad-accent);
  border: none;
  color: #0a0d1c;
  box-shadow: 0 8px 20px -8px rgba(108,123,255,.9);
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(108,123,255,1);
  color: #0a0d1c;
}
.btn-primary:active { transform: translateY(0); filter: brightness(.95); }
.btn-success { box-shadow: 0 8px 20px -10px rgba(35,224,168,.9); }
.btn-danger  { box-shadow: 0 8px 20px -10px rgba(255,77,109,.9); }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info {
  border-color: var(--cf-glass-brd);
  backdrop-filter: blur(6px);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover {
  transform: translateY(-1px);
}

/* ---------- Tableaux ---------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  text-transform: uppercase;
  font-size: .69rem;
  letter-spacing: .09em;
  color: var(--cf-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--cf-glass-brd);
  background: rgba(255,255,255,.02);
  padding: .8rem 1rem;
  white-space: nowrap;
}
.table > tbody > tr { transition: background .18s ease; }
.table > tbody > tr:hover > * { background: rgba(108,123,255,.07); }
.table > tbody > tr > td {
  border-color: rgba(255,255,255,.05);
  padding: .78rem 1rem;
  vertical-align: middle;
}

/* ---------- Badges ------------------------------------------------------ */
.badge {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .015em;
  padding: .4em .75em;
}

/* ---------- Champs de saisie ------------------------------------------- */
.form-control, .form-select {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--cf-glass-brd);
  border-radius: var(--cf-r-sm);
  color: var(--cf-text);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(108,123,255,.65);
  box-shadow: 0 0 0 3px rgba(108,123,255,.16);
  color: var(--cf-text);
}
.form-control::placeholder { color: rgba(138,145,179,.65); }
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background: #fff; border-color: #e3e7f5; }
.input-group-text {
  background: rgba(255,255,255,.04);
  border-color: var(--cf-glass-brd);
  color: var(--cf-text-muted);
}

/* ---------- Fenêtres modales ------------------------------------------- */
.modal-content {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--cf-panel);
  border: 1px solid var(--cf-glass-brd);
  border-radius: var(--cf-r);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
  backdrop-filter: blur(20px) saturate(150%);
}
.modal-header, .modal-footer { border-color: var(--cf-glass-brd); }
.modal-backdrop.show { opacity: .72; }

/* ---------- Alertes ----------------------------------------------------- */
.alert {
  border: 1px solid var(--cf-glass-brd);
  border-left-width: 3px;
  border-radius: var(--cf-r-sm);
  backdrop-filter: blur(10px);
}

/* ---------- Écran de connexion / inscription --------------------------- */
.cf-login-card {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(12,16,36,.82);
  border: 1px solid var(--cf-glass-brd);
  border-radius: 26px;
  box-shadow: 0 50px 110px -40px rgba(0,0,0,.95), 0 0 70px -30px rgba(108,123,255,.55);
  backdrop-filter: blur(26px) saturate(160%);
  padding: 2.3rem 2.1rem;
  position: relative;
  overflow: hidden;
}
.cf-login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,123,255,.95), rgba(35,224,168,.7), transparent);
}
.cf-login-brand { font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.cf-logo--lg .cf-logo-svg { filter: drop-shadow(0 8px 22px rgba(108,123,255,.65)); }

/* ---------- Écran de bienvenue ----------------------------------------- */
.cf-welcome-title {
  font-size: 1.6rem !important;
  background: var(--cf-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   CORRECTIFS + ANIMATIONS (2e passe)
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Lisibilité du bouton « Consulter » (btn-info) --------------
   Il ressortait en cyan avec un texte peu contrasté : on passe sur un
   dégradé maîtrisé avec un texte sombre et gras, vraiment lisible. */
.btn-info {
  background: linear-gradient(135deg, #3ecbff 0%, #23e0a8 100%);
  border: none;
  color: #06202b !important;
  font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(62,203,255,.9);
}
.btn-info:hover {
  background: linear-gradient(135deg, #55d4ff 0%, #37e8b6 100%);
  color: #06202b !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(62,203,255,1);
}

/* ---------- Alignement de la colonne Actions ---------------------------
   Le bouton « Consulter » et le groupe d'icônes n'avaient pas la même
   hauteur ni le même axe : on les met sur une seule ligne alignée. */
td.text-end > .btn,
td.text-end > form,
td.text-end > .btn-group { vertical-align: middle; }
td.text-end {
  white-space: nowrap;
}
td.text-end .btn-group { display: inline-flex; align-items: stretch; }
td.text-end .btn-group > form { display: flex; }
td.text-end .btn-group > form > .btn { height: 100%; border-radius: 0; }
td.text-end .btn-sm { padding: .34rem .6rem; line-height: 1.35; }
td.text-end .btn-group > .btn,
td.text-end .btn-group > form > .btn { min-width: 34px; }

/* Icônes d'action : réaction nette au survol */
td.text-end .btn-group .btn i { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
td.text-end .btn-group .btn:hover i { transform: scale(1.22); }
td.text-end .btn-group .btn:hover { z-index: 2; }

/* ---------- Entrée en scène des cartes --------------------------------- */
@keyframes cfCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card { animation: cfCardIn .5s cubic-bezier(.2,.8,.2,1) both; }
.row > [class*="col-"]:nth-child(1) .card { animation-delay: .02s; }
.row > [class*="col-"]:nth-child(2) .card { animation-delay: .08s; }
.row > [class*="col-"]:nth-child(3) .card { animation-delay: .14s; }
.row > [class*="col-"]:nth-child(4) .card { animation-delay: .20s; }
.row > [class*="col-"]:nth-child(5) .card { animation-delay: .26s; }
.row > [class*="col-"]:nth-child(6) .card { animation-delay: .32s; }

/* ---------- Entrée en cascade des lignes de tableau -------------------- */
@keyframes cfRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.table > tbody > tr { animation: cfRowIn .42s cubic-bezier(.2,.8,.2,1) both; }
.table > tbody > tr:nth-child(1)  { animation-delay: .03s; }
.table > tbody > tr:nth-child(2)  { animation-delay: .07s; }
.table > tbody > tr:nth-child(3)  { animation-delay: .11s; }
.table > tbody > tr:nth-child(4)  { animation-delay: .15s; }
.table > tbody > tr:nth-child(5)  { animation-delay: .19s; }
.table > tbody > tr:nth-child(6)  { animation-delay: .23s; }
.table > tbody > tr:nth-child(7)  { animation-delay: .27s; }
.table > tbody > tr:nth-child(8)  { animation-delay: .31s; }
.table > tbody > tr:nth-child(9)  { animation-delay: .35s; }
.table > tbody > tr:nth-child(n+10) { animation-delay: .38s; }

/* Liseré d'accent qui apparaît sur la ligne survolée */
.table > tbody > tr > td:first-child { position: relative; }
.table > tbody > tr > td:first-child::before {
  content: "";
  position: absolute; left: 0; top: 12%;
  width: 2px; height: 76%; border-radius: 0 3px 3px 0;
  background: var(--cf-grad-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.table > tbody > tr:hover > td:first-child::before { transform: scaleY(1); }

/* ---------- Reflet qui balaie les boutons au survol -------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---------- Pastilles de statut vivantes ------------------------------- */
@keyframes cfBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(255,77,109,0); }
}
.badge.bg-danger { animation: cfBadgePulse 2.4s ease-in-out infinite; }
@keyframes cfBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35,224,168,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(35,224,168,0); }
}
.badge.bg-success { animation: cfBadgeGlow 3s ease-in-out infinite; }

/* ---------- Pastille de crédit : respiration --------------------------- */
@keyframes cfCreditBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
#credit-chip { transition: background .3s ease; }
#credit-chip.bg-danger { animation: cfCreditBreathe 1.6s ease-in-out infinite; }

/* ---------- Halo qui suit l'en-tête de carte --------------------------- */
.card-header i { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-header i { transform: scale(1.15) rotate(-4deg); }

/* ---------- Apparition douce du contenu de page ------------------------ */
@keyframes cfPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.container-fluid.cf-page-fade { animation: cfPageIn .38s ease both; }

/* ---------- Liens de navigation : icône qui avance --------------------- */
.sidebar .nav-link i { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.sidebar .nav-link:hover i { transform: translateX(2px) scale(1.12); }

/* ---------- Messagerie interne (fil de discussion) --------------------- */
.cf-chat {
  max-height: 58vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-right: .25rem;
}
.cf-msg { display: flex; }
.cf-msg--mine { justify-content: flex-end; }
.cf-msg--other { justify-content: flex-start; }
.cf-msg-bubble {
  max-width: 78%;
  padding: .65rem .85rem;
  border-radius: 16px;
  border: 1px solid var(--cf-glass-brd);
  background: rgba(255,255,255,.045);
  animation: cfMsgIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.cf-msg--mine .cf-msg-bubble {
  background: linear-gradient(135deg, rgba(108,123,255,.30), rgba(62,203,255,.16));
  border-color: rgba(108,123,255,.42);
  border-bottom-right-radius: 5px;
}
.cf-msg--other .cf-msg-bubble { border-bottom-left-radius: 5px; }
.cf-msg-who { font-size: .69rem; font-weight: 700; color: var(--cf-text-muted); margin-bottom: .22rem; }
.cf-msg-body { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.cf-msg-time { font-size: .65rem; color: var(--cf-text-muted); text-align: right; margin-top: .25rem; }
@keyframes cfMsgIn {
  from { opacity: 0; transform: translateY(7px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 991.98px) {
  .cf-chat { max-height: 62vh; }
  .cf-msg-bubble { max-width: 88%; }
}

/* ══════════════════════════════════════════════════════════════════════
   VERSION MOBILE / TABLETTE
   La sidebar fixe de 250px rendait le panel inutilisable sur téléphone :
   elle devient un TIROIR COULISSANT ouvert par un bouton hamburger, et le
   contenu passe en pleine largeur avec des cibles tactiles agrandies.
   ══════════════════════════════════════════════════════════════════════ */

/* Boutons du tiroir : masqués sur grand écran, affichés en mobile */
.cf-nav-toggle { display: none; }
.cf-nav-overlay { display: none; }
.cf-nav-close { display: none; }

@media (max-width: 991.98px) {
  /* --- Tiroir de navigation --- */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 268px;
    min-height: 100vh;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    z-index: 1045;
    box-shadow: 12px 0 40px rgba(0,0,0,.6);
  }
  body.cf-nav-open .sidebar { transform: translateX(0); }

  /* Une ancienne règle (max-width:768px) réduisait la sidebar à 72px et
     MASQUAIT les libellés : dans un tiroir, on veut le texte lisible. */
  .sidebar-brand span,
  .sidebar .nav-link span { display: inline !important; }
  .sidebar .nav-link { font-size: .95rem; padding: .72rem .85rem; }
  .sidebar-brand {
    display: flex; align-items: center; gap: .5rem;
    padding: 1rem .9rem; position: relative;
  }

  /* Bouton de fermeture du tiroir */
  .cf-nav-close {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    position: absolute; top: .85rem; right: .7rem;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid var(--cf-glass-brd);
    background: rgba(255,255,255,.06);
    color: var(--cf-text);
  }
  .cf-nav-close:active { transform: scale(.93); }

  .cf-nav-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(2,3,9,.62);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1040;
  }
  body.cf-nav-open .cf-nav-overlay { opacity: 1; pointer-events: auto; }
  body.cf-nav-open { overflow: hidden; }

  .cf-nav-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    border: 1px solid var(--cf-glass-brd);
    background: rgba(255,255,255,.05);
    color: var(--cf-text);
    font-size: 1.15rem;
    flex: 0 0 auto;
  }
  .cf-nav-toggle:active { transform: scale(.94); }

  /* --- Contenu pleine largeur --- */
  .content { width: 100%; min-width: 0; }
  .topbar { padding: .55rem .7rem; gap: .5rem; }
  .topbar h5 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .container-fluid { padding-left: .7rem; padding-right: .7rem; }

  /* --- Densité adaptée au pouce --- */
  .card { border-radius: 14px; }
  .card-body { padding: .9rem; }
  .table > thead th { padding: .6rem .55rem; font-size: .62rem; }
  .table > tbody > tr > td { padding: .62rem .55rem; font-size: .86rem; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  td.text-end .btn-group > .btn,
  td.text-end .btn-group > form > .btn { min-width: 40px; }
  .modal-dialog { margin: .5rem; }
  .form-control, .form-select { font-size: 16px; } /* évite le zoom auto iOS */

  /* --- Allègement visuel (performance sur mobile) --- */
  .cf-bg-phone, .cf-bg-phone--app { display: none; }
  body::before { filter: blur(46px) saturate(115%); opacity: .6; }
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .card:hover { transform: none; }
}

@media (max-width: 575.98px) {
  .cf-login-card { padding: 1.5rem 1.15rem; border-radius: 20px; }
  .topbar .cf-user-chip span, .topbar #ami-live-badge { font-size: .72rem; }
  .card-header { padding: .75rem .85rem; font-size: .92rem; }
}

/* ---------- Accessibilité : respecter « animations réduites » ----------
   Tout ce qui bouge est désactivé si le système le demande. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .card, .btn, .sidebar .nav-link { transition: none; }
  .card,
  .table > tbody > tr,
  .container-fluid.cf-page-fade { animation: none !important; }
  .badge.bg-danger, .badge.bg-success, #credit-chip.bg-danger { animation: none !important; }
  .btn::after { display: none; }
}