/* =========================================================
   FINPLUS OSTIA - Mobile Notes + Category fix v1
   Fix:
   1) evita doppia visualizzazione Note importanti
   2) stabilizza i pulsanti categoria MASTER/AGONISTI su mobile al primo caricamento
   ========================================================= */

/* NOTE IMPORTANTI: una sola visualizzazione */
body.finplus-role-coach #weeklyNotesPreview {
  display: none !important;
}

body.finplus-role-swimmer #weeklyNotes {
  display: none !important;
}

/* Se il ruolo non e' ancora determinato, evita comunque effetto doppio troppo evidente */
body:not(.finplus-role-ready) #weeklyNotesPreview {
  display: none !important;
}

@media (max-width: 820px) {
  /* Compatta il blocco note su mobile */
  .notes-banner {
    gap: 8px !important;
  }

  #weeklyNotes,
  #weeklyNotesPreview {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #weeklyNotesPreview {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    line-height: 1.38 !important;
  }

  /* CATEGORIE: evita che MASTER / AGONISTI partano uno sotto l'altro a sinistra */
  #audienceSwitcher.audience-switcher {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 4px 0 0 !important;
    justify-items: stretch !important;
  }

  #audienceChip.audience-chip {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  #audienceSwitcher .audience-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #audienceSwitcher .audience-buttons button[data-audience] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  /* evita che altri stili della topbar forzino i bottoni categoria in colonna */
  .topbar-right #audienceSwitcher .audience-buttons {
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }
}