/* app.css – Charte « Prospects BESTUNE » (Bootstrap 5.3 + surcharges légères) */
:root {
  --brand: #b3122b;          /* rouge FAW / BESTUNE */
  --brand-dark: #8c0e21;
  --brand-soft: #fbe9ec;
  --ink: #1d1d1f;
  --bs-body-bg: #f5f6f8;
}
body { background: var(--bs-body-bg); color: var(--ink); }

/* Barre de navigation */
.app-navbar { background: linear-gradient(90deg, #1d1d1f 0%, #2b2b30 100%); }
.app-navbar .nav-link.active { color: #fff; border-bottom: 2px solid var(--brand); }
.brand-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 15px;
}
.brand-mark-lg { width: 52px; height: 52px; font-size: 26px; border-radius: 12px; display: grid; }

/* Boutons marque */
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }

/* Connexion */
.login-wrap { min-height: 75vh; display: grid; place-items: center; }
.login-card { width: 100%; max-width: 400px; border: 0; }

/* Liste */
.prospects-table th { white-space: nowrap; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: #6c757d; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--brand); }
.badge-model { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.status-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.small-badge { font-size: .6rem; }
.row-flash { animation: flash 1.5s ease-out; }
@keyframes flash { from { background: #fff3cd; } to { background: transparent; } }

/* Qualification */
.flag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.flag-check { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid #dee2e6;
  border-radius: .5rem; background: #fff; cursor: pointer; user-select: none; margin: 0; }
.flag-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.flag-check .form-check-input { margin: 0; }
.notes-mini li { font-size: .85rem; border-left: 3px solid #dee2e6; padding: .2rem .6rem; margin-bottom: .4rem; }

/* Historique */
.timeline { max-height: 60vh; overflow-y: auto; }
.timeline-item { border-left: 3px solid #ced4da; padding: .35rem .75rem; margin-bottom: .6rem; background: #fff; border-radius: 0 .35rem .35rem 0; }
.timeline-item.type-appel { border-color: #2a78d6; }
.timeline-item.type-whatsapp { border-color: #1baf7a; }
.timeline-item.type-systeme { border-color: #adb5bd; background: #f8f9fa; }
.timeline-item.type-remarque { border-color: #eda100; }
.note-content { white-space: normal; word-break: break-word; }
.dl-compact dt { font-weight: 500; color: #6c757d; }
.dl-compact dd { margin-bottom: .35rem; }

/* Import */
.import-steps { display: flex; gap: .5rem; list-style: none; padding: 0; }
.import-steps li { padding: .35rem .9rem; border-radius: 99px; background: #e9ecef; color: #6c757d; font-size: .9rem; }
.import-steps li.active { background: var(--brand); color: #fff; }
.import-steps li.done { background: #d1e7dd; color: #0f5132; }
.dropzone { border: 2px dashed #ced4da; border-radius: .75rem; padding: 1.5rem; text-align: center; background: #fff; transition: .15s; }
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }
.preview-chip { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle; background: #f1f3f5; border-radius: 4px; padding: 0 .4rem; margin-right: .25rem; }
.table-warning-subtle > td { background: #fff8e6 !important; }

/* KPI */
.kpi-card { border: 0; }
.kpi-label { font-size: .8rem; color: #6c757d; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .78rem; color: #6c757d; }
.kpi { background: #f8f9fa; border-radius: .5rem; padding: .75rem; }
.chart-box { position: relative; height: 260px; }
.chart-box.chart-lg { height: 320px; }

@media (max-width: 576px) {
  .kpi-value { font-size: 1.35rem; }
  .prospects-table .btn-sm { padding: .2rem .4rem; }
}