/* ==========================================================================
   "Home buyer's preparation worksheets" custom styles
   ========================================================================== */

/* Preparation worksheet specific styles */

// Width of right-hand worksheet column (priority, likely-ness, etc).
@right-col-width: 202px;

// Colors
@btn-grade-disabled-color: @gray-10;
@btn-grade-unselected-color: @gray-10;
@btn-grade-selected-color: @green-60;
@btn-grade-hover-color: @green-20;

@btn-grade-disabled-text-color: @dark-gray;
@btn-grade-unselected-text-color: @dark-gray;
@btn-grade-selected-text-color: @black;
@btn-grade-hover-text-color: @black;

@btn-delete-color: @pacific;
@btn-delete-hover-color: @pacific-80;

@btn-secondary-color: @gray-80;
@btn-secondary-hover-color: @gray-60;

@super-btn-font-size:           18px;

.btn-secondary {
  background-color: @btn-secondary-color;
  &:hover,
  &:focus {
    background-color: @btn-secondary-hover-color;
  }
}

.goals-high {
  background-color: @green; 
}

.goals-medium {
  background-color: @green-60;
}

.goals-low {
  background-color: @green-20;
}

.flags-high {
  background-color: @red;
}

.flags-medium {
  background-color: @red-80;
}

.flags-low {
  background-color: @red-60;
}

.risks-high {
  background-color: @gold;
}

.risks-medium {
  background-color: @gold-80;
}

.risks-low {
  background-color: @gold-60;
}

.btn__super {

    padding:
        unit( 11px / @super-btn-font-size, em )
        unit( 29px / @super-btn-font-size, em );
    font-size: unit( @super-btn-font-size / @base-font-size-px, em );

    & + & {
        margin-left: unit( 6px / @super-btn-font-size, em);
    }

}

// Inputs with buttons for goals, risks, and red flags.

.input-with-btns {
  display: block;
  clear: both;
  margin-bottom: 10px;
}

.input-with-btns_input {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
  padding-right: 10px;
  .respond-to-min(750px, {
    margin-bottom: 10px;
    float: left;
    width: 68%;
  });
  .respond-to-min(801px, {
    margin-bottom: 20px;
    width: auto;
    float: none;    
  });
  .respond-to-min(960px, {
    margin-bottom: 10px;
    width: 68%;
    float: left;
  });
  .respond-to-min(1000px, {
    width: 70%;
  });
  .respond-to-min(1100px, {
    width: 71%;
  });
}

.input-with-btns_input input {
  width: 100%;
}

.input-with-btns_btns {
  // Set the width of the right column so it doesn't re-size
  // as the button webfont text and icons load.
  .respond-to-min(750px, {
    width: @right-col-width;
    float: right;
  });
  .respond-to-min(801px, {
    width: auto;
    float: none;
  });
  .respond-to-min(960px, {
    width: @right-col-width;
    float: right;
  });
  label h6 {
    .respond-to-range(750px, 801px, {
      .u-visually-hidden();
    });
    .respond-to-min(960px, {
      .u-visually-hidden();
    });
  }
}

.input-explanation {
  clear: both;
}

// Preparation worksheets goals, risks, red flag icon colors.
.prepare-worksheet .cf-icon-approved-round,
.prepare-worksheet .cf-icon-approved {
  color: @green;
}

.prepare-worksheet .cf-icon-complaint-round {
  color: @red;
}

.prepare-worksheet .cf-icon-error-round {
  color: @gold;
}

// Inputs with buttons for goals, risks, and red flags.
// The color settings override CF colors.

.worksheet-left-col-header {
  float: left;
  .respond-to-min(750px, {
    width: 68%;
  });
  .respond-to-min(801px, {
    width: 60%;
  });
  .respond-to-min(960px, {
    width: 68%;
  });
  .respond-to-min(1000px, {
    width: 70%;
  });
  .respond-to-min(1100px, {
    width: 71%;
  });
}

// Right-hand column of the worksheets (priority, likely-ness, etc).
.worksheet-right-col-header {
  display: none;
  .respond-to-min(750px, {
    display: none;
  });
  .respond-to-min(960px, {
    display: block;
    .u-right();
    width: @right-col-width;
  });
}

// Individual graded input settings.

.input-graded .content_bar {
  border-top: 1px solid @gray-40;
  background: @gray-5;
}

.input-graded.active .content_bar {
  border-top: 1px solid @gray-40;
  background: @gray-10;
}

.input-graded .btn {
  background: @btn-grade-disabled-color;
  color: @btn-grade-disabled-text-color;
}

.input-graded.active .btn {
  background: @btn-grade-unselected-color;
  color: @btn-grade-unselected-text-color;
}

.input-graded .btn:hover {
  background: @btn-grade-hover-color;
  color: @btn-grade-hover-text-color;
}

.input-graded .btn.active {
  background: @btn-grade-selected-color;
  color: @btn-grade-selected-text-color;
}

.input-graded .btn-input-delete {
  color: @btn-delete-color;
  vertical-align: top;
  cursor: pointer;
}

.input-graded .btn-input-delete:hover {
  color: @btn-delete-hover-color;
}

// Color override for content dividers on worksheet pages.
.worksheet .subheading {
  border-bottom-color: @gray-60;
}

.worksheet-notes {
  table {
    width: 100%;
    
    thead {
      border-bottom: 4px solid @gray-60;
    }
    
    thead th {
      color: @black;
      .webfont-demi();
      padding-bottom: (@grid_gutter-width / 3);
    }
  
    thead,
    thead th,
    td.text-col {
      background-color: transparent;
    }

    
    tbody {
      tr {
          border-bottom: 1px solid @gray-10;
      }
    }
    
    .text-col,
    th.input-col {
      padding-left: 0;
    }
  
    td {
      vertical-align: middle;
      
      &.text-col {
        font-size: 16px;
        .webfont-medium();
      }
      
      &.input-col {
        width: 60%;
      }
    }

    
    /* responsive table */
    .respond-to-max(@mobile-max, {
      &,
      tbody {
          display: block;
          width: 100%;
      }

      thead { 
        display: none; 
      }

      tr,
      th,
      td {
          display: block;
          text-align: left;
          white-space: normal;
          width: 100% !important;
      }

      tr {
        border-bottom: 1px solid @gray-10;
        padding-bottom: (@grid_gutter-width / 2);
        margin-bottom: (@grid_gutter-width / 2);
      }
    });
    
    /* textarea */
    textarea {
      width: 100%;
      resize: none;
      border-color: @gray-40;
      .webfont-medium();
    }
    
    ::-webkit-input-placeholder {
       color: @gray-40;
    }

    :-moz-placeholder { /* Firefox 18- */
       color: @gray-40;  
    }

    ::-moz-placeholder {  /* Firefox 19+ */
       color: @gray-40;  
    }

    :-ms-input-placeholder {  
       color: @gray-40;  
    }
    
  }    

}

.worksheet-summary {  
  &_header {
      padding: unit(10px / @base-font-size-px, em) 
               unit(16px / @base-font-size-px, em);
      background-color: @gray-5;
      margin-top: 16px;
      
      h2 {
        padding: 0;
        margin: 0;
      }
  }
  
  .subheading {
    margin-bottom: 0;
  }
  
  .input-notes {
    .webfont-medium();
  }
  
  .respond-to-max(@mobile-max, {
    .block__padded-top {
      margin-top: 0;
    }
  });

  
}


  .summary-chart {
  
    position: relative;
    width: 100%;
    margin-bottom: 2%;
    margin-top: 2%;
  }

  .box1 {
  display: inline-block;
  width: 26%;
  margin-left: 5%;
  }


 .box2 {
    display: inline-block;
    width: 32%;
    height: 36px;
    margin-left: 0%;
    text-align: center;
  }

  .box-goals {
    display: block;
    width: 100%;
    height: 15px;
    z-index: 99;
  }

  .box2 h5 {
    font-size: 0.4em;
  }

@media screen and (min-width: 1024px) {
  .worksheet-summary_header {
    margin-bottom: 65px;
  }
  .summary-chart {
  
    position: relative;
    width: 100%;
    margin-bottom: 2%;
    margin-top: 2%;
  }

  .box1 {
    display: inline-block;
    width: 108px;
    margin-left: 15%;
  }

 .box2 {
    display: inline-block;
    width: 108px;
    height: 15px;
    margin-left: 15%;
    text-align: center;
  }

  .box-goals {
    display: block;
    width: 108px;
    height: 22px;
    z-index: 99;
  }

  .box2 h5 {
    font-size: 0.875em;
  }

}

/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
  .nemo,
  aside.content_sidebar,
  .type-details nav {
    display: none !important;
  }
}