/* =====================================================================
   RACCORD·IA — app-ui.css
   Restyle de la SPA interne pour matcher le design system (Claude Design).
   Ne touche ni le markup ni le JS. Cible uniquement des classes existantes.
   Chargé APRÈS design-system.css et marketing.css → priorité naturelle.
   ===================================================================== */

/* =========================================================
   1. TOPBAR — verre dépoli, look Apple
   ========================================================= */
.topbar {
  background: rgba(245, 245, 247, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
  height: 56px;
}

/* =========================================================
   2. SIDEBAR — fond #FAFAFA, items arrondis, accent orange
   ========================================================= */
.rec-sidebar {
  background: #FAFAFA;
  border-right: 1px solid var(--border-soft);
}
.rec-sidebar-top {
  padding: 18px 14px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.rec-nav {
  padding: 10px 10px 16px;
}
.rec-nav-item {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--mid);
  margin-bottom: 1px;
  position: relative;
  transition: all .15s;
}
.rec-nav-item:hover {
  background: #F0F0F3;
  color: var(--dark);
}
.rec-nav-item.active {
  background: #FFFFFF;
  color: var(--orange);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.rec-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--orange);
}
.rec-nav-section {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light-gray);
  padding: 14px 12px 6px;
}

/* =========================================================
   3. APP SHELL — cartes, surfaces
   ========================================================= */
.app-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: box-shadow .18s, transform .18s;
}
.stat-card:hover {
  box-shadow: var(--sh);
  transform: translateY(-1px);
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.kpi-card:hover {
  box-shadow: var(--sh);
  transform: translateY(-1px);
}

/* =========================================================
   4. BOUTONS — pill orange pour primaires, ghost poli
   ========================================================= */
.btn-primary,
.btn-orange,
.btn-pri {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-cta);
  transition: all .15s cubic-bezier(.34, 1.56, .64, 1);
}
.btn-primary:hover,
.btn-orange:hover,
.btn-pri:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: var(--sh-cta-xl);
}
.btn-secondary {
  background: var(--surface);
  color: var(--dark);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.btn-secondary:hover {
  border-color: var(--dark);
  background: var(--surface);
}
.btn-ghost {
  background: transparent;
  color: var(--mid);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--dark);
  border-color: transparent;
}
.btn-dark {
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-cta);
  transition: all .15s;
}
.btn-dark:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: var(--sh-cta-xl);
}

/* =========================================================
   5. INPUTS — focus orange, rayon cohérent
   ========================================================= */
.search-input,
.select-filter,
.field-input {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus,
.select-filter:focus,
.field-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(var(--orange-rgb), .12);
  outline: none;
}

/* =========================================================
   6. TABLE — lignes aérées, hover doux
   ========================================================= */
.data-table th {
  background: var(--bg-2);
  color: var(--gray);
  border-bottom: 1px solid var(--border-soft);
}
.data-table td {
  border-bottom: 1px solid var(--border-soft);
}
.data-table tr:hover td {
  background: var(--bg-2);
}

/* =========================================================
   7. KANBAN — colonnes #FAFAFA, cartes blanches avec lift
   ========================================================= */
.kanban-col {
  background: #FAFAFA;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 10px 10px 12px;
}
.kanban-col-header {
  background: transparent;
  border-bottom: 1px dashed var(--border-soft);
  padding: 6px 6px 10px;
  margin-bottom: 8px;
  color: var(--dark);
  letter-spacing: -.1px;
}
.kanban-col-count {
  background: #F0F0F3;
  color: var(--gray);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  width: auto;
  height: auto;
  padding: 1px 8px;
  border-radius: var(--r-pill);
}
.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .15s;
}
.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh);
}
.kanban-card-name {
  color: var(--dark);
  letter-spacing: -.2px;
}
.kanban-card-metier {
  color: var(--gray);
}
.kanban-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.kanban-btn {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: var(--r-xs);
  color: var(--mid);
  transition: all .12s;
}
.kanban-btn:hover {
  background: #F0F0F3;
  color: var(--dark);
}
.kanban-btn-advance {
  border-color: var(--orange-border);
  color: var(--orange);
  background: var(--orange-bg);
}
.kanban-btn-advance:hover {
  background: var(--orange-tint-2);
  border-color: var(--orange);
}
.kanban-btn-reject {
  border-color: #FCD0D8;
  color: var(--red);
  background: var(--red-soft);
}
.kanban-btn-reject:hover {
  background: #FFE4E8;
}
.kanban-empty {
  text-align: center;
  color: var(--light-gray);
  font-size: 12px;
  padding: 20px 8px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-sm);
  background: transparent;
}

/* =========================================================
   8. PIPELINE BAR — chips segmentées
   ========================================================= */
.pipeline-chip {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--mid);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-weight: 600;
  transition: all .15s;
}
.pipeline-chip:hover {
  border-color: var(--dark);
  color: var(--dark);
}
.pipeline-chip.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: var(--sh-xs);
}

/* =========================================================
   9. PIPELINE (dossier detail) — colonnes compactes
   ========================================================= */
.pipeline-col {
  background: #FAFAFA;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 10px;
}
.pipeline-col-header {
  color: var(--dark);
  font-weight: 700;
  padding: 2px 4px 6px;
  border-bottom: 1px dashed var(--border-soft);
  margin-bottom: 8px;
}
.pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .15s;
}
.pipeline-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh);
}
.pipeline-card-name {
  color: var(--dark);
  font-weight: 700;
  letter-spacing: -.2px;
}
.pipeline-card-meta {
  color: var(--gray);
}
.pipeline-move-btn button {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: var(--r-xs);
  color: var(--mid);
  transition: all .12s;
}
.pipeline-move-btn button:hover {
  background: #F0F0F3;
  color: var(--dark);
  border-color: var(--dark);
}
.pipeline-add-btn {
  border: 1px dashed var(--border-soft);
  border-radius: var(--r);
  color: var(--gray);
  background: transparent;
  transition: all .15s;
}
.pipeline-add-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

/* =========================================================
   10. MODALES — coins doux + ombre Apple
   ========================================================= */
.modal-overlay {
  background: rgba(29, 29, 31, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-box,
.modal-content,
.modal-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border-soft);
}
.modal-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-title {
  letter-spacing: -.3px;
}

/* =========================================================
   11. DOSSIER DETAIL PANEL
   ========================================================= */
#dossier-detail-overlay {
  background: rgba(29, 29, 31, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dossier-detail-panel {
  background: var(--surface);
  border-left: 1px solid var(--border-soft);
  box-shadow: var(--sh-lg);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

/* =========================================================
   12. STATUS BADGES — tokens sémantiques du design system
   ========================================================= */
.status-badge {
  border-radius: var(--r-pill);
  font-family: var(--font);
  letter-spacing: .01em;
}
.status-nouveau    { background: var(--st-nouveau-bg);   color: var(--st-nouveau-fg); }
.status-contacte   { background: var(--st-contacte-bg);  color: var(--st-contacte-fg); }
.status-entretien  { background: var(--st-entretien-bg); color: var(--st-entretien-fg); }
.status-shortlist  { background: var(--st-shortlist-bg); color: var(--st-shortlist-fg); }
.status-place      { background: var(--st-place-bg);     color: var(--st-place-fg); }
.status-refus,
.status-rejete     { background: var(--st-refus-bg);     color: var(--st-refus-fg); }
.status-standby    { background: var(--st-standby-bg);   color: var(--st-standby-fg); }

/* =========================================================
   13. ATS OVERLAY — drop zone plein écran
   ========================================================= */
.ats-page-overlay {
  background: rgba(255, 244, 239, .96);
  border: 4px dashed var(--orange);
}
.ats-page-overlay-text {
  color: var(--orange);
  letter-spacing: -.4px;
}

/* =========================================================
   14. NAV BADGES (pastilles sidebar)
   ========================================================= */
.nav-badge {
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
}