@import "j-ui-kit/mixins/all";
@import "mixins/all";

.clients-show {
  #client-sidebar {
    position: absolute; top: $navHeight + $headerHeight + $gutter5; bottom: $bodyBottomMargin; left: $bodyLRMargin;
    width: 35rem;

    header {
      position: relative;

      .filter-options {
        > .btn-group, #search-project { margin-bottom: 1rem; width: 35rem; }
        .btn-group .btn {
          span { margin-left: 0.5rem; }
        }
      }
    }

    #btn-new-project {
      @extend %button-regular;
      width: 11rem;
      position: absolute;
      right: 0; top: -0.5rem;
      i {
        @include img(15, 15, "icons/plus.svg");
        top: 0.3rem; left: -0.3rem; margin-right: 0.4rem;
      }
    }

    .projects-container {
      position: absolute; top: 33.5rem; bottom: 1rem;
      overflow-x: hidden; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      width: 36.5rem;
    }
  }

  .clients-tabs {
    position: absolute; top: $navHeight + $headerHeight + $gutter5; bottom: $bodyBottomMargin;
    left: 36.5rem; right: 0;
    @extend %tabbable;

    .tab-content {

      .hide{ display: none; }

      .tab-controls-bar {
        @include clearfix();
        padding: em(10, $baseFontSizePX);

        ul {
          padding: 0; margin: 0;
          list-style: none;
          float: left;
          li {
            display: inline-block;
            vertical-align: top;
            .controls { color: $baseFontColor; }
          }
        }
        .chosen-results {
          float: none;
          li {display: block; margin: 0;}
        }

        .attach-button {
          @extend %button-tab;
          @extend %plus-button-white;
        }

        .btn-select-all, .btn-cancel-attach {
          @extend %button-tab;
          display: none;
          margin-right: 1rem;
          &.btn-select-all { float: left; }
        }

        button {
          float:right;
        }
        .simple_form .control-group {margin-bottom:0;}

        select, .chosen-container {
          margin-right: em(10, $baseFontSizePX);
        }
        .input-append { display: inline-block; }
      }

      .accounts {
        margin-top: 0.6em;
        margin-bottom: 4em;

        .avatar {
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }

      .add-list {
        height: 0;
        position: absolute; bottom: 0; width: 100%;
        background-color: darken($tabActiveBackgroundColor, 10%);
        border-radius: 0 0 0.2em 0.2em;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        @include transition(top, 0.7s ease-in-out);
        transform-origin: bottom;
        > section, > form { padding: 1rem; }
      }
    }

    .tab-card-list {
      padding: 1rem;
      @include calc(height, "100% - 5.2rem");
      position: relative;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      @include box-sizing(border-box);
    }

    .avatar {
      overflow: hidden;
      img {
        width: 100%;
      }
    }

    .btn-new-queue {
      width: 14.5rem;
      @extend %button-tab;
      @extend %plus-button-white;
    }
  }
}

#facebook-account-select {
  .modal-dialog {
    width: 40rem;
  }

  .modal-body {
    p {
      color: #aaa;
      margin-top: 0rem;
    }
  }

  .btn-modal-cancel { @extend %button-action; width: 8.5rem; }

  .facebook-account-selectable {
    color: black;
    position: relative;
    height: em(40, 13);
    margin: em(5, 13) 0;

    .info {
      display: inline-block;
      position: absolute;
      top: 0;
      width: em(220, 13);

      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .input-submit-wrapper { float: right; }

    .avatar {
      height: em(40, 13);
      width: em(40, 13);
      margin-right: em(10, 13);
    }

    .account-category {
      font-weight: 300;
    }
  }

  .connection-button {
    position: absolute;
    top: 0;
    right: 0;
    width: em(90, 13);
    float: right;
    span {
      display: none;
    }
    &.connect-button {
      @extend %button-action;
      .connect-text {
        display: block;
      }
    }
    &.disconnect-button {
      @extend %button-regular;
      .disconnect-text {
        display: block;
      }
    }
  }
}

#modal-new-client, #modal-edit-client {
  .modal-dialog { width: 61rem; }

  .simple_form {

    article {
      vertical-align: top;
      .max-file-size {
        color: $grey3;
        text-align: center;
        margin-top: 0.5rem;
      }
      &#client-avatar {
        @extend %modal-avatar;
        img{
          border-radius: 0.5em;
          cursor: pointer;
        }
        .client_avatar_string { @extend %avatar-upload; }

        a {
          display: none;
          position: absolute;
          top: 14.5rem;
          width: 15rem;
          border-radius: 0 0 0.5rem 0.5rem;
          text-align: center;
          background: { color: rgba(132, 177, 198, .8); }
          color: $headerBackground;
          &:hover { text-decoration: none; }
        }
        &:hover {
          a {
            display: inline-block;
          }
        }
      }

      &#client-details {
        @extend %modal-610-details;
        .chosen-choices .search-field input[type="text"] { padding: 0rem; }
        .chosen-container-multi { max-width: 28rem; }
      }
    }

    .btn-create-client, .btn-save-client {
      width: 10rem;
    }
  }
}

#btn-new-client {
  @extend %button-action;
  width: 11rem;
  @extend %plus-button-white;
}

#social-accounts-container {
  position: relative;
  ul#social-accounts-options {
    right: 1rem;
    left: auto;
    list-style: none;
    padding: 1.3rem;
    margin: 0;
    text-align: right;

    &:before { left: 14.8rem; }
    &:after { left: 14.9rem; }

    li {
      display: inline-block;
      margin: 0 0.3rem;

      a {
        color: #fff;
        padding: 0;
        vertical-align: top;
        border: 0;

        &:hover {
          background: { color: transparent; }
        }

        &.facebook { @include img(32, 32, "icons/facebook-square-flat.svg"); }
        &.linkedin { @include img(32, 32, "icons/linkedin-square-flat.svg"); }
        &.twitter { @include img(32, 32, "icons/twitter-square-flat.svg"); }
        &.google { @include img(32, 32, "icons/googleplus.svg"); }
        &.buffer { @include img(32, 32, "icons/buffer.svg"); }
        &.instagram { @include img(32, 32, "icons/instagram.svg"); }
      }
    }
  }

  #btn-toggle-social-accounts {
    outline: none;
    @extend %button-tab;
    @extend %plus-button-white;
  }
}

.client-directory-filters {
  top: 0.8rem;
}