/* ============================================================
   responsive.css — 1 sections
   ============================================================ */

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px) {
  /* Chunk D v3 : sidebar drawer permanent gere dans nav.css.
     Ici on garde juste les ajustements specifiques mobile. */
  .kpi-grid { grid-template-columns:1fr 1fr; }
  /* Grille 3 KPI coach : garder 3 colonnes meme en mobile (compact) */
  .kpi-grid.kpi-grid-3 { grid-template-columns:repeat(3,1fr); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .search-wrap { display:none; }
  .content { padding:16px; padding-bottom:80px; }
  .topbar { padding:0 12px; gap:8px; }
  .topbar-breadcrumb { font-size:17px; }
  /* 04/06/2026 : le toggle de theme reste visible en mobile (slider compact,
     la barre de recherche etant deja masquee, il y a la place). */
}

/* BOTTOM NAVIGATION - retiree (5r 11/05/2026) : navigation par sidebar uniquement */
.bottom-nav { display:none !important; }

/* ============================================================
   PHASE 4 chunk 5r v4 (11/05/2026) : fix zoom auto iOS/Firefox mobile
   ============================================================
   iOS Safari et Firefox iOS zooment automatiquement au focus quand
   font-size < 16px sur input/select/textarea. Force 16px sur mobile
   pour empecher ce comportement (qui ne se restaure pas automatiquement
   et oblige l user a pincer pour dezoom).
   Reference : https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
   ============================================================ */
@media (max-width:900px) {
  .auth-input,
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width:500px) {
  .kpi-grid { grid-template-columns:1fr 1fr; }
  /* Grille 3 KPI : reste a 3 colonnes meme en tres petit ecran.
     28/05/2026 : lisibilite amelioree -> 26px + letter-spacing 0.5px (au lieu
     de 24px/0). Barlow Condensed reste compacte ; le tracking positif aere les
     chiffres et le blanc pur (defini dans modals.css) maximise le contraste. */
  .kpi-grid.kpi-grid-3 { grid-template-columns:repeat(3,1fr); gap:8px; }
  .kpi-grid.kpi-grid-3 .kpi-val { font-size:26px; letter-spacing:0.5px; }
  .kpi-grid.kpi-grid-3 .kpi-lbl { font-size:10px; }
  .kpi-grid.kpi-grid-3 .kpi-delta { font-size:10px; }
  .kpi-grid.kpi-grid-3 .kpi-card { padding:10px 10px 10px 14px; }
  .kpi-val { font-size:30px; }
  .kpi-card { padding:12px; }
  .content { padding:12px; }
  .topbar-breadcrumb { font-size:16px; }
  .card-body { padding:14px; }
  .card-header { padding:12px 14px; }
  .modal { border-radius:12px; }

  /* Force 4-column inline grids → 2 columns on small screens */
  .content div[style*="repeat(4,1fr)"],
  .content div[style*="repeat(4, 1fr)"] {
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* Force 3-column inline grids → 1 column */
  .content div[style*="repeat(3,1fr)"],
  .content div[style*="repeat(3, 1fr)"] {
    grid-template-columns:1fr !important;
  }

  /* Prevent fixed min-width elements from overflowing */
  .content div[style*="min-width:280px"],
  .content div[style*="min-width:260px"] {
    min-width:0 !important;
    width:100% !important;
  }

  /* Calendar sidebar — hide on very small screens */
  .cal-sidebar { display:none !important; }

  /* Role selector on login — 2 columns */
  .auth-role { grid-template-columns:repeat(2,1fr) !important; }

  /* Masterclass card champion row — stack vertically */
  .content div[style*="align-items:flex-start;gap:14px"] {
    flex-wrap:wrap !important;
  }

  /* Search inputs — full width */
  .content input[style*="width:200px"] {
    width:100% !important;
  }

  /* Flex rows with too many items — allow wrapping */
  .content div[style*="display:flex"][style*="gap:"] {
    flex-wrap:wrap;
  }

  /* Bracket grid — scroll horizontal */
  .content div[style*="overflow-x:auto"] {
    -webkit-overflow-scrolling:touch;
  }

  /* Fix topbar notification overlap */
  .topbar-notif { width:28px; height:28px; font-size:16px; }
}

/* Planning V2 - Bouton + pour creer un cours en parallele */
.cv2-day-col:hover .cv2-parallel-btn { opacity: 1; }
.cv2-parallel-btn:hover { background: rgba(183,28,28,1) !important; transform: scale(1.1); }

/* ============================================================
   Vue Clash — cards summary responsive (28/05/2026)
   Sur mobile, le `repeat(auto-fit, minmax(140px,1fr))` inline bascule
   de maniere imprevisible entre 1 et 2 colonnes selon la largeur exacte
   du viewport (sidebar, scrollbar...). Cote coach 2 colonnes, cote club
   parfois 1 seule -> incoherence visuelle.
   On force explicitement 2 colonnes en dessous de 700px (petits widgets
   compacts, identique club et coach), 1 colonne en dessous de 360px
   pour les ecrans tres etroits.
   ============================================================ */
@media (max-width:700px) {
  .cv2-clash-cards {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
}
@media (max-width:360px) {
  .cv2-clash-cards {
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   Espace club — page Synthese responsive (28/05/2026)
   3 grilles inline non responsives a l origine :
   - club-summary-split : 2 tableaux (discipline / coach) cote a cote
   - club-summary-kpis  : bande de 4 chiffres cles
   - club-summary-bars  : histogramme 12 mois (repeat(12,1fr))
   ============================================================ */

/* Histogramme 12 mois : scroll horizontal sur mobile pour garder des
   barres et des libelles lisibles plutot que 12 colonnes ecrasees. */
.club-summary-bars-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Tablette : les 2 tableaux discipline/coach s empilent. */
@media (max-width:700px) {
  .club-summary-split { grid-template-columns:1fr !important; }
  .club-summary-bars { min-width:560px; }
}

/* Petit ecran : bande de 4 chiffres cles en 2x2, bordures corrigees. */
@media (max-width:600px) {
  .club-summary-kpis { grid-template-columns:1fr 1fr !important; }
  .club-summary-kpis > div { border-right:none !important; padding:14px !important; }
  .club-summary-kpis > div:nth-child(odd) { border-right:1px solid var(--border) !important; }
  .club-summary-kpis > div:nth-child(1),
  .club-summary-kpis > div:nth-child(2) { border-bottom:1px solid var(--border); }
}

/* Tableaux finance (revenus/couts, couts coachs) : sur mobile etroit, on transforme
   les lignes en cartes verticales avec libelles, plutot qu'un scroll horizontal qui
   masque la derniere colonne sans indication. Necessite que le JS ait pose des
   data-label sur chaque <td>. La ligne "Total" (classe .summary-row-total) reste
   speciale : affichee en une bande compacte avec son montant final.
   Au-dessus de 600px on conserve la table classique. */
.club-summary-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:600px) {
  .club-summary-tablewrap { overflow-x:visible; }
  /* Eclatement de la table en blocs verticaux */
  .club-summary-tablewrap table,
  .club-summary-tablewrap tbody,
  .club-summary-tablewrap tr,
  .club-summary-tablewrap td { display:block; width:100%; box-sizing:border-box; }
  .club-summary-tablewrap thead { display:none; }
  /* Chaque ligne devient une carte */
  .club-summary-tablewrap tr {
    border:1px solid var(--border) !important;
    border-radius:10px;
    margin-bottom:8px;
    padding:6px 4px;
    background:var(--bg2);
  }
  /* Cellule = paire libelle / valeur sur une ligne */
  .club-summary-tablewrap td {
    display:flex !important;
    justify-content:space-between !important;
    align-items:center;
    text-align:right !important;
    padding:6px 12px !important;
    border:0 !important;
    gap:12px;
  }
  /* Le libelle, injecte via data-label, apparait a gauche en gris discret */
  .club-summary-tablewrap td::before {
    content:attr(data-label);
    text-align:left;
    font-size:10px;
    font-weight:700;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.3px;
    flex-shrink:0;
  }
  /* Cellules sans data-label (colspan, etc.) n'affichent rien */
  .club-summary-tablewrap td:not([data-label])::before { content:''; }
  /* Ligne Total : on garde un style ramasse avec label + valeur sur une ligne */
  .club-summary-tablewrap tr.summary-row-total {
    background:var(--bg3) !important;
    border:2px solid var(--border) !important;
    margin-top:4px;
  }
  /* Le colspan="4" du Total cree une cellule vide qu'on masque en mobile */
  .club-summary-tablewrap tr.summary-row-total td[colspan] {
    justify-content:flex-start !important;
    font-size:12px !important;
  }
}


/* ============================================================
   Shop du club - Tableau "Catalogue & stock" (onglet gestionnaire)
   8 colonnes : sur mobile etroit, le scroll horizontal masquait la
   derniere colonne (Vendu/Actions) sans indication. On reutilise le
   meme pattern que .club-summary-tablewrap : eclatement de chaque
   ligne en carte verticale libelle/valeur via data-label sur les <td>.
   Au-dessus de 600px on garde la table classique avec scroll.
   ============================================================ */
.shop-stock-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:600px) {
  .shop-stock-tablewrap { overflow-x:visible; }
  .shop-stock-tablewrap table,
  .shop-stock-tablewrap tbody,
  .shop-stock-tablewrap tr,
  .shop-stock-tablewrap td { display:block; width:100%; box-sizing:border-box; }
  .shop-stock-tablewrap thead { display:none; }
  /* Chaque produit devient une carte */
  .shop-stock-tablewrap tr {
    border:1px solid var(--border) !important;
    border-radius:10px;
    margin-bottom:8px;
    padding:6px 4px;
    background:var(--bg2);
  }
  /* Cellule = paire libelle / valeur sur une ligne */
  .shop-stock-tablewrap td {
    display:flex !important;
    justify-content:space-between !important;
    align-items:center;
    text-align:right !important;
    padding:7px 12px !important;
    border:0 !important;
    gap:12px;
  }
  /* Le libelle (data-label) a gauche en gris discret */
  .shop-stock-tablewrap td::before {
    content:attr(data-label);
    text-align:left;
    font-size:10px;
    font-weight:700;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.3px;
    flex-shrink:0;
  }
  /* Cellule vignette (data-label vide) : on la masque, le nom suffit */
  .shop-stock-tablewrap td[data-label=""] { display:none !important; }
  /* Cellule Actions : libelle masque, boutons alignes a droite */
  .shop-stock-tablewrap td[data-label="Actions"]::before { content:''; }
  .shop-stock-tablewrap td[data-label="Actions"] { justify-content:flex-end !important; }
}

/* ──────────────────────────────────────────────────────────
   28/05/2026 — Liste "Essais & plans externes" (admin/club).
   Meme pattern carte que .shop-stock-tablewrap.
   ────────────────────────────────────────────────────────── */
.plan-states-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:600px) {
  .plan-states-tablewrap { overflow-x:visible; }
  .plan-states-tablewrap table,
  .plan-states-tablewrap tbody,
  .plan-states-tablewrap tr,
  .plan-states-tablewrap td { display:block; width:100%; box-sizing:border-box; }
  .plan-states-tablewrap thead { display:none; }
  .plan-states-tablewrap tr {
    border:1px solid var(--border) !important;
    border-radius:10px;
    margin-bottom:8px;
    padding:6px 4px;
    background:var(--bg2);
  }
  .plan-states-tablewrap td {
    display:flex !important;
    justify-content:space-between !important;
    align-items:center;
    text-align:right !important;
    padding:7px 12px !important;
    border:0 !important;
    gap:12px;
  }
  .plan-states-tablewrap td::before {
    content:attr(data-label);
    text-align:left;
    font-size:10px;
    font-weight:700;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.3px;
    flex-shrink:0;
  }
  /* La valeur (a droite) peut contenir un <br> (badge + statut, nom + plan) :
     on l'aligne en haut et on autorise le retour a la ligne pour eviter le decalage. */
  .plan-states-tablewrap td {
    align-items:flex-start;
  }
  .plan-states-tablewrap td::before {
    padding-top:1px;
  }
  /* Valeur riche (badge + statut sur 2 lignes) : alignee a droite, repli autorise */
  .plan-states-tablewrap td .ps-val {
    text-align:right;
    display:inline-block;
    line-height:1.5;
  }
  /* Adherent : en-tete de carte (nom + email), pas de libelle, sur toute la largeur.
     display:block => PAS de ::before genere (sinon ligne vide en haut = decalage). */
  .plan-states-tablewrap td[data-label="Adhérent"] {
    display:block !important;
    text-align:left !important;
    border-bottom:1px solid var(--border) !important;
    margin-bottom:4px;
    padding-bottom:9px !important;
  }
  .plan-states-tablewrap td[data-label="Adhérent"]::before { display:none !important; }
  /* Actions : boutons alignes a droite, libelle masque */
  .plan-states-tablewrap td[data-label="Actions"]::before { display:none !important; }
  .plan-states-tablewrap td[data-label="Actions"] { justify-content:flex-end !important; flex-wrap:wrap; }
  /* Cellule actions vide (statut converti/annule) : on masque pour ne pas laisser un blanc */
  .plan-states-tablewrap td[data-label="Actions"]:empty { display:none !important; }

  /* ── Carte competition responsive (mobile) ──────────────────
     Colonne gauche : pastille date (70px). Logo federation en bas a
     droite, reduit a 40px sur mobile. */
  .comp-card-img { width:70px !important; height:70px !important; }
  .comp-card-fed-corner { width:40px !important; height:40px !important; bottom:10px !important; right:10px !important; }
  .comp-card-actions { margin-bottom:10px; display:flex; gap:6px; flex-wrap:wrap; }
}

/* ── Carte competition : tailles par defaut (desktop) ──────────
   La pastille date est dans la colonne gauche. Le logo federation
   est en bas a droite de la carte (position absolue). */
.comp-card-img { width:140px; height:140px; }
.comp-card-fed-corner { position:absolute; bottom:14px; right:14px; width:48px; height:48px; z-index:2; pointer-events:none; }
.comp-card-fed-corner img { width:100%; height:100%; }

/* Hauteur uniforme : chaque carte remplit la hauteur de sa cellule de
   grille (align-items:stretch sur .comp-card-grid), donc deux cartes
   cote a cote ont la meme hauteur. La colonne droite pousse les
   disciplines en bas via margin-top:auto. On reserve un peu de place
   a droite des disciplines pour ne pas passer sous le logo. */
.comp-card-grid > .card { height:100%; display:flex; flex-direction:column; }
.comp-card-grid > .card > .card-body { flex:1; display:flex; flex-direction:column; }
.comp-card-grid .comp-card-row { flex:1; }
.comp-card-grid .comp-card-disc { margin-top:auto; padding-top:6px; }

/* Editeur objectif pedagogique (discipline detail) : layout responsive.
   Desktop = calendrier + items cote a cote ; mobile = empile. */
.cdd-obj-grid { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; margin-bottom:14px; }
.cdd-obj-panels { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:860px){ .cdd-obj-grid { grid-template-columns:1fr; } }
@media (max-width:560px){ .cdd-obj-panels { grid-template-columns:1fr; } }