/* =========================================================================================
   MOBILE (telefono e tablet in verticale) — attivo SOLO sotto i 768 px di larghezza.
   Sopra questa soglia nessuna regola di questo file si applica: la UI da browser resta
   identica. Le classi "ost-*" sono agganci aggiunti nel codice e non hanno stile su desktop.
   Molti stili dell'app sono inline: per questo qui serve !important.
   ========================================================================================= */
@media (max-width: 767.98px) {

  /* --- Layout: una sola colonna e un solo scroll di pagina -------------------------------
     Su desktop le due colonne hanno altezza fissa e scroll interno. Su telefono gli scroll
     annidati sono scomodi: le colonne prendono l'altezza del contenuto. */
  .responsive-container { padding: 0 10px !important; }
  .ost-main-col {
    height: auto !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
  .ost-main-col + .ost-main-col { margin-top: 14px; }

  /* --- Barra in alto ---------------------------------------------------------------------- */
  .ost-topbar-logo { height: 64px !important; width: 64px !important; }
  .ost-topbar-badges { display: none !important; }        /* etichette descrittive */
  .ost-topbar-right {
    min-width: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .ost-topbar-right > div {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .ost-topbar-right .topbar-action-btn { padding-left: 10px !important; padding-right: 10px !important; }

  /* overflow "clip" taglia come "hidden" ma non crea un contenitore di scroll: serve perche'
     la barra dei tab qui sotto possa restare agganciata in alto mentre si scorre la pagina. */
  #app-root { overflow-x: clip !important; overflow-y: visible !important; }

  /* --- Barra dei tab: resta scorrevole in orizzontale, ma sempre a portata ---------------- */
  #main-tabs-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ost-bg, #050a16);
    padding-top: 4px;
  }

  /* --- Righe di controlli che su desktop stanno su una riga sola ------------------------- */
  .ost-chart-controls,
  .ost-wrap-row { flex-wrap: wrap !important; row-gap: 8px; }

  /* --- Testi troncati con "..." su desktop: su telefono vanno a capo ------------------- */
  .ost-ellipsis-line { white-space: normal !important; overflow: visible !important; }
  .ost-ellipsis-line span { white-space: normal !important; }
  .ost-bp-divider-label { white-space: normal !important; text-align: center; font-size: 13px !important; }

  /* --- Riquadri con scroll interno (scenari del blueprint): niente scroll annidato ------- */
  .ost-scroll-box { max-height: none !important; overflow: visible !important; }

  /* --- Grafico un po' piu' basso, per vedere anche i controlli --------------------------- */
  #price-chart { height: 380px !important; }

  /* --- Tabelle larghe: scorrono in orizzontale invece di schiacciarsi -------------------- */
  #tab-pane-daytracker table,
  #tab-pane-journal table { min-width: 640px; }
  #tab-pane-daytracker td,
  #tab-pane-journal td { white-space: nowrap; }
}