/* ===========================================================================
   sidebar.css — menu laterale uguale in tutte le pagine (da computer).

   Ogni pagina aveva la sua copia del menu con regole diverse:
   - Home, Anagrafica, Eventi: il menu non poteva scorrere, e su una finestra
     bassa tagliava le ultime voci e nascondeva il Logout, senza modo di
     raggiungerli;
   - Documenti, Turni, Bollettini, Terremoti, TLC: il menu scorreva, con la
     barra grigia di Windows che compariva appena mancava qualche pixel.

   Qui una regola sola, caricata dopo il CSS di ogni pagina:
   - Logout sempre visibile in fondo;
   - quando lo spazio si accorcia si stringono prima logo e distanze, cosi'
     nei casi normali tutto ci sta senza barra;
   - solo su finestre molto basse il menu scorre, con una barra sottile e
     chiara al posto di quella grigia.

   Sul telefono (fino a 820px) comanda mobile.css, che usa il menu a scomparsa.
   ========================================================================= */

@media (min-width: 821px) {

  .layout-admin .sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .layout-admin .sidebar > img {
    flex: 0 0 auto;
    width: 220px;
    max-width: 85%;
    margin-bottom: 20px;
  }

  .layout-admin .sidebar .menu {
    flex: 1 1 auto;
    min-height: 0;                 /* senza questo un flex non si accorcia mai */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* barra sottile e chiara sul rosso, al posto di quella grigia */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .45) transparent;
  }
  .layout-admin .sidebar .menu::-webkit-scrollbar { width: 6px; }
  .layout-admin .sidebar .menu::-webkit-scrollbar-track { background: transparent; }
  .layout-admin .sidebar .menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .45);
    border-radius: 3px;
  }

  .layout-admin .sidebar .menu a {
    padding: 15px 20px;
  }

  .layout-admin .sidebar #logout {
    flex: 0 0 auto;
    margin: 12px auto 20px auto;
  }

  /* finestra non altissima: logo e distanze un po' piu' piccoli */
  @media (max-height: 1000px) {
    .layout-admin .sidebar { padding-top: 14px; }
    .layout-admin .sidebar > img { width: 170px; margin-bottom: 12px; }
    .layout-admin .sidebar .menu a { padding: 12px 20px; }
    .layout-admin .sidebar #logout { margin: 10px auto 14px auto; }
  }

  /* finestra bassa: ancora piu' compatto */
  @media (max-height: 860px) {
    .layout-admin .sidebar { padding-top: 10px; }
    .layout-admin .sidebar > img { width: 120px; margin-bottom: 8px; }
    .layout-admin .sidebar .menu a { padding: 9px 20px; }
    .layout-admin .sidebar #logout { margin: 8px auto 10px auto; padding-top: 8px; padding-bottom: 8px; }
  }
}