@import "~bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss";
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
@import "../../../assets/css/vars.scss";

@import "../../../assets/css/contextmenu.scss";

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.navbar--dashboard {
  margin-bottom: 0;
}

.content {
  height: calc(100vh - ($navbar-height));
}

.dashboard {

  position: relative;

  padding: 0;
  margin: 0;

  &__wrapper {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    height: 100%;
  }

  &__map, &__aside, &__map-container {
    display: flex;
  }

  &__aside-container {
    position: relative;
  }

  &__map {
    flex-direction: column;
  }

  &__map-container {
    flex: 1;
    width: 100%;
  }

  &__toolbar-container {
    width: 100%;
    height: $navbar-height;
    .navbar {
      height: $navbar-height;
      margin-bottom: 0;
      border-radius: 0;
    }
  }

  &__content {
    height: calc(100vh - 2 * ($navbar-height));
  }

  &__loader {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  &--nav &__loader {
    height: calc(100vh - 50px);
  }

  &__panel {
    display: flex;
    flex-direction: column;

    .dashboard__panel__header {
      padding: 15px;
      margin: 0;
      background-color: $dark-gray;
      color: $white;
      a {
        color: $white;
        &:hover, &:active {
          color: darken($white, 15%);
          text-decoration: none;
        }
      }
    }

    &__collapsed {
      text-align: center;
      height: 100%;
      padding: 5px;
    }

    &__scroll {
      overflow: auto;
    }
  }

  &__date {
    padding-left: 15px;
    padding-right: 15px;
  }

  &__date-picker, &__search-input {
    margin: 9px 0;
    display: inline-block;

    .ant-calendar-picker {
      margin: 0;
    }
  }

  &__search-results .ant-select-item-option-content {
    overflow: unset;
    white-space: unset;
    text-overflow: unset;
  }

  &__date-link {
    color: #777;

    &:hover {
      text-decoration: none;
      color: $dark;
    }

    font-size: 24px;
    position: relative;
    top: 2px;
    padding: 0 4px;
  }

  &__filters__icon {
    // keep same width with or without content
    display: inline-block;
    width: 15px;

    position: relative;
    right: 8px;
  }

  &__aside {

    flex-direction: column;

    min-width: 275px;
    font-size: 12px;

    overflow: hidden;

    &-container {
      display: flex;
      flex: 1;
      max-height: 100%;
    }
  }

  .task-list__header {
    cursor: pointer;
    padding: 1em 0.5em;
    background-color: darken(#f5f5f5, 10%);
    border-bottom: 1px solid darken(#f5f5f5, 20%);

    &:hover {
      background-color: darken(#f5f5f5, 15%);
    }
  }

  .panel--group, .panel--tour {
    border-color: $main-blue-dark;
    border-width: 2px;
    margin: 4px; // so it is easier to drag tasks between tours in the dashboard panel
  }
}

.task-list__badges > * {
  margin-right: $base-margin-xs;
}

.task-list__badges .badge {
  background-color: $dark;
}

.dashboard__badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 40px;
}

.dashboard__badge--trailer {
  // small hack to visually center SVGs on badges
  svg {
    position: relative;
    top: 2px;
    left: 1px;
  }
}

.dashboard__badge--vehicle {
  // small hack to visually center SVGs on badges
  svg {
    position: relative;
    top: 2px;
  }
}

.dashboard__multi-value__label {
  font-size: 100%;
}

.tasklist__actions--icon {
  height: 30px;
  width: 30px;
  color: $dark;
  fill: $dark;

  &:hover {
    color: $gray-300;
    fill: $gray-300;
    text-decoration: none;
  }
}

.dashboard__map-container .leaflet-popup-content-wrapper {
  min-width: 200px;
}

:not(.task-package).list-group-item {

  font-size: 12px;
  position: relative;
  cursor: pointer;
  border-radius: 4px 0 !important;
  margin: 4px;
  padding: 8px 8px 8px 14px;
  border-right: none;

  a {
    color: $text-color;
  }

  &--cancelled {
    opacity: 0.5;
  }
  &.text-info:hover {
    color: lighten($state-info-text, 10%);
  }
  &:hover {
    color: $gray-light;
  }

  &-color {
    width: 6px;
    background-color: rgb(33, 178, 82);
    height: calc(100% - 4px);
    position: absolute;
    left: 0;
    top: 0;
  }
}

.task-package {
  padding: 8px;

  &--total {
    background-color: darken(#f5f5f5, 10%) !important;
  }

  &:hover {
    background-color: darken(#f5f5f5, 5%);
  }
}

.taskList__tasks {
  border: 2px dashed #F1C40F;
  padding: 4px;
  background-color: $light-gray;
  box-sizing: border-box;
  min-height: ($line-height-computed * 2) + (6 * 2);

  .list-group-item {
    padding: 8px 32px 8px 14px;
  }
}

.task__icon {
  &--right {
    font-size: 14px;
    line-height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
  }
  &--type {
    padding-right: 5px;
  }
}

.task__edit {
  padding-left: 4px;
  text-align: center;
  &:hover {
    color: lighten(#333333, 50%);
  }
}

.task__draggable {
  border: 1px solid $dark !important;
  &--dragging {
    opacity: 0.4;
  }
}

.group__editable {
  outline: none;
  border: 0;
}

.task__highlighted {
  background: $yellow!important;
}

.task__has-incidents {
  background: repeating-linear-gradient(
    -45deg,
    $white,
    $white 10px,
    lighten($yellow, 40%) 9px,
    lighten($yellow, 40%) 18px
    )
}

.task__eta {
  width: 100%;
  height: 4px;
  display: block;
  position: absolute;
  background-color: #E8E8E8;
  left: 0;
  right: 0;
  bottom: 0;
  &__now {
    position: absolute;
    transform: translateX(-2px);
    height: 4px;
    width: 4px;
    display: block;
    position: absolute;
    background-color: black;
  }
  &__timeframe {
    position: absolute;
    height: 4px;
    display: block;
    position: absolute;
    background-color: #C8C8C8;
  }
}

.task__tags,
.task__attrs {
  > i {
    margin-left: 5px;
  }
}

.dashboard__task-modal__complete-form {
  background-color: #fefedd;
  padding: 20px;
}

.ReactModal__Content--task-form,
.ReactModal__Content--select-courier,
.ReactModal__Content--filters,
.ReactModal__Content--settings {
  min-width: 40%;
  padding: 0;
}

.ReactModal__Content--task-report-incident {
  min-width: 40%;
}
.ReactModal__Content--filters {
  min-width: 66.666%;
}

.ReactModal__Content--task-form {
  max-height: 100%;
  .address-autosuggest__container {
    margin-bottom: 0;
  }
}

.ReactModal__Content--filters {
  padding: 15px;
  max-height: calc(100vh - 30px);
  .dashboard {
    &__modal-filters {
      &__tabpane {
        min-height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 15px;
      }
      &__courier {
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.ReactModal__Content--settings {
  padding: 15px;
}

.ReactModal__Content--recurrence {
  min-width: 50%;
  max-height: calc(100vh - 30px);
  padding: 0;
}

.ReactModal__Content--import {
  min-width: 33.3333%;
}

.task-tag-list {
  .label {
    margin-right: 5px;
  }
}

#map {
  flex: 1;
  margin-bottom: 0;
  padding: 0;
  z-index: 0;
}

#task_edit_history {
  padding-top: 10px;
}

.modal--shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.leaflet-popup-content-wrapper {
  border-radius: 0;
}

.leaflet-container a {
  color: initial;
}

.leaflet-container a:hover {
  text-decoration: none;
}

// @see https://codepen.io/olam/pen/zcqea

$pulse-color: #2ECC40;

.pulse {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #AAAAAA;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(#AAAAAA, 0.4);
  &--on {
    background: $pulse-color;
    box-shadow: 0 0 0 rgba($pulse-color, 0.4);
  }
  &--animate {
    animation: pulse 2s;
  }
  &:hover {
    animation: none;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba($pulse-color, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba($pulse-color, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba($pulse-color, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($pulse-color, 0.4);
    box-shadow: 0 0 0 0 rgba($pulse-color, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba($pulse-color, 0);
    box-shadow: 0 0 0 10px rgba($pulse-color, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba($pulse-color, 0);
    box-shadow: 0 0 0 0 rgba($pulse-color, 0);
  }
}

.react-phone-number-input__input {
  border: 1px solid #ccc;
}

.task-dragging-number {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #e67e22;
  color: white;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  text-align: center;
  & > span {
    line-height: 20px;
    font-weight: 700;
  }
}

// https://github.com/nathancahill/split/tree/master/packages/splitjs#css
.gutter {
  background-color: #eee;

  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  cursor: col-resize;
}

.gutter.gutter-vertical {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
  cursor: row-resize;
}

.leaflet-popup-pickup-group {
  .leaflet-popup-content {
    margin: 0;
    .leaflet-popup-pickup-group-content {
      max-height: calc(40vh - 50px);
      overflow: auto;
    }
  }
}

.contexify .contexify_submenu {
  max-height: 160px;
  overflow: auto;
}
