/* CinéIA v2 — Composants partagés (référence DRY, zéro duplicata avec app.css) */
/* Ce fichier reste OPTIONNEL à l'exclusion : app.css porte déjà tous les composants.
   Il sert de « catalogue » pour la Phase 3 (modules ESM) et la doc design : tokens.css + components.css → DS complet. */

/* Panel — carte sombre bord arrondi */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--panel-pad);
  min-height: 200px;
}
.panel h2 { font-size: 0.95rem; margin-bottom: 0.8rem; color: var(--text); }

/* Chips — filtres / toggles */
.chip {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { background: var(--accent2); border-color: var(--accent); color: #fff; }

/* Boutons — primaire / ghost / small */
.btn {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--accent2), var(--pink)); color: #fff; padding: 0.7rem 1.2rem; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.4rem 0.7rem; }
.btn-sm { background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 0.3rem 0.55rem; font-size: 0.78rem; border-radius: 7px; }
.btn-lg { width: 100%; padding: 0.9rem; font-size: 1rem; }

/* Badges — dash / kpi */
.dash-badge, .kpi-badge {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.dash-badge.is-live { color: var(--ok); border-color: rgba(34, 197, 94, 0.25); background: rgba(34, 197, 94, 0.1); }

/* Queue — liste d'items + états */
.queue-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 340px; overflow-y: auto; }
.queue-item {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.queue-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item .st { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); }
.st.pending { background: #3b3b55; color: #c4c4e0; }
.st.processing { background: #4a3200; color: var(--warn); }
.st.done { background: #0c3a1c; color: var(--ok); }
.st.failed { background: #3f1010; color: var(--err); }

/* Empty & toast */
.empty-state { color: var(--muted); text-align: center; padding: 2.5rem 1rem; font-size: 0.9rem; }
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  z-index: var(--z-toast);
  font-size: 0.9rem;
  box-shadow: var(--shadow-md);
  max-width: 90vw;
  text-align: center;
}
.toast.error { border-color: var(--err); }