/* __CALMORA_STEP4C_MOBILE_SIDEBAR_COMPACT__ */

/*
  Solo mobile:
  compatta il blocco brand/sidebar che su telefono appare prima della dashboard.

  Non modifica:
  - logica app.js
  - bottoni rapidi
  - Nema Vision
  - Barcode
  - FuoriCasa
  - Audio
  - Guida
  - Allenamento mentale
*/

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;

    padding: 86px 14px 10px !important;
    margin: 0 !important;

    border-right: 0 !important;
    border-bottom: 1px solid #dceee4 !important;

    background: linear-gradient(180deg, #fbfffd, #ffffff) !important;
    box-shadow: 0 8px 22px rgba(8, 60, 35, .06) !important;
  }

  .sidebar .brand-block {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border: 1px solid #dbeee3 !important;
    border-radius: 18px !important;

    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(8, 60, 35, .08) !important;
  }

  .sidebar .brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
    flex: 0 0 auto !important;
  }

  .sidebar .brand-name {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .sidebar .brand-sub {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /*
    Nasconde su mobile i blocchi che duplicano navigazione o occupano tutta la prima schermata.
    Desktop invariato.
  */
  .sidebar .logo-stack,
  .sidebar .partner-logo,
  .sidebar .side-card,
  .sidebar .side-note,
  .sidebar .side-panel,
  .sidebar nav,
  .sidebar .menu,
  .sidebar .menu-item {
    display: none !important;
  }

  .main-content,
  main.content,
  .content {
    padding-top: 14px !important;
  }

  .topbar {
    margin-top: 0 !important;
  }
}

@media (max-width: 780px) {
  .sidebar {
    padding-top: 84px !important;
  }

  .hero-copy h2,
  .section-hero.compact .hero-copy h2 {
    font-size: 30px !important;
    line-height: 1.06 !important;
  }
}