@import '/style-interview.css';

.color-palette-1 {

  --dark-blue: #212A39;
  --white: #ffffff;

  --bgcolor-sidebar:#F3F4F6;
  --bgcolor-content:#ffffff;
  --color-text-dark:var(--dark-blue);
  --color-text-light:#4D5464;

  --bgcolor-sidebar-hover:#ffffff;

  --progress-bar-color: var(--dark-blue);

  --chat-user-bg:var(--color-text-dark);
  --chat-user-text:#ffffff;
  --chat-ai-bg:var(--bgcolor-sidebar);
  --chat-ai-text:var(--color-text-dark);
  --chat-bubble-radius:8px;
  --chat-input-border:2px solid #D1D5DB;

  --accent-color: var(--dark-blue);

  --rainbow-color1:#373956;
  --rainbow-color2:#5D4B67;
  --rainbow-color3:#893C5F;
  --rainbow-color4:#C64D68;
  --rainbow-color5:#F6934E;
  --rainbow-color6:#F4C64D;

  --btn-padding: 0.5rem;

  --rainbow-gradient:linear-gradient(
    115deg,
    var(--rainbow-color1) 0%,
    var(--rainbow-color1) 16.6666%,
    var(--rainbow-color2) 16.6666%,
    var(--rainbow-color2) 33.3333%,
    var(--rainbow-color3) 33.3333%,
    var(--rainbow-color3) 50%,
    var(--rainbow-color4) 50%,
    var(--rainbow-color4) 66.6666%,
    var(--rainbow-color5) 66.6666%,
    var(--rainbow-color5) 83.3333%,
    var(--rainbow-color6) 83.3333%,
    var(--rainbow-color6) 99.99%,
    white 99.99%, white 100%
  );

  --rainbow-gradient-half:linear-gradient(
    115deg,
    var(--rainbow-color1) 0%,
    var(--rainbow-color1) 8.3333%,
    var(--rainbow-color2) 8.3333%,
    var(--rainbow-color2) 16.6666%,
    var(--rainbow-color3) 16.6666%,
    var(--rainbow-color3) 25%,
    var(--rainbow-color4) 25%,
    var(--rainbow-color4) 33.3333%,
    var(--rainbow-color5) 33.3333%,
    var(--rainbow-color5) 41.6666%,
    var(--rainbow-color6) 41.6666%,
    var(--rainbow-color6) 50%,
    white 50%,
    white 100%
  );
}

@font-face {
  font-family: Noto;
  src: url("fonts/NotoSans-VariableFont_wdth\,wght.ttf");
}

/*
body {
  font-family: sans-serif; padding: 2em;
  min-height:100vh;
  font-family: Noto, sans-serif;
}
*/

html, body {
  background-color:white;
  margin:0;
  padding:0;
  font-family: "Noto", sans-serif;
  height: 100%;
}

.rainbow {
  > * {
    &:nth-child(6n)   {
      --rainbow-color: var(--rainbow-color6);
      --rainbow-invert: var(--rainbow-color3);
    }
    &:nth-child(6n+1) {
      --rainbow-color: var(--rainbow-color1);
      --rainbow-invert: var(--rainbow-color4)
    }
    &:nth-child(6n+2) {
      --rainbow-color: var(--rainbow-color2);
      --rainbow-invert: var(--rainbow-color5);
    }
    &:nth-child(6n+3) {
      --rainbow-color: var(--rainbow-color3);
      --rainbow-invert: var(--rainbow-color6);
    }
    &:nth-child(6n+4) {
      --rainbow-color: var(--rainbow-color4);
      --rainbow-invert: var(--rainbow-color1);
    }
    &:nth-child(6n+5) {
      --rainbow-color: var(--rainbow-color5);
      --rainbow-invert: var(--rainbow-color2);
    }
  }
}

.rainbow-header {
  color:white;
  font-size:24px;
  font-weight:700;
  text-align:center;
  padding:10px;
  text-align: left;
  background: var(--rainbow-gradient-half);

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left;
  &, .header-name {
    transition:all 1s ease-in-out;
  }

  .header-name {
    height:30px;
    background: var(--rainbow-gradient);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-transform: uppercase;
  }

  .right {
    padding-top:4px;
    float:right;
    color:black;
    font-size:0.8em;

    & > .header-button {
      font-size:0.8em;
      text-decoration: none;
      color:var(--color-text-light);
      display:inline-block;
      border:1px solid transparent;
      padding:5px;
      border-radius: 5px;
      background-color: transparent;
      cursor: pointer;
      &:hover {
        transition:all 0.15s ease-in-out;
        background: var(--rainbow-gradient);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        border-color: var(--color-text-dark);
      }
    }

    .profile-image {
      height:24px;
      vertical-align: middle;
      margin-top: -4px;
    }
  }
}

.progress-bar{
  height: 1rem;
  background-color: #DDD;
  border-radius: 0.5rem;
  overflow: hidden;
  .progress-bar-status{
    height: 100%;
    background-color: var(--progress-bar-color);
  }
}

.stripe {
  width:70px;
  margin-right: 2px;
  &:nth-child(1) { background-color:var(--rainbow-color1); }
  &:nth-child(2) { background-color:var(--rainbow-color2); }
  &:nth-child(3) { background-color:var(--rainbow-color3); }
  &:nth-child(4) { background-color:var(--rainbow-color4); }
  &:nth-child(5) { background-color:var(--rainbow-color5); }
  &:nth-child(6) { background-color:var(--rainbow-color6); }
}

.navigation-sidebar {
  background-color: var(--bgcolor-sidebar);
  width:220px;
  padding:2%;
  box-sizing: border-box;
  .sidebar-title {
    font-weight:700;
    margin-bottom:20px;
  }
  .sidebar-button {
    display:block;
    height:40px;
    min-height:fit-content;
    margin-bottom:5px;
    border-radius: 5px;
    color:var(--color-text-light);
    text-decoration: none;
    font-size:0.8rem;
    font-weight: 600;;
    background:transparent;
    display:flex;
    align-items: center;
    padding-left: 10px;
    position:relative;
    border:1px solid transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    & > .icon {
      height:24px;
      vertical-align: middle;
      margin-top: -4px;
      margin-right: 10px;
    }

    & > .stripe {
      height:12%;
      width:100%;
      background:var(--rainbow-gradient);
      background-size: 0% 100%;
      background-position-y:100%;
      background-repeat: no-repeat;
      position:absolute;
      left:0;
      bottom:0;
      z-index:1;
      transition:all 0.09s ease-in-out;
    }
    &[disabled] {
      opacity: 0.25;
      cursor: not-allowed;
    }
    &:not([disabled]) {
      cursor: pointer;
      &:hover > .stripe {
        background-size: 100% 100%;
      }
      &:hover {
        transition:all 0.15s ease-in-out;
        color:var(--color-text-dark);
        background:white;
      }
      &.active {
        color:var(--color-text-dark);
        background:white;
        border-color:var(--color-text-dark);
      }
    }

    &.indent{
      margin: 0.25rem 0 0 1.25rem;
      span{
        padding-bottom: 0.5rem;
        font-size: 0.75rem;
      }
    }
  }

  /* The premium upgrade button box */
  .sidebar-premium {
    margin-top:40px;
    border-radius: 3px;
    background: var(--color-text-dark);
    color:white;
    font-size:0.8rem;
    padding:10px;
    & > .description {
      display:block;
      margin-bottom:10px;
    }
    & > .sidebar-button {
      text-align: center;
      background-color:white;
    }
  }

}

.sidebar-and-content {
  width:100%;
  height:100%;
  display:flex;
  min-height: fit-content;
}
.main-content {
  background-color: var(--bgcolor-content);
  flex:auto;
  min-height: fit-content;
}

.content-box {
  border-radius: 10px;
  background-color: var(--bgcolor-content);
  padding:0.5rem;
  border:1px solid var(--color-text-dark); /* TODO: remove */
  color:var(--color-text-dark);
  font-size:10pt;

  .title { font-size:12pt; }
  .small-title { font-size:11pt; }
}

.numbered-list {
  list-style-type: decimal;
  list-style:none;
  counter-reset:list-counter;
  padding-left:0;
  & > li {
    counter-increment: list-counter;
    margin:0.5em 0 0.5em 2.5em;
    position:relative;
    &::before {
      content: counter(list-counter);  /* insert the number */
      position: absolute;
      left: -2em;                    /* shift circle to the left */
      top: 40%;
      transform: translateY(-50%);     /* vertical centering */

      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;              /* make it a circle */
      background: var(--color-text-dark);
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size:1.2em;
    }
  }
}


.chat-container {
  height:400px;
  display:flex;
  flex-direction:column;
  /*
  border-radius:10px;
  background:var(--bgcolor-content);
  padding:0.5rem;
  */


  /*
  .user {
    text-align: right;
    img {float:right}
  }
  */
  .profile-image {
    height:24px;
    vertical-align: middle;
    margin-top: -4px;
    border-radius: 50%;
  }

  input[type="text"] {
    max-width:100%;
    border-radius: var(--chat-bubble-radius);
    border:var(--chat-input-border);
    color:var(--color-text-dark);
    background-color:transparent;

    padding:0.5rem;
    box-sizing:border-box;
    font-size:10pt;
  }
  .transcript-lines {
    overflow-y:scroll;
    flex:1;
    p {
      font-size:10pt;
      vertical-align: top;
      margin-bottom:0.5rem;
      max-width:100%;
      border-radius: var(--chat-bubble-radius);
      padding:0.75rem;
      white-space: pre-wrap;

      &[data-speaker="ai"] {
        color:var(--chat-ai-text);
        background:var(--chat-ai-bg);
        margin-right:2rem;
        text-align: left;
        img {float:left; margin-right:0.5rem;};
      }
      &[data-speaker="user"] {
        color:var(--chat-user-text);
        background:var(--chat-user-bg);
        margin-left:2rem;
        text-align: right;
        img {float:right; margin-left:0.5rem;};
      }
    }
  }
  .chat-input {
    display:flex;
    column-gap:0.25rem;
    height:2rem;
    & > input { flex:1; height:114%;}
  }

  .icon {
    display:inline-block;
    width:2rem;
    height:2rem;
    border-radius:20%;
    box-sizing:content-box;
    border:2px solid;
  }

  .send-icon {
    &:not(:disabled) {
      background:var(--color-text-dark);
      &:hover {
        /*border-color:var(--rainbow-color5);*/
        --fill:var(--rainbow-color6);
        /*background:var(--rainbow-color2); */
      }
    }
    &[disabled] {
      background:rgb(227,227,227);
      border-color:rgb(227,227,227);
    }
    --fill:white;
    transition: all 0.15s ease-in-out;
    svg {
      width:50%;
      margin-left:25%;
      margin-top:25%;
    }
  }
}

.mic-icon {
  display:inline-block;
  width:2rem;
  height:2rem;
  border-radius:20%;

  background-color:rgb(227, 227, 227);
  border:2px solid;
  --reddish:rgb(213, 140, 140);
  --greenish:rgb(140, 213, 140);
  --greyish:rgb(211, 211, 211);
  --level:0%;
  svg {
    width:50%;
    margin-left:25%;
    margin-top:25%;
  }
  &[data-enabled="false"] {
    border-color:var(--reddish);
    svg {opacity: 0.25;}
  }
  &[data-enabled="true"] {
    border-color:var(--greenish);
    background:linear-gradient(to top, var(--greyish), var(--greyish) var(--level), transparent var(--level));
    &[data-vad="true"] {
      background:linear-gradient(to top, var(--greenish), var(--greenish) var(--level), transparent var(--level));
    }
  }
}

.left-right-columns {
  display:flex;
  .column {
    flex:1;
    padding:1rem;
  }
}

/*
body::before {
  --colorTopLeft:#e4e4e4;
  --colorTopRight:#d5d5d5;
  --colorBottomLeft:#e5e5e5;
  --colorBottomRight:#818181;
  --colorMiddle:#d5d5d5;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image:
  linear-gradient(to bottom right, var(--colorTopLeft), var(--colorMiddle), var(--colorBottomRight));
  */
  /*
    linear-gradient(to bottom right, var(--colorTopLeft), transparent),
    linear-gradient(to bottom left, var(--colorTopRight), transparent),
    linear-gradient(to top right, var(--colorBottomLeft), transparent),
    linear-gradient(to top left, var(--colorBottomRight), transparent);

  background-blend-mode: screen;
  */
/*}*/
input { margin-bottom: 1em; }

.pageWrapper {
  background:white;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  padding:1em;
  border-radius: 0.25rem;
  margin: 0 auto;
}
.pageWrapper.narrow {
  width: 30em;
}
.loginForm {
  padding:1em;
}
.loginForm h1 {
  margin:0;
  margin-bottom: 1em;
  display:block;
  border-bottom:1px solid #888;
  text-align: center;
}
.loginForm input,
.loginForm button {
  font-size: 1.2em;
}

.content {
  margin-top: 1em;
  border-bottom: 1px solid #888;
  padding-bottom: 1em;
}
/* Make the "uploading" element display a 45 degree striped light grey background, and slowly fill it left to right over 10 seconds */
.uploading {
  background-image: linear-gradient(to right, #e4e4e4, transparent);
  animation: fillLeftToRight 10s linear infinite;
}

.progress-bar-container {
  --light-stripe:#fcfcfc;
  --dark-stripe:#f4f4f4;
  width: 100%;
  height: 30px;
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--light-stripe),
    var(--light-stripe) 10px,
    var(--dark-stripe) 10px,
    var(--dark-stripe) 20px
  );
  border:1px solid #ccc;
}

.progress-bar-fill {
  --duration:12s;
  height: 100%;
  width: 0;
  background-color: #4d79b1;
  position: absolute;
  left: 0;
  top: 0;
  animation: animateWidthTo100 var(--duration) linear forwards;
}

@keyframes animateWidthTo100 {from {width: 0%;} to {width: 100%;}}

.resumeSmall { border:1px solid #ccc; font-size:8pt; display:inline-block; }
.resumeSmall .title { font-size:9pt; }
.resumeSmall ul { font-size:7pt; }

.title {
  font-size: 2rem;
  font-weight: 400;
  margin-top: 0;
}

.subtitle {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-top: 1rem;
}

.file-upload{
  height: 20rem;
  width: 80%;
  margin: auto;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .file-upload-title{
    font-size: 1.5rem;
  }
}

/* Utility class for flex with space between */
.flex-between{
  display: flex;
  justify-content: space-between;
}

.flex-end{
  display: flex;
  justify-content: end;
}

/* Utility class for aligning items on the center */
.items-center{
  align-items: center;
}

.flex{
  display: flex;
}

.hidden{
  display: none;
}

.full-width{
  width: 100%;
}

.full-height{
  height: 100%;
}

.half-width{
  width: 50%;
}

.space-below{
  margin-bottom: 1rem;
}

.no-bullet-list{
  list-style: none;
  padding-left: 0;
}

.dark-blue-btn{
  background-color: var(--color-text-dark);
  background: var(--color-text-dark);
  color: white;
  padding: var(--btn-padding);
  &:not(.disabled){
    cursor: pointer;
  }
}

.white-btn{
  background-color: white;
  color: black;
  padding: var(--btn-padding);
  cursor: pointer;
}

.no-bg-btn{
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.white-icon{
  filter: brightness(0) invert(1);
}

.disabled{
  filter: contrast(0.4);
  cursor: not-allowed;
}

.even-cols{
  display: flex;
  *{
    flex: 1;
  }
}

.bg-rainbow-color-1 { background-color: var(--rainbow-color1); }
.bg-rainbow-color-2 { background-color: var(--rainbow-color2); }
.bg-rainbow-color-3 { background-color: var(--rainbow-color3); }
.bg-rainbow-color-4 { background-color: var(--rainbow-color4); }
.bg-rainbow-color-5 { background-color: var(--rainbow-color5); }
.bg-rainbow-color-6 { background-color: var(--rainbow-color6); }

.border-rainbow-color-1 { border-color: var(--rainbow-color1); }
.border-rainbow-color-2 { border-color: var(--rainbow-color2); }
.border-rainbow-color-3 { border-color: var(--rainbow-color3); }
.border-rainbow-color-4 { border-color: var(--rainbow-color4); }
.border-rainbow-color-5 { border-color: var(--rainbow-color5); }
.border-rainbow-color-6 { border-color: var(--rainbow-color6); }

.card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #CCC;
  flex: 1;
  font-weight: 300;

  .card-title {
    margin: 0;
    font-weight: 400;
  }

  .section-header {
    margin: 2rem 0 1rem 0;
    font-weight: 300;
  }
}

.resume-review {
  padding: 1rem;

  .resume-review-data {
    display: flex;
    column-gap: 1rem;
  }

  .contact-info {
    margin-top: 1.5rem;
    font-size: 1.25rem;

    .contact-info-name {
      font-size: 1.25rem;
      font-weight: 300;
    }
  }

  .resume-work-list, .resume-education-list {
    list-style: none;
    padding-left: 0;

    .resume-experience, .resume-education{
      margin-bottom: 1rem;
    }

    .work-experience-company, .resume-education-school {
      font-size: 1.25rem;
      font-weight: 400;
      margin: 0;
    }

    .work-experience-role, .resume-education-degree {
      font-size: 1.25rem;
      font-weight: 300;
    }

    .work-experience-timeframe, .resume-education-year {
      font-weight: 200;
    }

    .resume-details-list {
      list-style: none;
      text-indent: 1rem;
      padding-left: 0;
    }
  }
}

.modify-resume-component{

  .modify-resume-field{
    display: block;
    input, textarea{
      width: 95%;
      font-size: 1.25rem;
      padding: 0.5rem;
      margin-bottom: 1rem;
      border: 1px solid #CCC;

      border-radius: 0.5rem;
      font-family: Noto;
    }
    label{
      font-size: 1rem;
      text-transform: capitalize;
    }
  }

  .resume-edit-experience-card{
    margin-bottom: 1rem;
  }

  .modify-skills-menu{
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 1rem;

    .modify-skill{
      padding: 0.25rem 1rem;
      text-transform: capitalize;
      background-color: var(--bgcolor-sidebar);
      border-radius: 25rem;
      display: flex;

      .remove-skill-btn{
        display: flex;
        align-items: center;

        .remove-skill-icon{
          width: 1rem;
          height: 1rem;
        }
      }
    }
  }

  .resume-new-skill-form{
    display: flex;
    margin-top: 1rem;

    input, button{
      font-size: 1.25rem;
    }

    .resume-new-skill-input{
      flex: 1;
      margin-bottom: 0;
      border-radius: .5rem 0 0 0.5rem;
      border-color: #CCC;
      padding: 0.75rem;
    }

    .resume-new-skill-submit{
      border: none;
      border-radius: 0 .5rem .5rem 0;
    }
  }

  .save-resume-btn{
    background-color: var(--accent-color);
    padding: 0.5rem;
    font-size: 1.25rem;
    color: white;
    margin-top: 1rem;
    cursor: pointer;
  }
}

.badges-wrapper{
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;

  column-gap: 0.25rem;
  .badge{
    background-color: #EEE;
    text-transform: capitalize;
    padding: 0.25rem 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
  }
}

.jobs-dashboard{
  width: 70%;
  margin: auto;
  margin-top: 1rem;

  .job-fit-summary{
    display: block;
    margin: 1.5rem 0;
    text-decoration: none;
    color: var(--color-text-dark);

    &:hover, &:focus{
      border-color: var(--color-text-light);
    }
  }

  .toggle-job-display-mode{
    background-color: var(--dark-blue);
    color: var(--white);
    padding: 0.25rem;
    margin-bottom: 1rem;
    width: 9rem;
    cursor: pointer;
  }

  .job-fit-display{
    .job-fit-percentage-overview{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .job-fit-percentage{
      font-size: 1.5rem;
      width: 3.5rem;
      height: 3.5rem;
      color: white;
      background-color: var(--rainbow-color1);
      justify-content: center;
      display: flex;
      align-items: center;
      border-radius: 5rem;
    }

    .matched-skills-section{
      .subtitle{
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--color-text-dark);
      }

      .skills-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;

        .factor-fit-card{
          flex: 0 0 49%;
          box-sizing: border-box;

          .factor-name{
            font-weight: 400;
            margin: 0;
          }

          .factor-status-badge{
            background-color: var(--dark-blue);
            color: var(--white);
            border-radius: 0.5rem;
            padding: 0.25rem;
            font-weight: 500;
            margin-bottom: 1rem;
          }

          &.factor-fit-needs-work .factor-name{
            color: var(--color-text-light);
          }
        }
      }

      .static-resources{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 1rem;
        column-gap: 2rem;
        text-align: center;

        .static-offering-title{
          font-weight: 500;
        }

        .coming-soon-banner{
          width: 100%;
          display: block;
          background-color: var(--dark-blue);
          color: white;
          font-weight: 500;
          padding: 0.75rem;
          margin-bottom: 1.25rem;
        }

        .static-offering-link{
          text-decoration: none;
          background-color: var(--dark-blue);
          color: var(--white);
          display: block;
          padding: 0.5rem 0;
          width: 100%;
          font-weight: 400;
        }
      }
    }
  }

  .job-description-text{
    width: 100%;
    height: 8rem;
    margin-top: 1rem;
    resize: none;
  }
}

.interview-feedback-page{
  padding: 2rem;
  display: flex;
  max-width: 1200px;

  .interview-feedback{
    flex: 5;
    .subtitle{
      font-size: 1.5rem;
      font-weight: 500;
      margin-top: 1rem;
    }

    .card{
      margin-bottom: 1rem;
      .card-title{
        display: flex;
        column-gap: 0.5rem;
      }
    }

    .strengths-bullet-list, .weaknesses-bullet-list{
      list-style: none;
      padding-left: 0;
      li:before{
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }

    .strengths-bullet-list li::before{
      background-image: url('/icon/check.svg');
    }

    .weaknesses-bullet-list li::before{
      background-image: url('/icon/x.svg');
    }
  }

  .interview-types-list{
    flex: 1;
  }

  .icon.fill-blue{
    fill: var(--dark-blue);
  }
  .chat-container{
    max-width: 900px;

    .transcript-lines{
      display: flex;
      flex-direction: column;
      p{
        width: fit-content;
        &[data-speaker="user"] {
          align-self: end;
        }
      }
    }
  }
}

.homepage{
  padding: 0.5rem 2rem;

  .next-steps{
    .next-step-link{
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      border-left: solid 1rem var(--rainbow-color);
      a{
        color: var(--color-text-dark);
        text-decoration: none;
        flex: 1;

      }
      .homepage-nav-icon{
        padding: 0.5rem;
      }
    }
  }
}