/* ═══════════════════════════════════════════════════════════════════
   Arpentiq — Kanban Prospects & Dossiers
   Handoff Margot "handoff-kanban" — design respecte a 100%.

   Les DEUX vues partagent exactement la meme UI (regle du handoff).
   On ne touche AUCUN markup : les structures existantes correspondent
   deja au design, seules les valeurs sont realignees.
     Dossiers  .vk-col / .vk-col-hdr / .vk-col-body / .vk-card.vki
     Prospects .vk-col / .vk-card.prp-cardA (.pca-*)

   Charge EN DERNIER : plusieurs regles historiques portent !important
   (style.css l.454 et l.584 forcent la largeur de colonne) — d'ou les
   !important cibles ici, uniquement la ou c'est necessaire.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Plateau ──────────────────────────────────────────────────────── */
body.shell-v2-on .vk-board,
body.shell-v2-on .vend-kanban{
  gap: 16px !important;
}

/* ── Colonne : transparente, c'est la LANE qui porte le fond ──────── */
body.shell-v2-on .vk-col{
  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

/* ── En-tete de colonne : barre de couleur + titre mono + compteur ── */
body.shell-v2-on .vk-col > .vk-col-hdr{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 4px 12px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* la barre de couleur : on la peint via le label (il porte deja la
   couleur de l'etape en style inline) -> ::before herite currentColor */
body.shell-v2-on .vk-col-label{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
}
body.shell-v2-on .vk-col-label::before{
  content: "";
  width: 22px; height: 3px;
  border-radius: 99px;
  background: currentColor;
  flex-shrink: 0;
}
/* le libelle lui-meme en text-dim, seule la barre garde la couleur d'etape */
body.shell-v2-on .vk-col-label{ color: var(--text-dim) !important; }
body.shell-v2-on .vk-col-label::before{ background: currentColor; }

body.shell-v2-on .vk-col-count{
  margin-left: auto !important;
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  background: var(--s2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 99px !important;
  min-width: 24px; height: 22px;
  display: grid !important;
  place-items: center !important;
  padding: 0 7px !important;
}

/* ── Lane : le conteneur des cartes ───────────────────────────────── */
body.shell-v2-on .vk-col-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  /* [b2179] gris eclairci (retour Anthony) : --s2 dilue dans le blanc */
  background: color-mix(in srgb, var(--s2) 45%, var(--surface)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  flex: 1 !important;
}
[data-theme="noir"] body.shell-v2-on .vk-col-body{ background: color-mix(in srgb, var(--s2) 45%, var(--surface)) !important; }

/* lane vide : pointilles + message centre */
body.shell-v2-on .vk-col-body:empty{
  align-items: center;
  justify-content: center;
  border-style: dashed !important;
  min-height: 90px;
}

/* ── Carte (commune aux deux vues) ────────────────────────────────── */
body.shell-v2-on .vk-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 11px 12px !important;
  cursor: grab !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,22,31,.05)) !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
body.shell-v2-on .vk-card:hover{
  border-color: var(--border-hi) !important;
  box-shadow: var(--shadow-md, 0 4px 14px rgba(20,22,31,.07)) !important;
  transform: translateY(-1px) !important;
}
body.shell-v2-on .vk-card:active{ cursor: grabbing !important; }

/* ── DOSSIERS (.vki) ──────────────────────────────────────────────── */
body.shell-v2-on .vk-card.vki{ padding: 11px 12px !important; }
body.shell-v2-on .vki .vki-nm{
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
}
body.shell-v2-on .vki .vki-ad{
  font-size: 12px !important;
  color: var(--text-dim) !important;
  margin-top: 4px !important;
}
body.shell-v2-on .vki .vki-band{ margin-top: 9px !important; }
body.shell-v2-on .vki .vki-pr{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}
body.shell-v2-on .vki .vki-fee{
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
body.shell-v2-on .vki .vki-fee b,
body.shell-v2-on .vki .vki-fee strong{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  color: var(--green, #22a06b) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
body.shell-v2-on .vki .vki-foot{
  gap: 7px !important;
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--border) !important;
  justify-content: flex-start !important;
}
body.shell-v2-on .vki .vki-age{
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
body.shell-v2-on .vki .vki-age.warn{
  color: var(--tiede, #c08a2e) !important;
  font-weight: 500 !important;
}

/* tags de mandat : Exclusif = accent, Delegation = neutre (handoff) */
body.shell-v2-on .vk-badges .vk-badge-exclu,
body.shell-v2-on .vk-badge-exclu{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  color: var(--accent) !important;
  background: var(--accent-dim, color-mix(in srgb, var(--accent) 9%, transparent)) !important;
  border: 0 !important;
}
body.shell-v2-on .vk-badge-deleg,
body.shell-v2-on .vk-badge-simple{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  color: var(--muted) !important;
  background: var(--s3, var(--border)) !important;
  border: 0 !important;
}

/* score (badge Instinct) — pastille mono coloree par temperature */
body.shell-v2-on .vki .vki-scslot .vend-instinct-badge,
body.shell-v2-on .vk-card .vend-instinct-badge{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── PROSPECTS (.prp-cardA / .pca-*) ──────────────────────────────── */
body.shell-v2-on .vk-card.prp-cardA{ padding: 11px 12px !important; }
body.shell-v2-on .pca-addr{
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.25 !important;
}
body.shell-v2-on .pca-meta{
  font-size: 12px !important;
  color: var(--text-dim) !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
}
body.shell-v2-on .pca-sig{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  padding: 4px 9px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--chaud) !important;
  background: color-mix(in srgb, var(--chaud) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--chaud) 22%, transparent) !important;
}
body.shell-v2-on .pca-foot{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 9px !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--border) !important;
}
body.shell-v2-on .pca-src{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
body.shell-v2-on .pca-when,
body.shell-v2-on .pca-foot .pca-age{
  margin-left: auto !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
body.shell-v2-on .pca-pill{
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Drag & drop : etats conserves, look aligne ───────────────────── */
body.shell-v2-on .vk-card.dragging{
  opacity: .45 !important;
  transform: scale(.98) !important;
  border-color: var(--accent) !important;
}
body.shell-v2-on .vk-col.drag-over .vk-col-body{
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 7%, color-mix(in srgb, var(--s2) 45%, var(--surface))) !important;
}
body.shell-v2-on .vk-dropzone{
  border: 1.5px dashed var(--border-hi) !important;
  border-radius: 10px !important;
  height: 38px !important;
  opacity: .6 !important;
}
body.shell-v2-on .vk-col.drag-over .vk-dropzone{
  border-color: var(--accent) !important;
  opacity: 1 !important;
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* ── [b2232] PADDING LATERAL DU PLATEAU DOSSIERS ─────────────────────
   Prospects et Dossiers partagent .vend-board, mais PAS leur wrapper de
   page : .prp-scope porte padding:0 24px 40px (prospects.css) alors que
   .vend-page est force a padding:0 sous shell-v2 (shell-v2.css) -> le
   kanban Dossiers collait aux deux bords, celui de Prospects non.
   On rend les 24px au SEUL plateau Dossiers (le tableau, lui, reste
   bord-a-bord comme toutes les listes du produit).
   Padding pose sur .vend-board (contenu du scroll) et non sur le wrap :
   sur un conteneur overflow-x, le padding-right n'est pas fiablement
   restitue en fin de scroll. */
body.shell-v2-on #page-vendeurs #vt-kanban{
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}