/**
 * 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 'mixins.less';

.application-background-color, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-background-color) {
  background-color: ~"var(--appBackgroundColor, #FFFFFF) !important";

  /* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
  .application-body {
    &.v-card,
    .v-card,
    .theme--light.v-card,
    &.v-sheet,
    .v-sheet,
    .theme--light.v-sheet,
    &.v-toolbar,
    .v-toolbar,
    .v-toolbar.theme--light,
    .v-toolbar.theme--light.v-sheet,
    &.v-list,
    .v-list,
    .v-list.theme--light,
    &.v-tabs-bar,
    .v-tabs-bar,
    &.v-tabs.theme--light > .v-tabs-bar,
    .v-tabs.theme--light > .v-tabs-bar,
    &.v-tabs-items,
    .v-tabs-items,
    .v-tabs-item.theme--light,
    .v-data-table,
    .v-data-table.theme--light {
      background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
    }
    .v-menu__content {
      background-color: @baseBackground;
      color: @btnColor !important;
      font-size: @btnFontSize !important;
      font-weight: normal !important;
      font-style: normal !important;
    }
  }
}

.VuetifyApp {
  .application-body .application-background-color, .application-body .application-layout-style {
    /* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
    &.v-card,
    .v-card,
    .theme--light.v-card,
    &.v-sheet,
    .v-sheet,
    .theme--light.v-sheet,
    &.v-toolbar,
    .v-toolbar,
    .v-toolbar.theme--light,
    .v-toolbar.theme--light.v-sheet,
    &.v-list,
    .v-list,
    .v-list.theme--light,
    &.v-tabs-bar,
    .v-tabs-bar,
    &.v-tabs.theme--light > .v-tabs-bar,
    .v-tabs.theme--light > .v-tabs-bar,
    &.v-tabs-items,
    .v-tabs-items,
    .v-tabs-item.theme--light,
    .v-data-table,
    .v-data-table.theme--light {
      background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
    }
    .v-menu__content {
      background-color: @baseBackground;
      color: @btnColor !important;
      font-size: @btnFontSize !important;
      font-weight: normal !important;
      font-style: normal !important;
    }
  }
}

.application-background-image, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-background-image) {
  background-image: ~"var(--appBackgroundImage, none) !important";
  background-repeat: ~"var(--appBackgroundRepeat, no-repeat) !important";
  background-size: ~"var(--appBackgroundSize, unset) !important";
  background-position: ~"var(--appBackgroundPosition, unset) !important";
}

.application-border, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border) {
  border: ~"var(--appBorderSize, 0) solid var(--appBorderColor, transparent) !important";
}

.application-border-radius, .application-border-radius-top, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border-radius) {
  border-top-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
  border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
}

.application-border-radius, .application-border-radius-bottom, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border-radius) {
  border-bottom-right-radius: ~"var(--appBorderRadiusBottomRight, var(--allPagesBorderRadius, 4px)) !important";
  border-bottom-left-radius: ~"var(--appBorderRadiusBottomLeft, var(--allPagesBorderRadius, 4px)) !important";
}

.application-box-shadow, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-box-shadow) {
  box-shadow: ~"var(--appBoxShadow, none) !important";
}

.application-dimension, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-dimension) {
  min-height: ~"var(--appMinHeight, unset) !important";
  height: ~"var(--appHeight, unset) !important";
  max-height: ~"var(--appMaxHeight, unset) !important";
  width: ~"var(--appWidth, auto) !important";
  max-width: ~"var(--appWidth, unset) !important";
  overflow-y: ~"var(--appHeightScroll, unset) !important";
  overflow-x: ~"var(--appWidthScroll, unset) !important";
}

.VuetifyApp .layout-sections-parent {

  &, .layout-site-container, .layout-site-middle-container, .layout-section-content {
    max-width: 100%;
  }

  .layout-page-parent {
    background-image: ~"var(--pageBodyBackgroundImage, none) !important";
    background-color: ~"var(--pageBodyBackgroundColor, unset) !important";
    background-repeat: ~"var(--pageBodyBackgroundRepeat, no-repeat) !important";
    background-size: ~"var(--pageBodyBackgroundSize, unset) !important";
    background-position: ~"var(--pageBodyBackgroundPosition, unset) !important";
  }

  &.layout-page-parent, .layout-page-parent {
    width: 100%;
    padding: 0;
    .layout-section {
      width: 100%;
      .layout-section-content {
        width: ~"min(100%, @{pageWidth})";
      }
    }
  }

  .PORTLET-FRAGMENT {
    /* Scrollbar style */
    .specific-scrollbar();
    padding-bottom: 0;
    margin-bottom: 0;

    > * {
      box-sizing: content-box;
    }
    .VuetifyApp {
      display: unset;
    }
    .VuetifyApp, .VuetifyApp > .v-application, .VuetifyApp > .v-application > .v-application--wrap, .application-body {
      min-height: 100%;
    }
  }

  .layout-banner-section {
    &.layout-section-content, .layout-section-content {
      padding-top: var(--sectionMarginTop, 0);
      padding-right: var(--sectionMarginRight, 0);
      padding-bottom: var(--sectionMarginBottom, 0);
      padding-left: var(--sectionMarginLeft, 0);
    }
  }

  .layout-banner-top-section {
    z-index: 1;
  }

  .layout-banner-cell {
    .layout-application {
      max-width: 100%;
    }
  }

  .layout-section {

    &:first-of-type {
      padding-top: var(--allPagesMarginTop, 10px);
      .layout-section-content {
        padding-top: var(--sectionMarginTop, var(--allPagesNoMarginTop, 10px));
      }
    }
    &:last-of-type {
      padding-bottom: var(--allPagesMarginBottom, 10px);
      .layout-section-content {
        padding-bottom: var(--sectionMarginBottom, var(--allPagesNoMarginBottom, 10px));
      }
    }
    .layout-section-content {
      box-sizing: border-box;
      padding-top: var(--sectionMarginTop, 10px);
      padding-right: var(--sectionMarginRight, var(--allPagesMarginRight, 20px));
      padding-left: var(--sectionMarginLeft, var(--allPagesMarginLeft, 20px));
      padding-bottom: var(--sectionMarginBottom, 10px);
      margin: 0 auto;
    }

    .grid-cell {
      display: flex;
      float: unset; // FIXME: WebUI Workaround until cleanup made
      min-height: unset; // FIXME: WebUI Workaround until cleanup made
      margin-left: unset; // FIXME: WebUI Workaround until cleanup made

      .PORTLET-FRAGMENT {
        --appHeightScroll: auto;
        --appWidthScroll: hidden;
        --appMaxHeight: 100%;
        --appHeight: 100%;
      }

      .layout-application {
        height: 100%;
        max-height: 100%;
      }
    }

    .flex-cell {
      display: flex;
      flex-direction: column;
      float: unset; // FIXME: WebUI Workaround until cleanup made
      min-height: unset; // FIXME: WebUI Workaround until cleanup made
      margin-left: unset; // FIXME: WebUI Workaround until cleanup made

      .layout-application {
        padding-bottom: ~"var(--grid-layout-gap, 20px)";
      }
      > .layout-application:last-child {
        padding-bottom: 0;
      }
    }

    .layout-application {
      width: 100%;
    }
  }

  .grid-gap-1 {
    --grid-layout-gap: 4px;
  }
  .row-gap-5 {
    row-gap: 20px;
  }
  .t-quarter {
    top: 25%;
  }
  .b-quarter {
    bottom: 25%;
  }
}

.layout-sticky-top-bar, // Used in Shared Layout Topbar
.layout-banner-top-section.layout-sticky-section,
.layout-sidebar-section.layout-sticky-section {
  position: sticky !important;
  top: var(--sectionStickyTop, 0);
  z-index: 1;
}

.layout-sidebar-section.layout-sticky-section {
  max-height: ~"calc(var(--100vh, 100vh) - var(--layoutSectionTop, 0px) - var(--layoutSectionBottom, 0px))";
  overflow-y: auto;
  .specific-scrollbar();
}

.scroll-top .layout-sticky-top-bar, // Used in Shared Layout Topbar
.scroll-top .layout-banner-top-section.layout-sticky-section {
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3) !important;
}
.scroll-top .layout-banner-top-section.layout-sticky-section,
.scroll-top .layout-sidebar-section.layout-sticky-section .layout-sidebar-cell {
  background-color: var(--sectionBackgroundColorScroll) !important;
}
.scroll-top .layout-banner-top-section.layout-sticky-section {
  z-index: 5;
}
.scroll-top .layout-sticky-top-bar {
  z-index: 10;
  position: fixed !important;
}

.application-align-v-end,
.application-align-v-center,
.application-align-h-end,
.application-align-h-center {
  display: flex;
  flex-direction: column;
}

.application-align-v-end {
  justify-content: end;
}
.application-align-v-center {
  justify-content: center;
}
.application-align-h-end {
  align-items: end;
}
.application-align-h-center {
  align-items: center;
}

@media (min-width: @minTabletWidth) {
  .VuetifyApp .v-application .layout-sticky-application .flex-cell > :last-of-type {
    position: sticky;
    top: 0.1px;
  }
}

@media (max-width: @maxTabletWidth) {
  .VuetifyApp .layout-sections-parent .layout-section .layout-section-content {
    --sectionMarginRight: 8px;
    --sectionMarginLeft: 8px;
  }
}

@media (max-width: @maxTabletWidth) {
  .VuetifyApp .layout-sections-parent {
    .layout-section:not(.hidden-sm-and-down) {
      padding-top: 10px;
    }
    .layout-section:not(.hidden-sm-and-down) ~ .layout-section:not(.hidden-sm-and-down) {
      padding-top: 0;
    }

    .flex-cell:has(.layout-application), .grid-cell:has(.layout-application) {
      padding-bottom: ~"var(--grid-layout-gap, 20px)";
    }
    .layout-section-content {
      > :last-child {
        padding-bottom: 0;
      }
    }
    .layout-section-mobile-pages {
      position: relative;
    }
    .layout-mobile-columns();
  }
}

@media (min-width: @minTabletWidth) {
  .grid-cols-sm-1,
  .grid-cols-sm-2,
  .grid-cols-sm-3,
  .grid-cols-sm-4,
  .grid-cols-sm-5,
  .grid-cols-sm-6,
  .grid-cols-sm-7,
  .grid-cols-sm-8,
  .grid-cols-sm-9,
  .grid-cols-sm-10,
  .grid-cols-sm-11,
  .grid-cols-sm-12 {
    .grid-cols-mixin();
  }
  .grid-rows-sm-1,
  .grid-rows-sm-2,
  .grid-rows-sm-3,
  .grid-rows-sm-4,
  .grid-rows-sm-5,
  .grid-rows-sm-6,
  .grid-rows-sm-7,
  .grid-rows-sm-8,
  .grid-rows-sm-9,
  .grid-rows-sm-10,
  .grid-rows-sm-11,
  .grid-rows-sm-12 {
    .grid-rows-mixin();
  }
  .grid-cell-rowspan-sm-1,
  .grid-cell-rowspan-sm-2,
  .grid-cell-rowspan-sm-3,
  .grid-cell-rowspan-sm-4,
  .grid-cell-rowspan-sm-5,
  .grid-cell-rowspan-sm-6,
  .grid-cell-rowspan-sm-7,
  .grid-cell-rowspan-sm-8,
  .grid-cell-rowspan-sm-9,
  .grid-cell-rowspan-sm-10,
  .grid-cell-rowspan-sm-11,
  .grid-cell-rowspan-sm-12 {
    .grid-cell-rowspan-mixin();
  }
  .grid-cols(sm, 12);
  .grid-rows(sm, 12);
  .grid-cell-rowspan(sm, 12);
  .grid-cell-colspan(sm, 12);
}

@media (min-width: @minLargeTabletWidth) {
  .grid-cols-md-1,
  .grid-cols-md-2,
  .grid-cols-md-3,
  .grid-cols-md-4,
  .grid-cols-md-5,
  .grid-cols-md-6,
  .grid-cols-md-7,
  .grid-cols-md-8,
  .grid-cols-md-9,
  .grid-cols-md-10,
  .grid-cols-md-11,
  .grid-cols-md-12 {
    .grid-cols-mixin();
  }
  .grid-rows-md-1,
  .grid-rows-md-2,
  .grid-rows-md-3,
  .grid-rows-md-4,
  .grid-rows-md-5,
  .grid-rows-md-6,
  .grid-rows-md-7,
  .grid-rows-md-8,
  .grid-rows-md-9,
  .grid-rows-md-10,
  .grid-rows-md-11,
  .grid-rows-md-12 {
    .grid-rows-mixin();
  }
  .grid-cell-rowspan-md-1,
  .grid-cell-rowspan-md-2,
  .grid-cell-rowspan-md-3,
  .grid-cell-rowspan-md-4,
  .grid-cell-rowspan-md-5,
  .grid-cell-rowspan-md-6,
  .grid-cell-rowspan-md-7,
  .grid-cell-rowspan-md-8,
  .grid-cell-rowspan-md-9,
  .grid-cell-rowspan-md-10,
  .grid-cell-rowspan-md-11,
  .grid-cell-rowspan-md-12 {
    .grid-cell-rowspan-mixin();
  }
  .grid-cols(md, 12);
  .grid-rows(md, 12);
  .grid-cell-rowspan(md, 12);
  .grid-cell-colspan(md, 12);
}

@media (min-width: @minDesktop) {
  .grid-cols-lg-1,
  .grid-cols-lg-2,
  .grid-cols-lg-3,
  .grid-cols-lg-4,
  .grid-cols-lg-5,
  .grid-cols-lg-6,
  .grid-cols-lg-7,
  .grid-cols-lg-8,
  .grid-cols-lg-9,
  .grid-cols-lg-10,
  .grid-cols-lg-11,
  .grid-cols-lg-12 {
    .grid-cols-mixin();
  }
  .grid-rows-lg-1,
  .grid-rows-lg-2,
  .grid-rows-lg-3,
  .grid-rows-lg-4,
  .grid-rows-lg-5,
  .grid-rows-lg-6,
  .grid-rows-lg-7,
  .grid-rows-lg-8,
  .grid-rows-lg-9,
  .grid-rows-lg-10,
  .grid-rows-lg-11,
  .grid-rows-lg-12 {
    .grid-rows-mixin();
  }
  .grid-cell-rowspan-lg-1,
  .grid-cell-rowspan-lg-2,
  .grid-cell-rowspan-lg-3,
  .grid-cell-rowspan-lg-4,
  .grid-cell-rowspan-lg-5,
  .grid-cell-rowspan-lg-6,
  .grid-cell-rowspan-lg-7,
  .grid-cell-rowspan-lg-8,
  .grid-cell-rowspan-lg-9,
  .grid-cell-rowspan-lg-10,
  .grid-cell-rowspan-lg-11,
  .grid-cell-rowspan-lg-12 {
    .grid-cell-rowspan-mixin();
  }
  .grid-cols(lg, 12);
  .grid-rows(lg, 12);
  .grid-cell-rowspan(lg, 12);
  .grid-cell-colspan(lg, 12);
}

@media (min-width: @minLargeDesktop) {
  .grid-cols-xl-1,
  .grid-cols-xl-2,
  .grid-cols-xl-3,
  .grid-cols-xl-4,
  .grid-cols-xl-5,
  .grid-cols-xl-6,
  .grid-cols-xl-7,
  .grid-cols-xl-8,
  .grid-cols-xl-9,
  .grid-cols-xl-10,
  .grid-cols-xl-11,
  .grid-cols-xl-12 {
    .grid-cols-mixin();
  }
  .grid-rows-xl-1,
  .grid-rows-xl-2,
  .grid-rows-xl-3,
  .grid-rows-xl-4,
  .grid-rows-xl-5,
  .grid-rows-xl-6,
  .grid-rows-xl-7,
  .grid-rows-xl-8,
  .grid-rows-xl-9,
  .grid-rows-xl-10,
  .grid-rows-xl-11,
  .grid-rows-xl-12 {
    .grid-rows-mixin();
  }
  .grid-cell-rowspan-xl-1,
  .grid-cell-rowspan-xl-2,
  .grid-cell-rowspan-xl-3,
  .grid-cell-rowspan-xl-4,
  .grid-cell-rowspan-xl-5,
  .grid-cell-rowspan-xl-6,
  .grid-cell-rowspan-xl-7,
  .grid-cell-rowspan-xl-8,
  .grid-cell-rowspan-xl-9,
  .grid-cell-rowspan-xl-10,
  .grid-cell-rowspan-xl-11,
  .grid-cell-rowspan-xl-12 {
    .grid-cell-rowspan-mixin();
  }
  .grid-cols(xl, 12);
  .grid-rows(xl, 12);
  .grid-cell-rowspan(xl, 12);
  .grid-cell-colspan(xl, 12);
}

@media (max-width: @maxMobileWidth) {
  .VuetifyApp .layout-sections-parent .layout-mobile-columns .flex-cell:has(.layout-application) {
    padding-bottom: 0;
  }
}
