/* =============================================================================
   Kivo APP — LOT 1 — Écran Dashboard ROI (enrichissements)
   Réutilise au maximum tokens/components/utilities. Styles spécifiques uniquement.
   ============================================================================= */

/* ----- Bandeau "À traiter" ----- */
.todo-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-5); }
.todo-banner--ok { border-color: var(--success-border); background: linear-gradient(0deg, var(--surface), var(--surface)), var(--success-bg); }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.todo-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  text-decoration: none; color: inherit; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.todo-item:hover, .todo-item:focus-visible { border-color: var(--border-accent); background: var(--surface-3); transform: translateY(-1px); }
.todo-item__icon { width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; }
.todo-item__icon svg { width: 18px; height: 18px; }
.todo-item__icon--danger { background: var(--danger-bg); color: var(--danger); }
.todo-item__icon--warn { background: var(--warn-bg); color: var(--warn); }
.todo-item__icon--info { background: var(--info-bg); color: var(--info); }
.todo-item__body { flex: 1; min-width: 0; }
.todo-item__label { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.todo-item__sub { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 1px; }
.todo-item__chev { color: var(--text-faint); flex: none; }
.todo-item__chev svg { width: 18px; height: 18px; }

/* ----- KPI : ligne "détail" sous la valeur ----- */
.kpi__detail { font-size: var(--fs-sm); color: var(--text-dim); }
.kpi__detail strong { color: var(--text-soft); }
.kpi--accent { border-color: var(--border-accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }

/* ----- Carte Valeur estimée ----- */
.value-card { background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), rgba(59, 130, 246, .06)); border: 1px solid var(--border-accent); border-radius: var(--r-md); padding: var(--sp-5); }
.value-card__amount { font-family: var(--font-title); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -.02em; }
.value-card__amount .cur { font-size: var(--fs-xl); color: var(--text-soft); }
.value-card__split { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4); }
.value-card__split-item { display: flex; flex-direction: column; gap: 2px; }
.value-card__split-val { font-family: var(--font-title); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.value-card__split-lbl { font-size: var(--fs-sm); color: var(--text-dim); }
.link-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; margin-top: var(--sp-4); }
.link-inline:hover { text-decoration: underline; }
.link-inline svg { width: 14px; height: 14px; }

/* ----- État de Léo (carte) ----- */
.leo-state { display: flex; align-items: center; gap: var(--sp-3); }
.leo-state__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; color: #fff; }
.leo-state__avatar svg { width: 22px; height: 22px; }
.leo-state__body { flex: 1; min-width: 0; }
.leo-state__name { font-weight: var(--fw-semibold); }
.leo-state__sub { font-size: var(--fs-sm); color: var(--text-dim); }
.leo-pulse { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.leo-pulse--active { background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: leo-pulse 2.4s var(--ease) infinite; }
.leo-pulse--paused { background: var(--warn); }
.leo-pulse--incident { background: var(--danger); }
@keyframes leo-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* Grille principale dashboard (valeur + activité) */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 960px) { .dash-cols { grid-template-columns: 1fr; } }
.dash-aside { display: grid; gap: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  .leo-pulse--active { animation: none; }
  .todo-item { transition: none; }
}