// Two methods of wrapping your app
// @link https://ilxanlar.medium.com/you-shouldnt-rely-on-css-100vh-and-here-s-why-1b4721e74487
html {
  height: -webkit-fill-available;
}

.wrapper {
  align-items: stretch;
  display: flex;
  width: 100%;
  height: 100vh; // This is needed to make section.scroller work as intended
  height: calc(var(--vh, 1vh) * 100);

  // This doesn't seem to work as expected
  // height: -moz-available;
  // height: -webkit-fill-available;
  // height: stretch;
}

// Do not use this, it breaks offcanvas sidebar
// .wrapper-fixed {
//   align-items: stretch;
//   display: flex;
//   position: fixed;
//   left: 0;
//   right: 0;
//   top: 0;
//   bottom: 0;
// }

/* Scope - can be a regular div if not using sco-pe */

#main-scope {
  height: 100%;
  width: 100%;
}

/* Main container */

.main,
.main-bg {
  background: $main-bg;
}

.main {
  display: flex;
  height: 100%;
  flex-direction: row;

  section {
    flex: 1 1 0%;

    &.scroller {
      height: 100%;
      overflow: auto;
    }
  }
}

.main-container,
.main-container>form {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

@include media-breakpoint-up(md) {
  // Make sure actual widht is reported properly with the sidebar
  #main-scope {
    height: 100%;
    width: calc(100% - var(--sidebar-width));
  }

  // We want the .scroller to do its job and avoid double scrollbars
  .main,
  .main-container,
  .main-container>form {
    max-height: 100vh;
  }
}

/* Header */

.main-header {
  background: $header-bg;
  height: $sidebar-brand-height;
  border-bottom: 1px solid $nav-tabs-border-color;

  // We always keep everything on one line. We rely on our bs-tabs component to fit things as needed
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;

  // With this, header can expand in height if needed to accomodate some situations
  &.main-header-wrap {
    flex-wrap: wrap;
    height: auto;
    min-height: $sidebar-brand-height;
  }
}

.main-header-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1040;

  button {
    border-radius: 0;
    height: $sidebar-brand-height;

    l-i {
      --size: 24px;
    }
  }

  @include media-breakpoint-up(md) {
    display: none;
  }
}

.main-header-info {
  display: flex;
  align-items: center;
  flex-grow: 0;
  max-height: $sidebar-brand-height;
  margin-right: $spacer;
  overflow: hidden;
  min-height: $sidebar-brand-height; // ensure consistent layout if tabs shift below

  // Make space for fixed menu icon
  padding-left: calc(44px + ($spacer * 0.5));

  @include media-breakpoint-up(md) {
    padding-left: $container-padding-x;
  }

  .main-header-info-back {
    l-i {
      --size: 24px;
    }
  }

  a+nav {
    margin-left: 0.5rem;
  }

  .breadcrumb {
    margin-bottom: 0;
    align-items: center;
  }

  // @link https://tobiasahlin.com/blog/flexbox-break-to-new-row/
  .breadcrumb-break {
    flex-basis: 100%;
    height: 0;
    width: 0;
  }

  .breadcrumb-item {
    font-size: $font-size-sm;

    &.active {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      max-width: min(380px, 70vw);
      clear: both;
      padding-left: 0;

      // Hide separator
      &::before {
        content: none;
      }
    }
  }

  .breadcrumb-item {
    &.active {
      font-size: 1.2em;
    }
  }
}

.main-header.main-header-wrap .main-header-info {
  max-width: none;
}

.main-header-nav,
.main-header-tabs {
  padding: ($spacer * 0.5) ($grid-gutter-width * 0.5);
  display: flex;
  justify-content: flex-end; // Align to end
  align-items: center;
  flex-grow: 1; // Fill space to allow responsive tabs

  // There can be extra buttons in the nav
  a.btn,
  button.btn {
    &:active {
      border-color: transparent;
      color: $primary;
    }
  }
}

// Extra tools always visible
.main-header-utils {
  align-self: center;
}

// Nicely tuck the tabs to the bottom
.main-header-tabs {
  padding-bottom: 0;
  height: $sidebar-brand-height;
  align-self: flex-end;
  position: relative;
  bottom: -1px;

  bs-tabs {
    align-self: flex-end; // Align to bottom of container
  }

  .bs-tabs-dropdown a.active {
    white-space: nowrap;
  }

  .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--#{$prefix}nav-tabs-link-active-color);
    // border-bottom: 1px solid $primary;
  }

  .nav-tabs .nav-link.active {
    background: $main-bg;
    border-color: $nav-tabs-border-color;
  }

  .nav-tabs,
  .nav-tabs .nav-item.show .nav-link,
  .nav-tabs .nav-link.active {
    border-bottom-color: transparent;
  }
}

/* Footer */

.main-footer {
  background: $header-bg;
  border-top: 1px solid $nav-tabs-border-color;
  min-height: $sidebar-footer-height;
  padding: 0 $spacer;
  display: flex;
  flex-wrap: wrap;
  // don't do this, it's better to add margin-left: auto to last element
  // justify-content: space-between;
  align-items: center;

  .input-group {
    width: auto;
  }

  // Automate spacing
  // We cannot add a margin left because it would look weird when wrapping on multiple lines
  >* {
    margin-top: $spacer * 0.25;
    margin-bottom: $spacer * 0.25;
    margin-left: 0;
    margin-right: $spacer * 0.5;
  }

  >*:last-child {
    margin-right: 0;
  }

  // Nicer outlines in groups
  .btn-group {
    .btn:not(.first-child) {
      margin-left: -1px;
    }
  }

  // should be the same as btn-group
  .dropdown,
  .dropup {
    display: inline-flex;
    vertical-align: middle;
  }
}

@if $enable-dark-mode {
  @include color-mode(dark) {

    .main,
    .main-bg {
      background: $main-bg-dark;
    }

    .main-footer {
      background: $header-bg-dark;
    }

    .main-header {
      background: $sidebar-brand-bg;
      border-color: $sidebar-cta-bg;
    }

    .main-header-tabs {
      .nav-tabs .nav-link.active {
        background: $main-bg-dark;
      }
    }
  }
}