/* WebMatchScraper — V76 PRO UI helpers
   Objectif: rendre toutes les pages + menus plus propres et utilisables sur téléphone,
   sans casser le layout desktop. */

:where(button, .btn, .navBtn, .tabBtn, .dayBtn, a, input, select){
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(input, select, button, .btn){
  min-height: 40px;
}

:where(.tblWrap, .tableWrap){
  -webkit-overflow-scrolling: touch;
}

/* === Mobile: header + toolbars plus propres === */
@media (max-width: 760px){
  :where(.wrap){ padding: 12px !important; }

  :where(.top){ flex-direction: column !important; align-items: stretch !important; }
  :where(.top) > :where(div, .row){ width: 100% !important; }

  :where(.header){ align-items: stretch !important; }
  :where(.header) > :where(div){ width: 100% !important; }

  :where(.row){ gap: 8px !important; }

  :where(.toolbar){
    flex-direction: column !important;
    align-items: stretch !important;
  }
  :where(.toolbar) > :where(label, div){ width: 100% !important; }
  :where(input.wide, input.date){ width: 100% !important; }

  :where(.grid){ grid-template-columns: 1fr !important; }

  :where(.actions){ flex-wrap: wrap !important; }

  /* Tables: scroll horizontal propre sur mobile */
  :where(.tblWrap, .tableWrap){ overflow: auto !important; }
}

/* Très petit écran : boutons du header en pleine largeur */
@media (max-width: 480px){
  :where(.top .row button){ width: 100% !important; }
  :where(.top .row .pill){ width: 100% !important; justify-content: center !important; }
}