/* =============================================================================
   TerraTrack — Mobile & touch refinements (TD-025)
   =============================================================================
   Chargé en DERNIER après design_v2.css. N'altère AUCUN style desktop.
   Cible : tous les breakpoints ≤ 1023px (smartphone + tablette portrait).

   Règles clés mobile terrain :
   - Touch targets ≥ 44×44px (recommandation Apple HIG / WCAG)
   - Bottom sheet pour les modals plein-écran (drag handle visible)
   - Sticky footer save bar (les actions principales restent en bas du viewport)
   - Safe area iOS (notch, home indicator) via env(safe-area-inset-*)
   - Pas de :hover sur touch devices — uniquement focus-visible + active
   - Inputmode natifs déclarés via JS pour clavier numérique / téléphone

   Smoke tests :
   - tests/mobile_ux_smoke.mjs (existence sections + media queries)
   - tests/mobile_visit_modal.spec.js (E2E Playwright viewport 375×667)
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS MOBILE
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Hauteur minimum recommandée pour un élément touchable */
  --tt-touch-h: 44px;
  /* Padding tactile interne (carte / bouton) */
  --tt-touch-pad: 12px;
  /* Hauteur de la sticky save bar mobile */
  --tt-save-bar-h: 76px;
  /* Safe area iOS (notch + home indicator) */
  --tt-safe-top: env(safe-area-inset-top, 0px);
  --tt-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET MOBILE GLOBAL — gestes & sélection
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* iOS Safari : empêche le double-tap zoom sur les boutons */
  button,
  .btn,
  .so,
  .star,
  .visit-tab,
  .modal-close-btn,
  .nav-item,
  .sidebar-nav button {
    touch-action: manipulation;
  }

  /* iOS Safari : empêche la sélection de texte parasite sur les éléments interactifs */
  button,
  .btn,
  .so,
  .visit-tab,
  .stat-card,
  .dc-visit-card,
  .client-card {
    -webkit-user-select: none;
    user-select: none;
  }

  /* iOS : empêche l'overscroll bounce sur le body (l'app garde sa scroll position) */
  html,
  body {
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
  }

  /* Inputs : taille de police 16px minimum sinon iOS Safari zoom au focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. MODAL VISITE (#modal) — bottom sheet mobile
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Backdrop : full screen, padding safe area */
  #modal.mb {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    z-index: 1300 !important;
    align-items: flex-end !important;        /* sheet collée en bas */
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.45);
  }

  /* Sheet : pleine largeur, max 95vh, slide-up animation */
  #modal .ms,
  #modal #msheet {
    width: 100% !important;
    max-width: 100% !important;
    height: 95vh !important;
    max-height: 95vh !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    animation: tt-sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "handle"
      "header"
      "context"
      "tabs"
      "panel"
      "footer" !important;
  }

  @keyframes tt-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }

  /* Drag handle visible (indicateur visuel "swipe to close") */
  #modal .mh {
    grid-area: handle;
    width: 40px;
    height: 4px;
    margin: 8px auto 4px;
    background: var(--tt-fg-4, #d4d4d4);
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* Header : titre + close button alignés */
  #modal .modal-header-row {
    grid-area: header;
    padding: 8px 16px 8px !important;
  }
  #modal .m-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  #modal .m-sub {
    font-size: 12px !important;
  }
  #modal .visit-context {
    grid-area: context;
    margin: 8px 16px 10px !important;
  }
  #modal .modal-close-btn {
    min-width: var(--tt-touch-h) !important;
    min-height: var(--tt-touch-h) !important;
    width: var(--tt-touch-h) !important;
    height: var(--tt-touch-h) !important;
    font-size: 22px !important;
  }

  /* Tabs scrollables horizontalement + snap */
  #modal .visit-tabs {
    grid-area: tabs;
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--tt-border);
    padding: 0 8px !important;
    gap: 4px !important;
    min-height: 52px !important;
    align-items: center !important;
    background: var(--tt-surface, var(--card)) !important;
  }
  #modal .visit-tabs::-webkit-scrollbar { display: none; }
  #modal .visit-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: var(--tt-touch-h) !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* Panel scrollable */
  #modal .visit-tab-panel {
    grid-area: panel;
    position: relative !important;
    z-index: 1 !important;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(var(--tt-save-bar-h) + var(--tt-safe-bottom)) !important;
  }
  /* Quand un tab n'est pas actif, on le retire complètement du flow grid (sinon il prendrait
     la grid area "panel" en double). */
  #modal .visit-tab-panel:not(.is-active) {
    display: none !important;
  }

  /* Footer sticky : actions principales en bas écran */
  #modal .mbtns {
    grid-area: footer;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px calc(12px + var(--tt-safe-bottom)) !important;
    background: var(--tt-surface);
    border-top: 1px solid var(--tt-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }
  #modal .mbtns .btn {
    min-height: var(--tt-touch-h) !important;
    padding: 12px 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* Sur très petit écran : cache "Fiche PDF" en mobile (accessible depuis menu Annuler ou onglet) */
  @media (max-width: 480px) {
    #modal #btn-fiche {
      display: none !important;
    }
  }

  /* Statut commercial : grille 2 colonnes au lieu de 3 */
  #modal .sgrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #modal .sgrid .so {
    min-height: var(--tt-touch-h) !important;
    padding: 12px !important;
    font-size: 14px !important;
    justify-content: center;
  }

  /* Stars priorité : +50% de taille tactile */
  #modal .stars {
    gap: 12px !important;
    padding: 8px 0 !important;
  }
  #modal .star {
    font-size: 32px !important;
    min-width: var(--tt-touch-h) !important;
    min-height: var(--tt-touch-h) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Champs formulaire : empilés verticalement */
  #modal .mf-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #modal .mf-row .mf {
    flex: 1 1 auto !important;
    width: 100%;
    min-width: 0;
  }
  #modal .mf label {
    font-size: 13px !important;
  }
  #modal .mf input,
  #modal .mf select,
  #modal .mf textarea {
    min-height: var(--tt-touch-h) !important;
    padding: 12px !important;
  }
  #modal textarea {
    min-height: 100px !important;
  }

  /* Boutons rapides "Visite faite / Prendre RDV" */
  #modal #btn-quick-visite,
  #modal #btn-quick-rdv {
    min-height: var(--tt-touch-h) !important;
    font-size: 14px !important;
    padding: 12px !important;
  }

  /* Section labels — un peu plus compacts */
  #modal .m-section {
    font-size: 14px !important;
    padding: 12px 0 8px !important;
    margin: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   3.bis ALLÈGEMENT MODAL VISITE — padding aéré + sections collapsées (feedback user 2026-05-27)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Plus d'espacement vertical entre les sections du modal */
  #modal .visit-tab-panel {
    padding: 16px 16px calc(var(--tt-save-bar-h) + var(--tt-safe-bottom) + 16px) !important;
  }
  #modal .m-section {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tt-fg-3);
    font-weight: 600;
  }
  #modal .sgrid {
    margin-bottom: 8px !important;
  }
  #modal .stars {
    padding: 12px 0 16px !important;
  }
  #modal .next-contact-card {
    padding: 16px !important;
    margin: 12px 0 !important;
    border-radius: 12px !important;
  }
  #modal .mf-row {
    margin: 12px 0 !important;
  }

  /* Bouton "+ Planifier un prochain contact" / "+ Configurer récurrence" */
  .mobile-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--tt-touch-h);
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--tt-surface);
    border: 1px dashed var(--tt-border);
    border-radius: 10px;
    color: var(--tt-fg-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .mobile-collapse-toggle:active {
    background: var(--tt-accent-soft);
    border-color: var(--tt-accent);
    color: var(--tt-accent);
  }

  /* Sections collapsibles : masquées par défaut en mobile, dévoilées via classe is-open */
  [data-mobile-collapsible] {
    display: none !important;
  }
  [data-mobile-collapsible].is-open {
    display: block !important;
    animation: tt-collapse-down 0.18s ease-out;
  }
  /* Le mf-row a un display:flex propre, qu'on conserve quand ouvert */
  .mf-row[data-mobile-collapsible].is-open {
    display: flex !important;
    flex-direction: column !important;
  }
  @keyframes tt-collapse-down {
    from { opacity: 0; transform: translateY(-6px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0);    max-height: 600px; }
  }

  /* Une fois la section ouverte, masque son bouton "+" */
  .mobile-collapse-toggle.is-open-target-shown {
    display: none !important;
  }
}

/* Sur desktop, les sections collapsibles restent visibles, les boutons "+" restent cachés. */
@media (min-width: 1024px) {
  .mobile-collapse-toggle {
    display: none !important;
  }
  [data-mobile-collapsible] {
    display: block;  /* ou flex selon le markup d'origine, le HTML inline style gère */
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. BACKDROP modal Réglages / Picker — bottom sheet aussi
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .mb {
    padding: 0 !important;
  }
  /* Modals secondaires (account picker, contact, BDR...) : sheet bas mobile aussi */
  .mb .ms:not(#msheet) {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. CLASSE UTILITAIRE — masquer en mobile ou desktop
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6. PAS DE HOVER sur touch devices (évite "sticky hover" iOS/Android)
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .btn:hover,
  .so:hover,
  .visit-tab:hover,
  .modal-close-btn:hover,
  .nav-item:hover {
    background: inherit;
    color: inherit;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. PWA — quand l'app est installée (display: standalone)
   ───────────────────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  /* Plus de barre URL — on peut récupérer ces pixels */
  body {
    padding-top: var(--tt-safe-top);
  }
  /* Cache le bouton "Installer" s'il existe (déjà installé) */
  #pwa-install-btn { display: none !important; }
}