/* ============================================================
   HerCall — tab_shell.css (GLOBAL)

   Objectif :
   - Tous les onglets de la bottom-nav (main_nav) sont TOUJOURS centrés
     et font 95% de la largeur de l'écran (95%), quelle que soit la taille.

   Pourquoi ce fichier existe :
   - Plusieurs pages ont des règles "width:90%" ou des media queries (<=980/<=1024)
     qui sautent sur tablette large (1280px+). Ici on impose un gabarit unique.

   Principe :
   - On fixe la largeur sur le <main>.
   - Les .container internes remplissent le main (100%) pour éviter la "double réduction".
   - On neutralise quelques wrappers historiques (events/discover/etc.) qui se recentraient.
   ============================================================ */

:root{
  --hc-tab-w: 95%;
  --hc-tab-mt: 10px;
  --hc-tab-mb: 18px;
}

/* 1) Shell universel : le <main> devient le conteneur 90% */
body.has-bottom-nav main{
  width: var(--hc-tab-w) !important;
  max-width: none !important;
  margin: var(--hc-tab-mt) auto var(--hc-tab-mb) !important;
  padding: 0 !important;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: clip;
}

/* 2) Si la page a un .container dans le main, il doit remplir le main */
body.has-bottom-nav main > .container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  min-width: 0;
}

/* 3) Neutralise les wrappers qui faisaient déjà du 90% -> on veut 100% du main */
body.has-bottom-nav main > .container > :is(
  .events-head,
  .events-list,
  .events-pager,
  .filters-box,
  .search-bar,
  .flash,
  .open-profiles--full,
  .host-shell,
  .host-wrap,
  .init-section,
  .apps-head,
  .apps-body,
  .dash-header,
  .dash-grid
){
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Certains templates n'ont pas de .container: wrapper direct enfant du main */
body.has-bottom-nav main > :is(
  .events-head,
  .events-list,
  .events-pager,
  .filters-box,
  .search-bar,
  .flash,
  .open-profiles--full,
  .host-shell,
  .host-wrap,
  .init-section,
  .apps-head,
  .apps-body,
  .dash-header,
  .dash-grid
){
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4) Matches : il pilotait la largeur via une variable -> dans le shell on veut 100% */
body.has-bottom-nav main.apps-matches{
  --m-wrap: 100% !important;
}

/* 5) Sécurité anti-débordement */
body.has-bottom-nav main *{ min-width: 0; }