/* ── CEF-GERES Mobile CSS v1.1 — responsive global toutes pages admin/enseignant ── */

/* === GLOBAL (toutes tailles d'écran) === */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Wrapper scroll tables (créé par wrapTablesForMobile()) */
.cef-tbl-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
}

/* ── Profil dossier (étudiant / enseignant / membre) — anti-overflow ──────────
   Cause : min-width:auto par défaut sur les enfants de grille CSS.
   Effet : les cellules débordent à droite et le texte est coupé.
   Fix   : min-width:0 force le respect de la largeur du track.
   ────────────────────────────────────────────────────────────────────────── */
.profil-body {
  min-width: 0;
}
.profil-body > * {
  min-width: 0;
}
.profil-row {
  min-width: 0;
  gap: 8px;
}
.profil-row .k {
  flex-shrink: 0;
  white-space: nowrap;
}
.profil-row .v {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  text-align: right;
  flex: 1 1 auto;
}

/* ── Grilles de données fréquentes — prevention overflow ──
   Couvre : sections-row, grid2, detail-grid (finances), form-grid,
            kpi-row, row2, alertes-grid sur toutes les pages admin.
   ────────────────────────────────────────────────────────────── */
.sections-row > *,
.grid2 > *,
.detail-grid > *,
.form-2col > *,
.form-grid > *,
.row2 > *,
.kpi-row > *,
.alertes-grid > * {
  min-width: 0;
}

/* ═══════════════════════════════════════════
   MEDIUM SCREEN 1024px–1280px
   ═══════════════════════════════════════════ */

/* ── Colonnes non critiques masquées à 1280px ── */
@media (max-width: 1280px) {
  .wrap { max-width: 100% !important; }
  .col-opt { display: none !important; }
  /* Typographie et espacement légèrement réduits */
  th, td { font-size: clamp(11px, 0.6vw + 9.3px, 13px) !important; padding: clamp(6px, 0.4vw + 4px, 11px) clamp(8px, 0.6vw + 5.5px, 13px) !important; }
}

/* ── Colonnes secondaires masquées à 1024px ── */
@media (max-width: 1024px) {
  .col-opt2 { display: none !important; }
  .wrap { padding: 12px 10px !important; }
}

/* ── Topbar nav — empêcher les menus de déborder ── */
.topbar {
  min-width: 0;
}
.topbar > * {
  min-width: 0;
}

/* ── Cartes génériques — contenir le contenu ── */
.profil-card,
.section,
.cs-card {
  min-width: 0;
  max-width: 100%;
}

/* ── Tableaux dans sections — scroll horizontal si nécessaire ── */
.section > table,
.profil-card > table {
  min-width: max-content;
}

/* ═══════════════════════════════════════════
   MOBILE ≤ 768px
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Conteneur principal */
  .wrap {
    padding: 12px 8px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Sections : libérer overflow pour scroll des tables ── */
  .section {
    overflow: visible !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .section-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 14px !important;
  }

  /* ── Stats / KPI cards ─── */
  /* Fonctionne pour flex ET grid stat containers */
  .stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    grid-template-columns: unset !important;
  }
  .stat-card, .stat {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .stat-card .val { font-size: 22px !important; }

  /* ── KPI strips ── */
  .kpi-strip { flex-direction: column !important; }
  .kpi-card  { min-width: 0 !important; width: 100% !important; }
  .kpi-row   { grid-template-columns: 1fr 1fr !important; }
  .kpi       { min-width: 0 !important; }
  .kpi-val   { font-size: 22px !important; }
  .bar-wrap, .taux-cell { flex-wrap: wrap !important; gap: 4px !important; }
  .progress-bar { min-width: 60px !important; }

  /* ── Form grids — 1 colonne ── */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-section { overflow-x: hidden !important; }

  /* ── Toolbars (filtres haut de page) ── */
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar form { flex-direction: column !important; align-items: stretch !important; }
  .toolbar select,
  .toolbar input[type=month],
  .toolbar input[type=text],
  .toolbar input[type=search] { width: 100% !important; max-width: 100% !important; }
  .toolbar .spacer { display: none !important; }

  /* ── Filtres inline (volume horaire, cours) ── */
  .filtres {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .filtres input, .filtres select { width: 100% !important; max-width: 100% !important; }

  /* ── Filtre mois (présences, surveillance) ── */
  .mois-filter {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .mois-filter input,
  .mois-filter select,
  .mois-filter button { width: 100% !important; max-width: 100% !important; }

  /* ── Alertes grid (présences, surveillance) ── */
  .alertes-grid { grid-template-columns: 1fr !important; }

  /* ── EDT Calendrier ── */
  .calendar { grid-template-columns: 1fr !important; }
  .day-col  { border-radius: 8px !important; }

  /* ── Grilles génériques multi-colonnes ── */
  .bottom-grid, .poles-grid, .sect-grid,
  .two-cols, .accueil-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Profil dossier — 1 colonne sur mobile ── */
  .profil-body {
    grid-template-columns: 1fr !important;
  }
  .profil-row {
    flex-wrap: wrap !important;
  }
  .profil-row .k {
    flex-shrink: 0 !important;
  }
  .profil-row .v {
    text-align: left !important;
    flex: 1 1 100% !important;
  }
  /* Ligne pleine largeur (matricule) */
  .profil-row[style*="grid-column"] {
    grid-column: 1 !important;
  }

  /* ── Topbar sur mobile ── */
  .topbar {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .topbar-right {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .topbar-user-name, .topbar-user-poste {
    font-size: 11px !important;
  }

  /* ── Dashboard exec header ── */
  .exec-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* ── Finances ── */
  .summary-bar  { grid-template-columns: 1fr 1fr !important; }
  .total-bar    { flex-direction: column !important; gap: 6px !important; }
  .fin-tabs     { gap: 4px !important; flex-wrap: wrap !important; }
  .fin-tab      { padding: 6px 10px !important; font-size: 12px !important; }
  .vue-toggle   { flex-wrap: wrap !important; }

  /* ── Modals → bottom sheet défilable ── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px 40px !important;
    margin: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Header page avec bouton Ajouter ── */
  .page-header { flex-wrap: wrap !important; gap: 8px !important; }
  .top-bar     { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  /* ── Enseignant devoirs — sélection type/format ── */
  .type-grid { grid-template-columns: 1fr !important; }
  .type-card, .type-opt { min-width: 0 !important; width: 100% !important; }

  /* Radio rows dans formulaire (type devoir, format réponse) */
  .type-radio-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .type-radio-row label {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    align-items: flex-start !important;
  }
  /* Question builder grid QCM */
  .q-form { grid-template-columns: 1fr !important; }

  /* Modal form — rangées de champs côte à côte → colonne */
  .modal .row { flex-direction: column !important; gap: 10px !important; }
  .modal .row .fg { min-width: 0 !important; flex: 1 1 100% !important; }

  /* Container enseignant */
  .container { padding: 12px 8px !important; }

  /* Header-row avec bouton "Créer" */
  .header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Card head (liste devoirs) */
  .card-head { flex-direction: column !important; align-items: flex-start !important; }
  .card-body { flex-direction: column !important; align-items: flex-start !important; }

  /* ── Boutons ── */
  .btn    { white-space: nowrap; }
  .btn-sm { font-size: 11px !important; padding: 4px 8px !important; }
}

/* ═══════════════════════════════════════════
   PETIT MOBILE ≤ 480px
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Stats → 1 colonne */
  .stats { gap: 6px !important; }
  .stat-card, .stat { flex: 1 1 100% !important; }
  .summary-bar { grid-template-columns: 1fr !important; }

  /* Valeurs KPI plus petites */
  .stat-card .val, .stat .val { font-size: 20px !important; }
  .total-bar .tv { font-size: 16px !important; }
  .kpi-row { grid-template-columns: 1fr !important; }
  .kpi-val { font-size: 18px !important; }

  /* Cellules de table compactes */
  th, td { padding: 8px !important; font-size: 12px !important; }
}