/* app.css — Styles complémentaires à Tailwind CDN */

/* ========================
   Composants réutilisables
   ======================== */

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg text-sm transition-colors disabled:opacity-50;
}

.btn-secondary {
  @apply bg-white hover:bg-gray-50 text-gray-700 font-medium px-4 py-2 rounded-lg text-sm border border-gray-300 transition-colors;
}

.btn-warning {
  @apply bg-yellow-500 hover:bg-yellow-600 text-white font-medium px-4 py-2 rounded-lg text-sm transition-colors;
}

.btn-sm {
  @apply bg-white hover:bg-gray-50 text-gray-700 font-medium px-3 py-1 rounded text-xs border border-gray-300 transition-colors;
}

.btn-sm-danger {
  @apply bg-white hover:bg-red-50 text-red-600 font-medium px-3 py-1 rounded text-xs border border-red-300 transition-colors;
}

.text-input {
  @apply w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.select-input {
  @apply border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.badge-green {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

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

.badge-red {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.badge-blue {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

/* ========================
   Modale
   ======================== */

.modal-overlay {
  @apply fixed inset-0 bg-black/40 z-30 flex items-center justify-center p-4;
}

.modal-box {
  @apply bg-white rounded-xl shadow-xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto;
}

/* ========================
   Alpine x-cloak
   ======================== */

[x-cloak] { display: none !important; }

/* ========================
   Impression (quittances PDF)
   ======================== */

@media print {
  /* Masquer toute l'UI */
  nav,
  .print\:hidden,
  button,
  select,
  input,
  .modal-overlay,
  #toast-container {
    display: none !important;
  }

  /* Afficher uniquement la quittance */
  body {
    background: white;
    padding: 0;
    margin: 0;
  }

  #receipt-preview {
    box-shadow: none !important;
    border: none !important;
  }

  .receipt-container {
    display: block !important;
  }

  @page {
    size: A4;
    margin: 15mm;
  }
}

/* ========================
   Conteneur quittance (aperçu)
   ======================== */

.receipt-container {
  min-height: 297mm;
  width: 100%;
}

.receipt-container * {
  font-family: Arial, sans-serif;
}