/**
 * This file is part of the Meeds project (https://meeds.io/).
 *
 * Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 * 
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
@import "./variables.less";

#topAnalyticsPage {
  #parentSocialPage {
    > div {
      padding: 0;
    }
    .UIMobileSwipeParentContainer {
      > .leftSocialPage, > .rightSocialPage {
        flex: 0 1 50%;
        max-width: 50%;
      }
    }
  }

  .analyticsPageRow {
  
    .UIRowContainer {
      display: flex;
  
      > div {
        width: 50%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
      }

      > div:first-child {
        padding-left: 0 ~'; /** orientation=lt */ ';
        padding-right: 0 ~'; /** orientation=rt */ ';
      }
      > div:last-child {
        padding-right: 0 ~'; /** orientation=lt */ ';
        padding-left: 0 ~'; /** orientation=rt */ ';
      }
    }
  
    &.analyticsPageActiveUsersRow {
      .UIRowContainer {
        > div:last-child {
          width: 30%;
        }
        > div:first-child {
          width: 70%;
        }
      }
    }
  }
}

#drawerPageAnalytics{
  .treeViewPage{
    margin-top: 18px;
  }
  .pageNameAnalytics{
    color:rgba(0, 0, 0, 0.87);font-size: 16px !important;
  }
}

.iconAnalyticsPage {
  font-size: 23px;
  color: black;
}
.iconSubPage {
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.87)!important;
}

.labelPage {
  color:rgba(0, 0, 0, 0.87)!important;
}

#breadcrumbAnalytics {

  .titlePage {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .0125em !important;
  }
}

.content-box-sizing {
  box-sizing: content-box;
}
.VuetifyApp .analytics-application {
  max-width: fit-content;
  margin: auto;
  min-width: 100%;
  textarea {
    margin-bottom: 0;
  }

  code {
    height: auto!important;
    line-height: 10px!important;
    vertical-align: middle;
    margin: 0!important;
    padding: 5px!important;
    white-space: initial !important;

    &:after, &:before {
      content: none !important;
    }
  }

  label {
    margin-bottom: 0;
  }

  .v-divider--vertical {
    vertical-align: middle;
  }

  .v-messages {
    min-height: auto;
  }

  .v-select__selections {
    max-width: 80%;
  }
  .v-divider {
    margin: 0;
  }
  .layout {
    max-width: 100%;
  }
  .v-input input {
    margin-bottom: 0;
    border: 0;
    box-shadow: none;
  }
  code {
    padding: 0;
    max-width: 100%;
    white-space: normal;
  }

  .operatorInput {
    width: 100%;
    max-width: 100%;

    .v-input__slot {
      padding: 0 !important;
      margin: 0 !important;
    }
  }

  .analytics-field-filter input {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-height: 40px;
    height: 40px;
    min-height: auto;
    box-sizing: border-box;
  }

  .jsonSetting {
    height: 220px;
    textarea {
      height: 200px;
    }
  }

  .samplesDrawer {
    z-index: 2000
  }

  .analytics-chart-parent {
    min-width: 100%;
    .analytics-chart-body {
      height: 250px;
      width: 650px;
    }
  }

  .analytics-chart-percentage {
    height: 182px;
  }
  .analytics-time-picker {
    display: inline;
    min-width: auto !important;
    width: auto !important;
    margin: 0;
    padding: 0;
  }
  .analytics-date-time-selection {
    letter-spacing: 0px !important;
    white-space: nowrap;
  }
  .analytics-period-selection {
    box-sizing: border-box;

    .v-btn {
      width: 33%;
      box-sizing: border-box;
      border: 0 !important;
    }
  }
  .analytics-selected-period-input {
    max-width: 225px !important;
    .v-input__slot {
      margin: 4px 0 0;
    }
  }
  .analytics-selected-period-menu-content {
    max-width: 400px !important;
    width: 400px !important;
  }
  .v-picker__title{
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
  }
  .v-picker.v-card.v-picker--date.theme--light{
    width: 400px;
  }
  .v-date-picker-table {
    height: auto;
  }
  .v-date-picker-table--month tr td .v-btn {
    box-sizing: border-box;
  }
  .v-picker__actions {
    padding-top: 0;
  }
  .v-btn.v-btn--active.v-btn--rounded.theme--light.accent{
    width: 22px;
  }

  .footer{
    background-color: white;
    max-width: fit-content;
  }

  .v-text-field__slot{
    > input {
      padding: 0px;
    }
  }

  .analytics-table {
    .analytics-table-user, .analytics-table-space {
      p {
        color: @primaryColor !important;
      }
    }
    .analytics-table-space p {
      padding-top: 6px;
    }
    table {
      width: auto !important;
      max-width: none !important;
      min-width: 100%;
    }
  }

  .analytics-table-suggester {
    max-width: 250px;
  }
  .analytics-table-suggester, .analytics-suggester {
    max-height: 40px;

    .identitySuggester {
      margin: 0 !important;
      max-height: 40px;
    }

    .v-select__selections {
      white-space: nowrap;
      overflow: hidden;
      padding-left: 3px;
      padding-right: 3px;
    }

    .v-input__slot {
      padding: 0 !important;
      margin: 0 !important;
    }
  }
}
.analytics-progress-bar-chart-body {
  height: 120px;
  width: 100%;

  .analytics-progress-bar {
    border-radius: 45px;
  }
}
.analytics-table-settings {
  .v-list-group .white--text{
    .v-list-item__title, .v-list-group__header__append-icon .v-icon {
      color: @lightWhite;
    }
  }
}
.analyticsDrawerContent {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;

  .sampleItemHeader {
    width: 100%;
    line-height: 1.5em;
  }
}

.uiWizard .UIWizardPageSelectLayoutForm .AnalyticsLayout {
  width: 90%;
  height: 125px;
  min-width: 185px;
  background: url(/analytics/skin/images/analytics-layout.png) no-repeat center top transparent;
  background-size: 185px 125px;
  margin: auto;
}

.inputSmall {
  width: 90px;
}

@media (max-width: @maxMobileWidth) {
  #topAnalyticsPage {
    &.singlePageApplication {
      margin: 20px;
    }

    .analyticsPageRow {
        margin-bottom: 0;
        .UIRowContainer {
        flex-direction: column;
        box-sizing: border-box;

        > div {
          width: 100%;
          padding: 0;
          margin-bottom: 20px;
        }
      }

      &.analyticsPageActiveUsersRow {
        .UIRowContainer {
          > div:last-child {
            width: 100%;
          }
          > div:first-child {
            width: 100%;
          }
        }
      }
    }
  }
  .analytics-selected-period-menu {
    .v-menu__content.theme--light.menuable__content__active {
      max-width: 100% !important;
      left: 0px !important;
      right: 0px !important;
    }
  }
  .analytics-date-time-selection {
    white-space: normal;
  }
  .analytics-selected-period-menu-content {
    max-width: 100vw !important;
  }
}
