/* -----------------------------------------------------------------------------
   Bridge Bootstrap -> Tailwind
   À mettre dans un fichier traité par Tailwind (PostCSS) pour que @apply fonctionne
----------------------------------------------------------------------------- */

@layer components {
  /* --------- Helpers "badge" --------- */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium;
  }

  .rounded-pill {
    @apply rounded-full;
  }

  .me-1 {
    @apply mr-1;
  }

  .mb-1 {
    @apply mb-1;
  }

  /* --------- Palette de base (texte) --------- */
  .primary,
  .text-primary {
    @apply text-slate-900 dark:text-slate-50;
  }

  .secondary,
  .text-secondary {
    @apply text-slate-600 dark:text-slate-300;
  }

  /* Success : léger vert, mais pas fluo */
  .success,
  .text-success {
    @apply text-emerald-700 dark:text-emerald-300;
  }

  /* Danger : rouge/bordeaux, pas FF0000 */
  .danger,
  .text-danger {
    @apply text-rose-700 dark:text-rose-300;
  }

  /* Warning : orange pas trop foncé */
  .warning,
  .text-warning {
    @apply text-amber-600 dark:text-amber-300;
  }

  /* Info : NEUTRE (gris), pas de bleu */
  .info,
  .text-info {
    @apply text-slate-700 dark:text-slate-300;
  }

  .light,
  .text-light {
    @apply text-slate-100 dark:text-slate-100;
  }

  .dark,
  .text-dark {
    @apply text-slate-900 dark:text-slate-50;
  }

  /* --------- Variantes "text-bg-*" (fond + texte) --------- */

  .text-bg-primary {
    @apply bg-slate-200 text-slate-900 dark:bg-slate-800 dark:text-slate-50;
  }

  .text-bg-secondary {
    @apply bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100;
  }

  .text-bg-success {
    @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100;
  }

  .text-bg-danger {
    @apply bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-100;
  }

  .text-bg-warning {
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100;
  }

  /* Info en gris, comme demandé */
  .text-bg-info {
    @apply bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-100;
  }

  .text-bg-light {
    @apply bg-slate-50 text-slate-900 dark:bg-slate-100 dark:text-slate-900;
  }

  .text-bg-dark {
    @apply bg-slate-900 text-slate-50 dark:bg-slate-950 dark:text-slate-100;
  }
}