html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  --sapBackgroundColor: var(--surface-container);
  --sapContent_HeaderShadow: none;
  --sapFontHeaderFamily: Inter, sans-serif;
  --sapGroup_ContentBackground: var(--surface-container);
  --sapPageHeader_Background: var(--surface-container);
  --sapTextColor: var(--on-surface);
  --interface-border: 1px solid var(--outline-variant);

  --aside-width: 240px;
  --aside-width-current: var(--aside-width);
}

body.dark .dark-mode-inverse-monochrome {
  filter: contrast(0) brightness(2);
}

body:not(.nav-menu-open) {
  --aside-width-current: 0px;
}

body:not(.nav-menu-open) aside {
  transform: translateX(calc(var(--aside-width) * -1));
}

#app-container {
  height: 100%;
  display: grid;
  grid-template:
    "header header" 50px
    "aside main" 1fr
    "footer footer" 35px
    / var(--aside-width-current) 1fr;
}

aside {
  z-index: 1;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #app-container {
    grid-template:
      "header" 60px
      "main" 1fr
      "footer" 40px
      / 1fr;
  }

  aside {
    position: absolute;
    top: 60px;
    height: calc(100% - 100px);
    width: 100%;
  }

  body:not(.nav-menu-open) aside {
    transform: translateX(-100%);
  }

  .nav-menu-open aside {
    transform: translateX(0%);
  }
}

#app {
  grid-area: main;
}

#app-container header {
  grid-area: header;
  min-block-size: unset;
  border-bottom: var(--interface-border);
}

#app-container aside {
  grid-area: aside;
  margin-block-start: 0;
  border-right: var(--interface-border);
}

#app-container main {
  grid-area: main;
}

#app-container main > #app,
#app-container main > #app > div {
  height: 100%;
}

#app-container footer {
  grid-area: footer;
  min-block-size: unset;
  border-top: var(--interface-border);
}

li[disabled] {
  pointer-events: none;
  cursor: default;
}

.hide-until-ready {
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/* Gets hidden by luigi automatically after init */
[luigi-app-loading-indicator] {
  width: 100%;
  height: 100%;
  background: white !important;
  position: absolute;
  transition: opacity 0.7s;
}

.fd-button[class*="-compact"] {
  width: 40px;
  height: 40px;
  max-height: none;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--primary);
}

.fd-button[class*="-compact"]:hover {
  box-shadow: none;
}

.fd-button[class*="-compact"]:hover:after {
  content: "";
  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
}

/* Loading spinner */
/* Also replaces fiori loader with custom spinner */
.fd-busy-indicator,
.fd-busy-indicator div {
  all: unset;
}

.lds-ring,
.fd-busy-indicator,
.lds-ring div,
.fd-busy-indicator div {
  box-sizing: border-box;
}

.lds-ring,
.fd-busy-indicator {
  display: inline-block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  color: #004170 !important;
  /* transition: opacity 0.7s; */
}

.lds-ring {
  top: 50%;
  left: 50%;
}

.fd-busy-indicator {
  top: 0;
  left: 0;
}

.lds-ring div,
.fd-busy-indicator div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 8px;
  border: 4px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1),
.fd-busy-indicator div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2),
.fd-busy-indicator div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3),
.fd-busy-indicator div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}