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

// ===========================================================================
// TABLE OF CONTENTS
// ===========================================================================
// 01. HEADER
// 02. HEADER LEFT
// 03. HEADER RIGHT
// 04. NAVBAR TOOLBAR
// 05. NAVBAR MESSAGE
// 06. NAVBAR NOTIFICATION
// 07. NAVBAR COLORS
// ===========================================================================

/* ========================================================================
 * HEADER
 * ======================================================================== */
#header {
  height: @navbar-height;
  margin-bottom: 0;
  border: none;
  position: relative;
  z-index: @header-zindex;
}

@media (max-width: 800px) {
  #header{
    .header-right{
      right: 0px;
    }
    .navbar-toolbar {
      .navbar-form {
        input {
          min-width: 225px;
        }
      }
    }
  }
}

@media (max-width: 768px){
  #header{
    .navbar-toolbar {
      .navbar-form {
        input {
          min-width: 400px;
        }
      }
    }
    .header-left, .header-right{
      display: block;
    }
    .header-left{
      width: 100%;
    }
    .header-right{
      top: @navbar-height;
      left: 0px;
      right: 0px;
      .navbar-form{
        margin: 9px 10px 2px;
      }
    }
    .navbar-minimize-mobile, .navbar-header{
      float: left;
      display: block;
      position: relative;
    }
    .navbar-left{
      float: left;
    }
    .navbar-right{
      float: right;
      .dropdown-menu{
        right: 0px;
        left: inherit;
      }
    }
    .nav{
      > li{
        float: left;
      }
    }
    .navbar-minimize, .navbar-setting{
      display: none;
    }
    .navbar-nav{
      margin: 0px;
    }
    .navbar-minimize-mobile{
      position: absolute;
      vertical-align: top;
      text-align: center;
      height: 99%;
      line-height: 43px;
      cursor: pointer;
      padding-top: 8px;
      width: 65px;
      z-index: 1;
      &.left{
        left: 0px;
      }
      &.right{
        right: 0px;
      }
      i{
        font-size: 25px;
      }
    }
    .navbar-header{
      width: 100%;
      z-index: -1;
      .navbar-brand{
        width: 100%;
        .logo{
          display: block !important;
          margin: 0px auto;
        }
      }
    }
    .navbar-form {
      margin-left: 10px;
      margin-right: 10px;
      .form-group {
        margin-bottom: 0px;
      }
    }
  }
}

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

@media (max-width: 480px){
  #header{
    .navbar-search{
      display: none;
    }
    .navbar-toolbar{
      .navbar-right{
        .dropdown-menu{
          right: 0px !important;
        }
      }
    }
  }
}

@media (max-width: 360px){
  #header{
    .navbar-right{
      .navbar-notification{
        .dropdown-menu{
          right: -45px;
        }
      }
      .navbar-message{
        .dropdown-menu{
          right: -95px;
        }
      }
    }
    .navbar-toolbar{
      .navbar-right{
        .navbar-message{
          .dropdown-menu{
            right: -115px !important;
          }
        }
        .navbar-notification{
          .dropdown-menu{
            right: -65px !important;
          }
        }
      }
    }
    .navbar-left{
      .navbar-search{
        display: none !important;
      }
    }
  }
}

/* ========================================================================
 * HEADER LEFT
 * ======================================================================== */
.header-left{
  float: left;
  position: relative;
  .navbar-header {
    height: @navbar-height + 1px;
    width: @sidebar-width;
    left: 0;
    .navbar-brand {
      padding: 0;
      text-align: center;
      width: 100%;
      color: white;
      vertical-align: middle;
      font-size: 20px;
      line-height: 50px;
      text-transform: capitalize;
      img{
        margin: 0px auto;
      }
    }
  }
  .navbar-minimize-mobile{
    color: @white;
    display: none;
  }
}


/* ========================================================================
 * HEADER RIGHT
 * ======================================================================== */
.header-right{
  float: left;
  position: absolute;
  left: @sidebar-width;
  right: 0px;
  .navbar-toolbar{
    &:before{
      border-bottom: 1px solid @border-color;
      position: absolute;
      display: block;
      content: "";
      bottom: -1px;
      left: 0px;
      right: 0px;
    }
  }
  .navbar{
    border: none;
  }
}

/* ========================================================================
 * NAVBAR TOOLBAR
 * ======================================================================== */
.navbar-toolbar {
  border-bottom: none;
  margin-bottom: 0px;
  background-color: @navbar-bg;
  .navbar-left{
    .navbar-minimize{
      border-right: 1px solid @border-color;
      a{
        padding-top: 16px;
        padding-bottom: 13px;
        i{
          font-size: 24px;
          margin-top: -3px;
        }
      }
    }
    .navbar-search{
      .trigger-search{
        font-size: 22px;
        color: #777;
        display: none;
        padding: 14px;
      }
    }
  }
  .navbar-right{
    .dropdown{
      &:hover, &:focus, &:active{
        > a{
          .count{
            .animation(none);
          }
        }
      }
      > a{
        padding-top: 16px;
        padding-bottom: 12px;
        .count{
          position: absolute;
          top: 9px;
          right: 6px;
          padding: 0.4em 0.6em;
          .animation(opacity-badge 0.6s infinite);
          .animation-keyframe-opacity(0.5,1.2);
        }
        > i{
          position: relative;
          font-size: 22px;
          color: #777;
        }
      }
    }
    .navbar-profile{
      > a{
        padding-top: 8px;
        padding-right: 11px;
        padding-bottom: 8px;
        .meta{
          display: table;
          width: 100%;
          line-height: 30px;
          .avatar{
            display: table-cell;
            vertical-align: middle;
            width: 35px;
            height: 35px;
            img{
              display: block;
              width: 100%;
            }
          }
          .text{
            font-size: 13px;
            font-weight: 600;
            padding-left: 5px;
          }
          .caret{
            margin-left: 5px;
            color: gray;
          }
        }
      }
      .dropdown-menu{
        width: 180px;
        height: inherit;
        min-height: 0;
        .dropdown-header{
          box-shadow: none;
          border-top: 1px solid @border-color;
          .border-radius(0px);
          &:first-child{
            border-top: none;
          }
        }
        > li{
          > a{
            white-space: normal;
          }
        }
        li{
          &:first-child{
            a{
              margin-top: 9px;
            }
          }
          a{
            color: #999;
            padding: 3px 10px;
            &:hover{
              color: #808080;
            }
            i{
              min-width: 20px;
            }
            .label{
              margin-top: 2px;
            }
          }
        }
      }
    }
    .navbar-setting{
      border-left: 1px solid @border-color;
      &:visited{
        background-color: transparent;
      }
      a{
        padding-right: 15px;
        padding-top: 16px;
        padding-bottom: 12px;
        i{
          z-index: 2;
          position: relative;
          font-size: 22px;
        }
      }
    }
    .dropdown-menu{
      top: auto;
      width: 300px;
      padding: 0;
      position: absolute;
      margin-top: 5px;
      background-color: #FFF;
      border: none;
      border-radius: 3px;
      min-height: 355px;
      overflow: hidden;
      .box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.08));
      .dropdown-header{
        display: table;
        width: 100%;
        background-color: #F7F7F7;
        border-bottom: 1px solid #E6EBED;
        padding: 0 15px!important;
        height: 36px;
        line-height: 36px;
        color: #5E5E5E;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        font-size: 13px;
        font-weight: 600;
        .title{
          display: table-cell;
          font-weight: 600;
        }
        .option{
          display: table-cell;
          font-weight: 400;
        }
      }
      .dropdown-body{
        height: 281px;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
      }
      .dropdown-footer{
        display: table;
        width: 100%;
        background-color: #F7F7F7;
        border-top: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        padding: 0 15px!important;
        height: 36px;
        line-height: 36px;
        color: #5E5E5E;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        font-size: 13px;
        font-weight: 600;
        position: absolute;
        bottom: 0;
        text-align: center;
        .border-radius(0px 0px 3px 3px);
      }
    }
  }
  .navbar-form {
    padding: 0;
    margin-left: 15px;
    margin-right: 15px;
    .transition(all 0.3s ease);
    input {
      box-shadow: none;
      min-width: 350px;
    }
    .form-group{
      padding: 0px;
    }
  }
  .sidebar-minimize {
    i {
      color: #777;
    }
  }
}

@media (max-width: 640px){
  .navbar-toolbar{
    .navbar-form{
      padding: 7px -15px 2px !important;
      margin: 7px 10px 2px !important;
      input{
        min-width: 275px;
      }
    }
  }
}

/* ========================================================================
 * NAVBAR MESSAGE
 * ======================================================================== */
.navbar-message{
  form{
    padding: 6px 15px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #E6EBED;
    .has-icon{
      .form-control-icon{
        position: absolute;
        z-index: 5;
        top: 0;
        right: 0;
        width: 34px;
        line-height: 33px;
        text-align: center;
        color: #777;
      }
    }
  }
  > a{
    position: relative;
  }
  .media-list{
    height: 225px;
    width: 100%;
    .media{
      .media-body{
        .media-heading{
          font-weight: 400;
        }
      }
    }
  }
}

/* ========================================================================
 * NAVBAR NOTIFICATION
 * ======================================================================== */
.navbar-notification{
  .media-list{
    i{
      font-size: 30px;
    }
  }
}
.navbar-message, .navbar-notification{
  .indicator{
    text-align: center;
    .spinner{
      left: 26%;
      width: 200px;
      font-size: 13px;
      line-height: 17px;
      color: #999;
    }
  }
}

/* ========================================================================
 * NAVBAR COLORS
 * ======================================================================== */
.navbar-color(dark,#777,@sidebar-bg);
.navbar-color(primary,@white,@navbar-primary);
.navbar-color(success,@white,@navbar-success);
.navbar-color(info,@white,@navbar-info);
.navbar-color(warning,@white,@navbar-warning);
.navbar-color(danger,@white,@navbar-danger);