//// Configuration

@use '../../../vendor/twbs/bootstrap/scss/bootstrap' as *;

@use "data2ui_app_variables";
@use 'data2ui_variables.scss' as data2uivariables;
@use "../../../assets/styles/variables" as variables;

//@use "~bootstrap/scss/functions";
//@use "~bootstrap/scss/variables";
//@use "~bootstrap/scss/variables-dark";
//@use "~bootstrap/scss/maps";
//@use "~bootstrap/scss/mixins";
//@use "~bootstrap/scss/modal";
//
//$fa-font-path: "~@fortawesome/fontawesome-pro/webfonts/";
//@use "~@fortawesome/fontawesome-pro/scss/fontawesome";
//@use "~@fortawesome/fontawesome-pro/scss/regular";
//@use '~@fortawesome/fontawesome-pro/scss/duotone';
//@use '~@fortawesome/fontawesome-pro/scss/solid';
//@use '~@fortawesome/fontawesome-pro/scss/brands';
////
//@use '~datatables.net-bs5/css/dataTables.bootstrap5.css';
//@use '~datatables.net-buttons-bs5/css/buttons.bootstrap5.css';
//@use '~datatables.net-colreorder-bs5/css/colReorder.bootstrap5.css';
//@use '~datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.css';
//@use '~datatables.net-keytable-bs5/css/keyTable.bootstrap5.css';
//@use '~datatables.net-responsive-bs5/css/responsive.bootstrap5.css';
//@use '~select2/src/scss/core';
//@use '~leaflet/dist/leaflet.css';

@use 'data2ui_select2';
@use 'data2ui_graph';
@use "data2ui_observations_climatology";
@use 'data2ui_map';
@use "data2ui_breadcrumb";
//@use "data2ui_pagination";
@use "data2ui_custom-select";


.data2ui-btn-validation {
  background-color: variables.$data2ui-bg-validation-button;
  color: #ffffff;

  &:hover {
    background-color: lighten(variables.$data2ui-bg-validation-button, 5%);
    color: #ffffff;
  }

  &:disabled {
    background-color: grey;
  }
}

.loader-icon {
  color: variables.$data2ui-loader-color;
}

.pointer {
  cursor: pointer;
}

.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

.bottom-right {
  bottom: 5px;
  right: 5px;
}

.bottom-left {
  bottom: 5px;
  left: 5px;
}

.block-fields {
  transition: linear 0.4s;
}

.toggle-field-effect {
  opacity: 0.5;
}

.switch-field {
  display: flex;
  overflow: hidden;

  input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;

    &:checked + label {
      background-color: variables.$tertiary;
      box-shadow: none;
    }
  }

  label {
    background-color: #fefefe;
    color: variables.$primary;
    font-size: 1em;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    transition: all 0.1s ease-in-out;
    width: 100%;

    &:hover {
      cursor: pointer;
    }
  }
}

.data2ui-switch-field-advanced {
  display: flex;
  align-items: stretch;
  flex: auto 1 1;

  input[type=checkbox] {
    display: none;
  }

  &.separation {
    border-right: solid #aeaeae 1px;
  }

  input {
    overflow: hidden;

    &:checked + label, &:checked + .btn {
      background-color: variables.$data2ui-bg-form-element;
      box-shadow: none;
      color: #ffffff !important;

      &.primary {
        background-color: variables.$primary;
      }

      &.tertiary {
        background-color: variables.$tertiary;
      }

      &.success {
        background-color: variables.$success;
      }

      &.warning {
        background-color: variables.$warning;
      }

      &.danger {
        background-color: variables.$danger;
      }

      .check-icon {
        color: #ffffff;
      }
    }

    &:not(:checked) + label {
      &:hover {
        background-color: lighten(variables.$data2ui-bg-form-element, 25%);
      }
    }
  }

  label {
    background-color: #cecece;
    color: variables.$primary !important;
    text-align: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: all 0.1s ease-in-out;
    width: 100%;
    text-transform: initial !important;
    margin-right: 1px !important;

    &.cell {
      background-color: #fefefe;
      border-top: solid #ced4da 1px !important;
      border-bottom: solid #ced4da 1px !important;
      border-right: solid #ced4da 1px !important;
      line-height: 1.5;
      //&:hover {
      //  background-color: #ffffff;
      //}
    }

    &.cell-sm {
      line-height: 1;
      padding: 5px;
      font-size: 0.8rem;
      font-weight: 700;
    }

    &.level-ckeckbox {
      background: #ffffff !important;
      color: variables.$primary !important;
      border-radius: 0px !important;
      margin: 0px !important;
      border: solid #ced4da 1px;
      cursor: pointer;
      padding: 2px !important;
      font-size: 0.9rem;

      &.filled {
        background-color: darken(variables.$secondary, 10%) !important;
        color: #ffffff !important;
        border: solid darken(variables.$secondary, 10%) 1px !important;
      }

      &.trash {
        background-color: variables.$primary !important;
        color: #ffffff !important;
        border: solid variables.$primary 1px !important;
      }
    }

    .check-icon {
      color: darken(#cecece, 5%);
    }

    &.active {
      background-color: darken(variables.$secondary, 10%) !important;
      box-shadow: none;
      color: #ffffff !important;

      .check-icon {
        color: #ffffff;
      }
    }

    &[disabled=disabled] {
      cursor: not-allowed;
    }

  }

  label.cell:first-of-type {
    border-left: solid #ced4da 1px !important;
  }

  @include media-breakpoint-down(lg) {
    &.mobile-view {
      label {
        padding: 5px 2px;

        i.icon {
          display: block;
          font-size: 1.5em;
        }

        span {
          display: block;
          padding: 5px 15px;
          line-height: 1;
          font-size: 0.8em;
        }
      }
    }
  }

  &.with-counter {
    counter-increment: step-counter;

    label {
      .check-icon {
        position: relative;

        &:after {
          content: counter(step-counter);
          position: absolute;
          color: lighten(variables.$primary, 60%);
          right: 1.5rem;
          z-index: 5;
          font-size: 0.6rem;
          font-weight: bold;
        }
      }
    }
  }

  &.small {
    .label {

    }
  }
}

.swiper-container {
  overflow-x: hidden;
}


.weather-tile {
  padding: 15px;
  text-align: center;
  background: #e5e5e5;
  background: darken(variables.$secondary, 20%);
  background: #dfdfdf;
  color: #ffffff;

  .tile-title {
    color: #ffffff;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 700;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      color: #ffffff;
      padding: 5px;
    }
  }

  i {
    padding: 5px;
    font-size: 2em;
  }

  background: variables.$secondary;

  &.sun {
    background: #d6ae2b;
  }

  &.temp {
    background: #700211;
  }

  &.wind {
    background: #46314f;
  }

  &.rain {
    background: #0c3e5e;
  }
}


.data2ui-switch-field-advanced-light {
  display: flex;
  align-items: stretch;
  flex: auto 1 1;

  .check-icon {
    color: lighten(variables.$primary, 60%);
    font-size: 3rem;
  }

  input {
    overflow: hidden;
    display: none;

    &:checked + label {
      box-shadow: none;
      color: variables.$tertiary !important;

      .check-icon {
        color: variables.$tertiary;
      }

      &.secondary {
        color: variables.$secondary !important;

        .check-icon {
          color: variables.$secondary;
        }
      }

      &.secondary-20 {
        color: darken(variables.$secondary, 20%) !important;

        .check-icon {
          color: darken(variables.$secondary, 20%);
        }
      }

      &.primary {
        color: variables.$primary !important;

        .check-icon {
          color: variables.$primary;
        }
      }
    }

    &:disabled + label {
      //color: darken(variables.$secondary, 13%) !important;
      cursor: disabled;

      .check-icon {
        //color: darken(variables.$secondary, 13%);
      }
    }
  }

  &.with-counter {
    counter-increment: step-counter;

    label {
      .check-icon {
        position: relative;

        &:after {
          content: counter(step-counter);
          position: absolute;
          color: lighten(variables.$primary, 60%);
          right: 1.5rem;
          z-index: 5;
          font-size: 0.6rem;
          font-weight: bold;
        }
      }
    }
  }

}

//form {
//  button {
//    background-color
//  }
//}


/***  TABLEAUX ***/
table {
  width: 100%;
}

table.data2ui-table-custom {
  font-size: 0.8em;
  width: 100%;

  thead, tfoot {
    tr {
      th {
        background: variables.$primary;
        text-align: center;
        color: lighten(variables.$primary, 60%);
        padding: 10px !important;
        padding-right: 30px !important;
        border: none !important;
        border-right: 1px solid #dadada !important;
        @include media-breakpoint-down(md) {
          padding: 5px !important;
          padding-right: 25px !important;
        }

        &.inactive {
          border: none;
          background: transparent;
        }
      }
    }

    .sorting_asc, .sorting, .sorting_desc {
      &:before {
        font-size: 1.8em;
        //bottom: 0.2em !important;
        right: 2px !important;
      }

      &:after {
        font-size: 1.8em;
        bottom: 0.2em !important;
        right: 0.2em !important;
      }
    }
  }

  tbody {
    tr {
      td {
        transition: linear 0.4s;
        padding: 10px;
        border-bottom: solid 1px #dadada;
        border-top: none !important;
        @include media-breakpoint-down(md) {
          padding: 2px 5px !important;
        }
      }

      &:nth-child(odd) {
        td {
          background: darken(#ffffff, 5%);
          border-right: solid 1px #dadada;
        }
      }

      &.odd {
        td {
          background: darken(#ffffff, 5%);
          border-right: solid 1px #dadada;
        }
      }

      &:nth-child(even) {
        td {
          background: darken(#ffffff, 3%);
          border-right: solid 1px #dadada;
        }
      }

      &.even {
        td {
          background: darken(#ffffff, 3%);
          border-right: solid 1px #dadada;
        }
      }

      &:hover:not(.inactive-hover) {
        td {
          background: #ffffff !important;
          color: variables.$secondary;
          //cursor: pointer;
        }
      }
    }

    &.loading {
      tr {
        td {
          background: rgba(255, 255, 255, 0.5) !important;
          color: lighten(variables.$primary, 60%) !important;

          * {
            color: lighten(variables.$primary, 60%) !important;
          }

        }
      }
    }
  }

  &.bordered-dark {
    tr, tr.odd, tr.even {
      td {
        border: solid lighten(variables.$primary, 60%) 1px !important;
      }
    }
  }
}

table.data2ui-table-colored {
  thead {
    tr {
      border-top: 1px solid lighten(variables.$primary, 10%) !important;

      th {
        background: variables.$dark;
        text-align: center;
        color: lighten(variables.$dark, 60%);
        padding: 10px !important;
        padding-right: 30px !important;
        border: none !important;
        border-right: 1px solid lighten(variables.$dark, 10%) !important;
        min-width: 30px;

        @include media-breakpoint-down(md) {
          padding: 5px !important;
          padding-right: 25px !important;
        }

        &.inactive {
          border: none;
          background: transparent;
        }
      }
    }

    .sorting_asc, .sorting, .sorting_desc {
      &:before {
        font-size: 1.2em !important;
        bottom: 65% !important;
        right: 0.5em !important;
      }

      &:after {
        font-size: 1.2em !important;
        //bottom: 0.5em !important;
        right: 0.5em !important;
      }
    }
  }

  tbody {
    tr {
      transition: linear 0.4s;
      td, th {
        transition: linear 0.4s;
        padding: 10px;
        border-bottom: solid 1px #dadada;
        border-right: 1px solid #dadada !important;
        border-left: 1px solid #dadada !important;
        border-top: none !important;
        opacity: 0.9;
        background: #fefefe;
        text-align: center;

        @include media-breakpoint-down(md) {
          padding: 2px 5px !important;
        }

        &:first-child {
          font-weight: 600;
          background-color: #fefefe;
        }
      }

      td {
        //font-weight: bold;
      }

      &:hover:not(.inactive-hover) {
        opacity: 1;
        font-weight: bold;
        //cursor: pointer;
        td {
          border-bottom: solid rgba(black,0.5) 1px;
        }
      }
      &.summary-row {
        font-weight: 600;
        background: black;
        line-height: 1.2em;
        td {
          background-color: transparent !important;
          color: white !important;
          border-right: 1px solid #1a1a1a !important;
        }
      }
    }
  }

  &.bordered-dark {
    tr, tr.odd, tr.even {
      td {
        border: solid lighten(variables.$primary, 60%) 1px !important;
      }
    }
  }
}

/*** DATATABLES ***/
.dataTables_wrapper {
  margin-top: 0 !important;
}

table.dataTable {
  margin-top: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
  padding-left: 10px;
}

.dataTables_info {
  @include media-breakpoint-down(md) {
    font-size: 0.8em;
  }
}

.dataTables_paginate {
  .pagination {
    .previous, .next {
      @include media-breakpoint-down(md) {
        display: none;
      }
    }
  }
}


.title-search-station {
  transition: linear 0.4s;

  &.active {
    color: variables.$primary !important;
    font-weight: bold;
  }
}


.presentation-list {
  list-style: none;
  padding: 0;
  text-align: left;

  .title {
    font-size: 1.1em;
    padding: 10px;
    background: variables.$primary;
    color: lighten(variables.$primary, 60%);
    margin-bottom: 0;
  }

  .item {
    color: lighten(variables.$primary, 10%);
    border-bottom: solid #e2e2e2 1px;
    background: #f9f9f9;
    padding: 10px;
    font-size: 0.9em;

    strong {
      color: darken(variables.$secondary, 20%);
    }

    &.last {
      border-bottom: solid #e2e2e2 1px;
    }

    &.sub-item {
      padding: 5px 10px 5px 30px;

      .classification-label {
        font-size: 1.1rem;
      }
    }
  }
}

.text-small {
  font-size: 0.7rem !important;
}

.station-identity {
  .title-tile {
    border-bottom: solid #e8e8e8 7px;
    text-align: center;
    padding: 5px;

    i {
      font-size: 1.8em;
    }

    h4 {
      font-size: 0.8em;
      line-height: 1.25;
      display: block;
      text-transform: uppercase;
      margin-top: 6px;
      margin-bottom: 0;
    }
  }
}

.block-img {
  border: 1px solid #d8d8d8;
  height: 218px;
  background: #dedede;
  text-align: center;
  width: 100%;
  position: relative;
  @include media-breakpoint-down(md) {
    height: 160px;
  }

  .empty-version {
    position: relative;

    .empty-icon {
      margin-top: 25px;
      font-size: 10em;
      color: darken(#dedede, 5%);
      position: relative;
      @include media-breakpoint-down(md) {
        font-size: 6em;
      }

      .plus-icon {
        position: absolute;
        top: -3px;
        right: -20px;
        font-size: 3rem;
        z-index: 2;
        color: darken(#dedede, 15%);
        display: inline-block;
        @include media-breakpoint-down(md) {
          font-size: 2.5rem;
        }
      }

      .label {
        color: darken(#dedede, 25%);
        font-size: 1rem;
        position: absolute;
        bottom: -20px;
        margin: auto;
        width: 100%;
        text-transform: uppercase;
      }

      input {
        font-size: 1rem;
        position: absolute;
        top: -22px;
      }
    }

    .compass-point {
      color: darken(#dedede, 30%);
      font-size: 1.3rem;
      margin: 0;
      position: absolute;
      bottom: -20px;
      right: 42%;
      text-transform: uppercase;
      @include media-breakpoint-down(md) {
        font-size: 1rem;
        top: 15px;
        right: 22px;
      }
    }
  }

  .selected-version {
    position: relative;
    border: 5px solid #f9f9f9;
    height: 100%;

    .controls {
      width: 100%;

      .circle {
        background: darken(variables.$tertiary, 0%);
        color: #ffffff;
        border-radius: 50%;
        height: 32px;
        width: 32px;
        position: absolute;
        z-index: 5;

        i {
          font-size: 1rem;
          color: variables.$primary;
        }

        &.edit {
          bottom: 10px;
          right: 5px;

          i {
            padding: 0.45rem 0.4rem;
          }
        }

        &.trash {
          bottom: 10px;
          left: 5px;

          i {
            padding: 0.5rem 0.6rem;
          }
        }
      }
    }

    .compass-point {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(variables.$primary, 0.8);
      padding: 5px 35px;
      color: #ffffff;
      text-transform: uppercase;
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      z-index: 4;
    }

    .empty-icon {
      margin-top: 25px;
      font-size: 8em;
      color: darken(#dedede, 5%);
      position: relative;
    }

    .photo-zoom {
      width: 0;
      height: 0;
      transition: linear 0.35s ease-out;

      i {
        //display:none;
        color: transparent;
        transition: opacity 1s ease-out;
        opacity: 0;
      }
    }

    &:hover {
      .photo-zoom {
        position: absolute;
        background: rgba(#ffffff, 0.2);
        width: 100%;
        height: 100%;
        transition: height 0.25s ease-in;

        i {
          font-size: 5rem;
          padding-top: 60px;
          text-align: center;
          color: rgba(#eeeeee, 0.8);
          //display: inline-block;
          opacity: 1;
        }
      }
    }
  }

  &.error-border {
    border: solid variables.$danger 2px;
  }

  .error {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding-right: 35px !important;
    z-index: 3;

    i {
      font-size: 2rem;
      position: absolute;
      top: 5px;
      right: 5px;
      color: variables.$danger;
    }
  }

  .cropped2 {
    width: 100%;
    height: 206px;
    object-fit: cover;
    object-position: 20% 10%;
    @include media-breakpoint-down(md) {
      height: 148px;
    }
  }

  &.light {
    background: #f2f2f2;
  }
}


.leaflet-control-attribution {
  display: none;
}


/***  TABLEAUX ***/
table.data2ui-table-custom {
  font-size: 0.8em;

  thead, tfoot {
    tr {
      th {
        background: variables.$primary;
        text-align: center;
        color: lighten(variables.$primary, 60%);
        padding: 10px !important;
        padding-right: 30px !important;
        border: none !important;
        border-right: 1px solid #dadada !important;
        @include media-breakpoint-down(md) {
          padding: 5px !important;
          padding-right: 25px !important;
        }

        &.inactive {
          border: none;
          background: transparent;
        }
      }
    }

    .sorting_asc, .sorting, .sorting_desc {
      &:before {
        font-size: 1.8em;
        //bottom: 0.2em !important;
        right: 2px !important;
      }

      &:after {
        font-size: 1.8em;
        bottom: 0.2em !important;
        right: 0.2em !important;
      }
    }
  }

  tbody {
    tr {
      td {
        transition: linear 0.4s;
        padding: 10px;
        border-bottom: solid 1px #dadada;
        border-top: none !important;
        @include media-breakpoint-down(md) {
          padding: 2px 5px !important;
        }
      }

      &:nth-child(odd) {
        td {
          background: darken(#ffffff, 5%);
          border-right: solid 1px #dadada;
        }
      }

      &.odd {
        td {
          background: darken(#ffffff, 5%);
          border-right: solid 1px #dadada;
        }
      }

      &:nth-child(even) {
        td {
          background: darken(#ffffff, 3%);
          border-right: solid 1px #dadada;
        }
      }

      &.even {
        td {
          background: darken(#ffffff, 3%);
          border-right: solid 1px #dadada;
        }
      }

      &:hover:not(.inactive-hover) {
        td {
          background: #ffffff !important;
          color: variables.$secondary;
          //cursor: pointer;
        }
      }
    }

    &.loading {
      tr {
        td {
          background: rgba(255, 255, 255, 0.5) !important;
          color: lighten(variables.$primary, 60%) !important;

          * {
            color: lighten(variables.$primary, 60%) !important;
          }

        }
      }
    }
  }

  &.bordered-dark {
    tr, tr.odd, tr.even {
      td {
        border: solid lighten(variables.$primary, 60%) 1px !important;
      }
    }
  }
}

.title-map {
  z-index:100;
  background: rgba(255,255,255,0.8);
  padding:5px;
}


.canvas-chart {
  width: 100% !important;
  height: 100% !important;
  min-height:300px;
}