/* @eox/ui imports inside of main.js */

/* App-wide Variables */
:root,
body.light,
body.dark {
  /* general */
  --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);

  /* Luigi side bar */
  --luigi__left-sidenav--width: 240px;
  --sapFontFamily: "Inter", sans-serif;
  --sapFontBoldFamily: "Inter", sans-serif;
  --sapButton_FontFamily: "Inter", sans-serif;

  /* Luigi shell bar */
  --luigi__shellbar--height: 50px !important;
}
@media screen and (max-width: 599px) {
  :root {
    --luigi__left-sidenav--width: 100%;
  }
}

/* General settings and helpers */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  letter-spacing: 0.0313rem;
}

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

/* Fix for BeerCSS main style making main full-height on mobile devices */
:has(> main) {
  min-block-size: unset !important;
  margin: 0 !important;
}

/* App layout */
#app-container {
  height: 100%;
  display: grid;
  grid-template:
    "main" 1fr
    "footer" 35px
    / 1fr;
}

#app-container footer {
  grid-area: footer;
  min-block-size: unset;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.75rem;
  line-height: 0.75rem;
  padding: 1rem;
  color: var(--on-surface);
}
#app-container footer #footer-content-left,
#app-container footer #footer-content-left a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
@media screen and (max-width: 599px) {
  #app-container footer #footer-content-left > span {
    display: none;
  }
}
#app-container footer .footer-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.4rem;
}
#app-container footer .footer-links a {
  text-decoration: underline;
  color: var(--primary);
}

/* Scroll bars */
/* Explicitly add scrollbar styling to the .scroll helper class */
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-button {
  background: none;
  inline-size: 0.4rem;
  block-size: 0.4rem;
}

*:is(:hover, :focus)::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 1rem;
}

/* Luigi side bar overrides */
.lui-fd-side-nav-wrapper {
  padding: 0.5rem;
}
.fd-side-nav {
  --sapGroup_ContentBorderColor: var(--outline-variant);
  --sapList_Background: var(--surface-container-lowest);
  --sapList_SelectionBackgroundColor: var(--surface-container);
  --sapList_Hover_Background: var(--surface-container-low);
  --sapList_Hover_SelectionBackground: var(--surface-container);
  --sapList_Active_Background: var(--surface-container);
  --sapList_Active_TextColor: var(--on-surface);
  --sapList_TextColor: var(--on-surface);
  --sapList_GroupHeaderBackground: var(--surface-container-lowest);
  --sapList_GroupHeaderTextColor: var(--on-surface);
  --sapList_GroupHeaderBorderColor: var(--outline-variant);
}
.fd-nested-list {
  --fdNestedList_Link_Height: auto !important;
  --fdNestedList_Title_Font_Size: 0.875rem !important;
  --fdNestedList_Item_Padding_Left: 0rem !important;
  --fdNestedList_Item_Padding_Right: 0rem !important;
  --sapList_BorderWidth: 0;
}
.fd-nested-list__group-header {
  align-items: center !important;
}
.lui-category {
  padding: 0.5rem 0.5rem 0 0.5rem !important;
  margin-top: 0.5rem !important;
}
.fd-nested-list__group-header,
.fd-nested-list__content.has-child .fd-nested-list__link {
  height: auto !important;
  font-weight: unset !important;
  --sapList_BorderWidth: 1px !important;
  border-bottom: none !important;
}
.fd-nested-list__content.has-child:hover {
  background: none;
}
.fd-nested-list__content.has-child:hover .fd-nested-list__link {
  background: var(--sapList_Hover_Background);
  border-radius: 0.5rem 0 0 0.5rem;
}
.fd-nested-list__content.has-child button {
  padding: 0.5rem;
  height: 34px;
  border-radius: 0 0.5rem 0.5rem 0;
}
.fd-nested-list__content.has-child .fd-button > [class*="sap-icon"]:before {
  font-size: 0.875rem;
  color: var(--on-surface);
}
.fd-nested-list--text-only.level-2 {
  --fdNestedList_Item_Padding_Left: 2rem !important;
  --fdNestedList_Item_Padding_Right: 0rem !important;
}
.fd-nested-list__link {
  border: none !important;
  border-radius: 0.5rem;
  padding-block: 0.5rem !important;
  padding-inline-start: calc(
    var(--fdNestedList_Item_Padding_Left) + 0.5rem
  ) !important;
  padding-inline-end: calc(
    var(--fdNestedList_Item_Padding_Right) + 0.5rem
  ) !important;
  height: 33px !important;
}
/* Skeleton loaders */
.fd-nested-list__link.loader {
  padding: 2px;
  background: linear-gradient(
    90deg,
    var(--surface-container) 30%,
    var(--sapList_Background) 50%,
    var(--surface-container) 70%
  );
  background-size: 400%;
  animation: shimmer 1.5s infinite linear;
}
@keyframes shimmer {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0 0;
  }
}
.fd-nested-list__link .fd-counter--notification,
.fd-navigation__link .fd-counter--notification {
  margin-right: 0 !important;
}
.fd-nested-list__icon {
  min-width: 0 !important;
  margin-left: 0 !important;
}
.fd-nested-list__icon[class*="sap-icon--"],
.fd-nested-list__icon:has(img) {
  color: var(--on-surface) !important;
  margin-right: 1rem;
  width: 20px !important;
  height: auto !important;
}
.fd-nested-list__group-header .fd-nested-list__icon[class*="sap-icon--"] {
  width: 16px !important;
}
.fd-nested-list__icon,
.fd-nested-list__icon > img {
  max-width: 20px !important;
  max-height: 20px !important;
}
.fd-nested-list__icon[class*="sap-icon--"]::before {
  font-size: 1rem;
}

body.dark .fd-nested-list__icon > img[src*="data:image/svg"] {
  filter: contrast(0) brightness(2);
}

/* Luigi shell bar overrides */
.fd-shellbar {
  --sapShellColor: var(--surface-container-lowest);
  --sapShell_TextColor: var(--on-surface);
  --fdShellbar_Title_Color: var(--primary);
  --fdButtonIconColor: var(--on-surface);
  border-bottom: 1px solid var(--outline-variant) !important;
}
/* If no logo is set, remove it completely */
.fd-shellbar__branding:has(.fd-shellbar__logo--image-replaced):not(
    :has(.lui-shellbar-single-app-title)
  ) {
  display: none;
}
.fd-shellbar__logo--image-replaced {
  background-image: none !important;
  width: 0 !important;
  margin: 0 !important;
}
.fd-shellbar .fd-shellbar__button.is-hover,
.fd-shellbar .fd-shellbar__button:hover,
.fd-shellbar .fd-shellbar__button.is-active,
.fd-shellbar .fd-shellbar__button:active {
  border-radius: 2rem;
  --sapShell_Hover_Background: color-mix(
    in srgb,
    var(--primary) 10%,
    transparent
  );
  --sapShell_Active_Background: color-mix(
    in srgb,
    var(--primary) 10%,
    transparent
  );
}
.fd-shellbar__branding.is-hover,
.fd-shellbar__branding:hover {
  border-radius: 2rem;
  --fdShellBar_Branding_Background: color-mix(
    in srgb,
    var(--primary) 10%,
    transparent
  ) !important;
}
.fd-shellbar .fd-shellbar__button.lui-burger {
  margin-left: -0.5rem;
}
.fd-shellbar .fd-button--menu {
  border-radius: 2rem;
  border-color: var(--outline-variant);
  --fdShellbar_Title_Color: var(--primary);
  --sapFontHeader5Size: 0.875rem;
  padding-inline: 0.75rem;
}
body.dark .fd-shellbar .fd-button--menu {
  --fdShellbar_Title_Color: var(--on-surface);
}
@media screen and (max-width: 599px) {
  body.lui-simpleSlideInNav.lui-leftNavToggle .fd-app__sidebar {
    box-shadow: none;
  }
}

/* Luigi profile menu overrides */
.lui-username {
  font-size: 0.875rem !important;
}

/* Luigi popover/menu overrides */
.fd-popover__body,
.fd-product-switch__body,
.fd-menu__item {
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  --sapList_Background: var(--surface-container-lowest);
  --sapList_SelectionBackgroundColor: var(--surface-container);
  --sapList_Hover_Background: var(--surface-container-low);
  --sapList_Hover_SelectionBackground: var(--surface-container);
  --sapList_Active_Background: var(--surface-container);
  --sapList_Active_TextColor: var(--on-surface);
  --sapList_TextColor: var(--on-surface);
  --sapGroup_TitleTextColor: var(--on-surface);
  --sapGroup_ContentBackground: var(--surface-container-lowest);
  --fdMenu_Item_Background_Color: var(--surface-container-lowest);
  --fdMenu_Icon_Color: var(--on-surface);
  --fdMenu_Shortcut_Color: var(--on-surface);
  --fdMenu_Text_Color: var(--on-surface);
}

/* Luigi tabs overrides */
.fd-icon-tab-bar__header {
  --sapObjectHeader_Background: var(--surface-container-lowest);
  --fdIconTabBar_Tag_Color: var(--on-surface);
  --fdIconTabBar_Overflow_Button_Background: transparent;
  --fdIconTabBar_Overflow_Button_Text_Color: var(--on-surface);
  --fdIconTabBar_Overflow_Button_Icon_Color: var(--on-surface);
  --sapButton_Hover_Background: color-mix(
    in srgb,
    var(--primary) 10%,
    transparent
  );
  --sapButton_Hover_BorderColor: var(--outline-variant);
  --sapButton_Active_Background: color-mix(
    in srgb,
    var(--primary) 10%,
    transparent
  );
  --sapButton_Active_BorderColor: var(--outline-variant);
  --fdIconTabBar_Overflow_Button_Border_Color: var(--outline-variant);
  --fdIcon_Tab_Bar_Overflow_Button_Text_Color: var(--on-surface);
  --fdIcon_Tab_Bar_Overflow_Button_Icon_Color: var(--on-surface);
  --fdIcon_Tab_Bar_Overflow_Button_Text_Color_Hover: var(--on-surface);
  --fdIcon_Tab_Bar_Overflow_Button_Icon_Color_Hover: var(--on-surface);
}
.fd-icon-tab-bar__tab.is-selected,
.fd-icon-tab-bar__tab[aria-selected="true"] {
  --fdIconTabBar_Tag_Color: var(--primary);
}

/* Luigi breadcrumbs overrides */
.lui-breadcrumb-container {
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
}

/* 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%);
}

/* Custom 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);
  }
}

/* Snackbar */
.error {
  background-color: var(--error) !important;
  color: var(--on-error) !important;
}
.snackbar {
  position: fixed;
  inset: auto auto 6rem 50%;
  inline-size: 80%;
  block-size: auto;
  z-index: 200;
  visibility: hidden;
  display: flex;
  box-shadow: var(--elevate2);
  color: var(--inverse-on-surface);
  background-color: var(--inverse-surface);
  padding: 1rem;
  cursor: pointer;
  text-align: start;
  align-items: center;
  border-radius: 0.25rem;
  gap: 0.5rem;
  transition: all var(--speed2);
  transform: translate(-50%, 1rem);
  opacity: 0;
}
@media only screen and (min-width: 993px) {
  .snackbar {
    inline-size: 40%;
  }
}
.snackbar:is(.active) {
  visibility: visible;
  transform: translate(-50%);
  opacity: 1;
}