/* ───────────────────────────────────────────────────────────
   Variables & base
   ─────────────────────────────────────────────────────────── */
:root {
  --bg:#0b1320;
  --card:#111827;
  --text:#e5e7eb;
  --accent:#67aaf9;
  --line:#1b2a41;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0f172a;
  color:var(--text);
}

/* ───────────────────────────────────────────────────────────
   Header / nav
   ─────────────────────────────────────────────────────────── */
.topbar{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#0b1320; border-bottom:1px solid #1f2937;
}
.brand{ font-weight:700 }
.menu a{ color:#9ca3af; text-decoration:none; margin:0 8px }
.menu a:hover{ color:#fff }

/* ───────────────────────────────────────────────────────────
   Page scaffolding / cards / flash
   ─────────────────────────────────────────────────────────── */
.page{ max-width:1100px; margin:24px auto; padding:0 16px }
.cards{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
.card{
  display:block; padding:18px; border-radius:12px;
  background:#111827; color:#e5e7eb; text-decoration:none; border:1px solid #1f2937;
}
.card:hover{ border-color:var(--accent) }
.flash{ margin:12px 0 }
.flash-item{ padding:10px;border-radius:8px;background:#1f2937;margin-bottom:8px }

/* ───────────────────────────────────────────────────────────
   TOPBAR Leads (sticky) — version 1 ligne
   ─────────────────────────────────────────────────────────── */
/* Collée sous la navbar principale */
.leads-topbar{
  position: sticky; top: 64px; z-index: 50;
  padding: 8px 10px; margin-bottom: 10px;
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12,20,30,.96), rgba(12,20,30,.92));
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  overflow: visible; /* IMPORTANT pour le calendrier */
}

/* Une seule ligne, scroll horizontal si besoin */
.topbar-row{
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: visible;
  scrollbar-width: thin;
}

/* Groupe filtres (utilisé par grouped.html) */
.filters-wrap{
  display:flex; align-items:center; gap:8px;
  flex-wrap: nowrap; overflow-x:auto; overflow-y:visible;
  scrollbar-width: thin;
}

/* Bloc bulk aligné sur la même ligne */
.bulk-inline{
  display:flex; align-items:center; gap:8px;
  flex-wrap: nowrap; overflow-x:auto; overflow-y:visible;
}

.spacer{ flex: 1 1 auto; min-width:8px; }
.bulk-summary, .bulk-count{ color:#c8d6e5; min-width:140px; text-align:right; }

/* Inputs compacts */
.inp{
  background:#fff; color:#122033;
  border:1px solid #cfd6e1; border-radius:14px;
}
.inp--xs{ padding: 8px 10px; max-width: 110px; } /* tri */
.inp--sm{ padding:10px 12px; max-width: 260px; } /* recherche réduite */
.inp--md{ padding:10px 12px; max-width: 200px; } /* selects + période */
.inp--tight{ padding:8px 10px; }
.inp.w-full{ width:100% }
.inp, .btn, select { height: 40px; }

/* Boutons */
.btn{
  border-radius:14px; padding:0 14px;
  border:1px solid #cbd5e1; background:#46556a; color:#eaf1ff; cursor:pointer;
  white-space: nowrap;
}
.btn-ghost{ background:#2b3647; }
.btn-primary{ background:#1492ff; border-color:#1492ff; color:#fff; }
.btn.btn-sm{ padding:8px 10px; height: auto; }
.btn-chip{ background:#233042; color:#eaf1ff; border:1px solid #33465f; }

/* Mobile: possibilité de réduire (ne laisser que le bouton Filtres + bulk) */
.only-mobile{ display:none; }
@media (max-width: 900px){
  .only-mobile{ display:inline-flex; }
  .leads-topbar[data-expanded="false"] .filters-wrap{ display: none !important; }
  .leads-topbar[data-expanded="false"] #filters-clear{ display:none !important; }
  .topbar-row{ overflow-x: auto; }
}

/* ───────────────────────────────────────────────────────────
   (Compat héritée) Grille ancienne topbar — conservée si utilisée ailleurs
   ─────────────────────────────────────────────────────────── */
.topbar-grid{
  display:grid; gap:10px; align-items:center;
  grid-template-columns: 380px 1fr auto; /* recherche réduite */
}
@media (max-width:1100px){
  .topbar-grid{ grid-template-columns:1fr; }
}
.filters-inline{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actions-inline{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }

/* ───────────────────────────────────────────────────────────
   Stages / badges / sticky header
   ─────────────────────────────────────────────────────────── */
.stage__header{ position:sticky; top:56px; z-index:2; backdrop-filter:blur(6px); }
.badge{ font-weight:600; padding:2px 8px; border-radius:10px; background:#0f2745; }
.stage__count.badge{ background:#0f2745; border-radius:12px; padding:2px 8px; font-weight:700; }

/* ───────────────────────────────────────────────────────────
   Table leads (desktop)
   ─────────────────────────────────────────────────────────── */
.table-leads{ width:100%; border-collapse:separate; border-spacing:0; }
.table-leads thead th{
  position:sticky; top:96px; /* 64 sticky + ~32 topbar interne */
  background:#0b1420; z-index:1; padding:10px 12px; font-weight:600;
}
.table-leads tbody td{ padding:10px 12px; border-top:1px solid rgba(255,255,255,.06); }
.table-leads tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }
.table-leads td, .table-leads th{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

/* Vidage propre */
.stage__body:empty{ padding:0; }
.empty{ color:#9cb3c9; font-style:italic; padding:14px 18px; }

/* ───────────────────────────────────────────────────────────
   Responsive : cartes (< 900px)
   ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .table-leads thead{ display:none; }
  .table-leads, .table-leads tbody, .table-leads tr, .table-leads td{
    display:block; width:100%;
  }
  .table-leads tr{
    background:#0c1826; border:1px solid var(--line);
    border-radius:14px; margin:10px 0; padding:8px 0;
  }
  .table-leads td{
    border:none; display:flex; justify-content:space-between; gap:10px; padding:8px 14px;
  }
  .table-leads td::before{
    content: attr(data-label);
    color:#9bb3c9; font-weight:600;
  }
  .table-leads td[data-label="#"]{ justify-content:flex-start; }
  .table-leads td[data-label="#"]::before{ content:""; }
}

/* ───────────────────────────────────────────────────────────
   Litepicker (z-index + presets panel)
   ─────────────────────────────────────────────────────────── */
.litepicker{ z-index: 9999; } /* au-dessus de la topbar & modales si besoin */

/* panneau "presets" injecté par le JS (optionnel) */
.lp-presets{
  padding:10px; border-right:1px solid #e5e7eb;
  display:flex; flex-direction:column; gap:6px;
}
.lp-presets .lp-title{
  font-weight:700; margin:6px 0 2px; color:#4b5563;
}
.lp-presets button{
  text-align:left; background:#f3f4f6; border:1px solid #e5e7eb;
  border-radius:8px; padding:8px 10px; cursor:pointer;
}
.lp-presets button:hover{ background:#e5eefc; border-color:#cde0ff; }
@media (max-width:900px){
  .litepicker{ grid-template-columns:1fr !important; }
  .lp-presets{ order:2; border-right:0; border-top:1px solid #e5e7eb; }
}

/* ───────────────────────────────────────────────────────────
   Divers utilitaires
   ─────────────────────────────────────────────────────────── */
.hidden{ display:none !important; }
.fx1{ flex:1 }
.tag{
  background:#111827; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:999px; padding:2px 8px; font-size:12px;
}
.icon{
  background:#111827; border:1px solid #1f2937; color:#e5e7eb;
  border-radius:8px; width:28px; height:28px;
}