/* ============================================================
   NEOKA CRM — iPhone (lot Mobile, 11/09/2026)
   nk-mobile.css — chargé APRÈS enhancements.css, ne touche pas au bureau.
   Cible : iPhone 17 Pro (402 × 874 pt, Dynamic Island, barre d'accueil).
   Le tiroir de menu existe déjà (enhancements.css, ≤ 820 px) ; ce fichier
   ajoute ce qui manquait pour un usage au pouce :
     - en-tête compact d'une ligne (titre court, ↻ et 🔔 à droite) ;
     - barre d'onglets en bas : Journée · Appels · Entreprises · Affaires · Menu ;
     - zones sûres (encoche, barre d'accueil) ;
     - champs à 16 px (sinon Safari zoome à chaque saisie) ;
     - tableaux et grilles à colonnes fixes qui débordaient.
   ============================================================ */

@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  main{padding-left:max(11px, env(safe-area-inset-left))!important;padding-right:max(11px, env(safe-area-inset-right))!important}

  /* ---- en-tête sur une ligne ---- */
  .topbar{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px 42px!important;
    align-items:center;
    gap:8px!important;
    padding:calc(env(safe-area-inset-top) + 6px) 0 8px!important;
    margin:-10px 0 10px!important;
  }
  .topbar .mobile-menu{grid-column:1!important;grid-row:1!important}
  .topbar h1{grid-column:2!important;grid-row:1!important;font-size:17px!important;min-width:0!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .reload[onclick="ouvrirNotifs()"]{grid-column:4!important;grid-row:1!important;width:42px;height:42px;padding:0!important}
  .topbar .reload.nk-m-recharger{grid-column:3!important;grid-row:1!important;width:42px;height:42px;padding:0!important;
    font-size:0!important;justify-self:auto!important}
  .topbar .reload.nk-m-recharger::before{content:"↻";font-size:19px;line-height:1}
  .topbar .live,.topbar .maj{display:none!important}

  /* ---- tiroir : au-dessus de la barre d'onglets, zones sûres ---- */
  aside#cote{z-index:60!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .nav-backdrop{z-index:55!important}
  aside#cote nav button{min-height:46px}

  /* ---- barre d'onglets ---- */
  #nk-m-onglets{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid #e2e8f0;
    padding:4px max(6px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  #nk-m-onglets button{
    border:0;background:none;font-family:inherit;color:#64748b;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:52px;font-size:10.5px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  #nk-m-onglets button .i{font-size:21px;line-height:1}
  #nk-m-onglets button.on{color:#ea7317}
  body.nav-open #nk-m-onglets,body.modal-open #nk-m-onglets{display:none}

  /* ---- saisie : 16 px minimum, sinon iOS zoome ---- */
  #principal input:not([type=checkbox]):not([type=radio]),#principal select,#principal textarea,
  .overlay input:not([type=checkbox]):not([type=radio]),.overlay select,.overlay textarea,
  [id^="nk-"] input:not([type=checkbox]):not([type=radio]),[id^="nk-"] textarea,[id^="nk-"] select{font-size:16px!important}

  /* ---- débordements ---- */
  #principal table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #principal pre{white-space:pre-wrap;word-break:break-word}
  #principal img,#principal iframe{max-width:100%}
  #nkp-grille{grid-template-columns:1fr!important}
  #principal th,#principal td{white-space:nowrap}
  #principal td:first-child{white-space:normal;min-width:44vw}

  /* Tableau de bord : les onglets du hub (Indicateurs, Mon activité, Pipeline,
     Supervision) mènent aux anciens écrans de bureau ; au téléphone ils
     repoussent « Ma journée » sous la ligne de flottaison. */
  .nk-hub-barre{display:none!important}

  /* Tableau de bord : « Ma journée » d'abord, cartes chiffres en 2 colonnes */
  #nk-tdb-socle{display:flex;flex-direction:column}
  #nk-tdb-socle > div:last-child{order:-1;margin-top:0!important}
  #nk-tdb-socle [style*="min-width:150px"]{min-width:calc(50% - 5px)!important;padding:10px 12px!important}
  #nk-tdb-socle [style*="min-width:260px"]{min-width:100%!important}

  /* Appels du jour : la carte s'empile (nom, téléphone, bouton pleine largeur) */
  [data-contact] > div:first-child{flex-direction:column;gap:8px!important}
  [data-contact] > div:first-child > div{min-width:0!important;width:100%;text-align:left!important}
  [data-contact] > div:first-child > div:last-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  [data-contact] > div:first-child > div:last-child button{flex:1;margin-top:0!important;min-height:44px}
  [data-contact] a[href^="tel:"]{font-size:18px!important}

  /* Listes Affaires et Entreprises : une ligne = une carte, actions visibles sans défiler */
  #p-opp table,#p-entreprises table{display:block!important;overflow:visible!important}
  #p-opp thead,#p-entreprises thead{display:none!important}
  #p-opp tbody,#p-entreprises tbody{display:block}
  #p-opp tr,#p-entreprises tr{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 10px;background:#fff;
    border:1px solid #e2e8f0!important;border-radius:11px;padding:10px 12px;margin-bottom:8px}
  #p-opp td,#p-entreprises td{display:block;padding:0!important;border:0!important;white-space:normal!important;min-width:0!important;font-size:13px}
  #p-opp td:first-child,#p-entreprises td:first-child{flex-basis:100%;font-size:14.5px}
  #p-opp td:last-child{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap}
  #p-opp td:last-child button{flex:1 1 auto;min-height:40px}
  #p-entreprises td:nth-child(3),#p-entreprises td:nth-child(4){color:#64748b}

  /* fenêtres superposées créées par les modules (fiche partenaire, collage,
     résolveur…) : jamais plus larges que l'écran */
  body > div[style*="position:fixed"] > div{max-width:100vw!important}
  body > div[style*="position:fixed"][style*="inset:0"]{padding-top:env(safe-area-inset-top)!important}

  /* notifications au-dessus de la barre d'onglets */
  .crm-toast-region{bottom:calc(74px + env(safe-area-inset-bottom))!important}

  /* cartes d'appel : le numéro devient un vrai bouton au pouce */
  #principal a[href^="tel:"]{display:inline-flex!important;align-items:center;min-height:44px;padding:0 4px}
  #principal button{min-height:40px}
}