/*
 * This file is part of the Access to Memory (AtoM) software.
 *
 * Access to Memory (AtoM) is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Access to Memory (AtoM) is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Access to Memory (AtoM).  If not, see <http://www.gnu.org/licenses/>.
 */

h1 {
  .count {
    margin-left: 8px;
    text-shadow: none;
    color: @grayLight;
  }
}

// Search box in the navigation bar
// e.g. actor/browse

.nav div.search {
  margin-bottom: 20px;
}

.nav-tabs li.search,
.nav div.search {

  .pull-right;

  margin-right: 28px;

  form {
    margin: 0;
  }

  .input-append {
    margin: 0;
  }

  input[type=text] {

  }

  input[type=submit] {
    .hide-text;
    background-repeat: no-repeat;
    display: inline-block;
    .square(14px);
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
  }

}

// Advanced search

.advanced-search-toggle, .fullview-treeview-toggle {
  text-align: center;
  display: inline-block;
  width: 100%;
  padding: 5px 0 5px 0;
  color: #333;

  &:before, &:after {
    padding: 0 10px 0 10px;
    font-variant: normal;
    font-size: 15px;
    content: "\f103" !important;
    font-family: "FontAwesome";
  }

  &:hover {
    background-color: #f5f5f5;
    color: #333;
  }

  &:focus {
    text-decoration: none;
    color: #333;
  }

  &.open:before, &.open:after {
    content: "\f102";
  }
}

.advanced-search {
  border-top: 1px solid #e3e3e3;

  p {
    margin: 10px !important;
  }

  select, input {
    margin: 0;
  }

  .filter .yui-ac-content {
    width: 60%;
  }

  .criteria {
    .well();
    margin: 10px;
    padding: 10px;
    line-height: 0;

    .criterion {
      margin-bottom: 10px;
      width: 100%;
      display: inline-block;

      &:first-child {
        .boolean {
          display: none;
        }

        .query {
          width: 53%;
        }
      }

      .boolean, .query, span, .field, .delete-criterion {
        display: inline-block;
        margin: 0;
      }

      .boolean, .query, span, .field {
        float: left;
      }

      .boolean {
        width: 12%;
        margin-right: 1%;
      }

      .query {
        width: 40%;
      }

      span {
        width: 9%;
        padding-top: 5px;
        text-align: center;
        line-height: 20px;
      }

      .field {
        width: 34%;
      }

      .delete-criterion {
        width: 4%;
        text-align: right;
        padding-top: 8px;
        color: #999;
        float: right;

        &:hover, &:focus {
          text-decoration: none;
        }
      }
    }

    .add-new-criteria {
      span {
        margin-left: 10px;
      }

      .dropdown-menu > li > a:hover {
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background-color: #f5f5f5;
        background-image: none;
        color: #333;
      }
    }

    .filter-row {
      display: inline-block;
      width: 100%;

      &:not(:first-child) {
        margin-top: 10px;
      }

      label {
        white-space: nowrap ;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .filter {
        input, select {
          width: 60%;
          float: right;
        }

        label {
          float: left;
          width: 38%;
          text-align: right;
          padding-top: 5px;
        }
      }

      .filter-left {
        width: 49%;
        float: left;

        &.relation {
          width: 33%;
        }
      }

      .filter-right {
        width: 49%;
        float: right;

        &.relation {
          width: 66%;
        }
      }

      .lod-filter {
        margin-top: 5px;
        float: right;

        label {
          display: inline-block;
          padding: 0 10px;
        }
      }

      .start-date {
        display: inline-block;
        width: 30%;
      }

      .end-date {
        display: inline-block;
        margin-left: 1%;
        width: 30%;
      }

      .date-type {
        display: inline-block;
        width: 29%;
        margin-left: 1%;
        margin-top: 10px;

        label {
          display: inline-block;
          vertical-align: middle;
          padding: 0 10px;
        }
      }

      .date-range-help-icon {
        width: 4%;
        margin-left: 1%;
        font-size: 20px;
        text-align: right;
        display: inline-block;

        &:focus {
          color: @blue;
          text-decoration: none;
        }

        &:hover {
          color: @blueDark;
        }
      }

      &.triple {
        .filter-left {
          width: 33%;
        }

        .filter-center {
          width: 33%;
          float: left;
          margin-left: 1%;
          margin-right: 1%;
        }

        .filter-right {
          width: 32%;
        }
      }
    }

    .date-range-help {
      display: none;
      line-height: 20px;
      padding: 10px;
      margin-top: 20px;
      margin-bottom: 10px;
    }
  }

  .actions {
    .border-radius(0px);
    padding-left: 20px;
    text-align: center;

    input {
      width: 20%;
      margin-left: 4px;
      display: inline-block;
    }
  }

}

// Put datepicker on top of .btn-group > .btn.active,
// wich has a z-index of 2 defined by Bootstrap
.ui-datepicker {
  z-index: 3 !important;

  select {
    display: inline-block;
  }
}

// Responsive for advanced search filters

@media (max-width: 435px) {
  .advanced-search .criteria .filter-row {
    .filter {
      input, select, label {
        width: 100%;
        text-align: left;
        padding-top: 0;
      }
    }

    .filter-left,
    .filter-right {
      width: 100%;
      margin: 0;
    }

    .filter-right {
      margin-top: 10px;
    }

    .lod-filter {
      float: none;

      label {
        display: block;
      }
    }

    .start-date,
    .end-date {
      width: 48%;
    }

    .date-type {
      width: 80%;
      margin: 10px 0 0 0;
    }

    &.triple {
      .filter-left,
      .filter-right,
      .filter-center {
        width: 100%;
        margin: 0;
      }

      .filter-right,
      .filter-center {
        margin-top: 10px;
      }
    }
  }
}

#no-search-results {

  background-color: @white;
  width: 50%;
  margin: 20px auto 0 auto;
  padding: 40px;
  .border-radius(4px);

  i {
    font-size: 32px;
    display: block;
    text-align: center;
    color: @grayLight;
    margin-bottom: @baseLineHeight;
  }

  p {
    text-align: center;
  }

  .suggestion {
    display: block;
    a {
      color: @orange;
    }
  }

}

// For #search-suggestions and #search-realm

.search-popover {

  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
  z-index: @zindexPopover;
  .box-sizing(border-box);
  border: 1px solid #9a9a9a;
  border-top: 0;
  .border-radius(0 0 4px 4px);
  .hide();

  @shadow: inset 0   1px 3px rgba(50, 50, 50, .125),
                 0px 2px 2px rgba(50, 50, 50, .25);
  .box-shadow(@shadow);

  font-family: @sansFontFamily;

  &#search-realm {
    background-color: @white;

    div {
      padding: 5px;

      &.active {
        background-color: @grayLighter;
      }
    }

    label {
      margin-left: 6px;
      margin-bottom: 0;
      .text-overflow();
      input[type=radio] {
        background-color: @white !important;
        display: inline !important;
        width: auto !important;
        padding: -4px 4px 0 4px;
      }
    }
  }

  &#search-suggestions {
    background-color: @white;
  }

  .search-realm-advanced {
    text-align: center;
    border-top: 1px solid #ddd;
    a {
      font-size: 13px;
      padding: 4px 0px;
      color: @black;
      i {
        color: @gray;
      }
    }
  }

  section {
    .clearfix();
    border-bottom: 1px solid @grayLighter;
  }

  .showall a {
    font-style: oblique;
    color: @grayDark !important;
  }

  label {
    input {
      display: inline;
      margin-bottom: 5px;
    }
  }

  img {
    float: left;
    margin: 5px;
    padding-top: 2px;
  }

  ul {
    padding-left: 10px;
    margin-bottom: 0;
  }

  li {
    display: block;
    float: none;
    padding: 3px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;

    &.active {
      background-color: @grayLighter;
    }
  }

  a {
    text-transform: none;
    font-variant: normal;
    color: @blue;
    padding: 2px 0;
    font-size: 14px;
  }

  span {
    font-family: @sansBoldFontFamily;
  }

}

// Search block in browsers
// Heavily customized in arArchivesCanadaPlugin
.inline-search {
  [type=text] {
    display: inline-block;
    width: 80%;
  }

  .btn-group + [type=text] {
    width: 60%;
  }

  .caret {
    margin-left: 10px;
  }
  // Make sure that the input expands
  form > div {
    width: 100%;
  }

  form {
    margin-bottom: 0px;
  }
}

#description-updates-section {
  margin-bottom: 2em;
}

.advanced-search {
  .criteria {
    .filter-row {
      .date-of-label, .publication-status-label {
        margin-left: 3%;
      }
      .date-of, .publication-status {
        display: inline-block;
        margin-left: 1%;
        margin-top: 10px;

        label {
          display: inline-block;
          vertical-align: middle;
          padding: 0 10px;
        }
      }
      .filter-left {
        .filter-description {
          margin-top: 10px;
          margin-bottom: 10px;
          font-style: italic;
        }
      }
    }
  }
}

// Similar to #content
.advanced-search-section, .full-treeview-section {
  background-color: @white;
  border: 1px solid @borderOutlineColor;
  .border-radius(4px);
  .box-shadow(0 1px 1px rgba(0, 0, 0, .2));
  .actions {
    margin-bottom: -20px;
  }
}

#advanced-repository-filters {
  display: none;
  .advanced-repository-filters-content {
    padding: 10px;
  }
}

#sidebar form.sidebar-search {
  margin: 0px;
  width: 100%;

  [type=text] {
    display: inline-block;
    width: 85%;                   // Fallback width (for IE 8, etc.)
    width: calc(~'100% - 37px');
  }

  div {
    width: 100%;
  }
}
