/* =========================================================
   FINPLUS OSTIA - Mobile Races overflow fix v2
   Corregge il taglio a destra di lista gare e dettaglio evento su smartphone.
   ========================================================= */

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  #appShell,
  .app,
  #racesView,
  #racesView .card,
  #racesView .card-body,
  #racesView .race-layout,
  #racesView .race-list-wrap,
  #racesView .race-detail-panel,
  #racesView #racesList,
  #racesView #raceDetailInline,
  #racesView #raceEditorCard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #racesView {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #racesView .card-body {
    padding: 10px !important;
  }

  #racesView .race-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #racesView .race-layout > *,
  #racesView .race-layout section,
  #racesView .race-list-wrap,
  #racesView .race-detail-panel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #racesView .race-list-wrap,
  #racesView .race-detail-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  #racesView #racesList {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #racesView #racesList > *,
  #racesView #raceDetailInline > *,
  #racesView .race-detail-panel > *,
  #racesView .race-list-wrap > * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #racesView #racesList > * {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #racesView img,
  #racesView video,
  #racesView iframe,
  #racesView canvas,
  #racesView table {
    max-width: 100% !important;
  }

  #racesView table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #racesView .race-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #racesView input,
  #racesView select,
  #racesView textarea,
  #racesView button {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #racesView .race-detail-panel {
    max-height: none !important;
  }

  #racesView .race-detail-subtitle,
  #racesView .race-detail-title,
  #racesView .race-list-title,
  #racesView #raceDetailInline {
    white-space: normal !important;
  }
}