/* ==================================== */
/* FORMS - OPTIMISATION TACTILE         */
/* Partogramme - Phase 15               */
/* ==================================== */

/*
 * Optimisations tactiles selon les recommandations WCAG :
 * - Taille minimale des cibles 44x44px
 * - Clavier numerique pour les champs numeriques
 * - Espacement suffisant entre elements interactifs
 */

/* ============================================
   BOUTONS - TAILLE MINIMALE 44px
   (Styles de base dans shared/css/components.css)
   ============================================ */

/* Boutons dans les actions de formulaire */
.form-actions button,
.postpartum-actions button {
  min-height: 44px;
  padding: 10px 20px;
}

/* Boutons de fermeture */
.btn-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   CHAMPS DE SAISIE - HAUTEUR TACTILE
   ============================================ */

.edit-group input,
.edit-group select,
.edit-group textarea,
.edit-control input,
.edit-control select {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px; /* Evite le zoom iOS */
}

/* Champs inline (terme, parite) */
.inline-fields input[type="number"] {
  min-height: 44px;
  min-width: 60px;
  padding: 8px;
  text-align: center;
  font-size: 16px;
}

/* Champs tableau */
.table-input,
.table-select {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 14px;
}

/* ============================================
   CHECKBOXES ET RADIOS - ZONE CLIQUABLE
   (Styles de base dans shared/css/components.css)
   ============================================ */

/* ============================================
   TABS ET TOGGLES - ZONE TACTILE
   (Styles .nav-dot dans shared/css/navigation-tabs.css)
   ============================================ */

.legend-toggle {
  min-height: 36px;
  padding: 6px 12px;
}

.view-toggles .btn-toggle {
  min-height: 44px;
  padding: 8px 14px;
}

/* ============================================
   ESPACEMENT ENTRE ELEMENTS
   ============================================ */

.form-grid {
  gap: 16px 20px;
}

.bebe-reanimation-grid {
  gap: 12px 16px;
}

/* ============================================
   INPUTMODE POUR CLAVIER NUMERIQUE
   Appliquer via attributs HTML:
   - inputmode="numeric" pour entiers
   - inputmode="decimal" pour decimaux
   ============================================ */

/* Visual feedback pour les champs numeriques */
input[inputmode="numeric"],
input[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   FOCUS VISIBLE AMELIORE
   ============================================ */

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-toggle:focus-visible,
.nav-dot:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.2);
}

/* ============================================
   MOBILE SPECIFIC
   ============================================ */

@media (max-width: 768px) {
  /* Augmenter les tailles sur mobile */
  .edit-group input,
  .edit-group select {
    min-height: 48px;
    font-size: 16px;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 48px;
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
  }

  /* Espacement accru sur mobile */
  .form-grid {
    gap: 20px;
  }

  .checkbox-group {
    min-height: 48px;
  }
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */

@media (pointer: coarse) {
  /* Appareils tactiles */
  button:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-toggle:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Pas de hover sur tactile - utiliser active */
  .btn-primary:hover,
  .btn-secondary:hover {
    background: var(--accent-primary);
  }

  .btn-secondary:hover {
    background: var(--bg-sidebar);
  }
}