/* ══════════════════════════════════════════════
   NerdStack — Responsive CSS global
   Injecté dans tous les portails
   v1.0 — 18/04/2026
   ══════════════════════════════════════════════ */

/* ── Tableaux scrollables sur mobile ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
table {
  min-width: 600px;
}

/* ── Container ── */
.container {
  width: 100%;
  box-sizing: border-box;
}

/* ── Grilles stats ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* ── Nav responsive ── */
.nav-links-mobile {
  display: none;
}

/* ── Boutons groupés ── */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ── Page header ── */
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}

/* ── Modals ── */
.modal-content {
  width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════
   BREAKPOINT 1024px — tablette
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container {
    padding: 1.25rem !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════
   BREAKPOINT 768px — mobile large
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Container */
  .container {
    padding: 1rem !important;
  }

  /* Nav formateur / admin — burger */
  nav {
    flex-wrap: wrap;
    height: auto !important;
    padding: .75rem 1rem !important;
    gap: .5rem;
  }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem 0;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .5rem;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: .5rem 0 !important;
    font-size: .95rem !important;
  }
  .nav-burger {
    display: flex !important;
  }
  .nav-user {
    font-size: .8rem;
  }

  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header .page-title,
  .page-title {
    font-size: 1.2rem !important;
  }
  .page-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    width: 100%;
  }

  /* Tableaux */
  table {
    font-size: .82rem;
  }
  th, td {
    padding: .5rem .6rem !important;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .stat-card {
    padding: .85rem !important;
  }

  /* Sections */
  .section {
    padding: 1rem !important;
    border-radius: 10px !important;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  /* Boutons */
  .btn-group,
  .section-header > div {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .btn {
    font-size: .82rem !important;
    padding: .4rem .75rem !important;
  }

  /* Modals */
  .modal {
    padding: .75rem !important;
  }
  .modal-content {
    padding: 1.25rem !important;
    border-radius: 10px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-content h3 {
    font-size: 1.1rem !important;
  }

  /* Instances / deploy buttons */
  .deploy-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
  }
  .inst-group {
    flex-wrap: wrap;
  }

  /* Formulaires */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  input, select, textarea {
    font-size: 16px !important; /* Empêche zoom auto iOS */
  }

  /* Cards */
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  .card {
    padding: 1rem !important;
  }

  /* Exercices / pédagogie */
  .exercice-card {
    padding: 1rem !important;
  }
  .etapes-list {
    padding: .75rem !important;
  }

  /* Examen */
  .exam-grid {
    grid-template-columns: 1fr !important;
  }

  /* Solo dashboard */
  .instances-grid {
    grid-template-columns: 1fr !important;
  }
  .plan-card {
    padding: 1rem !important;
  }
}

/* ══════════════════════════════════════════════
   BREAKPOINT 480px — mobile petit
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .page-title {
    font-size: 1.1rem !important;
  }
  .btn-sm {
    font-size: .78rem !important;
    padding: .35rem .6rem !important;
  }
  /* Masquer colonnes secondaires tableaux sur très petit écran */
  .hide-mobile {
    display: none !important;
  }
  table {
    font-size: .78rem;
  }
  .modal-content {
    padding: 1rem !important;
  }
  /* Nav logo */
  .nav-logo {
    font-size: 1rem !important;
  }
}