/* =====================================================================
   MODE INTÉGRÉ — HABILLAGE NATIF (app mobile)
   Toutes les règles sont scopées sous .embed-mode -> INERTES sur le site
   normal. Objectif : rendre les écrans web embarqués (ouverts depuis l'app
   mobile, ?embed=1) indiscernables d'une vraie app native — gros champs
   tactiles, espacements généreux, cartes, boutons pleine largeur.
   Écran ciblé en priorité : « Nouvelle Facture » (classes .form-card /
   .form-group / .nf-item-grid). On garde les grilles existantes intactes.
   ===================================================================== */

/* --- Base : PLEINE LARGEUR, marges minimales --- */
/* box-sizing border-box partout : sinon les cartes en ÉLÉMENT DE GRILLE
   (Expéditeur/Destinataire) débordent de la largeur de leur piste (padding+
   bordure ajoutés) -> boutons coupés à droite. */
.embed-mode * { box-sizing: border-box !important; }
.embed-mode body { background: #F1F5F9 !important; }
/* .main-content réserve normalement la place de la barre latérale (marge gauche) :
   en mode intégré la sidebar est masquée -> on remet la zone à plat, pleine
   largeur, sinon le contenu est décalé à droite et déborde. */
.embed-mode .main-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.embed-mode .content-container,
.embed-mode #contentContainer {
  padding: 8px !important;     /* presque bord à bord */
  max-width: none !important;  /* prend toute la largeur de l'écran */
  margin: 0 !important;
}
.embed-mode * { -webkit-tap-highlight-color: transparent; }

/* --- Cartes de formulaire : compactes, pleine largeur --- */
.embed-mode .form-card {
  border-radius: 14px !important;
  padding: 12px 12px !important;
  margin-bottom: 8px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(26, 53, 83, 0.05) !important;
}
.embed-mode .form-card h2,
.embed-mode .form-card h3,
.embed-mode .card-title,
.embed-mode .section-title {
  color: #1A3553 !important;
  font-size: 15px !important;
  margin: 0 0 8px !important;
  padding-bottom: 8px !important;
}

/* --- Champ standard = label + contrôle, compact et pleine largeur --- */
.embed-mode .form-group { margin-bottom: 10px !important; }
.embed-mode .form-group label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-bottom: 4px !important;
}
.embed-mode .form-group input:not([type=checkbox]):not([type=radio]),
.embed-mode .form-group select,
.embed-mode .form-group textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  font-size: 16px !important;        /* 16px = empêche le zoom auto iOS */
  padding: 11px 13px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0F172A !important;
  -webkit-appearance: none;
  appearance: none;
}
.embed-mode .form-group textarea { min-height: 76px !important; }

/* --- Grilles de champs : on resserre les écarts (moins de vide vertical) --- */
.embed-mode .form-grid { gap: 10px !important; }

/* --- Lignes d'articles : on GARDE la grille, champs plus hauts/lisibles --- */
.embed-mode .nf-item-grid input,
.embed-mode .nf-item-grid select,
.embed-mode .nf-item-grid textarea {
  min-height: 46px !important;
  font-size: 16px !important;
  padding: 10px 12px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* --- Boutons : tactiles --- */
.embed-mode button,
.embed-mode .btn,
.embed-mode .amt-btn {
  min-height: 50px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
}
/* Bouton principal (enregistrer / valider) en pleine largeur, couleur AMT */
.embed-mode .btn-primary,
.embed-mode .amt-btn-primary,
.embed-mode button[type=submit] {
  background: #1A3553 !important;
  color: #fff !important;
  border: none !important;
  width: 100% !important;
}

/* --- Ligne d'article : grille COMPACTE adaptée mobile ---------------------
   Description pleine largeur, puis Qté/P.U sur une ligne, Total/poubelle sur la
   suivante. Évite l'empilement vertical (hauteur énorme) et la poubelle géante. */
.embed-mode .nf-item-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 10px !important;
  align-items: end !important;
}
.embed-mode .nf-item-grid .nf-desc-col { grid-column: 1 / -1 !important; }
.embed-mode .nf-item-grid .nf-action-col {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}
.embed-mode .nf-item-grid .nf-action-col button {
  width: auto !important;
  min-width: 54px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
}

/* --- Anti-débord horizontal (boutons Créer/Ajouter coupés) -----------------
   Les éléments flex ont un min-width:auto par défaut -> ils refusent de se
   réduire et débordent. On force min-width:0 sur les champs et conteneurs flex
   pour qu'ils tiennent dans la largeur de l'écran. */
.embed-mode .content-container,
.embed-mode #contentContainer { overflow-x: hidden !important; }
.embed-mode .form-group input,
.embed-mode .form-group select,
.embed-mode .form-group textarea { min-width: 0 !important; }
.embed-mode .form-card > div,
.embed-mode .form-group > div,
.embed-mode .form-group > div > div { min-width: 0 !important; }
.embed-mode .btn-outline { white-space: nowrap !important; flex-shrink: 0 !important; }