/*
    Well-Known Classes:
    (Classes that target single attributes should be annotated with `!important`, so that they are not accidentially overridden by CSS selector chains.)
*/
.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.h-100vh {
  height: 100vh !important;
}

.h-80vh {
  height: 80vh !important;
}

.c-mud-palette-text-primary {
  color: var(--mud-palette-text-primary) !important;
}

.c-mud-palette-appbar-text {
  color: var(--mud-palette-appbar-text) !important;
}

.fill-mud-palette-appbar-text {
  fill: var(--mud-palette-appbar-text) !important;
}

.fill-sws-red {
  fill: #e60000ff !important;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transition-none {
  transition: none!important;
}

/*
    Improve: Feedback
*/
.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);
}

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

/*
    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: Expansion panels should not have a gap around the expanded icon by default.
    Such Gaps should be handled via padding on the items itself.
*/
.mud-expansion-panels:not(.accordion) .mud-expand-panel.mud-panel-expanded {
  margin: 0;
}

/*
    Feature: Popover assisted nesting in navigation groups.
*/
.mud-popover-provider .mud-nav-group .mud-nav-link {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.mud-popover-provider .mud-nav-group *:not(.mud-nav-link) {
  padding: 0 !important;
}

.mud-popover-provider .mud-nav-group .mud-menu-item-text {
  margin: 0;
}

.mud-nav-link:has(.mud-nav-link-text .mud-icon-root),
.mud-popover-provider .mud-nav-link:has(.mud-nav-link-text .mud-icon-root) {
  padding-right: 0 !important;
}

.nav-group-header .expander {
  transition: transform .2s ease-in-out;
}

.nav-group-header .mud-nav-link.active .expander {
  transform: rotate(90deg);
}

.mud-nav-group.active .mud-navgroup-collapse {
  border-left: .5rem solid var(--mud-palette-action-default-hover);
}

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

.mud-nav-link[href]:not(.active) .mud-nav-link-text {
  transform: scale(0.95);
  transform-origin: left center;
}

.mud-nav-link[href]:not(.active) .mud-icon-root:not(.expander) {
  transform: scale(0.9);
  transform-origin: right center;
}

.mobile .mud-nav-link[href]:not(.active) .mud-nav-link-text {
  transform-origin: top center;
}

.mobile .mud-nav-link[href]:not(.active) .mud-icon-root:not(.expander) {
  transform-origin: bottom center;
}

.mud-navmenu:not(.mobile) .mud-nav-link[href] .mud-nav-link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
    Improve: Table pagination should utilize available space on page for better UX.
*/

.mud-table-pagination-toolbar .mud-table-pagination-spacer {
  display: none;
}

.mud-table-pagination-toolbar {
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
}

/*
  Improve: Table header should visually outweight the table rows.
*/
.mud-table-root {
  overflow: hidden;
}

.mud-table-head .mud-table-row,
.mud-table-row.group-header {
  background: var(--mud-palette-appbar-background);
  overflow: hidden;
}

.mud-table-root:not(:has(.mud-table-row.group-header)) .mud-table-head .mud-table-row,
.mud-table-row.group-header {
  box-shadow: var(--mud-elevation-2);
}

  .mud-table-row.group-header td,
  .mud-table-row.group-header th,
  .mud-table-root:not(:has(.mud-table-row.group-header)) .mud-table-head .mud-table-row th,
  .mud-table-root:not(:has(.mud-table-row.group-header)) .mud-table-head .mud-table-row td {
    border-bottom: none !important;
  }

/*
    Improve: When grouping is enabled, table cells with checkboxes must not overflow the cell boundaries.
*/
.mud-table-root:has(.mud-table-row.group-header) .mud-table-body .mud-table-row .mud-table-cell:has(.mud-table-cell-checkbox) {
  min-width: 80px;
}

.mud-table-row.group-header .mud-table-cell .d-flex:has(.mud-table-cell-checkbox) {
  align-items: center;
  gap: .5rem;
  padding-left: .5rem;
}

/*
    Improve: Group header padding should be the same on mobile and desktop.
*/
.mud-table-row.group-header {
  padding: .25rem 0;
}

/*
    Improve: Selected rows should also be highlighted aside from the checkbox.
*/
.mud-table-body .mud-table-row:not(.group-header):has(.mud-table-cell-checkbox .mud-checkbox-true) {
  background: var(--mud-palette-table-selection);
}

.mud-table-body .mud-table-row:not(.group-header):has(.mud-table-cell-checkbox .mud-checkbox-true) {
  box-shadow: var(--mud-elevation-1);
}

  .mud-table-body .mud-table-row:not(.group-header):has(.mud-table-cell-checkbox .mud-checkbox-true) .mud-table-cell {
    border-bottom-color: transparent;
  }

/*
    Improve: Mobile layout for tables
*/
@media (max-width: 599.9px) {
  /*With the column names on the left, the column values should be aligned to the right.*/
  .mud-xs-table .mud-table-body .mud-table-row:not(.group-header) .mud-table-cell .mud-typography {
    width: 100%;
    display: flex;
    justify-content: end;
    text-align: end !important;
  }

  .mud-xs-table .mud-table-body .mud-table-row:not(.group-header) {
    display: flex;
    flex-direction: column;
  }

  /*Group header should remain a single line.*/
  .mud-table-row.group-header {
    display: flex;
    align-items: center;
  }

    .mud-table-row.group-header .mud-table-cell {
      flex: 1 1;
      justify-content: start;
    }

      /*Group header select boxes should be on the right, so that they don't get in the way of the group expander.*/
      .mud-table-row.group-header .mud-table-cell:has(.mud-table-cell-checkbox),
      .mud-table-row.group-header .mud-table-cell:has(.mud-table-cell-checkbox) .d-flex {
        display: contents !important;
      }

    .mud-table-row.group-header > th.mud-table-cell {
      order: 1;
    }

    .mud-table-row.group-header .mud-table-cell-checkbox {
      order: 2;
      margin-right: .5rem;
    }

    .mud-table-row.group-header .mud-table-row-expander {
      order: 0;
    }

  /*Pagination tools should appear somewhat similar to desktop layout.*/
  .mud-table-pagination-toolbar {
    flex-wrap: wrap;
    justify-content: space-evenly;
    min-height: fit-content;
    padding-bottom: 8px;
  }

  .mud-table-pagination-display .mud-table-pagination-caption {
    order: 1;
  }

  .mud-table-pagination-display .mud-select {
    order: 2;
  }

  .mud-table-pagination-actions {
    order: 3;
  }

  .mud-table-pagination-caption {
    order: 4;
  }

  /*Table rows on mobile should spare unneeded selector space.*/
  .mud-xs-table .mud-table-body .mud-table-row:not(.group-header) .mud-table-cell:has(.mud-table-cell-checkbox) {
    display: none;
  }

  .mud-xs-table .mud-table-body .mud-table-row:not(.group-header) {
    padding-top: 8px;
  }
}

/*
    Improve: Skeletons and loading animations.
*/

.mud-skeleton.mud-skeleton-text {
  min-width: 6rem;
}

.mud-button-root .mud-skeleton.mud-skeleton-text {
  min-width: 3rem;
}

[aria-busy]:not([aria-busy="false"]) {
  animation: mud-skeleton-keyframes-pulse 1.5s ease-in-out .5s infinite;
}

/*
    Feature: Data Fields
*/
.data-field {
  flex: 1 1 0;
}

  .data-field * {
    width: fit-content;
  }

/*
    Improvement: Input buttons like adornments and the clearable feature should all have the same appearance.
*/
.mud-input-adornment .mud-input-adornment-icon-button,
.mud-input-clear-button {
  /*.mud-icon-button-size-small*/
  padding: 3px;
  font-size: 1.125rem;
  /*.mud-icon-button-size-small.mud-icon-button-edge-end*/
  margin-right: -3px;
  margin-inline-end: -3px;
  margin-inline-start: unset;
}

  .mud-input-adornment .mud-input-adornment-icon-button .mud-icon-root,
  .mud-input-clear-button .mud-icon-root {
    /*.mud-icon-size-small*/
    font-size: 1.25rem;
  }

.mud-input-adornment.mud-input-adornment-end .mud-input-adornment-icon-button {
  margin-left: 4px;
}

.mud-input-adornment.mud-input-adornment-start .mud-input-adornment-icon-button {
  margin-right: 4px;
}

.mud-input > .mud-input-clear-button + .mud-input-adornment.mud-input-adornment-end {
  margin-left: 0;
  margin-inline-start: 0;
}