/* Kanban suivi recrutement */
.kb { padding: var(--space-4) var(--space-5); }
.kb__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.kb__title { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text-primary); margin: 0; }
.kb__sub { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: 4px; }

.kb__board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; align-items: flex-start; }
.kb-col { flex: 0 0 290px; width: 290px; background: var(--color-bg-subtle, #f1f5f9); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.kb-col__head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; }
.kb-col__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col); flex: none; }
.kb-col__title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); flex: 1; }
.kb-col__count { font-size: 12px; font-weight: 700; color: var(--color-text-tertiary); background: var(--color-surface, #fff); border-radius: 10px; padding: 1px 9px; }
.kb-col__body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px; min-height: 60px; border-radius: 10px; transition: background .15s; }
.kb-col__body.is-over { background: rgba(99,102,241,.1); outline: 2px dashed rgba(99,102,241,.4); outline-offset: -2px; }
.kb-col__empty { text-align: center; color: var(--color-text-placeholder); font-size: 13px; padding: 14px 0; }

.kb-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border-light); border-radius: 12px; padding: 12px; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .15s, transform .1s; }
.kb-card:active { cursor: grabbing; }
.kb-card.is-dragging { opacity: .4; }
.kb-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.kb-card__top { display: flex; align-items: center; gap: 10px; }
.kb-card__avatar { width: 36px; height: 36px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.kb-card__id { flex: 1; min-width: 0; }
.kb-card__name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card__job { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card__read { flex: none; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.kb-card__read.is-unread { background: #fef2f2; color: #dc2626; }
.kb-card__read.is-read { background: #f1f5f9; color: #94a3b8; }
.kb-card__offer { display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: #0369a1; background: #f0f9ff; border: 1px solid #e0f2fe; border-radius: 7px; padding: 4px 8px; }
.kb-card__offer svg { flex: none; }
.kb-card__offer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card__contact { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.kb-card__row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card__row svg { flex: none; color: var(--color-text-tertiary); }
.kb-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--color-border-light); }
.kb-card__date { font-size: 11px; color: var(--color-text-tertiary); }
.kb-card__cv { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border-light); background: transparent; color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kb-card__cv:hover { border-color: var(--color-accent); color: var(--color-accent); }
.kb-card__habs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.kb-hab { font-size: 10.5px; font-weight: 700; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 7px; padding: 2px 8px; }

/* ── Bandeau d'indicateurs (style mur / bourse) ── */
.kb-ticker { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--color-surface, #fff); border: 1px solid var(--color-border-light); border-radius: 14px; overflow-x: auto; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.kb-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .6px; color: #dc2626; flex: none; }
.kb-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: kb-blink 1.4s infinite; }
@keyframes kb-blink { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); opacity: 1; } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); opacity: .6; } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); opacity: 1; } }
.kb-tick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--color-bg-subtle, #f1f5f9); flex: none; }
.kb-tick__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kb-tick__label { font-size: 11.5px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.kb-tick__val { font-size: 15px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.kb-tick--total { background: #0f172a; } .kb-tick--total .kb-tick__label { color: #94a3b8; } .kb-tick--total .kb-tick__val { color: #fff; }
.kb-ticker__spacer { flex: 1; }
.kb-clock { font-size: 15px; font-weight: 700; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; flex: none; }
.kb-fs { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-border-light); background: transparent; color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.kb-fs:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Pulse des compteurs quand ils changent */
.kb-pulse { animation: kb-count-pulse .7s ease; }
@keyframes kb-count-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.45); color: #f59e0b; } 100% { transform: scale(1); } }

/* Clignotement des cartes : arrivée (vert) / déplacement (ambre) */
.kb-flash-new { animation: kb-flash-green 2.2s ease; }
.kb-flash-move { animation: kb-flash-amber 2.2s ease; }
@keyframes kb-flash-green {
  0% { box-shadow: 0 0 0 3px #22c55e, 0 8px 24px rgba(34,197,94,.5); transform: scale(1.02); background: #f0fdf4; }
  25% { box-shadow: 0 0 0 1px rgba(34,197,94,0); }
  50% { box-shadow: 0 0 0 3px #22c55e; background: #f0fdf4; }
  100% { box-shadow: 0 1px 3px rgba(0,0,0,.06); transform: scale(1); background: var(--color-surface,#fff); }
}
@keyframes kb-flash-amber {
  0% { box-shadow: 0 0 0 3px #f59e0b, 0 8px 24px rgba(245,158,11,.5); transform: scale(1.02); background: #fff7ed; }
  50% { box-shadow: 0 0 0 3px #f59e0b; background: #fff7ed; }
  100% { box-shadow: 0 1px 3px rgba(0,0,0,.06); transform: scale(1); background: var(--color-surface,#fff); }
}
.kb-card { transition: box-shadow .15s, transform .25s, background .4s; }