/**
 * Spruce Design System - Based on Official Brandbook 2025
 * Maquettes: WhatsApp Images April 2026
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================
   DESIGN TOKENS
   ========================================== */

:root {
  /* Colors - Official Brandbook */
  --color-primary: #57ff96;        /* Accent vert néon */
  /* Texte/icône POSÉ SUR le primaire (contraste). Sombre car le primaire est clair (néon).
     À garder cohérent avec --color-primary si on change la palette. */
  --color-on-primary: #0a0a0a;
  --color-secondary: #1a4d2e;      /* Vert foncé (accent secondaire) */
  --color-tertiary: #c2ffd9;       /* Vert clair (accent) */
  /* Fond des boutons PLEINS au survol. Jeton dédié plutôt que --color-tertiary : le survol doit
     pouvoir évoluer par thème sans déplacer un accent utilisé ailleurs. En sombre, valeur identique
     à l'actuelle — rien ne change visuellement. */
  --color-primary-hover: #c2ffd9;
  --color-bg-dark: #0a0a0a;        /* Le foncé (noir profond) */
  --color-bg-light: #fbfbfb;       /* Le clair (blanc cassé) */

  /* Surfaces — CHARBON NEUTRE (maquette dark) : le vert est réservé à l'accent */
  --color-bg-main: #0f0f0f;        /* fond app (le plus sombre) */
  --color-bg-sidebar: #161616;     /* sidebar */
  --color-bg-card: #1c1c1c;        /* cartes */
  --color-bg-card-hover: #242424;  /* hover / élevé */
  --color-bg-input: #161616;       /* champs */
  --color-border: #303030;         /* bordures (gris neutre) */
  --color-border-subtle: rgba(255, 255, 255, 0.08); /* bordures faibles neutres */

  /* Text colors — neutres (maquette) */
  --color-text-primary: #ffffff;
  --color-text-secondary: #d4d4d4;             /* gris clair (était vert #c2ffd9) */
  --color-text-tertiary: rgba(255, 255, 255, 0.52);
  --color-text-muted: rgba(255, 255, 255, 0.34);

  /* Status colors (from maquettes) */
  --color-blue: #4a9eff;
  --color-orange: #ff9f4a;
  --color-yellow: #ffd84a;
  --color-green: #57ff96;
  --color-red: #ff6b6b;
  --color-purple: #b794f6;
  --color-cyan: #06b6d4;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 240px;
  /* Deuxième colonne de navigation. 0 par défaut : tant qu'aucun écran ne l'ouvre, la mise en
     page est exactement celle d'avant. `body.has-subrail` la déplie. */
  --subrail-width: 0px;
  --subrail-open: 216px;
  --header-height: 64px;
  /* Largeur max du contenu des pages (centre avec marges G/D, comme la maquette). Tunable. */
  --content-max-width: 1180px;
}

/* ==========================================
   RESET & BASE
   ========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-tertiary);
}

/* ==========================================
   LAYOUT
   ========================================== */

.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  /* --bg-job-banner-h : hauteur RÉELLE du bandeau de tâche en arrière-plan (0 s'il n'y en a pas),
     publiée par notifications.js. Tout ce qui est ancré en haut se décale d'autant, au lieu de se
     faire recouvrir par un bandeau `position:fixed`. */
  top: var(--bg-job-banner-h, 0px);
  left: 0;
  height: calc(100vh - var(--bg-job-banner-h, 0px));
  z-index: 100;
}

.sidebar-logo {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* Logo sidebar selon le thème : néon (sombre) / vert foncé #1a4d2e (clair) */
.sidebar-logo-img--light { display: none; }
[data-theme="light"] .sidebar-logo-img--dark { display: none; }
[data-theme="light"] .sidebar-logo-img--light { display: inline-block; }

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  fill: var(--color-primary);
}

.sidebar-logo-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: var(--space-6);
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  padding: 18px var(--space-3) 8px;
  margin-bottom: 0;
  white-space: nowrap;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  /* Inactif neutre (comme la maquette) au lieu du vert pâle --color-text-secondary :
     le vert est réservé à l'item actif, qui ressort ainsi nettement. Theme-safe. */
  color: color-mix(in srgb, var(--color-text-primary) 68%, transparent);
  font-size: 0.9rem;
  font-weight: 450;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.sidebar-nav-item:hover {
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  color: var(--color-text-primary);
}

.sidebar-nav-item.active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 550;
}

.sidebar-nav-item.active .sidebar-nav-item-icon {
  color: var(--color-primary);
}

/* Barre d'accent verticale au ras du bord gauche de la sidebar (style maquette) */
.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

.sidebar-nav-item-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke-width: 1.8;
}

.sidebar-nav-item-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

/* Sidebar sub-items (Préparation / Setting tabs) — alignés sous le texte du parent */
.sidebar-sub-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: calc(var(--space-3) + 19px + var(--space-3));
}

.sidebar-sub-item {
  padding: 7px var(--space-3);
  font-size: 0.84rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.sidebar-sub-item:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

.sidebar-sub-item.active {
  color: var(--color-primary);
  font-weight: 550;
}

/* ── Le rail de la sous-navigation ──────────────────────────────────────────────
   Un filet vertical relie les sous-entrées à leur parent : la hiérarchie se lit sans
   avoir à comparer les indentations. Le curseur est un segment qui GLISSE le long de ce
   filet d'une entrée à l'autre — il ne clignote pas d'une position à l'autre, et c'est ce
   déplacement qui dit « on est passé d'un module à un autre », pas une couleur qui change.
   Le filet s'aligne sur le centre de l'icône du parent (space-3 + moitié des 19 px). */
.sidebar-sub-items {
  position: relative;
}

.sidebar-sub-items::before {
  content: '';
  position: absolute;
  left: calc(var(--space-3) + 9px);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border-subtle);
}

.sidebar-sub-item {
  position: relative;
}

/* Le curseur : ancré sur le filet, donc décalé vers la gauche hors de la boîte de l'entrée.
   scaleY(0) plutôt que opacity : il naît du filet et s'y rétracte, il n'apparaît pas dessus. */
.sidebar-sub-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-3) - 10px);
  top: 50%;
  width: 2px;
  height: 15px;
  border-radius: 1px;
  background: var(--color-primary);
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--transition-base);
}

.sidebar-sub-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-sub-item::before { transition: none; }
}

.sidebar-user {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-plan {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

/* ===== Carte « Mon Allié » (style maquette .nav-allie) ===== */
.nav-allie {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.nav-allie:hover {
  background: var(--color-bg-card-hover);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.nav-allie.active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.nav-allie.active .nav-allie__title { color: var(--color-primary); }
.nav-allie__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.nav-allie__icon svg { width: 17px; height: 17px; }
.nav-allie__meta { min-width: 0; flex: 1; padding-right: 10px; }
.nav-allie__title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.nav-allie__sub {
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  line-height: 1.35;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-allie__dot {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: navAlliePulse 2.4s infinite;
}
@keyframes navAlliePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== Widget « Mise en route » (style maquette .onboard) ===== */
.onboard {
  margin: 8px 0 10px;
  padding: 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}
.onboard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text-primary);
  padding: 0;
  text-align: left;
}
.onboard:not(.collapsed) .onboard__head { margin-bottom: 12px; }
.onboard__ring { width: 36px; height: 36px; flex-shrink: 0; color: var(--color-text-primary); }
.onboard__ring .ring-track { stroke: color-mix(in srgb, var(--color-text-primary) 13%, transparent); }
.onboard__ring .ring-prog { stroke: var(--color-primary); transition: stroke-dashoffset 0.4s ease; }
.onboard__meta { flex: 1; min-width: 0; }
.onboard__title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-primary); }
.onboard__sub { font-size: 0.72rem; color: var(--color-text-tertiary); }
.onboard__chevron {
  width: 16px; height: 16px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.onboard.collapsed .onboard__chevron { transform: rotate(-90deg); }
.onboard.collapsed .onboard__steps { display: none; }
.onboard__steps { display: flex; flex-direction: column; gap: 2px; }
.onboard-step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  padding: 4px 0;
}
/* Étape cliquable (raccourci vers l'écran de l'action) */
.onboard-step--nav {
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 7px;
  transition: background .15s ease, color .15s ease;
}
.onboard-step--nav:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.onboard-step--nav:hover .onboard-step__label { color: var(--color-primary); }
.onboard-step--nav:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 1px; }

/* Barre de progression simulée (fauxProgressBar) — avance en continu, jamais figée */
.faux-progress { margin-top: 14px; }
.faux-progress__track { height: 7px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-radius: 6px; overflow: hidden; }
.faux-progress__fill { height: 100%; width: 6%; background: var(--color-primary); border-radius: 6px; transition: width .5s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.faux-progress__label { font-size: .78rem; color: var(--color-text-tertiary); margin-top: 7px; text-align: center; }
.onboard-step__check {
  width: 17px; height: 17px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.onboard-step.done .onboard-step__check { background: var(--color-primary); color: var(--color-on-primary); }
.onboard-step:not(.done) .onboard-step__check {
  border: 1.5px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent);
  color: var(--color-text-tertiary);
}
.onboard-step.done { color: var(--color-text-tertiary); }
.onboard-step.done .onboard-step__label { text-decoration: line-through; }

/* Main content */
.main-content {
  /* Décalé sous le bandeau de tâche (0 quand il n'y en a pas) — il n'est plus recouvert. */
  padding-top: var(--bg-job-banner-h, 0px);
  margin-left: calc(var(--sidebar-width) + var(--subrail-width));
  width: calc(100vw - var(--sidebar-width) - var(--subrail-width));
  max-width: calc(100vw - var(--sidebar-width) - var(--subrail-width));
  transition: margin-left var(--transition-base), width var(--transition-base), max-width var(--transition-base);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

/* Background logo watermark */
.main-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  width: calc(100vw - var(--sidebar-width));
  height: 100vh;
  background: url('/img/logo-spruce.svg') center / 30% no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: -1;
}

.main-header {
  height: var(--header-height);
  background: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: var(--bg-job-banner-h, 0px);
  z-index: 50;
}

.main-header-title {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  text-align: right;
}

.main-body {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8);
}

/* Mode affilié (accountType AFFILIATE) : masque TOUTE la navigation prospection. En CSS + !important
   pour être INANNULABLE — applySidebarRestrictions/syncEntitlements réécrivent style.display en inline
   (sans !important) et ré-affichaient sinon « Préparation », « Mise en route », etc. */
body.spruce-affiliate-only .sidebar-nav-item:not(#navAffiliate):not(.nav-affiliate-only),
body.spruce-affiliate-only .sidebar-sub-item,
body.spruce-affiliate-only .sidebar-section-title,
body.spruce-affiliate-only .nav-allie,
body.spruce-affiliate-only .onboard,
body.spruce-affiliate-only #prepSubItems,
body.spruce-affiliate-only #settingSubItems,
body.spruce-affiliate-only #campaignToggleHeader,
body.spruce-affiliate-only #accountSwitcherWrapper,
/* Visite guidée : un affilié n'a qu'un écran, la balade n'a aucun sens pour lui. */
body.spruce-affiliate-only #tourWrapper {
  display: none !important;
}
body.spruce-affiliate-only #navAffiliate,
body.spruce-affiliate-only .nav-affiliate-only { display: flex !important; }
body.spruce-affiliate-only #navAffLogout { align-items: center; }

/* Page header */
.page-header {
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.page-subtitle {
  font-size: 1rem;
  color: var(--color-text-tertiary);
}

/* ==========================================
   COMPONENTS
   ========================================== */

/* Card */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: rgba(87, 255, 150, 0.2);
}

.card-header {
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.card-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* SURVOL D'UN BOUTON PLEIN — règle de la maison : le fond change, le TEXTE JAMAIS.
   C'est l'inversion de cette règle qui rendait le bouton « Envoyer » du Setting Manuel illisible
   (texte vert sur fond vert). Le halo était en dur sur le vert néon du thème sombre : il est
   désormais dérivé du primaire, donc juste dans les deux thèmes — en sombre, la couleur obtenue
   est exactement l'ancienne. */
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Micro-interaction : l'icône avance légèrement, le bouton s'enfonce au clic. Discret, et ça donne
   au geste une direction — surtout sur un bouton d'envoi. */
.btn-primary i,
.btn-primary svg { transition: transform var(--transition-fast); }
.btn-primary:hover:not(:disabled) i,
.btn-primary:hover:not(:disabled) svg { transform: translateX(2px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

/* Respecte le réglage système « réduire les animations » : on garde le changement de couleur,
   qui porte l'information, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover:not(:disabled) { transform: none; }
  .btn-primary:hover:not(:disabled) i,
  .btn-primary:hover:not(:disabled) svg { transform: none; }
}

.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-card);
  color: var(--color-primary);
}

/* Bouton secondaire « contour » : fond transparent + bordure visible, hover vert (DA). */
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-bg-card);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1.0625rem;
}

/* Pills de choix (style maquette Portail) — segmented selector, ex: frequence des notifications.
   Actif = rempli vert (DA Spruce). Adaptatif aux 2 themes via les tokens. */
.pill-choice-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.pill-choice {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.14s;
  font-family: inherit;
}
.pill-choice:hover:not(.active):not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}
.pill-choice.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}
.pill-choice:disabled { opacity: 0.5; cursor: default; }

/* Bouton prospection navbar — style EXACT de la maquette Portail (.campaign-toggle + .status-dot).
   Actif = pill vert clair + dot vert pulsant. Pause = pill orange + dot orange pulsant. */
.campaign-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: var(--color-primary);
  font-size: 0.8125rem; font-weight: 600; font-family: inherit; white-space: nowrap;
  cursor: pointer; transition: background 0.16s, border-color 0.16s;
}
.campaign-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.campaign-toggle:disabled { cursor: default; opacity: 0.7; }
.campaign-toggle.paused {
  background: color-mix(in srgb, var(--color-orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-orange) 40%, transparent);
  color: var(--color-orange);
}
.campaign-toggle.paused:hover:not(:disabled) { background: color-mix(in srgb, var(--color-orange) 20%, transparent); }

.campaign-toggle .status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-primary);
  animation: ct-pulse-green 2.4s infinite;
}
.campaign-toggle.paused .status-dot {
  background: var(--color-orange);
  animation: ct-pulse-orange 2.4s infinite;
}
@keyframes ct-pulse-green {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ct-pulse-orange {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-orange) 45%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Input */
.input-group {
  margin-bottom: var(--space-4);
}

.input-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87, 255, 150, 0.1);
}

.input::placeholder {
  color: var(--color-text-muted);
}

textarea.input {
  resize: none;
  min-height: 60px;
  overflow: hidden;
  field-sizing: content;
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

select.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87, 255, 150, 0.1);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
}

.badge-primary { background: var(--color-primary); color: var(--color-on-primary); }
.badge-blue { background: var(--color-blue); color: white; }
/* Badge « persona » (correspondance) : NEUTRE (plus bleu) + TRONQUÉ (max-width + ellipsis) pour ne
   jamais déborder de la carte quand le nom du persona est long. Utilisé dans Réponses + Setting. */
.badge-persona {
  background: var(--color-bg-card-hover);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.badge-orange { background: var(--color-orange); color: white; }
.badge-yellow { background: var(--color-yellow); color: var(--color-bg-dark); }
.badge-green { background: var(--color-green); color: var(--color-bg-dark); }
.badge-red { background: var(--color-red); color: white; }
.badge-purple { background: var(--color-purple); color: white; }

/* KPI Card (from maquettes) */
.kpi-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}

.kpi-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.kpi-label {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Alert */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.alert-info {
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: #4a9eff;
}

.alert-success {
  background: rgba(87, 255, 150, 0.1);
  border: 1px solid rgba(87, 255, 150, 0.3);
  color: var(--color-primary);
}

.alert-warning {
  background: rgba(255, 212, 74, 0.1);
  border: 1px solid rgba(255, 212, 74, 0.3);
  color: var(--color-yellow);
}

.alert-danger {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: var(--color-red);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  transition: var(--transition-base);
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-text-tertiary);
  transition: var(--transition-base);
  border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: var(--color-bg-dark);
}

/* Checkbox vert fluo */
.spruce-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all .15s ease;
  vertical-align: middle;
}
.spruce-cb:hover { border-color: var(--color-primary); }
.spruce-cb:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.spruce-cb:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid var(--color-bg-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   UTILITIES
   ========================================== */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

.cursor-pointer { cursor: pointer; }

.hidden { display: none !important; }

/* ==========================================
   TABS
   ========================================== */

.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 4px;
  width: fit-content;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--color-text-secondary);
  background: rgba(87, 255, 150, 0.05);
}

.tab-btn.active {
  background: var(--color-secondary);
  color: var(--color-primary);
  font-weight: 600;
}

.tab-btn .tab-count {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.tab-btn .tab-count.red { background: var(--color-red); color: white; }
.tab-btn .tab-count.muted { background: var(--color-text-tertiary); color: var(--color-bg-dark); }

/* ==========================================
   KANBAN / SCROLL CONTAINER
   ========================================== */

.kanban-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.kanban-scroll::-webkit-scrollbar { height: 6px; }
.kanban-scroll::-webkit-scrollbar-track { background: transparent; }
.kanban-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.kanban-col {
  min-width: 160px;
  flex: 1;
  flex-shrink: 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.kanban-col-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kanban-col-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Parcours (#kanbanBoard) + Closing (#closingBoard) : colonnes larges + titres sur UNE seule
   ligne, le scroll horizontal gere le debordement. La specificite #id prime sur les overrides
   responsive .kanban-col plus bas. */
#kanbanBoard .kanban-col,
#closingBoard .kanban-col {
  min-width: 280px;
  flex: 1 0 280px;
}
#kanbanBoard .kanban-col-header,
#closingBoard .kanban-col-header {
  flex-wrap: nowrap;
}
#kanbanBoard .kanban-col-label,
#closingBoard .kanban-col-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kanbanBoard .kanban-col-count,
#closingBoard .kanban-col-count {
  flex-shrink: 0;
  margin-left: auto;
}

/* ==========================================
   TABLE
   ========================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
}

.data-table tr {
  border-bottom: 1px solid var(--color-border-subtle);
}

.data-table tr:last-child {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(87, 255, 150, 0.02);
}

/* ==========================================
   KPI GRID (responsive)
   ========================================== */

.kpi-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }

.kpi-mini {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.kpi-mini-number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-mini-label {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* ==========================================
   PROSPECT AVATAR
   ========================================== */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.875rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.25rem; }

/* ==========================================
   MODAL
   ========================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  width: 1000px;
  max-width: 95vw;
  padding: 32px;
}

/* ==========================================
   PROGRESS BAR
   ========================================== */

.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--color-border-subtle);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-base);
}

/* ==========================================
   CAMPAIGN SELECTOR (Sidebar)
   ========================================== */

.sidebar-campaign-selector {
  padding: 0 var(--space-3) var(--space-2);
}

.campaign-select-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.campaign-select-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-card-hover);
}

.campaign-select-btn .campaign-select-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-select-btn .campaign-select-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.campaign-select-btn.open .campaign-select-chevron {
  transform: rotate(180deg);
}

.campaign-select-btn .campaign-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.campaign-dropdown {
  position: fixed;
  background: var(--color-bg-sidebar);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  max-height: 360px;
}

.campaign-dropdown-search {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.campaign-dropdown-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

.campaign-dropdown-search input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.campaign-dropdown-search input::placeholder {
  color: var(--color-text-muted);
}

.campaign-dropdown-list {
  flex: 1;
  max-height: 240px;
  overflow-y: auto;
}

.campaign-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.campaign-dropdown-item:hover {
  background: var(--color-bg-card-hover);
  color: var(--color-text-primary);
}

.campaign-dropdown-item.selected {
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-weight: 600;
}

.campaign-dropdown-item .cdi-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-dropdown-item .cdi-badge {
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.campaign-dropdown-create {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.campaign-dropdown-create:hover {
  background: rgba(87, 255, 150, 0.05);
}

/* Campaign picker modal items */
.camp-picker-item:hover {
  background: var(--color-bg-card-hover) !important;
}

/* ==========================================
   TOAST NOTIFICATION (bottom-right)
   ========================================== */

.toast-notification {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 1100;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  width: 360px;
  max-width: calc(100vw - 48px);
  animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toastSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.toast-notification.toast-hide {
  animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideOut {
  to { transform: translateY(20px); opacity: 0; }
}

/* ==========================================
   CONFIRM MODAL (small centered)
   ========================================== */

.confirm-modal-content {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  width: 420px;
  max-width: 95vw;
  /* Filet anti-débordement : une modale au contenu long (beaucoup de texte) ne doit jamais pousser
     ses boutons hors de l'écran. Elle se limite à la hauteur du viewport et défile en interne. */
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--space-8);
  text-align: center;
}

/* ==========================================
   AUTO-SAVE INDICATOR
   ========================================== */

.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  transition: color 0.3s, opacity 0.3s;
}

.autosave-indicator.saving {
  color: var(--color-yellow);
}

.autosave-indicator.saved {
  color: var(--color-green);
}

/* ==========================================
   STEPPER BUTTONS (+/-)
   ========================================== */

.stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-card);
  border-radius: 6px;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.stepper-btn:hover:not(:disabled) {
  background: var(--color-secondary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stepper-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================
   QUOTA PROGRESS BAR
   ========================================== */

.quota-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-input);
  border-radius: 4px;
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}

/* ==========================================
   PARTITION MODAL
   ========================================== */

.partition-row {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.partition-row:hover {
  border-color: var(--color-border-card);
}

.partition-input {
  width: 60px;
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 4px 6px;
  font-size: 0.875rem;
}

/* Hide native number spinners */
.partition-input::-webkit-outer-spin-button,
.partition-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.partition-input[type=number] {
  -moz-appearance: textfield;
}

/* ==========================================
   KANBAN CARD TRUNCATION & FIX
   ========================================== */

.kanban-col .card {
  min-width: 0;
  overflow: hidden;
}

.kanban-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-col .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.kanban-see-more {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-primary);
  cursor: pointer;
  padding: 6px 0;
  transition: color var(--transition-fast);
}

.kanban-see-more:hover {
  color: var(--color-tertiary);
}

/* ==========================================
   KPI GRID AUTO-FIT (compact)
   ========================================== */

.kpi-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* ==========================================
   PIPELINE LIST VIEW
   ========================================== */

.pipeline-list-table {
  width: 100%;
  border-collapse: collapse;
}

.pipeline-list-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-subtle);
}

.pipeline-list-table td {
  padding: 10px 12px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border-subtle);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pipeline-list-table td:last-child,
.pipeline-list-table td:nth-last-child(2) {
  overflow: visible;
  text-overflow: unset;
  max-width: none;
}

.pipeline-list-table tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pipeline-list-table tbody tr:hover td {
  background: rgba(87, 255, 150, 0.03);
}

/* ==========================================
   HAMBURGER BUTTON & SIDEBAR OVERLAY
   ========================================== */

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.hamburger-btn:hover {
  background: var(--color-bg-card);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ==========================================
   RESPONSIVE UTILITY CLASSES
   ========================================== */

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ==========================================
   RESPONSIVE: TABLET (max 1100px)
   ========================================== */

@media (max-width: 1100px) {
  .kpi-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   RESPONSIVE: KANBAN (max 1400px)
   ========================================== */

@media (max-width: 1400px) {
  .kanban-col {
    min-width: 140px;
  }
}

/* ==========================================
   RESPONSIVE: MOBILE (max 768px)
   ========================================== */

@media (max-width: 768px) {

  /* --- Hamburger visible --- */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Sidebar drawer --- */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* --- Main content full width --- */
  .main-content {
    margin-left: 0;
    width: 100vw;
    max-width: 100vw;
  }
  .main-content::before {
    left: 0;
    width: 100vw;
  }

  /* --- Header mobile --- */
  .main-header {
    padding: 0 var(--space-4);
  }

  /* --- Body padding reduced --- */
  .main-body {
    padding: var(--space-3);
  }

  /* --- Page titles smaller --- */
  .page-title, h1 {
    font-size: 1.375rem;
  }

  /* --- KPI grids stack --- */
  .kpi-grid-3 {
    grid-template-columns: 1fr;
  }
  .kpi-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-card {
    padding: var(--space-3) var(--space-4);
  }
  .kpi-number {
    font-size: 1.5rem !important;
  }

  /* --- Utility grids stack --- */
  .grid-2col,
  .grid-3col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* --- Responses split stack --- */
  .resp-split {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
  .resp-list {
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .resp-detail {
    max-height: 50vh;
  }

  /* --- IA settings grids stack --- */
  .ia-settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Kanban smaller --- */
  .kanban-col {
    min-width: 130px;
  }

  /* --- Cards thinner padding --- */
  .card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  /* --- Notification panel full-width mobile --- */
  #notifPanel {
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    right: 8px !important;
    left: 8px !important;
  }

  /* --- Tables horizontal scroll --- */
  .data-table,
  .pipeline-list-table,
  .resp-table,
  .import-result-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Import stepper compact --- */
  .import-stepper {
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px;
  }
  .import-stepper-line {
    width: 20px;
    margin: 0 4px;
  }
  .import-stepper-item {
    font-size: 0.75rem;
  }
  .import-stepper-circle {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  /* --- Import source cards stack --- */
  .import-sources-grid {
    flex-direction: column;
    align-items: center;
  }
  .import-sources-grid .import-source-card {
    width: 100%;
    max-width: 300px;
  }

  /* --- Chat bubbles wider on mobile --- */
  .resp-msg-wrap {
    max-width: 92%;
  }

  /* --- Modals full width mobile --- */
  .modal {
    max-width: calc(100vw - 32px) !important;
    margin: 16px;
  }

  /* --- Buttons touch-friendly --- */
  .btn, button, .btn-primary, .btn-outline {
    min-height: 44px;
    font-size: 0.875rem;
  }

  /* --- Stat cards --- */
  .stat-card {
    padding: var(--space-4);
  }
  .stat-card-value {
    font-size: 1.75rem;
  }

  /* --- Modal responsive --- */
  .modal-content {
    width: 100%;
    max-width: calc(100vw - 24px);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    max-height: 90vh;
    overflow-y: auto;
  }

  .confirm-modal-content {
    width: 100%;
    max-width: calc(100vw - 24px);
    padding: var(--space-4);
  }

  /* --- Prevent body scroll when sidebar open --- */
  body.sidebar-open {
    overflow: hidden;
  }
}

/* ==========================================
   RESPONSIVE: SMALL PHONE (max 480px)
   ========================================== */

@media (max-width: 480px) {
  .main-body {
    padding: var(--space-2);
  }

  .kpi-grid-4 {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .kpi-card {
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .kanban-col {
    min-width: 110px;
  }

  .import-stepper-item span {
    display: none;
  }
}

/* ==========================================
   RESPONSES SPLIT LAYOUT
   ========================================== */

.resp-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 500px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.resp-list {
  overflow-y: auto;
  border-right: 1px solid var(--color-border-subtle);
  max-height: 70vh;
}

.resp-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border-subtle);
}

.resp-list-item:hover {
  background: var(--color-bg-card-hover);
}

.resp-list-item.selected {
  background: var(--color-bg-card-hover);
  border-left: 3px solid var(--color-primary);
}

.resp-list-info {
  flex: 1;
  min-width: 0;
}

.resp-list-name {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}

.resp-list-company {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resp-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 70vh;
}

.resp-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.resp-detail-info {
  flex: 1;
  min-width: 0;
}

.resp-detail-name {
  font-weight: 700;
  font-size: 1rem;
}

.resp-detail-title {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

.resp-detail-badges {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.resp-chat-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

.resp-msg-wrap {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.resp-msg-wrap.sent {
  align-self: flex-end;
}

.resp-msg-wrap.recv {
  align-self: flex-start;
}

.resp-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
}

.resp-msg-wrap.sent .resp-msg-bubble {
  background: var(--color-secondary);
  color: var(--color-text-primary);
  border-bottom-right-radius: 4px;
}

.resp-msg-wrap.recv .resp-msg-bubble {
  background: var(--color-bg-card-hover);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}

.resp-msg-time {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.resp-msg-wrap.sent .resp-msg-time {
  text-align: right;
}

.resp-chat-input {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

.resp-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.resp-chat-input textarea {
  flex: 1;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  resize: none;
  min-height: 38px;
  max-height: 120px;
}

.resp-chat-input textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.resp-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.resp-send-btn:hover:not(:disabled) {
  background: var(--color-tertiary);
  transform: scale(1.05);
}

.resp-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.magic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-2);
}

.magic-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.magic-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: 0.9375rem;
}

/* ==========================================
   RESPONSES TABLE VIEW
   ========================================== */
.resp-table {
  width: 100%;
  border-collapse: collapse;
}
.resp-table th {
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  white-space: nowrap;
}
.resp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.resp-table-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.resp-table-row:hover {
  background: rgba(87,255,150,0.03);
}
.resp-table-prospect {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}
.resp-table-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.resp-table-jobtitle {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.resp-table-msg {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resp-table-date {
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.resp-table-enrich {
  min-width: 180px;
}
.resp-enrich-datum {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  margin-bottom: 2px;
}
.resp-enrich-datum svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.btn-enrich {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--color-green);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-green);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.btn-enrich:hover {
  background: rgba(87,255,150,0.08);
}
.btn-enrich:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.resp-table-footer {
  text-align: center;
  padding: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}
.resp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 16px;
}
.resp-back-btn:hover {
  background: var(--color-bg-card-hover);
  color: var(--color-text-primary);
}

/* ==========================================
   IMPORT WIZARD (import-v2)
   ========================================== */

/* Stepper */
.import-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 16px;
}
.import-stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.import-stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  background: var(--color-bg-input);
  border: 2px solid var(--color-border);
  color: var(--color-text-tertiary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.import-stepper-item.active .import-stepper-circle {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.import-stepper-item.done .import-stepper-circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.import-stepper-item.active,
.import-stepper-item.done {
  color: var(--color-text-primary);
}
.import-stepper-line {
  width: 40px;
  height: 2px;
  background: var(--color-border-subtle);
  margin: 0 8px;
  flex-shrink: 0;
}
.import-stepper-line.done {
  background: var(--color-primary);
}

/* Source Cards */
.import-sources-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.import-sources-grid .import-source-card {
  width: 220px;
}
.import-source-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}
.import-source-card:hover:not(.disabled) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.import-source-card.selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
}
.import-source-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.import-source-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.import-source-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}
.import-source-card-title {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}
.import-source-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.import-source-card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--color-yellow) 15%, transparent);
  color: var(--color-yellow);
}

/* Progress bar */
.import-progress-wrap {
  margin: 24px 0;
}
.import-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
}
.import-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.4s ease;
  animation: import-progress-pulse 1.5s ease-in-out infinite;
}
@keyframes import-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.import-progress-label {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Result stats cards */
.import-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.import-result-stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--color-bg-input);
  border-radius: var(--radius-md);
}
.import-result-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}
.import-result-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

/* Result prospect rows */
.import-result-table {
  width: 100%;
  border-collapse: collapse;
}
.import-result-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.import-result-table td {
  padding: 10px 12px;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.import-result-table tr:hover {
  background: var(--color-bg-card-hover);
}
.import-result-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.import-result-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.import-result-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Config form */
.import-config-section {
  max-width: 560px;
  margin: 0 auto;
}
.import-config-section .input-group {
  margin-bottom: 16px;
  text-align: left;
}
.import-config-section label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

/* CSV drop zone */
.import-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-tertiary);
}
.import-dropzone:hover,
.import-dropzone.dragover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  color: var(--color-text-primary);
}
.import-dropzone.has-file {
  border-color: var(--color-primary);
  border-style: solid;
}

/* LinkedIn status badge */
.import-linkedin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
}
.import-linkedin-status.connected {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.import-linkedin-status.disconnected {
  background: color-mix(in srgb, var(--color-red) 12%, transparent);
  color: var(--color-red);
}

/* ==========================================================================
   PAGE LINKEDIN — style maquette Portail (.li-grid / .li-connect / .rule)
   Adapte aux variables du theme Spruce (accent vert au lieu du bleu LinkedIn).
   ========================================================================== */
.li-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .li-grid { grid-template-columns: 1fr; }
}

/* Zone de connexion : cadre pointille comme la maquette */
.li-connect {
  border: 1.5px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.li-connect:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Logo carre neutre (maquette : pas de bleu LinkedIn criard) */
.li-logo {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #0A66C2; /* bleu officiel LinkedIn (avant : noir #1b1b1b) */
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  box-shadow: 0 4px 14px color-mix(in srgb, #0A66C2 40%, transparent);
}
.li-logo svg { width: 30px; height: 30px; }

/* Lignes "Bonnes pratiques" : titre + texte indente, accent vert */
.rule {
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
}
.rule:first-child { padding-top: 0; }
.rule:last-child { border-bottom: none; padding-bottom: 0; }
.rule__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 9px;
}
.rule__title svg,
.rule__title [data-feather] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}
.rule__text {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  margin-top: 6px;
  line-height: 1.55;
  padding-left: 25px;
}

/* En-tete de la carte conseils (icone bouclier verte) */
.li-tips-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}
.li-tips-head svg,
.li-tips-head [data-feather] {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}
.li-tips-head h3 {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------------------------------------
   FRISE DU DÉLAI DU 1er MESSAGE
   Un délai exprimé en chiffres ne dit pas ce qu'il produit. La frise montre la suite réelle
   (acceptation → 1er message → relances) pour que le réglage se comprenne sans calcul mental.
   Elle défile horizontalement sur mobile plutôt que de se replier : l'ordre chronologique est
   l'information, le casser sur deux lignes la détruirait.
   ------------------------------------------------------------------------------------------------ */
.fm-timeline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 12px 2px 10px;
  margin-top: 2px;
  border-top: 1px solid var(--color-border-subtle);
  scrollbar-width: thin;
}
.fm-tl-node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.fm-tl-node i { width: 13px; height: 13px; flex-shrink: 0; }
/* Le 1er message est le nœud que ce réglage déplace : c'est lui qu'on souligne. */
.fm-tl-node-strong {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.fm-tl-node-strong i { color: var(--color-primary); }
/* L'écart entre deux nœuds, dessiné comme un segment fléché. */
.fm-tl-gap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  padding: 0 3px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.fm-tl-gap::before,
.fm-tl-gap::after {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--color-border);
}
.fm-tl-gap::after { box-shadow: 2px -2px 0 -1px var(--color-border), 2px 2px 0 -1px var(--color-border); }
.fm-tl-gap-strong { color: var(--color-primary); }
.fm-tl-gap-strong::before, .fm-tl-gap-strong::after { background: var(--color-primary); }
.fm-tl-gap-strong::after { box-shadow: 2px -2px 0 -1px var(--color-primary), 2px 2px 0 -1px var(--color-primary); }

/* ------------------------------------------------------------------------------------------------
   CHOIX DU SETTER (Setting IA)
   Six personnalités commerciales sélectionnables. La grille s'adapte d'elle-même : trois colonnes
   au large, deux au médium, une sur mobile — sans point de rupture codé en dur, pour que l'ajout
   d'un septième profil ne demande aucune retouche.
   ------------------------------------------------------------------------------------------------ */
.sia-setter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.sia-setter-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 13px 14px;
  border-radius: 11px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-input);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  font: inherit;
  color: inherit;
}
.sia-setter-card:hover:not(.is-selected) {
  border-color: var(--color-text-tertiary);
  background: var(--color-bg-card-hover);
}
.sia-setter-card.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-input));
}
.sia-setter-card__head { display: flex; align-items: center; gap: 8px; }
.sia-setter-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
  flex-shrink: 0;
}
.sia-setter-card__icon i { width: 14px; height: 14px; }
.sia-setter-card__name { font-weight: 700; font-size: 0.9rem; color: var(--color-text-primary); }
.sia-setter-card__badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-text-primary) 9%, transparent);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
/* L'accroche : ce que le profil fait, en une ligne. C'est elle qui porte le choix. */
.sia-setter-card__tag { font-size: 0.76rem; font-weight: 600; color: var(--color-primary); line-height: 1.4; }
.sia-setter-card__desc { font-size: 0.73rem; color: var(--color-text-tertiary); line-height: 1.55; }

/* Affectation d'un setter PAR PERSONA — raffinement optionnel du choix principal, donc
   volontairement plus discret que la grille : séparé par un filet, sans encadré propre. */
.sia-persona-setters {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.sia-persona-setters__titre { font-weight: 700; font-size: 0.82rem; margin-bottom: 3px; }
.sia-persona-setters__sub {
  font-size: 0.75rem; color: var(--color-text-tertiary); line-height: 1.5; margin-bottom: 10px; max-width: 720px;
}
.sia-persona-setter {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.sia-persona-setter:last-child { border-bottom: none; }
/* Le nom prend la place restante et se tronque : une persona au nom à rallonge ne doit pas
   repousser la liste déroulante hors de la carte. */
.sia-persona-setter__nom {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sia-persona-setter__sel { flex: 0 0 auto; width: 200px; font-size: 0.8rem; }
@media (max-width: 560px) {
  .sia-persona-setter { flex-wrap: wrap; }
  .sia-persona-setter__sel { width: 100%; }
}


/* ══ DEUXIÈME COLONNE DE NAVIGATION ═══════════════════════════════════════════════
   Collée à la sidebar, elle porte les sous-modules de l'écran courant.

   Le plan intermédiaire. La sidebar et le contenu sont deux surfaces distinctes ; ce rail
   se place ENTRE les deux, littéralement — sa couleur est un mélange des deux fonds. On lit
   donc une progression du bord vers le contenu, et le rail appartient visiblement à la
   navigation sans se confondre avec elle. Le calcul étant fait sur les jetons, il suit les
   deux thèmes sans une seule valeur en dur.

   L'ouverture anime la LARGEUR (et le décalage du contenu avec elle) : le rail pousse la page
   au lieu de se poser dessus. C'est ce qui le fait lire comme une colonne de la mise en page,
   pas comme un panneau flottant. */
.sub-rail {
  position: fixed;
  top: var(--bg-job-banner-h, 0px);
  left: var(--sidebar-width);
  height: calc(100vh - var(--bg-job-banner-h, 0px));
  width: var(--subrail-width);
  background: color-mix(in srgb, var(--color-bg-sidebar) 55%, var(--color-bg-main));
  border-right: 1px solid var(--color-border-subtle);
  z-index: 99;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-base);
}

/* Le contenu ne se comprime pas pendant l'animation : il garde sa largeur finale et se laisse
   révéler. Sans ça, les libellés se réorganisent à chaque image de la transition. */
.sub-rail-head,
.sub-rail-nav {
  width: var(--subrail-open);
  flex-shrink: 0;
}

.sub-rail-head {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.sub-rail-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sub-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  overflow-y: auto;
}

/* Intitulé de groupe. Le rail porte deux familles de réglages qui n'ont rien à voir : ceux du
   moteur de prospection, et ceux du traitement des réponses. Sans ce repère, « Setting manuel »
   arriverait après « Notifications » comme un sixième réglage d'envoi. */
.sub-rail-group {
  padding: var(--space-4) var(--space-3) 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sub-rail-group:first-child { padding-top: 4px; }

.sub-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sub-rail-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.sub-rail-item:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

.sub-rail-item.active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-weight: 550;
}

.sub-rail-item.active .sub-rail-icon { opacity: 1; }

/* Le repère de position : un segment sur le bord gauche de l'entrée active. Il naît de la
   hauteur nulle plutôt que d'une opacité — il se déploie, il n'apparaît pas. */
.sub-rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 18px;
  border-radius: 0 1px 1px 0;
  background: var(--color-primary);
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--transition-base);
}

.sub-rail-item.active::before { transform: translateY(-50%) scaleY(1); }

body.has-subrail { --subrail-width: var(--subrail-open); }

/* Écrans étroits : le rail se resserre au lieu de changer de nature. Une seule variable bouge,
   donc la mise en page reste la même à toutes les tailles — on ne bascule pas dans un autre mode
   qui aurait son propre lot de bugs. En dessous de 760 px il ne reste que les icônes, et le
   libellé passe en infobulle native (aria-label posé par le routeur). */
@media (max-width: 1100px) {
  :root { --subrail-open: 176px; }
}

/* Mobile : la sidebar devient un tiroir et le contenu prend toute la largeur — une colonne fixe
   n'a plus de sens. Le rail redevient alors un élément normal du flux, à sa place dans le DOM :
   juste sous l'en-tête, au-dessus du contenu, en bande horizontale.

   JAMAIS derrière un menu à déplier. Ces cinq entrées sont la navigation de l'écran courant ;
   les cacher derrière un bouton, c'est ajouter un clic à chaque changement de module et effacer
   l'information « voilà où tu es ». La bande reste visible et défile latéralement si besoin. */
@media (max-width: 768px) {
  body.has-subrail { --subrail-width: 0px; }
  .sub-rail {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
  }
  .sub-rail-head { display: none; }
  .sub-rail-nav {
    width: 100%;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2) var(--space-3);
  }
  .sub-rail-nav::-webkit-scrollbar { display: none; }
  .sub-rail-item { flex-shrink: 0; }
  .sub-rail-group { display: none; }
  /* Le repère vertical n'a plus de sens à l'horizontale : c'est le fond de l'entrée active
     (déjà posé plus haut) qui porte l'information. */
  .sub-rail-item::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sub-rail,
  .sub-rail-item::before,
  .main-content { transition: none; }
}