/* ==========================================================================
   Siroky pocitacovy vzhled (>= 821 px): web se prizpusobi sirce okna (max. 1280 px).
   Dosavadni pevna sirka 821 px zustava jen jako minimum; mobil (<= 820 px) a tisk beze zmeny.
   Obrazky header_bg / main_bg / footer_bg se nemeni - rozsireni zajisti pruzne pozadi.
   ========================================================================== */
@media screen and (min-width: 821px) {
  body { min-width: 0; }

  #header, #menu, #main, #footer {
    box-sizing: border-box;
    width: 96% !important;
    min-width: 801px;
    max-width: 1280px;
  }

  /* hlavicka: puvodni obrazek (logo) vlevo, zbytek polopruhledny bily panel stejne barvy */
  #header { position: relative; background-color: rgba(255, 255, 255, .6); background-position: left top; }
  #header::after {
    content: ""; position: absolute; left: 821px; right: 0; bottom: 0; height: 9px;
    background: linear-gradient(to bottom, rgba(252, 250, 252, .6), rgba(227, 208, 217, .64));
    pointer-events: none;
  }
  #header > * { position: relative; z-index: 1; }
  #login_box { margin-right: 24px; }

  /* telo: tri sloupce (levy 146, pravy 146, stred se roztahne) */
  #main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: 12px;
    padding-right: 12px;
    background: rgba(255, 255, 255, .9);
  }
  #left, #right { float: none; flex: 0 0 146px; }
  #central {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 18px;
    background: #fff;
    align-self: stretch;
  }
  #bottomend { flex: 0 0 100%; order: 9; }

  #footer {
    background: rgba(255, 255, 255, .9);
    border-radius: 0 0 14px 14px;
    height: auto;
    min-height: 42px;
    padding-bottom: 14px;
  }

  /* obrazky a tabulky v obsahu nepretekaji */
  #central img { max-width: 100%; height: auto; }
}

/* nocni rezim */
@media screen and (min-width: 821px) {
  html[data-theme="dark"] #central { background: transparent; }
  html[data-theme="dark"] #header::after { background: linear-gradient(to bottom, #1c1c22, #2c2c35); }
}