@import "compass";
@import "../webfonts/fontawesome.scss";
@import "../webfonts/solid.scss";

/*
**
**  UrgentCo Admin Styles
**  Author: Justin Henderson
**  https://rooocket.com
**
**  Table of Contents
**  1.  Variables
**  2.  Basic Elements/Helper Classes
**  3.  Header
**  4.  Footer
**  5.  Content
**  6.  Forms/Search
**  7.  Cards
**  8.  Tables
**  9.  Datepicker
**  10. Client/Budget Page
**
*/

/*
**  Variables
*/

$fa-font-path:   "../webfonts";

$font-primary:    "Nunito", Helvetica, Arial, sans-serif;
$copy-primary:    #222;

$red-primary:     #DB2B30;
$blue-primary:    #73ACD2;
$purple-primary:  #49485D;
$purple-lighter:  #727191;
$purple-darker:   #262636;
$green-primary:   #8DC4BE;
$gray-primary:    #66656E;
$gray-lighter:    #E5E5E5;
$sand:            #DED0AB;


/*
**  Basic Elements/Helper Classes
*/

html {
  font-size:62.5%;
}

body {
  background-color:$purple-primary;
  color:$copy-primary;
  font-family:$font-primary;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
}

h1, h2, h3,
h4, h5, h6 {
  font-weight:700;
}

h1 {
  font-size:3.2rem;
  margin:1em auto .5em;
}

h2 {
  font-size:2.2rem;
  margin:1em auto .5em;
}

h3 {
  font-size:1.8rem;
  margin:1em auto .5em;
}

h4 {
  font-size:1.6rem;
}

h5 {
  font-size:1.4rem;
}

h6 {
  font-size:1.4rem;
}

p {
  margin-bottom:1.5em;
}

a, button {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  transition:all .3s ease-in-out;
}

a {
  &:hover {
    color:$purple-lighter;
  }
}

blockquote {
  position:relative;
  font-size:1.8rem;
  padding-left:6em;

  &:before {
    content:'“';
    position:absolute;
    top:-.1em;
    left:0;
    color:$green-primary;
    font-size:24rem;
    font-weight:700;
    line-height:1;
  }

  > .cite::before {
    content:'';
    display:block;
    width:40px;
    height:1px;
    background-color:$purple-lighter;
    margin-bottom:1.5em;
  }
}

/*
**  Specific Elements/Helper Classes
*/

.main-content {
  min-height:80vh;
}

.container-fluid {
  padding:4em 0;
}

.link {
  color:$blue-primary;
  font-size:1.4rem;
  font-weight:400;
}

.btn {
  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing: .02em;
  padding:.5em 1.25em;
  border-radius:1.5em;
  text-decoration:none;
}

.btn-primary {
  background: $blue-primary;
  border:none;

  &:hover {
    background-color:$purple-primary;
  }
}

.btn-secondary {
  background-color:$red-primary;
  border-color:$red-primary;

  &:hover {
    background-color:$purple-darker;
    border-color:$purple-darker;
  }
}

.btn-tertiary {
  background-color:$blue-primary;
  min-width:8em;
}

.btn-outline {
  color:$blue-primary;
  border-color:$blue-primary;
}

.btn-inline {
  color:$copy-primary;
  font-weight:normal;
  padding:0;

  &:after {
    content:"\f105";
    font-family:FontAwesome;
    padding-left:.5em;
  }

  &:hover {
    color:$blue-primary;
  }
}

.alert-primary {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background-color:#C7EFEB;
  color:$copy-primary;
  border-color:$green-primary;
}

.alert-primary.text-left {
  justify-content: flex-start;
}

.alert-primary p,
.alert-secondary p {
  margin:0;
}

.alert-secondary {
  display:flex;
  justify-content: center;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
  background: $blue-primary;
  background: -moz-linear-gradient(left, $blue-primary 0%, $green-primary) 100%;
  background: -webkit-linear-gradient(left, $blue-primary 0%,$green-primary) 100%;
  background: linear-gradient(to right, $blue-primary 0%,$green-primary) 100%;
  min-width: 7em;
  border:none;
}

.bg-green {
  background-color:rgba(77, 182, 172, .3);
}

.bg-white {
  background-color:rgba(255,255,255, .7);
}

.light {
  color:#fff;
}

.dark-bg {
  color:#fff;
}

.overlay {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  background-color:rgba(0,0,0,.85);
  margin:6em 0;
  padding:6em 0;
}

.separator-green {
  border-bottom:20px solid $green-primary;
}

.card {
  background-color:rgba(255,255,255,.9);
  max-width:820px;
  margin:2em auto;
  padding:2em;
}

.block {
  display:block;
}

.req-indicator {
  display:flex;
  justify-content: flex-end;
  font-weight:700;
}

.req-indicator span {
  background-color:#fff;
  padding:.25em .5em .25em .25em;
}

.list-group {
  font-size:1.2rem;

  a.list-group-item {
    position:relative;
    font-weight:normal;
    text-decoration:none;
    padding-left:.5em;
    padding-right:3em;

    &:after {
      content:"\f054";
      font-family:FontAwesome;
      font-size:10px;
      color:#fff;
      line-height:1;
      width:24px;
      height:24px;
      background-color:$red-primary;
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      right:.5em;
      display:flex;
      justify-content:center;
      align-items:center;
      border-radius:100em;
    }
  }
}

@media (min-width: 1200px) {
  .container {
    max-width:1200px;
  }
}

/*
**  Header
*/

header {
  background-color:#fff;
  border-bottom:1px solid rgb(207,228,238);

  .navbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:1em 2em;

    .navbar-collapse {
      display:flex;
      justify-content: flex-end;

      &.collapse {
        display:none;
      }

      .nav {
        font-family:$font-primary;
        font-weight:700;

        .nav-item {
          margin:0 .1em;
          padding:0 .1em;

          .nav-link {
            color:$copy-primary;
            padding:.5em 1em;
            text-decoration: none;
            border:2px solid transparent;

            &:hover {
              color:#fff;
              background-color:$blue-primary;
              border-color:$blue-primary;
            }
          }

          &.username {
            border-left:1px solid $purple-darker;
            padding-left:.5em;

            .nav-link {
              color:$blue-primary;
              font-weight:300;

              &:hover {
                color:#fff;
              }
            }
          }

          &.log-out {
            padding-right:0;

            .nav-link {
              color:#fff;
              font-weight:300;
              background-color:$blue-primary;
              margin-right:0;
              border:2px solid $blue-primary;

              &:hover {
                color:$blue-primary;
                background-color:transparent;
              }
            }
          }
        }
      }
    }

    .navbar-toggler {
      font-size:1.5rem;
      padding:.25em .5em;
    }
  }
}



@media(max-width:991px) {
  header {
    .navbar {
      .navbar-collapse {
        &.collapse.show {
          display:flex;
        }

        .nav {
          .nav-item {
            flex-basis:100%;
            text-align:right;
            margin:0;
            padding:0;

            &.username {
              padding-left:0;
              border:none;
            }
          }
        }
      }
    }
  }
}

/*
** Footer
*/

footer {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:$purple-darker;
  margin-top:3em;
  padding:2em 1em;

  p {
    margin:0;
  }
}

/*
**  Content
*/

.main-content {
  background-color:#fff;
  padding:15px;
}

/*
**  Forms/Search
*/

form.search {
  background-color:#fff;
  line-height:1.6;
  border-radius:100em;
  border:1px solid #E4E4E4;
  transition:border .3s ease-in-out;

  .form-group {
    display:flex;
    margin:0;
    padding:.25em .5em;

    input {
      font-size:1.4rem;
      border:none;

      &:focus {
        outline:none;
        box-shadow:none;
      }
    }

    .input-group-btn {
      display:flex;
      align-items:center;

      .btn-search {
        color:#66656E;
        font-size:12px;
        line-height:1;
        padding:0 .5em 0 0;
        border-radius:0;
        border:none;
      }
    }
  }

  &:focus-within {
    border-color:$purple-lighter;
  }
}

.toolbar {
  .form-group {
    margin:0 .5em;

    &:first-child {
      margin-left:0;
    }

    input, select {
      border-radius:100em;
      padding-left:1em;
      padding-right:2em;

      &:focus {
        outline:none;
        box-shadow:none;
        border-color:$blue-primary;
      }
    }

    .form-control {
      font-size:1.4rem;
    }

    &.search {
      position:relative;

      &:after {
        content:"\f002";
        font-family:FontAwesome;
        color:#9A9A9A;
        position:absolute;
        top:50%;
        right:1em;
        transform:translateY(-50%);
        width:12px;
        height:12px;
        font-size:12px;
        line-height:1;
      }
    }

    &.date {
      position:relative;

      &:after {
        content:"\f133";
        font-family:FontAwesome;
        color:#9A9A9A;
        position:absolute;
        top:50%;
        right:1em;
        transform:translateY(-50%);
        width:12px;
        height:12px;
        font-size:12px;
        line-height:1;
      }
    }
  }
}

@media (max-width: 575.98px) {
  .toolbar {
    .form-group {
      margin:.25em 0;
    }
  }
}

/*
**  Cards
*/

.card {
  max-width:none;
  padding:1em;
}

/*
**  Tables
*/

.toolbar {
  margin-bottom:1em;
}

.table {
  font-size:1.4rem;

  .btn-primary {
    font-size:1.2rem;
    font-weight:normal;
    padding:.4em 1.25em;
  }

  tr {
    &:hover {
      background-color:lighten($blue-primary, 25%) !important;
    }

    th, td {
      vertical-align: middle;
    }
  }

  &.table-striped {
    tbody {
      tr:nth-of-type(odd) {
        background-color:#F1F1F1;
      }
    }
  }

  &.list-table {
    th:not(:first-of-type),
    th:not(:last-of-type),
    td:not(:first-of-type),
    td:not(:last-of-type) {
      text-align:center;
    }

    th:first-of-type,
    td:first-of-type {
      text-align:left;
    }

    th:last-of-type,
    td:last-of-type {
      text-align:right;
    }

    thead {
      th {
        color:$blue-primary;
        border-top:none;
        border-bottom:1px solid $blue-primary;
      }
    }

    tbody {
      tr {
        th, td {
          padding-left:2em;
          padding-right:2em;
        }

        th {
          background-color:#fff;
        }

        &.alert {
          td:nth-of-type(1),
          td:nth-of-type(4),
          td:nth-of-type(5) {
            color:#DD0000;
            font-weight:700;
          }
        }

        &.totals {
          background-color:#E4E4E4;

          td {
            font-weight:bold;
          }
        }

        &.sub-cat {
          td:first-of-type {
            padding-left:3.5em;
          }
        }
      }
    }

    tfoot {
      color:#fff;
      background-color:$purple-primary;

      tr:hover {
        background-color:$purple-darker !important;
      }
    }
  }
}

/*
**  Datepicker
*/

.datepicker {
  font-family:Arial, sans-serif;

  .datepicker-days {
    font-size:1.2rem;

    table {
      thead {
        text-transform:uppercase;
        letter-spacing:.04em;
      }

      tbody {
        td {
          border-radius:0;
          padding:.3em .6em;

          &.active {
            background:$blue-primary;
          }
        }
      }
    }
  }
}

/*
**  Client/Budget Page
*/

.messaging {
  .last-seen {
    font-size:1.4rem;
    color:#999;
    margin-bottom:.5em;
    padding-bottom:.5em;
    border-bottom:1px solid rgba(0,0,0,.125);
  }

  .message-bubble-left {
    width:0;
    height:0;
  }

  .row {
    margin-bottom:1em;

    .profile-image {
      .clipped-profile-image-left {
        width:100%;
        height:0;
        padding-bottom:100%;
        background:url('../images/default-profile-image_01.svg');
        background-size:cover;
        clip-path:url(#message-bubble-left);
      }

      .profile-right {
        position:relative;
        background:url('../images/message-bubble-right_01.svg') no-repeat;
        background-size:cover;
        width:100%;
        height:0;
        padding-bottom:100%;

        .initials {
          position:absolute;
          width:100%;
          height:100%;
          display:flex;
          justify-content: center;
          align-items: center;
          color:$blue-primary;
          font-weight:700;
          letter-spacing: .04em;
        }
      }

      &.left {
        padding-right:5px;
      }

      &.right {
        padding-left:5px;
      }
    }

    .message {
      background-color:#f1f1f1;
      margin:0;
      border-radius:20px;
      border:none;

      .meta {
        color:#a6a6a6;
        font-size:1.4rem;
        font-weight:700;

        p {
          margin-bottom:0;
        }
      }

      &.counselor {
        background-color:lighten($blue-primary, 25%);
      }
    }
  }
}

.account-meta {
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom:none;

  .table {
    td {
      vertical-align: top;
    }
  }
}

.additional-account-meta {
  background-color:rgba(0,0,0,.125);
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-top:none;

  .table {
    td {
      border-top:none;
      vertical-align:top;
    }
  }
}

.message-form {
  label {
    margin:0;
  }

  textarea {
    font-size:1.4rem;
    margin:1em 0;
    border-color:#666;
    border-radius:10px;
    transition:border-color .3s ease-in-out;

    &:focus {
      outline:none;
      box-shadow:none;
      border-color:$blue-primary;
    }
  }
}

.export-table a {
  font-size:1.4rem;
  font-weight:400;

  &.excel:before {
    content:"\f1c3";
    font-family:FontAwesome;
    padding-right:.5em;
  }

  &.pdf:before {
    content:"\f1c1";
    font-family:FontAwesome;
    padding-right:.5em;
  }
}