/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* ── Cloche notifications active ────────────────────────────────────────── */
.bell-active {
  box-shadow: 0 0 0 2px #e2a03f;
}

/* ── Animation cloche notifications ─────────────────────────────────────── */
@keyframes bell-ring {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(5deg); }
  90%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.animate-bell {
  animation: bell-ring 0.8s ease-in-out;
  transition: none !important;
}

/* ── Admin mobile — tableaux compacts ───────────────────────────────────── */
@media (max-width: 767px) {
  /* Réduction du padding cellules dans les vues admin */
  body.bg-gray-100 table th,
  body.bg-gray-100 table td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  /* Page content admin pleine largeur */
  body.bg-gray-100 main .pt-6 {
    padding-top: 1rem;
  }
}

/* ── Améliorations mobile — Évolution 27 ────────────────────────────────── */

/* Taille minimale des zones cliquables sur mobile (44×44px WCAG 2.5.5) */
@media (max-width: 1024px) {
  .btn,
  button.btn,
  a.btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm {
    min-height: 36px;
  }
  .btn-xs {
    min-height: 32px;
  }
  /* Boutons icônes ronds dans la barre de header */
  .rounded-full[class*="p-2"] {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Empêche les inputs de zoomer automatiquement sur iOS (taille min 16px) */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Réduction du padding dans les tableaux admin sur mobile */
  table th,
  table td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}