/*
  Global styles for specific kinds of nodes. Particularly forms
  however we still may override other types of elements selectively.
  We want as much styling focused into lower components as possible.
  This only exists for more complex components, like form elements,
  so we can get consistent styling across the app without repeating
  the style implementations and maintain accessibility requirements.

  This file should not be modified to add new selectors without
  being approved.
*/

/*
  Cookie consent banner
  Legally required
*/
/* stylelint-disable-next-line selector-max-id */
#consent-banner {
  position: fixed;
  bottom: 0;
  z-index: 9999;
}

/*
 Triple selectors for our form elements just to ensure we
 have as much specificity as we can get.
 We could use CSS Layers instead, but trying to not
 introduce such a complicated thing right now.
*/
label.app-label.app-label.app-label {
  all: revert;
  margin-top: var(--sizing-component-x-small);
  font-size: var(--font-size-medium);
  font-family: var(--uux-font-stack);
  color: var(--color-gray-primary);
}

/*
  Select is meant to style the native select view as a UUX
  selector. This gets us by for accessibility until we can
  use select-menu (or whatever it ends up being called) by
  browsers that will give us far more style control.
*/
select.app-select.app-select.app-select {
  all: revert;
  box-sizing: border-box;
  font-size: var(--font-size-large);
  font-family: var(--uux-font-stack);
  width: 100%;
  color: var(--color-gray-primary);
  background-color: transparent;
  border: var(--border-thin) var(--color-gray-secondary);
  padding: var(--sizing-base-unit);
  box-shadow: inset var(--shadow-minus-1);
  border-radius: var(--border-radius-compact);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-gray-secondary) 50%), linear-gradient(135deg, var(--color-gray-secondary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 1.1em, calc(100% - 11px) 1.1em, calc(100% - 2.5em) 0.5em;
  background-size: 6px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  appearance: none;
  height: var(--sizing-component-default);
  line-height: 24px;

  &:hover {
    border-color: var(--color-primary-blue-interactive);
  }
}

fieldset.app-fieldset.app-fieldset.app-fieldset {
  border: 0;
  padding: 0;

  & legend {
    all: revert;
    font-size: var(--font-size-large);
    font-family: var(--uux-font-stack);
    color: var(--color-gray-primary);
    margin-bottom: var(--sizing-component-xx-small);
  }
}

/*
  Plain input styling. Wrapper used to get the border around
  both the icon and text box. While also looking for focus
  to show the outline correctly. Basic usage:

  <label for="someId">Label Text</label>
  <div class="app-input">
    <input
      id="someId">
  </div>
*/
div.app-input {
  position: relative;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: var(--sizing-component-default);
  border: var(--border-thin) var(--accent-color);
  border-radius: var(--border-radius-default);
  box-shadow: inset var(--shadow-minus-1);

  & input {
    flex-grow: 1;
    height: 100%;
    padding: 0 var(--sizing-base-unit);
    padding-left: var(--sizing-base-unit);
    border: 0;
    border-radius: var(--border-radius-default);
    box-shadow: inset var(--shadow-minus-1);
    padding-top: 0.5px;
    font-size: var(--font-size-large);
    color: var(--color-gray-primary);
  }

  &.app-input-small {
    height: 35px;
    border-radius: var(--border-radius-small);

    input {
      padding-left: calc(var(--sizing-base-unit) + var(--icon-small));
      border-radius: var(--border-radius-small);
    }
  }

  & mat-icon.app-input-prefix {
    position: absolute;
    display: flex;
    padding-left: var(--sizing-base-unit);

    & ~ input {
      padding-left: calc(var(--sizing-base-unit) + var(--icon-default));
    }
  }

  & button.app-input-suffix {
    position: absolute;
    display: flex;
    align-items: center;
    right: var(--sizing-base-unit);
    cursor: pointer;
    background: none;
    border: 0;
    width: 24px;
    height: 24px;
    padding: 0;
  }

  &:hover {
    border-color: var(--color-primary-blue-interactive);
  }

  &:focus-visible {
    outline: revert;
  }

  &.invalid {
    border-color: var(--color-notification-error);
  }
}

input[type=date].ng-valid.ng-pristine.ng-pristine {
  color: var(--color-gray-secondary);
}

input[type=date].ng-valid.ng-dirty.ng-dirty {
  color: var(--color-gray-primary);
}

dialog.app-dialog {
  border: 0;
  padding: 0;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius-small);

  & .app-dialog__title {
    padding: var(--sizing-component-xx-small) var(--sizing-component-xx-small) 0;
  }

  & .app-dialog__content {
    max-height: 65vh;
    overflow: auto;
    padding: var(--sizing-component-xx-small);
  }

  & .app-dialog__actions {
    display: flex;
    flex-direction: row-reverse;
    margin-block-start: var(--sizing-component-xx-small);
    padding: var(--sizing-base-unit) var(--sizing-component-xx-small);
    border-top: var(--border-thin) var(--color-gray-incidental);

    & .mdc-button--outlined {
      margin-inline-end: var(--sizing-component-xx-small);
    }

    & button[type="reset"],
    & .reset-button {
      margin-right: auto;
    }
  }

  & .dialog-header {
    display: flex;
    justify-content: space-between;

    .close-icon {
        margin-left: auto;
      }
  }
}

/**
  Styles for filter forms that go into dialogs. Structure
  looks like:
  <h1
    id="filter-UNIQUE_FORM_ID-heading"
    mat-dialog-title
    i18n>Filter UNIQUE FORM NAME</h1>
  <form
    aria-labelledby="filter-UNIQUE_FORM_ID-heading"
    class="app-dialog-filter-form">
    <mat-dialog-content>
      // form controls
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      // actions
    </mat-dialog-actions>

    Reset buttons should call the native form reset handler.
    However for speed of updating, we may not be able to
    rely on native form handling everywhere. So, the
    `reset-button` class is allowed for custom JS
    to execute from the toggle like before while still
    being laid out correctly.
  </form>
*/
form.app-dialog-filter-form {
  & label {
    all: revert;
    margin-top: var(--sizing-component-x-small);
    font-size: var(--font-size-medium);
    color: var(--color-gray-primary);
  }
}

/**
  Shared handling of empty message styling and layout.
*/
.app-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  max-height: 300px;

  .empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    background: var(--color-gray-primary-alpha-1);
    border-radius: 66px;
  }

  .mat-icon {
    width: 36px;
    height: 36px;
  }

  .empty-text {
    font-size: var(--font-size-headline-6);
    font-weight: var(--font-weight-avenir-roman);
    color: var(--color-gray-primary);
    margin-top: var(--sizing-component-x-small);
  }
}

.app-grid-toggle-container {
  display: grid;
  position: relative;
  grid-template-columns: min-content 1fr;
  margin-top: var(--sizing-component-xx-small);

  .table-section {
    border: var(--border-thin) var(--color-gray-incidental);
    width: 330px;
    border-right: 0;

    .table-wrapper {
      gap: 0;
    }

    .mat-mdc-cell:has(.active) {
      background: var(--color-primary-blue-interactive-alpha-1);
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-left: var(--border-medium) var(--color-primary-blue-interactive);
      }
    }
  }

  .detail-view {
    overflow-x: hidden;
    padding: var(--sizing-base-unit) var(--sizing-component-xx-small);
    border: var(--border-thin) var(--color-gray-incidental);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
    background: var(--color-background-white);
  }
}

.analysis-menu.mat-mdc-menu-panel {
  max-width: 300px;
}

.workspace-name-button.mat-mdc-button.mdc-button {
  .mdc-button__label {
    max-width: calc(100% - var(--sizing-component-x-small));
    height: 100%;
  }
}

.mandatory::after {
  content: "*";
  color: var(--color-notification-error);
}


.report-view-table .table-wrapper .table-wrapper__table.table-wrapper__table {
  max-height: calc(100vh - 280px);
}

.reports-container .reports-list-container .table-wrapper .table-wrapper__table.table-wrapper__table {
  max-height: calc(100vh - 330px);
}

.bulk-load-list-wrapper .table-wrapper .table-wrapper__table.table-wrapper__table {
  max-height: calc(100vh - 375px)
}