/*
    Improve: Validation
*/
.errors-as-warnings:has([aria-invalid="true"]) {
  --mud-palette-error: var(--mud-palette-warning);
  --mud-palette-error-darken: var(--mud-palette-warning-darken);
  --mud-palette-error-lighten: var(--mud-palette-warning-lighten);
}

/*
    Fix: Table toolbar does not support Grid 
    https://github.com/MudBlazor/MudBlazor/issues/11529
*/
.mud-table .mud-toolbar:has(.mud-grid) {
  height: auto;
  padding-top: 16px;
  padding-bottom: 8px;
}

/*
    Fix: Remove scrollbar in nested expansion panels.
    https://github.com/MudBlazor/MudBlazor/issues/12392
*/
.mud-collapse-wrapper-inner {
  overflow: hidden;
}

/*
    Fix: UX - Sorting on collpased tables only sorts one direction by default and cannot be undone.
    We'd need to implement custom sort buttons for the affected mobile layouts if we don't want to confuse our users. 
*/
.mud-table-smalldevices-sortselect {
  display: none !important;
}

/*
    Improve: Navigation bar with index pages for mobile layout
    Fix: NavLink active icon color should match with text color
    https://github.com/MudBlazor/MudBlazor/discussions/1865
*/
.mud-nav-group.active .mud-navgroup-collapse {
  border-left: 6px solid var(--mud-palette-action-default-hover);
}

.mud-nav-group.active .mud-collapse-wrapper-inner {
  margin-left: -3px; /*centers with added border*/
  width: calc(100% + 3px); /*adds missing gap to the right*/
}

.mud-nav-link.active:not(.mud-nav-link-disabled) svg {
  fill: var(--mud-palette-primary);
}

.mud-nav-link.active:not(.mud-nav-link-disabled) span.mud-icon-root {
  color: var(--mud-palette-primary);
}

.nav-group-header:not(.matches-exact) .mud-nav-link.active:not(.mud-nav-link-disabled) * {
  color: var(--mud-palette-drawer-text);
}

.nav-group-header:not(.matches-exact) .mud-nav-link.active:not(.mud-nav-link-disabled) svg {
  fill: var(--mud-palette-drawer-text);
}

/*
    UX: Image fallbacks
*/
.image-fallback {
  width: 100%;
  height: 100%;
}

  .image-fallback .fallback {
    display: none;
    align-items: center;
    justify-content: center;
  }

  .image-fallback img {
    display: block;
  }

    .image-fallback img[src="hide"] {
      display: none !important;
    }

  .image-fallback:has(img[src="hide"]) .fallback {
    display: flex;
  }

/*
    Improve: Default style for tables
*/
.mud-table-cell:has(.mud-table-row-expander),
.mud-table-cell:has(.mud-table-cell-checkbox) {
  max-width: 48px;
}

.mud-table-row.group-header {
  background-color: var(--mud-palette-background-gray);
}

/*
    Improve: Enable custom SVG icons in MudButton
*/
.mud-button .mud-button-label:has(svg:not(.mud-svg-icon)) {
  display: flex;
  flex-direction: row;
}

.mud-button .mud-button-label svg:not(.mud-svg-icon) {
  height: 1.75em;
  width: 100%;
}

/*
    Fix: Responsive Design - NavBar (Indentation is off at exactly 960px)
*/
.mud-drawer-close-mini-md-left.mud-drawer-left-clipped-docked .mud-appbar {
  margin-left: 0 !important;
  width: 100% !important;
}

/*
    Improve: Responsive Design - Mobile App-Bar
*/
.mud-navmenu.mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}

  .mud-navmenu.mobile .mud-nav-item {
    height: 100%;
  }

    .mud-navmenu.mobile .mud-nav-item .mud-nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

      .mud-navmenu.mobile .mud-nav-item .mud-nav-link .mud-nav-link-text {
        text-align: center;
        margin: 0;
        white-space: nowrap;
      }

        .mud-navmenu.mobile .mud-nav-item .mud-nav-link .mud-nav-link-text span {
          display: none;
        }

@media (min-width: 300px) {
  .mud-navmenu.mobile .mud-nav-item .mud-nav-link .mud-nav-link-text span {
    display: block;
    font-size: smaller;
  }
}

@media (min-width: 400px) {
  .mud-navmenu.mobile .mud-nav-item .mud-nav-link .mud-nav-link-text span {
    font-size: small;
  }
}

.mud-main-content {
  margin-top: 0.75em;
}

  .mud-main-content.mobile {
    margin-bottom: var(--mud-appbar-height);
    padding-left: 0;
    padding-right: 0;
  }

.mud-appbar.mobile .mud-toolbar {
  padding: 0;
}

/*
    Improve: Responsive Design - Mud-Dialog Dense
*/
.mud-dialog.dense {
  width: 100%;
}

  .mud-dialog.dense .mud-dialog-content {
    padding: 0;
  }

@media (min-width: 600px) {
  .mud-dialog.dense {
    width: calc(100% - 0.5em);
  }

    .mud-dialog.dense .mud-dialog-content {
      padding: 0 0.5em 0.375em 0.5em;
    }
}

@media (min-width: 960px) {
  .mud-dialog.dense {
    width: calc(100% - 1em);
  }

    .mud-dialog.dense .mud-dialog-content {
      padding: 0 1em 0.75em 1em;
    }
}

@media (min-width: 1280px) {
  .mud-dialog.dense {
    width: calc(100% - 2em);
  }

    .mud-dialog.dense .mud-dialog-content {
      padding: 0 2em 1.5em 2em;
    }
}

@media (min-width:1920px) {
  .mud-dialog.dense {
    width: calc(100% - 3em);

    .mud-dialog.dense .mud-dialog-content {
      padding: 0 3em 2.25em 3em;
    }
  }
}

@media (min-width:2560px) {
  .mud-dialog.dense {
    width: calc(100% - 4em);

    .mud-dialog.dense .mud-dialog-content {
      padding: 0 4em 3em 4em;
    }
  }
}

/*
    Improve: Responsive Design - Account Menu Activator
*/
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-activator-text {
  text-align: start;
  max-width: 8rem;
}

@media (min-width: 400px) {
  .account-menu-activator-text {
    max-width: 10rem;
  }
}

@media (min-width: 600px) {
  .account-menu-activator-text {
    max-width: 12.5rem;
  }
}

@media (min-width: 960px) {
  .account-menu-activator-text {
    max-width: 15rem;
  }
}