/* ═══════════════════════════════════════════════════════════
   responsive.css — V5.18
   Media queries responsive. À charger APRÈS app.css et _box-plan.css.

   Sélecteurs basés sur les classes RÉELLES de app.css / _box-plan.css.
   On ne duplique pas ce qui s'adapte déjà :
     - .riders-table-wrapper a déjà overflow-x:auto (table scrollable) ✓
     - .stat-grid / .show-cards-grid / .quick-actions en auto-fit/auto-fill ✓
     - .rider-drawer a déjà max-width:100vw ✓
     - _box-plan.css a déjà @media (max-width:900px) → layout 1 colonne ✓
   ═══════════════════════════════════════════════════════════ */

/* ─────────── Cellule ACTIONS de la liste shows ───────────
   Garde View / Riders / corbeille côte à côte (au lieu de s'empiler
   verticalement et de gonfler la hauteur des lignes). Style de base
   hors media query → s'applique à toutes les largeurs. */
.show-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.show-actions .js-delete-show-form {
  margin: 0;
  display: inline-flex;
}
.show-actions .btn {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════ */

/* ─────────── Menu burger (nav responsive) ───────────
   En desktop : burger caché, nav normale.
   ≤1024px : burger visible, .top-nav-collapse repliée. */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  margin-left: auto;
  line-height: 1;
}
/* En desktop, le collapse est un simple conteneur transparent qui
   laisse links + user se disposer comme avant. */
.top-nav-collapse {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

/* ─────────── ZONE INTERMÉDIAIRE (1025–1400px) ───────────
   En FR les libellés sont plus longs ("Tableau de bord", "Plan de boxes",
   "Credentials FEI", "Quarantaine") : sans le burger (qui n'apparaît qu'à
   ≤1024px), .top-nav-links (overflow:hidden) tronquait le dernier item.
   On resserre espacements + police pour tout faire tenir sur une ligne. */
@media (min-width: 1025px) and (max-width: 1400px) {
  /* réduire l'espace entre les 3 blocs (links / user) */
  .top-nav-collapse {
    gap: 14px !important;
  }
  /* liens : moins d'espace entre eux + police légèrement réduite */
  .top-nav-links {
    display: flex;
    gap: 2px !important;
    overflow: visible !important; /* ne plus tronquer */
  }
  .top-nav-links a {
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    gap: 5px !important; /* espace icône/texte du lien */
  }
  .top-nav-links a .fa {
    font-size: 13px !important;
  }
  /* bloc user un peu plus compact */
  .top-nav-user {
    gap: 10px !important;
  }
  .user-name-link {
    padding: 5px 6px !important;
  }
}

/* ─────────── TABLETTE (≤ 1024px) ─────────── */
@media (max-width: 1024px) {
  /* Burger visible, repli du menu */
  .nav-burger {
    display: inline-flex;
    align-items: center;
  }
  .top-nav-inner {
    flex-wrap: wrap;
  }
  /* Le menu se replie : caché par défaut, pleine largeur quand ouvert */
  .top-nav-collapse {
    display: none;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    width: 100%;
    flex-basis: 100%;
    margin-top: 8px;
  }
  .top-nav-collapse.open {
    display: flex !important;
  }
  /* Liens en colonne, pleine largeur */
  .top-nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    overflow: visible !important; /* annule overflow:hidden de _top-nav-v511 */
    flex: 1 1 100% !important;
  }
  .top-nav-links a {
    padding: 10px 12px;
    border-radius: 4px;
    white-space: nowrap;
  }
  /* Bloc user en colonne aussi */
  .top-nav-user {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .top-nav-user-info {
    max-width: 100%;
  }
  /* Le menu langue déroulant : en flux normal dans le panneau */
  .lang-switcher .lang-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    margin-top: 4px;
  }
  /* Sous-menu Administration : déplié en flux dans le panneau burger */
  .nav-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .nav-dropdown-caret {
    display: none;
  }
  .nav-dropdown::after {
    display: none;
  }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 0;
    min-width: 0;
    padding: 0;
  }
  .nav-dropdown-menu a {
    color: #fff;
    padding-left: 28px;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .nav-dropdown-sep {
    background: rgba(255, 255, 255, 0.15);
    margin: 4px 12px;
  }

  /* Layout riders : sidebar (260px) + main → empilés */
  .riders-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .riders-sidebar {
    position: static;
    top: auto;
    margin-bottom: 14px;
  }

  /* Plan de box : la liste "chevaux à placer" ne sert à rien au tactile
     (le drag & drop ne fonctionne pas). On la masque : consultation seule. */
  .box-plan-sidebar {
    display: none !important;
  }
}

/* ─────────── MOBILE (≤ 640px) ─────────── */
@media (max-width: 640px) {
  /* --- Conteneurs : padding réduit --- */
  .main-container,
  .content-section,
  .qualification-section,
  .page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* --- Drawer events / fiche : pleine largeur --- */
  .rider-drawer {
    width: 100%;
  }
  /* Le drawer "fiche cavalier" (créé par JS) — même traitement */
  .rider-info-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Stats / cartes : 1 colonne en mobile --- */
  .stat-grid,
  .show-cards-grid,
  .quick-actions {
    grid-template-columns: 1fr !important;
  }

  /* --- Formulaires : champs pleine largeur --- */
  .form-control,
  select.form-control,
  .login-card {
    max-width: 100% !important;
  }
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .form-actions .btn {
    flex: 1 1 auto;
  }

  /* --- Section title : un peu plus compact --- */
  .section-title {
    font-size: 15px;
  }

  /* --- Plan de box : recherche plan pleine largeur --- */
  .plan-search-wrap,
  .plan-search-wrap .box-search-input {
    width: 100%;
  }
  .week-tabs {
    flex-wrap: wrap;
  }
  /* Consultation : la zone des couloirs/box peut scroller horizontalement
     si elle reste large ; les couloirs s'enroulent déjà (flex-wrap). */
  .box-plan-main {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
  }
  /* Indice tactile : le drag&drop ne marche pas au doigt — on garde le plan
     lisible en consultation. Les occupants restent visibles, juste non draggables. */
  .box-occupant,
  .unplaced-horse {
    cursor: default;
  }

  /* --- Data tables génériques : scroll horizontal de sécurité ---
     (.riders-recap-table est déjà dans .riders-table-wrapper ; ceci
      couvre les autres .data-table hors wrapper, ex. users, withdrawals) */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* --- Tableau riders : figer la colonne NOM pendant le scroll horizontal ---
     Permet de garder le cavalier visible quand on défile vers les semaines.
     Le fond doit être opaque (sinon le contenu défilant se voit dessous). */
  .riders-recap-table .col-name,
  .riders-recap-table .cell-name {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff; /* fond opaque par défaut */
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
  }
  /* En-tête de la colonne nom : au-dessus des cellules */
  .riders-recap-table thead .col-name {
    z-index: 5;
    background: #2c3e50; /* reprend le fond foncé du thead */
  }
  /* Reprendre la couleur d'alternance des lignes pour la cellule figée */
  .riders-recap-table .rider-row-color-1 .cell-name {
    background: #f9fbfd;
  }
  .riders-recap-table .rider-row:hover .cell-name {
    background: #fef9e7;
  }
}

/* ─────────── TRÈS PETIT (≤ 380px) ─────────── */
@media (max-width: 380px) {
  .top-nav-brand {
    font-size: 15px;
  }
  .btn-sm {
    font-size: 11px;
    padding: 5px 8px;
  }
  .section-number {
    display: none;
  } /* gagne de la place sur les titres */
}