* {
  box-sizing: border-box;
}

body {
  overscroll-behavior: none;
}

main {
  --_nav-width: 300px;
  display: grid;
  grid-template-areas: "aside section" "aside section";
  grid-template-columns: var(--_nav-width) calc(100vw - var(--_nav-width));
  grid-template-rows: 80px 1fr;
  background-color: var(--app-styling-background);
  height: 100%;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  isolation: isolate;
  overflow-x: hidden;

  & > aside {
    --_background: var(--color-palette-blue-greys-200);

    position: relative;
    grid-area: aside;
    display: flex;
    flex-direction: column;
    background-color: var(--_background);
    border-right: 1px solid hsl(from #ffffff h s l / 12%);

    & .inner {
      flex: 1;
      overflow: hidden;
      overflow: clip;

      & nav {
        height: 100%;
        width: var(--_nav-width);
        display: flex;
        flex-direction: column;

        & .logo {
          height: var(--header--height-l);
          display: grid;
          grid-template-areas: "before branding after";
          grid-template-columns: 20px auto 20px;
          grid-template-rows: var(--header--height-l);
          align-items: center;
          justify-items: center;
          gap: 5px;
          background-color: var(--color-palette-blue-greys-300);
          color: initial;

          & .branding {
            position: relative;
            z-index: 10;
            grid-area: branding;
            max-height: 100%;
            max-width: 100%;
            display: grid;
            place-items: center;

            & svg {
              height: auto;
              max-height: calc(100% - 20px);
              width: 250px;
              max-width: calc(100% - 20px);
            }
          }

          &:focus-visible {
            outline: 3px solid rgb(var(--color--accent));
            outline-offset: -4px;
            filter: rgb(var(--focus-ring-glow));
          }
        }

        & ul {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 20px;
          margin: 0;

          & li {
            list-style: none;
            font-size: 18px;
            font-weight: 400;
            padding: 0;
            margin: 0;
            display: flex;

            & a {
              flex: 1;
              color: var(--text-colors-default);
              text-decoration: none;
              padding: 10px 20px 10px 12px;
              border-radius: 5px;
              transition: 0.2s ease-in-out;
              display: flex;
              align-items: center;
              border: 1px solid transparent;
              outline: 0 solid var(--input-buttons-primary-bg-default);

              & span {
                display: flex;
                align-items: center;
                gap: 15px;
                position: relative;
                z-index: 10;
              }

              &.router-link-active, &.active {
                view-transition-name: activeNavTab;
                background-color: var(--input-buttons-primary-bg-default);
                color: var(--input-buttons-primary-text-default);
              }

              &:hover {
                background-color: var(--input-buttons-primary-bg-hover);
                color: var(--input-buttons-primary-text-hover);
              }

              &:focus-visible {
                outline-width: 3px;
                border-color: var(--color-palette-blue-greys-950);
                box-shadow: 0 0 8px var(--text-colors-link-default);
              }
            }
          }
        }

        & .foot {
          position: relative;
          display: flex;
          overflow: clip;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          gap: 5px;
          height: 160px;
          padding: 10px;

          mask: url('/images/masks/dashboard-footer-mask.svg') no-repeat top center / 150% auto;

          & .background {
            color: var(--color-palette-blue-greys-400);
            position: absolute;
            top: 0;
            left: 0;
          }

          & .icon {
            --_t: 5px;
            filter:
              drop-shadow(var(--_t) 0 0 var(--_background))
              drop-shadow(calc(var(--_t)*-1) 0 0 var(--_background))
              drop-shadow(0 var(--_t) 0 var(--_background))
              drop-shadow(0 calc(var(--_t)*-1) 0 var(--_background))
            ;
            height: 50px;
            width: 40px;
            color: var(--color-palette-blue-greys-500);
          }

          & .copyright {
            display: flex;
            justify-content: center;
            font-size: 13px;
            color: var(--color-palette-blue-greys-500);
          }
        }
      }
    }

    & .toggle {
      position: absolute;
      bottom: 10px;
      left: calc(100% + 10px);
      z-index: 10;
      display: none;
      width: 44px;
      height: 44px;
      background: rgb(var(--button--background) / 60%);
      border-radius: 10px;
    }

    & .overlay {
      position: absolute;
      top: 0;
      left: calc(100% - 1px);
      width: 100vw;
      height: 100vh;
      background: rgb(0 0 0 / 50%);
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transition: 0.2s ease-in-out;
    }
  }

  & > section {
    width: calc(100vw - var(--_nav-width));
    container-type: inline-size;
    container-name: page;
    grid-area: section;
    overflow: auto;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    padding-block-end: 20px;

    &:where(.route-dashboard),
    &:where(.route-key-claims) {
        &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        min-height: 300px;
        aspect-ratio: 1920 / 300;
        background-image: linear-gradient(
          color-mix(in oklab, var(--app-styling-background), transparent 40%) 63.33%,
          var(--app-styling-background)
        ), var(--banner);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -2;
        pointer-events: none;
        mask-image: linear-gradient(
          black 63.33%,
          transparent
        );
      }
    }

    & > .header {
      view-transition-name: header;
      grid-area: header;
      position: sticky;
      top: 0px;
      z-index: 500;
      height: var(--header--height-m);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 10px 5px 25px;
      background-color: hsl(from var(--color-palette-blue-greys-300) h s l / .8);
      backdrop-filter: blur(6px);

      &.hasBackButton {
        padding: 5px 10px 5px 20px;
      }

      & .start, & .end {
        display: flex;
        align-items: center;
        gap: 15px;

        & .title {
          flex: 1;
          font-size: 26px;
          font-weight: 600;
          color: var(--color-palette-blue-greys-500);
          /* ellipsis */
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & .breadcrumbs {
          display: flex;
          gap: 10px;

          & a {
            position: relative;
            color: rgb(var(--color--secondary));
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.2s ease-in-out;
            cursor: default;

            &[href] {
              cursor: pointer;

              &:hover {
                background-color: rgb(var(--button--background) / 0.1);
              }

              &:focus-visible {
                outline: 6px solid rgb(var(--color--accent));
                filter: rgb(var(--focus-ring-glow));
              }
            }

            &:not(:last-child)::after {
              content: ">";
              position: absolute;
              right: 0;
              transform: translateX(calc(100% + 1px));
              pointer-events: none;
            }
          }
        }
      }
    }

    &.hasBanner {
      position: relative;

      & .header {
        background-color: hsl(from var(--color-palette-blue-greys-100) h s l / 60%);
        backdrop-filter: none;
      }
    }
  }

  /* Overrides for Blindfire */
  /* TODO: move this to it's own css file in the future */
  &.blindfire {
    & section.hasBanner::before {
      background-position-x: right;
    }
  }
}


@media (width <= 1000px) {
  main {
    grid-template-columns: 0 100vw;

    & section {
      width: 100vw;
    }

    &.openMenu {
      grid-template-columns: var(--_nav-width) calc(100vw - var(--_nav-width));

      & aside {
        & .overlay {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    & aside {
      & .toggle {
        display: inline-block;
      }
    }
  }
}

@container page (width > 1920px) {
  main {
    & section {
      &::after {
        opacity: 1;
      }
    }
  }
}

@container page (width <= 744px) {
  main {
    & section {
      &::before, &::after {
        height: 200px;
      }
    }
  }
}