/* ============================================================================
   responsive.css — Adaptations mobiles communes à toutes les pages INICA
   
   Chargé en complément du CSS spécifique à chaque page.
   Le breakpoint principal est 768px (tablette portrait / mobile).
   ============================================================================ */

/* Bouton hamburger : caché par défaut, visible uniquement sur mobile */
.btn-menu {
  display: none;
  background: none;
  border: 1px solid var(--mid, #D8E2F0);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--navy, #2B4A8C);
  align-items: center;
  justify-content: center;
}
.btn-menu svg, .btn-menu .menu-icon {
  width: 20px;
  height: 16px;
  display: block;
}

/* Overlay sombre derrière la sidebar quand ouverte sur mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99;
  opacity: 0;
  transition: opacity .25s ease;
}
.sidebar-overlay.open {
  display: block;
  opacity: 1;
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* SIDEBAR : coulissante en mobile */
  .sidebar {
    left: calc(-1 * var(--sw, 260px));
    transition: left .25s cubic-bezier(.4, 0, .2, 1);
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .sidebar.open {
    left: 0;
  }

  /* MAIN : prend toute la largeur */
  .main {
    margin-left: 0 !important;
  }

  /* BOUTON HAMBURGER : visible */
  .btn-menu {
    display: inline-flex;
  }

  /* TOPBAR : compact et flexible */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--hh, 64px);
    padding: 8px 12px;
    gap: 8px;
  }
  .topbar h1 {
    font-size: .88rem;
    flex: 1;
    min-width: 120px;
  }

  /* RECHERCHE : sur sa propre ligne pour pas écraser */
  .search-wrap {
    width: 100%;
    order: 99;
  }
  .search-wrap input {
    width: 100%;
    font-size: .85rem;
  }

  /* TABLEAUX : scroll horizontal au lieu de débordement */
  .table-wrap {
    padding: 10px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 500px;
    font-size: .78rem;
  }
  th {
    padding: 9px 8px;
    font-size: .62rem;
  }
  td {
    padding: 8px 8px;
    max-width: 140px;
  }

  /* MODALES : plein écran depuis le bas (style sheet iOS) */
  .modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px !important;
  }
  .overlay {
    align-items: flex-end !important;
  }

  /* FORMULAIRES : grille single column */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .fg.full {
    grid-column: 1 !important;
  }

  /* FILTRES & BOUTONS : réduits */
  select.filt {
    font-size: .75rem;
    padding: 6px 6px;
    max-width: 110px;
  }
  .btn-add, .btn-cols, .btn-apply, .btn-zip, .btn-export {
    padding: 7px 10px !important;
    font-size: .74rem !important;
  }

  /* FILTER-BAR (paiements, bulletins, cerfas, logs) : adapté */
  .filter-bar {
    padding: 10px 12px;
    gap: 6px;
  }
  .filter-btn {
    padding: 6px 10px;
    font-size: .72rem;
  }
  .filter-sep {
    display: none;
  }
  .date-range {
    flex-wrap: wrap;
    gap: 4px;
  }
  .date-range input {
    padding: 6px 8px;
    font-size: .75rem;
  }

  /* CARDS (paiements, ag_detail) : padding réduit */
  .ag-header-card, .docs-card, .card {
    padding: 16px !important;
  }
  .ag-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* COLLEGE-RECAP : scrollable horizontalement */
  .college-recap {
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .college-card {
    flex-shrink: 0;
    padding: 5px 10px;
  }

  /* BULK BAR : largeur adaptée */
  .bulk-bar {
    width: 95vw;
    left: 50%;
    padding: 10px 14px;
  }
  .bulk-btn {
    padding: 6px 10px;
    font-size: .72rem;
  }

  /* Export CSV souvent moins utile en mobile : on le cache */
  #btn-export-csv {
    display: none !important;
  }

  /* PANNEAU COLONNES (membres) : plein écran */
  .col-panel {
    width: 100%;
    right: -100%;
  }
}

/* ===== DESKTOP (≥769px) ===== */
@media (min-width: 769px) {
  .sidebar {
    left: 0 !important;
    transition: none;
  }
  .sidebar-overlay {
    display: none !important;
  }
  .btn-menu {
    display: none !important;
  }
}

/* ===== SAFE-AREA (iOS encoche) ===== */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
  }
}