/* =For styles only found in single project or organization pages
-------------------------------------------------------------- */

/* =Page header default
-------------------------------------------------------------- */

.page-header { // navy band on index pages
  background: $brand-darkblue;
  background-color: $brand-primary;
  background: -moz-linear-gradient(top, $brand-darkblue 0%, $brand-primary 70%);
  background: -webkit-linear-gradient(top, $brand-darkblue 0%,$brand-primary 70%);
  background: linear-gradient(to bottom, $brand-darkblue 0%,$brand-primary 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-darkblue', endColorstr='$brand-primary',GradientType=0 );
  margin: 0;
  padding-top: 48px;
  padding-bottom: 48px;
  min-height: 300px;
  .top-btn {
    margin-top: 0;
  }
}

.page-title { // page title
  padding-top: 2px;
  padding-bottom: 24px;
  @include clearfix;
  h1, h2 {
    text-transform: uppercase;
    display: inline-block;
    color: #fff;
    position: relative;
    margin-top: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,.2);
    max-width: 80%;
    &.short { // provides room for admin buttons on right
      //width: 50%;
    }
    .org-name {
      font-size: 16px;
      display: block;
    }
    a {
      color: $brand-lightblue;
    }
    .glyphicon { // private
      margin: 0 4px;
      color: #fff;
      opacity: 0.5;
      -moz-opacity: .50;
    }
  }
}

@media (min-width: $screen-md-min) {
  .page-header { // navy band on index pages
    .page-title h1, .page-title h2 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 500px;
    }
  }
}

@media (max-width: $screen-sm-max) {
  .page-header {
    padding-top: 24px;
  }
  .page-title h1, .page-title h2, h1, h2 {
    font-size: 1.8em;
  }
  .page-title h2, h2 {
    font-size: 1.6em;
  }
  h3 {
    font-size: 1.4em;
  }
}

/* =Page header single project or organizations
-------------------------------------------------------------- */

#project-single .page-header,
#organization-single .page-header,
#user-single .page-header { // navy band on pages for single project, organization, or user
  display: table;
  background: $brand-darkblue;
  height: 100px;
  min-height: 100px;
  border-bottom: solid 1px #fff;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  top: $header-height;
  z-index: 999;
  div > a {
    color: $brand-lightblue;
    &:hover,
    &:focus {
      color: #fff;
    }
  }
  .page-title {
    display: table-row;
    padding-top: 14px;
    padding-bottom: 8px;
    > div {
      display: table-cell;
      vertical-align: middle;
    }
    .index-link {
      padding: 4px 10px;
      margin-right: 10px;
      border: 1px solid $brand-lightblue;
      border-radius: 8px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
      &:hover,
      &:focus {
        @include button-variant(#fff, lighten($btn-blue-bg, 5%), #fff);
        transition: all 0.3s ease 0s;
      }
    }
    h1, h2 {
      padding-left: 24px;
      display: table-cell;
      vertical-align: middle;
      text-transform: capitalize;
    }
    .top-btn {
      vertical-align: middle;
      padding-right: 15px;
      .btn-add {
        margin-right: 14px;
        @media (max-width: $screen-xs-min) {
          margin-right: 8px;
        }
      }
    }
  }
}

@media (max-width: $screen-sm-max) {
  #project-single .page-header,
  #organization-single .page-header,
  #user-single .page-header {
    overflow: visible;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: solid 1px $brand-darkerblue;
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    min-height: 74px;
    .page-title {
      padding-bottom: 0;
      h1, h2 {
        padding-left: 14px;
      }
      .top-btn {
        padding-right: 10px;
      }
    }
    .more-menu {
      width: 36px;
      height: 36px;
    }
  }
}

@media (max-width: $screen-xs-max) {
  #project-single .page-header,
  #organization-single .page-header {
    .more-menu {
      width: 24px;
    }
  }
}

/* =Sidebar for single project or organization navigation
-------------------------------------------------------------- */

#sidebar {
  position: absolute;
  width: 100px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 990;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  background-color: $brand-darkblue;
  color: $brand-lightblue;
  text-align: center;
  -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
  box-shadow: 0 0 6px rgba(0,0,0,.3);
  .nav-sidebar {
    width: 100%;
    position: relative;
    > li {
      overflow-y: visible;
      position: relative;
      cursor: pointer;
      display: block;
      text-align: center;
      border-bottom: solid 1px $brand-darkerblue;
      a {
        width: 100%;
        height: 100%;
        position: relative;
        color: $brand-lightblue;
        border-left: 7px solid $brand-darkerblue;
        &:focus, &:hover {
          @include button-variant(#fff, darken($btn-blue-bg, 2%), $brand-gold);
          transition: all 0.3s ease 0s;
          .icon { // show active icon
            background-position: -48px 0;
          }
        }
        .icon {
          margin: 0 auto;
          height: 48px;
          width: 48px;
          position: relative;
          background-position: 0 0;
          display: block;
        }
        .title {
          display: block;
          position: relative;
          margin: 0;
          font-size: 11px;
          font-weight: 500;
          text-transform: uppercase;
        }
      }
    }
  }
}

#sidebar {
  li.overview {
    .icon {
      background-image: url('/static/img/icon-overview.png');
    }
  }
  li.dashboard {
    .icon {
      background-image: url('/static/img/icon-dashboard.png');
    }
  }
  li.search {
    .icon {
      background-image: url('/static/img/icon-search.png');
    }
  }
  li.map {
    .icon {
      background-image: url('/static/img/icon-map.png');
    }
  }
  li.parties {
    .icon {
      background-image: url('/static/img/icon-parties.png');
    }
  }
  li.resources {
    .icon {
      background-image: url('/static/img/icon-resources.png');
    }
  }
  li.reports {
    .icon {
      background-image: url('/static/img/icon-reports.png');
    }
  }
  li.activity {
    .icon {
      background-image: url('/static/img/icon-activity.png');
    }
  }
  li.projects {
    .icon {
      background-image: url('/static/img/icon-projects.png');
    }
  }
  li.members {
    .icon {
      background-image: url('/static/img/icon-members.png');
    }
  }
}

#sidebar.search li.search,
#sidebar.dashboard li.dashboard,
#sidebar.map li.map,
#sidebar.parties li.parties,
#sidebar.resources li.resources,
#sidebar.reports li.reports,
#sidebar.activity li.activity,
#sidebar.projects li.projects,
#sidebar.members li.members { // show active icon
  a {
    border-left: 7px solid $brand-gold;
    .icon { // show active icon
      background-position: -96px 0;
    }
    .title {
      color: #fff;
    }
  }
}

#sidebar-search-box { // open search box from sidebar
  position: absolute;
  width: 290px;
  top: 0;
  left: 100px;
  z-index: 980;
  background: $brand-darkblue;
  overflow: hidden;
  transition: left 0.5s;
  &.disabled {
    left: 100px - 290px;
  }
  form {
    width: 290px;
    padding: 25.5px 15px;
  }
  input {
    width: 80%;
    height: 34px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

@media (max-width: $screen-sm-max) {
  #sidebar {
    position: relative;
    width: 100%;
    background-color: $brand-darkblue;
    height: 70px;
    overflow: hidden;
    .nav-sidebar {
      position: relative;
      border-top: 3px solid $brand-darkerblue;
      > li {
        display: inline-block;
        border-left: 0;
        width: 20%;
        border-right: solid 1px $brand-darkerblue;
        border-bottom: 0;
        margin-top: -3px;
        &:last-child {
          border-right: 0;
        }
        a {
          width: 100%;
          height: 100%;
          position: relative;
          color: $brand-lightblue;
          border-left: 0;
          border-top: 3px solid $brand-darkerblue;
          padding: 10px;
          &:focus, &:hover {
            .icon { // show active icon
              background-position: -56px -60px;
            }
          }
          .icon {
            height: 32px;
            width: 32px;
            background-position: -8px -60px;
          }
        }
      }
    }
  }
  #sidebar.search li.search,
  #sidebar.dashboard li.dashboard,
  #sidebar.map li.map,
  #sidebar.parties li.parties,
  #sidebar.resources li.resources,
  #sidebar.reports li.reports,
  #sidebar.activity li.activity,
  #sidebar.projects li.projects,
  #sidebar.members li.members { // show active icon
    a {
      border-top: 3px solid $brand-gold;
      border-left: 0;
      .icon { // show active icon
        background-position: -108px -60px;
      }
    }
  }
  #sidebar-search-box {
    position: absolute;
    width: 100%;
    height: 54px;
    top: 70px;
    left: 0;
    transition: top 0.5s;
    border-top: 1px solid #fff;
    &.disabled {
      left: 0;
      top: 70px - 54px;
    }
    form {
      padding: 10px 15px;
      width: auto;
    }
  }
}

@media (max-width: 420px) {
  #sidebar {
    height: 60px;
    .nav-sidebar > li {
      width: 20%; // 5 tabs
      a {
        padding: 12px 0;
        .title {
          display: none;
        }
      }
    }
  }
  #sidebar-search-box {
    top: 60px;
    &.disabled {
      top: 60px - 54px;
    }
  }
}

/* =Search results page
-------------------------------------------------------------- */

#search-form {
  .form-row {
    position: relative;
    display: flex;
    input {
      flex: 1;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    #search-clear {
      position: absolute;
      right: 62px;
      top: 15px;
      bottom: 15px;
      height: 16px;
      font-size: 18px;
      cursor: pointer;
      color: gray;
      z-index: -1;
      &.search-clear-show {
        z-index: 1 !important;
      }
    }
  }
  #search-guidelines-link {
    cursor: pointer;
  }
}

#waiting-results {
  padding: 20px;
  img {
    display: block;
    margin: auto;
  }
}

#export-btn {
  margin: -5px 0 10px;
}

#search-results.table {
  img.thumb-60 {
    margin-left: 24px;
  }
  table.entity-attributes {
    background: transparent;
    border: 0;
    margin-bottom: 4px;
    word-break: break-all;
    td {
      border: 0;
      padding-top: 2px;
      padding-bottom: 2px;
    }
  }
}

/* =Tabs
-------------------------------------------------------------- */
.nav-tabs {
  li > a {
    padding: 10px;
    border-radius: 1px 1px 0 0;
    font-family: $font-family-sans-serif-alt;
    background: $body-bg;
    color: $gray-dark;
  }
  li.active > a, li.active > a:hover, li.active > a:focus {
    border-color: $table-border-color;
    border-top: solid 4px $brand-gold;
    border-bottom-color: transparent;
    background: #fff;
  }
  li > a:hover {
    border-bottom-color: transparent;
    background: $nav-link-hover-bg;
  }
}

/* =Main content within project or organization
-------------------------------------------------------------- */

.content-single {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 900;
  overflow: hidden;
  overflow-y: scroll;
  height: 100%;
  height: -webkit-calc(100% - 30px);
  height: -moz-calc(100% - 30px);
  height: calc(100% - 30px);
  background-color: #F2F4F7;
  padding: 0px !important;
  > .row { // for map to expand need height
    height: 100%;
  }
  h2 {
    color: $brand-darkblue;
    text-transform: uppercase;
    margin-top: 0;
    padding-bottom: 6px;
    text-shadow: none;
    &.short { // provides room for admin buttons on right
      width: 70%;
    }
    a {
      color: #0e305e;
      text-decoration: none;
    }
    a:hover {
      color: #2e51a3;
    }
  }
  h3 {
    font-family: $font-family-sans-serif-alt;
    font-weight: 300;
    letter-spacing: 0;
    color: #0e305e;
    text-transform: uppercase;
  }
  .divider-thick {
    border-top: solid 7px $table-border-color;
    margin: 20px auto;
  }
  .btn-block {
    margin: 4px auto;
    @media (max-width: $screen-sm-min) {
      font-size: 14px;
    }
  }
  .page-title {
    padding-bottom: 0;
    padding-top: 0;
    .top-btn{
      margin-top: 0;
    }
  }
  .map { // main panel map
    height: 100%;
    min-height: 100%;
    @media (min-width: $screen-md-min) { // leave gutter for touch screens
      padding-right: 0;
      padding-left: 0;
    }
    #project_map, #id_extent_map, #id_extents_extent_map {
      height: 100%;
      min-height: 100%;
    }
  }
  #id_geometry_map {
    height: 100%;
    min-height: 100%;
  }
  .main-text {
    padding: 20px 40px;
    @include clearfix;
    > .col-md-8 {
      padding-left: 0;
    }
    > .col-md-4 {
      padding-right: 0;
    }
  }
  .detail { // right panel detail
    height: 100%;
    min-height: 100%;
    position: relative;
    background: #fff;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,.3);
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    z-index: 300;
    .more-menu {
      width: auto !important;
    }
    .btn-group {
      margin-left: auto;
      margin-right: auto;
    }
    .top-add {
      margin-bottom: -30px;
    }
    .org-logo { // large org logo
      margin: 10px auto 20px;
      float: none;
      text-align: center;
      img {
        width: 90%;
        max-width: 200px;
      }
    }
    ul.list-divider li { // lists with lines between

      border-bottom: 1px solid $table-border-color;
      padding: 12px 2px;
      &:last-child {
        border-bottom: 0;
        padding-bottom: 6px;
      }
      &.linked:hover {
        cursor: pointer;
        background-color: $table-bg-hover;
      }
    }
    section > p:first-child {
      padding-top: 20px;
    }
    h4 {
      font-family: $font-family-sans-serif-alt;
      text-transform: uppercase;
      opacity: 0.8;
      letter-spacing: 0;
      padding-top: 10px;
    }
    .glyphicon-globe, .glyphicon-envelope, .glyphicon-earphone { // url and contacts in overview
      opacity: 0.7;
      padding-right: 12px;
    }
  }
  .detail-edit { // edit on right
    background: $body-bg;
    .panel-footer {
      background: transparent;
    }
  }
  .nav-tabs {
    margin-bottom: 20px;
  }
  ul.list-divider li { // lists with lines between
    @include clearfix;
    border-bottom: 1px solid $table-border-color;
    padding: 12px 2px;
    &:last-child {
      border-bottom: 0;
      padding-bottom: 6px;
    }
    &.linked:hover {
      cursor: pointer;
      background-color: $table-bg-hover;
    }
  }
  .alert-dismissible.alert-warning {
    margin-top: 10px;
  }
}

.overview #project-map .leaflet-clickable { // forces cursor on non-interactive map
  cursor: grab;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

body.map .content-single {
  overflow-y: hidden;
  > .row { // for map to expand need height
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: $screen-sm-max) {
  .content-single {
    position: relative;
    .map {
      height: 400px;
      min-height: 400px;
    }
    .main-text {
      padding: 10px 30px;
      > .col-md-8 {
        padding-left: 0;
        padding-right: 0;
      }
      > .col-md-4 {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}

@media (max-width: $screen-xs-max) {
  .content-single {
    .panel-default {
      .panel-buttons .btn {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
      }
      .panel-body {
        font-size: 12px;
      }
    }
    .detail {
      .nav-tabs li > a {
        font-size: 12px;
      }
      .tab-content {
        font-size: 12px;
      }
    }
  }
}

/* =Map
-------------------------------------------------------------- */

#project-map {
  height: 100%;
  h2 {
    padding-bottom: 0;
  }
  .btn-wrap { // button
    padding: 4px 4px 5px;
    .btn-block {
      margin: 0 auto;
    }
  }
}

#project-single #project-map { // for data tab
  height: 100% !important;
}

/* =Dashboard and Overview
-------------------------------------------------------------- */

dl.contacts { // contact lists
  margin-bottom: 0;
  dt {
    border-top: dotted 2px $table-border-color;
    padding: 10px 0;
    &:first-child {
      border-top: none;
      padding-top: 0;
    }
  }
  dd {
    padding-bottom: 4px;
    padding-left: 0;
    a {
      display: block;
      font-size: 13px;
      padding-bottom: 4px;
    }
  }
}

/* =Tooltips
-------------------------------------------------------------- */

.tooltip {
  .tooltip-arrow {
    border-right-color: #706C69 !important;
    border-left-color: #706C69 !important;
  }

  .tooltip-inner {
    white-space: nowrap;
    background-color: #706C69;
    color: #fff;
    font-weight: normal;
  }
}
