@import './normalize.scss';

$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
  0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);

@import '@blueprintjs/core/src/common/_variables.scss';
// @import "@blueprintjs/core/src/common/colors.scss";

$blue1: #0069ff;
$blue2: #0052ff;
$blue3: rgb(0, 82, 204);
$pt-link-color: $blue3;
$pt-intent-primary: $blue1;
$menu-item-color-hover: $light-gray4;
$menu-item-color-active: $light-gray3;

$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");

$sidebar-zindex: 15;
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
  Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;

// Blueprint framework.
@import '@blueprintjs/core/src/blueprint.scss';
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';

// Bootstrap
// @import '~bootstrap/scss/bootstrap';

@import 'basscss';

@import 'functions';

// Objects
@import 'objects/form';
@import 'objects/typography';
@import 'objects/buttons';

// Components
@import 'components/data-table';
@import 'components/dialog';
@import 'components/custom-scrollbar';
@import 'components/dragzone';
@import 'components/pagination';
@import 'components/resizer';

// Pages
@import 'pages/dashboard';
@import 'pages/accounts-chart';
@import 'pages/authentication';
@import 'pages/expense-form';
@import 'pages/financial-statements';
@import 'pages/make-journal-entries';
@import 'pages/preferences';
@import 'pages/view-form';
@import 'pages/manual-journals';
@import 'pages/item-category';
@import 'pages/items';
@import 'pages/items-categories';
@import 'pages/invite-form';
@import 'pages/currency';
@import 'pages/invite-user';
@import 'pages/exchange-rate';
@import 'pages/customer';
@import 'pages/billing';
@import 'pages/register-wizard-page';
@import 'pages/register-organizaton';
@import 'pages/bills';
@import 'pages/estimates';
@import 'pages/invoice-form';
@import 'pages/receipt-form';
@import 'pages/payment-made';
@import 'pages/payment-receive';

// Views
@import 'views/filter-dropdown';
@import 'views/sidebar';
// @import 'pages/estimate';

.App {
  min-width: 960px;
}

.#{$ns}-tooltip {
  box-shadow: none;
}

[data-icon='bigcapital'] {
  path {
    fill: #004dd0;
  }
  .path-1,
  .path-13 {
    fill: #2d95fd;
  }
}

.bigcapital--alt {
  svg {
    path,
    .path-13,
    .path-1 {
      fill: #fff;
    }
  }
}
// =======
body.authentication {
  background-color: #fcfdff;
}

.bp3-toast {
  box-shadow: none;
}

.select-list--fill-popover {
  .bp3-transition-container,
  .bp3-popover {
    min-width: 100%;
  }
}

.bp3-fill{
  .bp3-popover-wrapper,
  .bp3-popover-target {
    display: block;
    width: 100%;
  }
  .bp3-button {
    width: 100%;
    justify-content: start;
  }
}

.bp3-datepicker-caption .bp3-html-select::after {
  margin-right: 6px;
}

.hint {
  margin-left: 6px;
  position: relative;
  top: -1px;

  .bp3-icon {
    color: #a1b2c5;
  }

  .bp3-popover-target:hover .bp3-icon {
    color: #90a1b5;
  }
  .bp3-icon {
    vertical-align: middle;
  }
}

.bp3-select-popover .bp3-menu {
  max-height: 300px;
  max-width: 400px;
  overflow: auto;
}

.pt-tooltip {
  .pt-popover-content {
    max-width: 100px;
  }
}

.bp3-form-group .bp3-label {
  .hint {
    .bp3-popover-wrapper {
      display: inline;
    }
  }

  &:not(.bp3-inline) .hint .bp3-popover-target {
    display: inline;
    margin-left: 0;
  }
}

.bp3-popover.bp3-tooltip {
  max-width: 300px;
}


.bigcapital-loading{
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;

  .center{
    width: auto;
    margin: auto;
    display: flex;
    flex-direction: column;
  }

  .text{
    margin-top: 12px;
    opacity: 0.85;
    display: none;
  }
}


.page-form{
  
  &__header{   
    padding: 20px;
  }

  &__primary-section{
    background-color: #fbfbfb;
    padding: 30px 20px 20px;
    margin: -20px;
    padding-bottom: 6px;
  }

  &__header-fields{
    width: 85%;
  }
  &__footer{
    padding: 15px;
    margin: 15px 0 0 0;
  }

  &__floating-actions{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 14px 18px;
    border-top: 1px solid #ececec;
  }
}
.datatable-editor{

  padding: 15px 15px 0;

    .bp3-form-group {
      margin-bottom: 0;
    }
    .table {
      border: 1px dotted rgb(195, 195, 195);
      border-bottom: transparent;
      border-left: transparent;

      .th,
      .td {
        border-left: 1px dotted rgb(195, 195, 195);

        &.index {
          text-align: center;

          span {
            width: 100%;
            font-weight: 500;
          }
        }
      }

      .thead {
        .tr .th {
          padding: 10px 10px;
          background-color: #f2f5fa;
          font-size: 14px;
          font-weight: 500;
          color: #1e1c3e;

          &.index > div {
            width: 100%;
          }
        }
      }

      .tbody {
        .tr .td {
          padding: 7px;
          border-bottom: 1px dotted rgb(195, 195, 195);
          min-height: 46px;

          &.index {
            background-color: #f2f5fa;

            > span {
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        }
        .tr {
          .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
          .form-group--select-list .bp3-button {
            border-color: #e5e5e5;
            border-radius: 3px;
            padding-left: 8px;
            padding-right: 8px;
          }

          .form-group--select-list {
            &.bp3-intent-danger {
              .bp3-button:not(.bp3-minimal) {
                border-color: #db3737;
              }
            }
          }

          &:last-of-type {
            .td {
              border-bottom: transparent;

              .bp3-button,
              .bp3-input-group {
                display: none;
              }
            }
          }

          .td.actions {
            .bp3-button {
              background-color: transparent;
              color: #e66d6d;

              &:hover {
                color: #c23030;
              }

              svg {
                color: inherit;
              }
            }
          }

          &.row--total {
            .account.td,
            .debit.td,
            .credit.td {
              > span {
                padding-top: 2px;
              }
            }
            .debit.td,
            .credit.td {
              > span {
                font-weight: 600;
                color: #444;
              }
            }
          }

          .td {
            &.note {
              .bp3-form-group {
                width: 100%;
              }
            }
          }
        }
      }
      .th {
        color: #444;
        font-weight: 600;
        border-bottom: 1px dotted #666;
      }

      .td {
        border-bottom: 1px dotted #999;
      }

      .actions.td {
        .bp3-button {
          background: transparent;
          margin: 0;
        }
      }
    }

  .table{
    .tbody{
      .tr .td.actions .bp3-button{
        background-color: transparent;
        color: #e66d6d;

        svg{
          color: inherit;
        }
      } 
    }
  }

  &__actions{

    .bp3-button{
      padding-left: 10px;
      padding-right: 10px;
    }

    .button--clear-lines{

      &.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
        background-color: #fcefef;
      }
    }
  }
}


.cloud-spinner{
  position: relative;

  &.is-loading:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999;
  }

  .bp3-spinner{
    position: absolute;
    z-index: 999999;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -20px;
  }

  &:not(.is-loading) .bp3-spinner{
    display: none;
  }
}


.big-amount{

  &__label{
    color: #5d6f90;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  &__number{
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    margin-top: 6px;
    color: #343463;
    line-height: 1;
    font-size: 34px;
  }
}


.bp3-alert{
  .bp3-alert-footer{
    .bp3-button{
      min-width: 70px;
    }
  }
}


.datatable-empty-status{
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 200px;

  &__title{
    font-size: 20px;
    color: #2c3a5d;
    font-weight: 600;
    margin-left: auto;
    margin-bottom: 12px;
    margin-right: auto;
    margin-top: 0;
    line-height: 1.4;
  }
  &__desc{
    font-size: 16px;
    color: #1f3255;
    opacity: 0.8;
    line-height: 1.6;
  }
  &__actions{
    margin-top: 26px;

    .bp3-button{
      min-height: 36px;

      & + .bp3-button{
        margin-left: 10px;
      }
    }
  }
}