@tailwind base;
@tailwind components;
@tailwind utilities;

/* =============================================================
   COMPOSANTS RÉUTILISABLES — TheRemoteTribe
   Utiliser @apply pour composer avec les utilitaires Tailwind.
   primary-700 = #be185d (fuchsia / bg-pink-700)
   ============================================================= */

@layer components {

  /* -----------------------------------------------------------
     BOUTONS
     Usage : <button class="btn-primary">Enregistrer</button>
              <a href="..." class="btn-success btn-sm">Valider</a>
     ----------------------------------------------------------- */

  .btn-primary {
    @apply inline-flex items-center justify-center
           px-4 py-2 text-sm font-medium text-white
           bg-primary-700 rounded-lg
           hover:bg-primary-800
           focus:ring-4 focus:ring-primary-300 focus:outline-none
           dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800
           transition-colors;
  }

  .btn-success {
    @apply inline-flex items-center justify-center
           px-4 py-2 text-sm font-medium text-white
           bg-green-600 rounded-lg
           hover:bg-green-700
           focus:ring-4 focus:ring-green-200 focus:outline-none
           dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800
           transition-colors;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center
           px-4 py-2 text-sm font-medium
           text-gray-700 bg-gray-100 rounded-lg
           hover:bg-gray-200
           focus:ring-4 focus:ring-gray-100 focus:outline-none
           dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600
           transition-colors;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center
           px-4 py-2 text-sm font-medium text-white
           bg-red-600 rounded-lg
           hover:bg-red-700
           focus:ring-4 focus:ring-red-200 focus:outline-none
           dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-800
           transition-colors;
  }

  /* Variante taille petite — à combiner : <button class="btn-primary btn-sm"> */
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Variante pleine largeur — <button class="btn-primary btn-full"> */
  .btn-full {
    @apply w-full justify-center;
  }

  /* -----------------------------------------------------------
     FORMULAIRES
     Usage : <input class="form-input" type="email">
              {{ form_widget(form.email, {attr: {class: 'form-input'}}) }}
     ----------------------------------------------------------- */

  .form-input {
    @apply block w-full p-2.5 text-sm
           bg-gray-50 border border-gray-300
           text-gray-900 rounded-lg
           focus:ring-primary-500 focus:border-primary-500 focus:outline-none
           dark:bg-gray-700 dark:border-gray-600
           dark:placeholder-gray-400 dark:text-white
           dark:focus:ring-primary-500 dark:focus:border-primary-500;
  }

  .form-textarea {
    @apply block w-full p-3 text-sm
           bg-gray-50 border border-gray-300
           text-gray-900 rounded-lg
           focus:ring-primary-500 focus:border-primary-500 focus:outline-none
           dark:bg-gray-700 dark:border-gray-600
           dark:placeholder-gray-400 dark:text-white
           dark:focus:ring-primary-500 dark:focus:border-primary-500;
  }

  .form-label {
    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
  }

  /* -----------------------------------------------------------
     BADGES / TAGS
     Usage : <span class="badge-primary">Tribu Builder</span>
     ----------------------------------------------------------- */

  .badge-primary {
    @apply inline-flex items-center
           px-2 py-0.5 text-xs font-semibold
           bg-primary-100 text-primary-700 rounded-full
           dark:bg-primary-900 dark:text-primary-300;
  }

  .badge-success {
    @apply inline-flex items-center
           px-2 py-0.5 text-xs font-semibold
           bg-green-100 text-green-700 rounded-full
           dark:bg-green-900 dark:text-green-300;
  }

  .badge-gray {
    @apply inline-flex items-center
           px-2 py-0.5 text-xs font-semibold
           bg-gray-100 text-gray-600 rounded-full
           dark:bg-gray-700 dark:text-gray-300;
  }

  .badge-warning {
    @apply inline-flex items-center
           px-2 py-0.5 text-xs font-semibold
           bg-yellow-100 text-yellow-700 rounded-full
           dark:bg-yellow-900 dark:text-yellow-300;
  }

  /* -----------------------------------------------------------
     ALERTES / FLASH MESSAGES
     Usage : <div class="alert-success">{{ message }}</div>
     ----------------------------------------------------------- */

  .alert-success {
    @apply flex items-center p-4 mb-4 text-sm
           text-green-800 bg-green-50 rounded-lg
           border border-green-200
           dark:bg-gray-800 dark:text-green-400 dark:border-green-800;
  }

  .alert-error {
    @apply flex items-center p-4 mb-4 text-sm
           text-red-800 bg-red-50 rounded-lg
           border border-red-200
           dark:bg-gray-800 dark:text-red-400 dark:border-red-800;
  }

  .alert-info {
    @apply flex items-center p-4 mb-4 text-sm
           text-blue-800 bg-blue-50 rounded-lg
           border border-blue-200
           dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800;
  }

  .alert-warning {
    @apply flex items-center p-4 mb-4 text-sm
           text-yellow-800 bg-yellow-50 rounded-lg
           border border-yellow-200
           dark:bg-gray-800 dark:text-yellow-400 dark:border-yellow-800;
  }

  /* -----------------------------------------------------------
     CARDS
     Usage : <div class="card">...</div>
     ----------------------------------------------------------- */

  .card {
    @apply bg-white rounded-xl shadow dark:bg-gray-800;
  }

  .card-body {
    @apply p-4 sm:p-6;
  }

  /* -----------------------------------------------------------
     NAVIGATION ADMIN (onglets horizontaux)
     Usage : <a class="nav-tab {{ active ? 'nav-tab-active' : '' }}">Dashboard</a>
     ----------------------------------------------------------- */

  .nav-tab {
    @apply px-3 py-1.5 rounded-lg text-sm font-medium
           text-gray-600 transition-colors whitespace-nowrap
           hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700;
  }

  .nav-tab-active {
    @apply bg-primary-50 text-primary-700
           dark:bg-gray-600 dark:text-white;
  }

}