/*

  SF's Core CSS

  1. Imports - Used to import the various core less files
  2. HTML Overrides - Style overrides for basic HTML tags
  3. Utility Classes - Classes that we use often to keep from writing from repeating ourselves
  4. Bootstrap Overrides - When Bootstrap gets it wrong, we make it right (we know it's called delusion)
  5. ASP.Net Overrides - Yep they get it wrong too sometimes

*/


// 1. Imports
//--------------------------------
@import "./FontAwesome/mixins.less";
@import "./FontAwesome/variables.less";
@import "./JCrop/jcrop.less";

// import as less files so they are concatenated properly
@import (less) "./summernote/summernote.css";

@import "_page-admin.less";
@import "_modal.less";
@import "_forms.less";
@import "_dashboard.less";
@import "_grid.less";

@import "_blocks-cms.less";
@import "_blocks-security.less";
@import "_blocks-reporting.less";
@import "_blocks-core.less";
@import "_blocks-groups.less";
@import "_blocks-finance.less";
@import "_blocks-crm.less";
@import "_blocks-communication.less";
@import "_blocks-checkinadmin.less";
@import "_blocks-workflow.less";
@import "_blocks-prayer.less";
@import "_blocks-events.less";
@import "_components.less";

@import "_page-specific.less";

@import "_scroll.less";
@import "_global-variables.less";
@import "_helpers.less";

@import "./Bootstrap/mixins.less";





// 2. HTML Overrides
//--------------------------------

iframe {
  border: 1px solid @input-border;
}

// 3. Utility Classes
//--------------------------------

.clickable {
  cursor: pointer;
}

.tip {
  padding: 0 6px 2px;
  font-size: 11px;
  color: #fff;
  background-color: #71a5bf;
  border-radius: 4px;

  &.tip-liquid,
  &.tip-lava {
    &:after {
      content: '{{ Lava }}';
    }
  }

  &.tip-html {
    &:after {
      content: '< HTML />';
    }
  }
}

.navigation-tip {
  padding: 2px 4px;
  // used to show the user directions to a page (e.g. 'Administration > General Settings')
  font-family: @font-family-monospace;
  font-size: 90%;
  color: @state-info-text;
  white-space: nowrap;
  background-color: @state-info-bg;
  border-radius: @border-radius-base;
}

.alert-warning .navigation-tip {
    background-color: lighten(@state-warning-text, 10%);
    color: @state-warning-bg;
}

// context help
a.help {
  margin-left: 6px;
  color: @help-color;
  outline: 0;
}

a.warning {
  margin-left: 6px;
  color: @brand-warning;
  outline: 0;
}

.help-message {
  font-weight: normal;
}

.photo {
  img {
    width: 100%;
  }
}

.well {
  & > h1,
  & > h2,
  & > h3,
  & > h4 {
    margin-top: 0;
  }
}


// 4. Bootstrap Overrides
//--------------------------------

// add new alert style
.alert-default {
  .alert-variant(@alert-default-bg; @alert-default-border; @alert-default-text);
}

// fix btn colors that are inside of panels
.alert-warning {
  .btn-warning {
    color: @btn-warning-color;
  }
}

.alert-danger {
  .btn-danger {
    color: @btn-danger-color;
  }
}

.alert-info {
  .btn-info {
    color: @btn-info-color;
  }
}

.alert-success {
  .btn-success {
    color: @btn-success-color;
  }
}

// grid controls in asp.net center content using align=center but bootstrap overrides this 
th[align=center] {
  text-align: center;
}

.form-right {
  margin-bottom: 12px;
  text-align: right;

  .clearfix();

  .control-label {
    display: block;
  }

  .input-group {
    float: right;
  }
}

.btn-tabled {
  a {
    &:hover {
      text-decoration: underline;
    }
  }
}

.control-label {
  font-weight: @font-weight-bold;
}

// add badge colors back to BS3
.badge-danger {
  color: #fff !important;
  background-color: @label-danger-bg !important;
}

.badge-warning {
  color: #fff !important;
  background-color: @label-warning-bg !important;
}

.badge-success {
  color: #fff !important;
  background-color: @label-success-bg !important;
}

.badge-info {
  color: #fff !important;
  background-color: @label-info-bg !important;
}

.badge-critical {
  color: #fff !important;
  background-color: @label-critical-bg !important;
}

.badge-legend .badge {
  margin-right: 4px;
  cursor: pointer;
}

// add alternate popover title style that exists inside of the popover-content to use ajax updates
.popover-content {
  overflow: hidden;

  header {
    padding: 8px 14px;
    margin: -9px -14px 8px;
    font-size: @font-size-base;
    font-weight: normal;
    line-height: 18px;
    background-color: @popover-title-bg;
    border-bottom: 1px solid darken(@popover-title-bg, 5%);
    border-radius: 5px 5px 0 0;

    .clearfix();

    img {
      float: left;
      width: 32px;
      margin-right: 6px;
    }

    h3 {
      float: left;
      margin: 0 0 0 6px;
      font-size: 18px;
      font-weight: normal;

      small {
        display: block;
      }
    }
  }

  .body div {
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// list group additions

.list-group-item {
  .clearfix;

  .toggle-container {
    display: inline-block;
  }

  .content {
    display: block;
    float: left;
  }
}

.panel-headerimage {
  margin: -15px -15px 15px -15px;
}

// .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {}
.panel {
  .panel-heading {
    a.btn-link {
      color: @panel-heading-text-color;
    }

    .panel-title {
      small {
        opacity: .5;
      }
    }

    .panel-options {
      float: right;
      margin: -10px -15px;

      button {
        padding: 9px 12px 10px;
        border: 0;
        border-radius: 0;
      }
    }

    .checkbox {
      margin: 0;
    }

    .panel-labels {
      float: right;
      margin-top: -2px;

      .panel-text {
          font-size: 12px;
          float: left;
          margin-top: 5px;
      }
    }

    .panel-actions {
      margin-top: 4px;
    }

    .form-group {
      margin-bottom: 0;
    }
  }

  .panel-body {
    border-radius: 0 0 4px 4px;
  }

  .panel-footer {
    color: @panel-footer-color;
    background-color: @panel-footer-bg;
  }

  .panel-settings {
    padding: (@panel-body-padding);
    margin: -(@panel-body-padding);
    border-bottom: 1px solid lighten(@panel-heading-border, 3%);
  }

  .panel-settings-group {
    margin: -(@panel-body-padding);

    .btn {
      border-color: @panel-heading-border;
      border-top-width: 0;
      border-right-width: 0;
      border-radius: 0 !important;
    }

    .btn-group:first-child .btn {
      border-left-width: 0;
    }

    &.btn-group-justified {
      width: auto;
    }

    &.btn-group-justified > .btn-group .dropdown-menu {
      width: 100%;
    }
  }
}

.panel-widget {
  // .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {}
  .panel-variant(@panel-border; @panel-heading-text-color; @panel-heading-bg; @panel-heading-border;);

  .panel-heading {
    border: 0;

    .checkbox {
      display: inline;
      float: left;
      margin-top: 0;
      margin-bottom: 0;
    }

    .actions {
      a {
        margin-left: 4px;
      }
    }

    small {
      color: lighten(@panel-heading-text-color, 20%);
    }
  }
}

.panel-persondetails {
  border-top-color: @panel-top-border-color;
  // panel extensions    ->      .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {}

  .panel-variant(@panel-border; @panel-heading-text-color; @panel-heading-bg; @panel-heading-border;);

  .panel-heading {
    .actions {
      a {
        margin-left: 4px;
      }
    }
  }

  .panel-body {
    background-color: #fff;

    .form-group.static-control {
      margin-bottom: 2px;

      .clearfix();

      label {
        float: left;
        width: 40%;
        padding-right: 12px;
        text-align: right;
      }

      .form-control-static {
        float: left;
        width: 60%;
        padding-top: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    i.fa.fa-bars {
      cursor: pointer;
    }
  }
}

.panel-block {
  border-top-color: @panel-top-border-color;
  //.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;)

  .panel-variant(@panel-border; @panel-heading-text-color; @panel-heading-bg; @panel-heading-border;);

  > .panel-heading {
    .clearfix();

    .panel-title {
      float: left;

      i {
        color: #6a6a6a;
      }
    }
  }

  .list-group-item {
    background-color: transparent;
  }

  .panel-body {
    .grid.grid-panel {
      margin: -15px;

      .grid-filter {
        border-radius: 0;
      }

      .table-bordered {
        border-width: 1px 0 0 0;

        & > tfoot > tr > td {
          border: 0;
        }
      }
    }
  }
}

.panel-analytics {
  .panel-body {
    padding-top: 0;
    padding-bottom: 0;

    & > .row > [class*="col-"]:first-child {
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .col-md-9 {
      margin-right: -2px;
    }

    .grid.grid-panel {
      margin-bottom: 0;
    }
  }

  .filter-options {
    background-color: @panel-heading-bg;
  }

  .analysis-types {
    padding: 15px 0;
    margin-bottom: 15px;
    background-color: @panel-heading-bg;
  }
}

// styles for panel drawers
@drawer-bg: @panel-heading-bg;

.panel-drawer {
  width: 100%;
  background-color: @drawer-bg;
}

.drawer-content {
  padding: @panel-body-padding;
}

.panel-drawer.open > .drawer-content {
  display: block;
}

.drawer-pull {
  padding: 6px 8px;
  color: @panel-heading-text-color;
  cursor: pointer;
  border-bottom: 1px solid @panel-border;

  .clearfix();

  i {
    float: right;
  }
}

.drawer-pull:hover {
  background-color: darken(@drawer-bg, 3%);
}


// paneleditor is used to provide a small edit surface in a panel header. 
// example: threshold editor on checkin manager for locations


.paneleditor-label {
  float: left;
}

.paneleditor-input {
  float: left;
  margin-top: -6px;
  margin-right: 4px;
  margin-left: 4px;
}

// extensions for buttons    ->   .button-variant(@color; @background; @border) {}

.btn.aspNetDisabled {
  pointer-events: none; // Future-proof disabling of clicks
  cursor: not-allowed;

  .opacity(.65);
  .box-shadow(none);
}

.btn-action {
  .button-variant(@btn-action-color; @btn-action-bg; @btn-action-border);
}

.btn-security {
  .button-variant(@btn-security-color; @btn-security-bg; @btn-security-border);
}

.btn-authentication {
  width: 100%;

  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

  &:hover {
    background-color: darken(@btn-default-bg, 10%);
  }

  &.facebook:before {
    margin-right: 12px;
    font-family: 'FontAwesome';
    content: @fa-var-facebook;
  }

  &.google:before {
    margin-right: 12px;
    font-family: 'FontAwesome';
    content: @fa-var-google;
  }

  &.twitter:before {
    margin-right: 12px;
    font-family: 'FontAwesome';
    content: @fa-var-twitter;
  }
}



.btn-minimal {
  padding: 0;
  color: lighten(@text-color, 30%);
  text-decoration: none;
}

// alert extentions
.alert {
  // styling for exceptions

  pre {
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}

// make links in alerts the same color as the text with a nice dotted underline
.alert-success {
  a {
    color: @alert-success-text;
    border-bottom: @alert-success-link-border-bottom;
  }

  a.help {
    border-bottom: 0;
  }
}

.alert-info {
  a:not([class]) {
    color: @alert-info-text;
    border-bottom: @alert-info-link-border-bottom;
  }

    a.help {
      border-bottom: 0;
    }
}

.alert-warning {
  a {
    color: @alert-warning-text;
    border-bottom: @alert-warning-link-border-bottom;
  }
  a.help {
    border-bottom: 0;
  }
}

.alert-danger {
  a {
    color: @alert-danger-text;
    border-bottom: @alert-danger-link-border-bottom;
  }
  a.help {
    border-bottom: 0;
  }
}

.alert {
  // hide the styling of pre's inside of alerts
  pre {
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: 0;
  }
}

// system errors

.system-error {
  pre {
    color: inherit;
    background-color: transparent;
    border: 0;
  }

  .close {
    color: inherit;
  }
}

// modify BS3 to use fontawesome for carousel icons
.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
}

.carousel-control .fa-chevron-left {
  left: 40px;
}

.carousel-control .fa-chevron-right {
  right: 40px;
}

// form extensions

.form-no-margin {
  margin: 0;
}

// list extensions

ul.list-padded {
  margin-top: 12px;

  li {
    margin-top: 12px;

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

// typography

h1.condensed,
h2.condensed,
h3.condensed,
h4.condensed,
h5.condensed,
h6.condensed {
  margin-top: 0;
  margin-bottom: 0;
}

// add 10 column row
.col-md-2-10 {
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 992px) {
  .col-md-2-10 {
    position: relative;
    float: left;
    width: 20%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}


// 5. ASP.Net Overrides
//--------------------------------

// to make asp.net panels look disabled when enabled is false
div.aspNetDisabled {
  opacity: .5;
}


// 6. Icon Overrides
//--------------------------------

// abstracted fixed width icon element
.icon-fw {
  width: (18em / 14); // font-awesome
  text-align: center;
}
