/* ------------------------------------------------------------------
   Mobilní optimalizace zákaznického portálu (obnova ztracené responzivity).
   Desktop (nad 800px) ZŮSTÁVÁ BEZE ZMĚNY – mimo @media je jen skrytí hamburgeru.
   Pod 800px: menu #sn se sbalí pod hamburger (☰); po otevření se rozbalí
   jako FIXNÍ úzký panel (~210px), který se PŘEKRYJE přes obsah (není na celou
   šířku), světlý podklad, aktivní položka modrá, hover tmavý.
   ------------------------------------------------------------------ */

/* hamburger se na desktopu nezobrazuje */
#sn ul li.icon { display: none; }

@media screen and (max-width: 800px) {
  /* hlavička + obsah z absolutního pozicování do toku (ať se vejdou) */
  #system {
    position: relative; left: 0; top: 0; width: 100%;
    height: 60px; margin: 0; background-size: auto 100%;
  }
  #obsah {
    position: relative; left: 0; top: 0; width: 100%;
    min-height: 400px; margin: 6px 0 0 0; padding: 0 2%;
    box-sizing: border-box;
  }

  /* SBALENÉ menu: jen hamburger (vlevo nahoře), zbytek skrytý */
  #sn { position: relative; left: 0; top: 0; width: auto; z-index: 200; }
  #sn ul { margin: 0; padding: 0; list-style: none; }
  #sn ul li { display: none; }
  #sn ul li.icon { display: inline-block; }
  #sn ul li.icon a {
    display: block; background-color: #729fcc; color: #fff;
    padding: 10px 16px; font-size: 20px; text-decoration: none;
  }

  /* OTEVŘENÉ menu: fixní úzký panel překrývající obsah */
  #sn.responsive {
    position: fixed; left: 0; top: 0; width: 210px; height: 100%;
    background-color: #f1f1f1; z-index: 500; overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .25);
  }
  #sn.responsive ul li { display: block; float: none; }
  #sn.responsive ul li a {
    display: block; padding: 12px 18px; margin: 0;
    background-color: transparent; color: #000; font-weight: bold;
    text-decoration: none; border: none;
  }
  #sn.responsive ul li a:hover { background-color: #555; color: #fff; }
  #sn.responsive ul li#active a { background-color: #3a93d2; color: #fff; }
  #sn.responsive ul li#odhlasit a { color: #f00; }
  #sn.responsive ul li.icon a { background-color: #729fcc; color: #fff; } /* hamburger nahoře v panelu = zavřít */
}