/*
 * GYMWA — PWA Mobile First  (Chantier 3)
 * Fichier chargé sur toutes les pages post-login pro + admin.
 * Ne contient QUE des règles mobiles — aucun impact sur desktop.
 */

/* ── 1. Overscroll ─────────────────────────────────────────────────────────── */
html,
body {
  overscroll-behavior: contain;
}

/* ── 2. Bottom Navigation Bar ─────────────────────────────────────────────── */
.pwa-bottom-nav {
  display: none; /* desktop : invisible */
}

@media (max-width: 767px) {

  /* ── 2a. Affichage bottom nav ─────────────────────────────────────────── */
  .pwa-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #ffffff;
    border-top: 1px solid #e8edf2;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    justify-content: space-around;
    align-items: stretch;
    /* Safe area iPhone X+ */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pwa-bottom-nav--admin {
    background: #0c2d48;
    border-top: 1px solid #0f3d63;
  }

  .pwa-bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 44px; /* touch target */
    text-decoration: none;
    color: #8a9bb0;
    font-size: 0.65rem;
    font-weight: 500;
    gap: 3px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .pwa-bottom-nav--admin .pwa-bn-item {
    color: rgba(255, 255, 255, 0.45);
  }

  .pwa-bn-item.active,
  .pwa-bn-item:focus {
    color: #2aa5d4;
  }

  .pwa-bottom-nav--admin .pwa-bn-item.active,
  .pwa-bottom-nav--admin .pwa-bn-item:focus {
    color: #2aa5d4;
  }

  .pwa-bn-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* ── 2b. Compenser la hauteur de la bottom nav ─────────────────────────── */
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 3. PRO — navbar top : masquer les liens, garder logo + logout ──────── */
  .navbar-nav {
    display: none !important;
  }

  .navbar-toggle {
    display: none !important; /* remplacé par bottom nav */
  }

  /* ── 4. ADMIN — sidebar masquée, topbar pleine largeur (déjà géré) ──────── */
  /* Ajouter padding bas au page-content pour ne pas masquer contenu */
  .page-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 5. Touch targets ≥ 44px ─────────────────────────────────────────────── */
  button,
  .btn,
  input[type="submit"],
  input[type="button"],
  a.btn,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── 6. Formulaires ────────────────────────────────────────────────────────
     font-size: 16px évite le zoom auto sur iOS lors du focus.          */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ── 7. Tables horizontales — scroll plutôt que débordement ─────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Conteneurs overflow déjà en place : renforcer */
  .table-responsive,
  [style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }

} /* fin @media (max-width: 767px) */