/*
 * Copyright (c) 2024-2026 KVIEW SAS. All rights reserved.
 *
 * This source code is the property of KVIEW SAS,
 * 26 rue Chauveau, 92200 Neuilly-sur-Seine, France.
 * SIREN: 933 366 106 R.C.S. Nanterre.
 *
 * Any unauthorized use, reproduction, modification, or distribution
 * is strictly prohibited.
 */
[v-cloak] {
  display: none;

  &.spinner {
    display: block !important;
  }
}

//--------------------
// Elem.io Overrides
//--------------------

body .el-input__inner {
  @extend .form-control;
}

.el-select, .el-date-editor {
  width: 100% !important;
  background-color: white !important;

  .el-input__inner[readonly]{
    background-color: white !important;
  }
}

.el-radio.is-bordered {
  border: 1px solid #ced4da;
}

// --------- Components ------

// Loader
.spinner {
  display: none;
  width: 40px;
  height: 40px;

  position: relative;

  &.spinner-sm {
    width: 20px;
    height: 20px;
  }

  &.white {
    .double-bounce1, .double-bounce2 {
      background-color: white !important;
    }
  }

  .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: $color-primary;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
  }

  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  @-webkit-keyframes sk-bounce {
    0%, 100% {
      -webkit-transform: scale(0.0)
    }
    50% {
      -webkit-transform: scale(1.0)
    }
  }

  @keyframes sk-bounce {
    0%, 100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    }
    50% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
}

// Listed company select

.listed-company-select {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;

  .el-radio {
    flex:1;
  }
}

// ----- Smart Table ------


.smart-table {

  .table-index {
    padding:5px;
  }

  // Full height table
  table.table {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 96px);
    width: 100%;

    &.not-remote, &.not-searchable {
      max-height: calc(100vh - 55px);
    }

    .row-link {
      &:hover {
        cursor: pointer;
        background: transparentize($color-cloud,0.2);
      }
    }

    tr, th {
      display: flex;

      th, td {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.light-green {
          background-color: #d4ffee;
        }
        &.light-red {
          background-color: #ffccd2;
        }
      }
    }

    thead, tbody {
      display: block;
    }

    tbody {
      overflow-y: hidden;
      flex: 1;

      &.scrollable {
        overflow-y: scroll !important;
      }
    }
  }

  .table thead th p{
    width: 100%;
    text-transform: uppercase;
    font-size: 14px;
    color: $color-sub-title;
    margin-bottom: 0px;

    &.sortable {
      cursor: pointer;

      .fa-sort, .fa-sort-down, .fa-sort-up {
        padding-top: 3px;
        margin-left: 10px;
      }

      .fa-sort-down, .fa-sort-up {
        display: none;
      }

      .fa-sort {
        display: inline;
      }

      &.sorted {
        .fa-sort {
          display: none !important;
        }

        &.desc {
          .fa-sort-up {
            display: inline;
            color: $color-info;
          }
        }
        &.asc {
          .fa-sort-down {
            display: inline;
            color: $color-info;

          }
        }
      }
    }
  }

  .table-pagination {
    display: flex;
    height: 40px;
    padding: 4px;
    border-top: 1px solid $color-input-border;

    .right, .left {
      flex:1;
    }

    .right {
      display: flex;

      .total {
        flex: 1;
        p {
          margin-bottom: 0px;
          margin-top: 5px;
          font-size: 14px;
          text-align: center;
        }
      }
    }

    .item-per-page {
      width: 120px;
      margin: 0px;
      margin-left: auto;
      display: block;
      vertical-align: middle;

      .label {
        display: inline-block;
        width: 40px;
        text-align: right;
        display: inline-block;

        text-transform: uppercase;
        font-size: 14px;
        color: $color-input-border;
      }

      .el-select {
        width: 70px !important;

        .el-input__inner {
          height: 31px;
        }
      }

    }
  }

  @include media-breakpoint-down(sm) {
    .search {
      flex-grow: 10;
    }

    table.table {
      max-height: calc(100vh - 55px);

      &.not-remote, &.not-searchable {
        max-height: calc(100vh - 39px);
      }
    }
  }
}

// ----- Json Table -----

.json-table {

  overflow-y: scroll;

  table {
    .actions {
      display: none;

      .btn-sm {
        padding: 0.04rem 0.2rem;
        font-size: 0.6rem;
      }
    }

    tbody {
      th {
        p {
          font-weight: 400;
        }
      }
    }

    &:hover {
      .actions {
        display: table-cell;
      }
    }
  }
}


// ------ Tabs -----

.tabs {
  display: flex;

  .el-tabs__item{
    font-size: 16px;
    &.is-active, &:hover {
      color: $color-kview-light;
    }
  }

  .el-tabs__active-bar{
    background-color: $color-kview-light;
  }

  .fake-line {
    width: 30px;
    height:40px;
    border-bottom: 2px solid $color-border;
  }

  .el-tabs {
    flex: 1;
  }
}
.tabs-content {
  padding: 30px;
}

// ------ Modal -----
.vue-modal {
  position: fixed;
  z-index: 1000;

  .modal {
    display: block;
  }

  .modal-content {
    border-radius: 0px;
    border: 0px;
    margin-top: 20%;
  }

  .modal-body {
    overflow: scroll;
    max-height: 70vh;
  }

  .fade-enter, .fade-leave-to {
    display: block;
    opacity: 0;
    z-index: 1000;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

}

// -------- Field List --------
.fields-list {

  .field-list-item {

    .field-label-container {
      display: flex;
      justify-content: flex-end;

      p.field-label {
        color: $color-sub-title;
        font-weight: 300;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .field-value-container {
      position: relative;
    }

    p.field-value {
      bottom: 0px;
      color: black;
      font-weight: 400;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

}


// ------- excel-login -----
.excel-login {
  cursor: pointer;
}