﻿/* =========
    SideBar
   ========= */
/* Definovanie SideBaru - laveho bocneho panelu */
nav.navbar.sidebar {
  display: flex !important;
  flex-direction: column;
  flex-shrink: 0; /* Menu sa za ziadnych okolnosti nescvrkne */
  align-items: flex-start; /* Zarovnanie poloziek nahor a zlava */
  /*background-color: var(--bozp-purple);*/
  /* funkcie: radial-gradient, color-mix > farba moze byt [farba]/[farba 10%]/[transparent]/[transparent 20%], uhol 180deg */
  /* radial-gradient(sirka vyska at zprava zhora, farba1, farba2) - vytvori elipsu z farby1 na pozadi farby2, percenta hovoria kolko z farby ma byt pouzite */
  /* color-mix(in srgb, farba1, farba2) - zmiesa, alebo spriesvitni farby - in srgb [sposob zmiesavania] */
  /* linear-gradient(uhol/to bottom/to right, farba1, farba2) - percenta u farieb znamenaju odkial zacinam */
  background: radial-gradient(800px 450px at 10% 50%, color-mix(in srgb, var(--bozp-purple1) 90%, var(--bozp-purple2) 30%), transparent 90%), linear-gradient(180deg, #15110a 0%, #0f0c07 100%) !important; /*color-mix(in srgb, var(--bozp-purple1) 70%, transparent), transparent 55%), linear-gradient(180deg, #15110a 0%, #0f0c07 100%) !important;*/
  padding: 14px 10px;
  box-shadow: var(--bozp-shadow);
  border-style: solid;
  border-color: var(--bozp-orange) !important;
  border-width: medium; /*2px;*/
  border-radius: var(--bozp-radius);
  margin: 18px 0 18px 0px;
}

nav.navbar.sidebar .navbar-brand {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .4px;
}

nav.navbar.sidebar .nav-link {
  color: rgba(255,255,255,.85) !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
  font-weight: 600;
}

/* Polozka v sidebary - ak je nad nou mys */
nav.navbar.sidebar .nav-link:hover {
  /*background: rgba(255,255,255,.08);*/
  background: rgba(255,255,255,.5);
  color: #fff !important;
}

/* Polozka v sidebary - ak je aktualne kliknuta - ZATIAL NETREBA */
/*nav.navbar.sidebar .nav-pills .nav-link:active,
nav.navbar.sidebar .nav-pills .show > .nav-link {*/
  /*background: var(--bozp-accent) !important;*/
  /*background: rgb(0, 38, 255) !important;
  color: #111 !important;
}*/

/* toggle button na mobile v sidebari */
nav.navbar.sidebar .navbar-toggler {
  border-color: rgba(255,255,255,.2) !important;
}

nav.navbar.sidebar .navbar-toggler-icon {
  filter: invert(1);
}





/* vnoreny bocny panel*/
.nested-sidebar {
  width: 100%;
  height: auto;
}

/* desktop */
@media (min-width: 992px) {
  .nested-sidebar {
    width: 220px;
    /* vyska bocneho menu */
    height: 80vh;
  }
}


nav.navbar.bg-light.nested-sidebar {
  background: radial-gradient(800px 450px at 20% 10%, color-mix(in srgb, var(--bozp-accent-2) 18%, transparent), transparent 55%), linear-gradient(180deg, #15110a 0%, #0f0c07 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 14px 10px;
  box-shadow: var(--bozp-shadow);
  border-radius: var(--bozp-radius);
  margin: 18px 0 18px 0px;
}


  nav.navbar.bg-light.nested-sidebar .navbar-brand {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .4px;
  }

  /* links v menu */
  nav.navbar.bg-light.nested-sidebar .nav-link {
    /*color: rgba(255,255,255,.85) !important;*/
    color: red !important;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 4px 0;
    font-weight: 600;
  }

    nav.navbar.bg-light.nested-sidebar .nav-link:hover {
      /*background: rgba(255,255,255,.08);*/
      background: rgba(255,255,255,.5);
      color: #fff !important;
    }






  /* active v nav-pills (bootstrap) */
  nav.navbar.bg-light.nested-sidebar .nav-pills .nav-link.active,
  nav.navbar.bg-light.nested-sidebar .nav-pills .show > .nav-link {
    /*background: var(--bozp-accent) !important;*/
    background: rgb(0, 38, 255) !important;
    color: #111 !important;
  }

  /* toggle button na mobile v sidebari */
  nav.navbar.bg-light.nested-sidebar .navbar-toggler {
    border-color: rgba(255,255,255,.2) !important;
  }

  nav.navbar.bg-light.nested-sidebar .navbar-toggler-icon {
    filter: invert(1);
  }

