// CORE
@import "../../../global/less/core/variable.less";
@import "../../../global/less/core/mixins.less";
@import "../../../global/less/core/functions.less";

// ===========================================================================
// TABLE OF CONTENT
// ===========================================================================
// 01. PAGE WRAPPER
// 02. PAGE BOXED
// 03. PAGE HEADER FIXED
// 04. PAGE SIDEBAR FIXED
// 05. PAGE SIDEBAR MINIMIZE
// 06. PAGE SIDEBAR LEFT SHOW
// 07. PAGE SIDEBAR RIGHT SHOW
// 08. PAGE FOOTER FIXED
// ===========================================================================

/* ========================================================================
 * PAGE WRAPPER
 * ======================================================================== */
#wrapper{
  padding: 0px;
  margin: 0px;
  height: 100%;
  position: relative;
}

/* ========================================================================
 * PAGE BOXED
 * ======================================================================== */
html,body{
  &.page-boxed{
    background-color: lighten(@sidebar-bg,15%);
    #wrapper{
      margin-right: auto;
      margin-left: auto;
      position: relative;
    }
    #back-top{
      right: 90px;
    }
    &.page-sidebar-right-show{
      #back-top{
        right: 310px;
      }
    }
  }
}

@media (min-width: 1200px) {
  html,body{
    &.page-boxed{
      #wrapper{
        width: 1220px;
      }
    }
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body{
    &.page-boxed{
      #wrapper{
        width: 970px;
      }
    }
  }
}

@media (max-width: 1024px) {
  body{
    &.page-boxed{
      #back-top{
        right: 60px;
      }
      &.page-sidebar-right-show{
        #header{
          .header-right{
            left: 0px;
          }
        }
        #sidebar-left{
          left: 0px;
          &:after{
            left: 27px;
          }
        }
        #page-content{
          margin-left: @sidebar-width-minimize;
          .breadcrumb-wrapper{
            display: none;
          }
        }
        #back-top{
          right: 60px + @sidebar-width;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  body{
    &.page-boxed{
      &.page-sidebar-minimize-auto{
        #header{
          .navbar-toolbar{
            .navbar-form{
              input{
                min-width: 350px;
              }
            }
          }
        }
      }
      #header{
        .header-right{
          right: 0px !important;
        }
      }
      #page-content{
        margin-right: 0px;
        .header-content{
          .breadcrumb-wrapper{
            display: none;
          }
        }
      }
      #back-top{
        right: 30px;
      }
      &.page-sidebar-right-show{
        #header{
          .header-right{
            right: @sidebar-width !important;
            .navbar-toolbar{
              .navbar-form{
                input{
                  min-width: 225px !important;
                }
              }
            }
          }
        }
        #sidebar-left{
          &:after{
            left: 0px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-boxed{
      #sidebar-left{
        left: -@sidebar-width - 10px;
      }
      #back-top{
        right: 40px;
      }
      &.page-sidebar-right-show{
        #header{
          .header-right{
            right: 0px !important;
            .navbar-toolbar{
              .navbar-form{
                input{
                  min-width: 400px !important;
                }
              }
            }
          }
        }
        #sidebar-left, #sidebar-left:after{
          left: -@sidebar-width - 30px;
        }
      }
    }
  }
}

@media (max-width: 540px){
  body{
    &.page-boxed{
      &.page-sidebar-right-show{
        #header{
          .header-right{
            left: -@sidebar-width !important;
          }
        }
      }
    }
  }
}

/* ========================================================================
 * PAGE HEADER FIXED
 * ======================================================================== */
body{
  &.page-header-fixed{
    .navbar-header, .header-right{
      position: fixed;
    }
    .header-right{
      right: 0px;
      left: @sidebar-width;
    }
    &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
      .header-right{
        left: 0px;
      }
      &.page-sidebar-fixed{
        .header-right{
          right: 0px;
        }
      }
    }
    #sidebar-right{
      .panel{
        .panel-heading{
          position: fixed;
          z-index: @top-zindex;
          top: 0px;
          right: 0px;
          width: @sidebar-width;
        }
        .panel-body{
          margin-top: @navbar-height + 3px;
        }
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-header-fixed{
      #header{
        .header-right{
          left: 0px;
        }
        .header-left{
          position: fixed;
        }
      }
      &.page-sidebar-left-show{
        .navbar-toolbar{
          left: @sidebar-width;
        }
      }
    }
  }
}

/* ========================================================================
 * PAGE SIDEBAR FIXED
 * ======================================================================== */
body{
  &.page-sidebar-fixed{
    #sidebar-left{
      position: fixed;
      left: 0px;
      .sidebar-content{
        .close{
          display: none;
        }
      }
    }
    #sidebar-right{
      position: fixed;
    }
    &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
      #sidebar-left{
        .sidebar-menu{
          &:hover{
            min-width: @sidebar-width + 30px;
            > .active, .sidebar-category{
              width: @sidebar-width-minimize;
            }
          }
          > .active{
            &:hover{
              width: @sidebar-width + 30px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-sidebar-fixed{
      &.page-sidebar-left-show{
        #header{
          .header-right{
            left: 0px;
            right: -@sidebar-width;
          }
        }
      }
      &.page-sidebar-right-show{
        #header{
          .header-right{
            left: -@sidebar-width;
            right: @sidebar-width;
          }
        }
      }
      #sidebar-left{
        left: -@sidebar-width;
      }
    }
  }
}

/* ========================================================================
 * PAGE SIDEBAR MINIMIZE
 * ======================================================================== */
body{
  &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
    #header{
      .header-left{
        display: none;
      }
      .header-right{
        left: 0px;
        right: 0px;
        .navbar-minimize{
          width: @sidebar-width-minimize;
          text-align: center;
          border-right: none;
        }
        .navbar-toolbar{
          &:before{
            left: @sidebar-width-minimize;
          }
          .navbar-right {
            .dropdown{
              > a{
                padding-bottom: 13px;
              }
            }
            .navbar-profile {
              > a{
                padding-bottom: 9px;
              }
            }
            .navbar-setting {
              a{
                padding-bottom: 13px;
                &:hover{
                  background-color: lighten(@page-content-bg,3%);
                }
              }
            }
          }
        }
      }
      .navbar-header{
        width: 100%;
        .logo{
          display: none;
        }
      }
    }

    #sidebar-left{
      width: 75px;
      &:after{
        width: @sidebar-width-minimize;
      }
      &:hover{
        .sidebar-menu{
          width: @sidebar-width + 805px !important;
          > li{
            width: @sidebar-width + 30px;
            &.sidebar-category, &.active{
              width: @sidebar-width-minimize;
            }
            &.active{
              &:hover{
                width: @sidebar-width + 30px;
              }
            }
          }
        }
      }
      // SIDEBAR MINIMIZE -> SIDEBAR CONTENT -------------------------------------------------------
      .sidebar-content{
        .media{
          .media-body{
            display: none;
          }
        }
      }

      // SIDEBAR MINIMIZE -> SIDEBAR MENU -------------------------------------------------------
      .sidebar-menu{
        width: @sidebar-width-minimize !important;
        &:after{
          left: 37px;
        }
        > li{
          &:hover{
            min-width: @sidebar-width;
            background-color: darken(@sidebar-bg, 5%);
            > a{
              > .text, >.count, > .label, > .badge{
                display: inline-block;
              }
            }
            &.submenu{
              min-width: 250px;
              > ul{
                display: block !important;
                background-color: darken(@sidebar-bg, 3%);
                > li{
                  > ul{
                    background-color: darken(@sidebar-bg, 3%);
                  }
                }
              }
            }
          }
          &:after{
            left: 37px;
          }
          > a{
            > .icon{
              min-width: 75px;
              margin-left: 6px;
              margin-right: 29px;
              &:after{
                left: 36px;
              }
              i{
                line-height: 30px;
                width: 34px;
                font-size: 15px;
              }
            }
            > .text, >.count, > .plus, > .label, > .badge, > .arrow, > .selected{
              display: none;
            }
            > .label, > .badge{
              margin-top: 10px;
            }
            > .arrow, > .plus{
              margin-top: 3px;
            }
            > .count{
              margin-top: 7px;
            }
          }
          &.sidebar-category{
            text-align: center;
            font-size: 12px;
            padding: 0px;
            min-width: @sidebar-width-minimize;
            background-color: @sidebar-category-bg;
            .pull-right{
              display: none;
            }
            &:hover{
              width: @sidebar-width-minimize !important;
            }
          }
          &.submenu{
            > ul{
              z-index: @top-zindex;
            }
          }
          &.active{
            min-width: @sidebar-width-minimize;
          }
        }
        .submenu{
          &:hover{
            > ul{
              display: block !important;
            }
          }
          > ul{
            position: absolute;
            left: 75px;
            top: 42px;
            list-style: none;
            min-width: 175px;
            height: auto!important;
            padding-left: 0;
            display: none !important;
            .transition(none);
            > li{
              &:last-child{
                a{
                  padding-bottom: 10px;
                }
              }
              &.submenu{
                &:hover{
                  > ul{
                    display: block !important;
                  }
                }
                > ul{
                  top: 0px !important;
                  left: 175px;
                  display: none;
                  border-top: none;
                }
              }
            }
          }
          ul{
            &:after{
              left: 13px;
              top: 0px;
            }
            li{
              &:after{
                left: 10px;
              }
              a{
                &:before{
                  margin-left: -7px;
                }
              }
            }
          }
          &.active{
            > ul{
              display: none !important;
            }
          }
          &.submenu-arrow{
            a{
              .icon{
                z-index: 1;
                &:after{
                  content: "___";
                  position: absolute;
                  right: 0px;
                  top: 3px;
                  color: lighten(@sidebar-left-bg,5%);
                  z-index: -1;
                }
              }
            }
            .submenu-header{
              display: block;
              height: 40px;
              line-height: 38px;
              font-size: 12px;
              text-transform: uppercase;
              background-color: lighten(@sidebar-left-bg,5%);
              padding: 0px 30px;
              .border-radius(0px 3px 0px 0px);
              &:after{
                .box-shadow(none);
                background-color: transparent;
              }
            }
          }
        }
        li.active{
          > a{
            &:after{
              border-right: none;
            }
          }
        }
      }

      // SIDEBAR MINIMIZE -> SIDEBAR FOOTER -------------------------------------------------------
      .sidebar-footer{
        display: none;
      }

      .hidden-sidebar-minimize{
        display: none;
      }

      &.sidebar-box, &.sidebar-rounded, &.sidebar-circle{
        .sidebar-menu{
          .submenu{
            > ul{
              top: 46px !important;
            }
          }
        }
      }

      .sidebar-category{
        &:before{
          content: '';
          border: 1px solid #323232;
        }
        span{
          &:first-child{
            display: none;
          }
        }
      }

    }

    #page-content{
      margin-left: @sidebar-width-minimize;
    }
  }
}

@media (max-width: 800px) {
  body{
    &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
      #header{
        .navbar-toolbar {
          .navbar-form {
            input {
              min-width: 400px;
            }
          }
        }
      }
      #page-content{
        margin-right: 0px;
        .header-content{
          .breadcrumb-wrapper{
            display: block;
          }
        }
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
      .header-left{
        display: block !important;
      }
    }
  }
}

/* ========================================================================
 * PAGE SIDEBAR LEFT SHOW
 * ======================================================================== */
@media (max-width: 800px) {
  body{
    &.page-sidebar-left-show{
      overflow-x: hidden;
      #header{
        .header-right{
          right: 0px;
        }
        .navbar-toolbar{
          .navbar-form{
            input{
              min-width: 225px;
            }
          }
        }
      }
      #page-content{
        margin-right: -@sidebar-width;
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-sidebar-left-show{
      #header{
        left: @sidebar-width;
        .navbar-toolbar {
          .navbar-form {
            input {
              min-width: 400px;
            }
          }
        }
      }
      #sidebar-left{
        top: 0px;
        left: 0px;
        &:after{
          left: 0px;
        }
      }
      #page-content{
        margin-left: @sidebar-width !important;
      }
    }
  }
}

/* ========================================================================
 * PAGE SIDEBAR RIGHT SHOW
 * ======================================================================== */
body{
  &.page-sidebar-right-show{
    #header{
      .header-right{
        right: @sidebar-width !important;
      }
    }
    #sidebar-right{
      right: 0px;
      visibility: inherit;
    }
    #page-content{
      margin-right: @sidebar-width !important;
    }
    #back-top{
      right: @sidebar-width + 30px;
    }
  }
}

@media (max-width: 800px) {
  body{
    &.page-sidebar-right-show{
      #header{
        .header-right{
          left: 0px;
          right: @sidebar-width;
        }
        .navbar-toolbar{
          .navbar-form{
            input{
              min-width: 225px;
            }
          }
        }
      }
      #page-content{
        margin-left: @sidebar-width-minimize;
        .header-content{
          .breadcrumb-wrapper{
            display: none;
          }
        }
      }
      #sidebar-left{
        left: 0px;
        &:after{
          left: -@sidebar-width;
        }
      }
      #back-top{
        right: @sidebar-width + 30px !important;
      }
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-sidebar-right-show{
      #header{
        .header-left, .header-right{
          left: -@sidebar-width;
        }
        .navbar-toolbar {
          .navbar-form {
            input {
              min-width: 400px;
            }
          }
        }
      }
      #sidebar-left{
        left: -@sidebar-width;
      }
      #sidebar-right{
        top: 0px;
        right: 0px;
        visibility: inherit;
      }
      #page-content{
        margin-left: -@sidebar-width !important;
        margin-right: 0px !important;
        .header-content{
          .breadcrumb-wrapper{
            display: block;
          }
        }
      }
    }
  }
}

@media (max-width: 640px){
  body{
    &.page-sidebar-right-show{
      #header{
        .navbar-toolbar {
          .navbar-form {
            input {
              min-width: 270px;
            }
          }
        }
      }
    }
  }
}

/* ========================================================================
 * PAGE FOOTER FIXED
 * ======================================================================== */
body{
  &.page-footer-fixed{
    &.page-sidebar-minimize, &.page-sidebar-minimize-auto{
      #page-content{
        .footer-content{
          left: @sidebar-width-minimize;
        }
      }
    }
    #page-content{
      .body-content{
        margin-bottom: 40px;
      }
      .footer-content{
        position: fixed;
        bottom: 0;
        right: 0;
        left: @sidebar-width;
        z-index: 1000;
      }
    }
    #back-top{
      bottom: 65px;
    }
  }
}

@media (max-width: 768px){
  body{
    &.page-footer-fixed{
      #page-content{
        .footer-content{
          left: 0px;
        }
      }
      &.page-sidebar-left-show{
        #page-content{
          .footer-content{
            left: @sidebar-width;
            right: -@sidebar-width;
          }
        }
      }
      &.page-sidebar-right-show{
        #page-content{
          .footer-content{
            right: @sidebar-width;
            left: -@sidebar-width;
          }
        }
      }
    }
  }
}