html.arcsystemworks {
  &:root {
    --color--accent: 237 29 38; /* #ED1D26 */
    --app-styling-background: 0 0 0; /* #000 */
    --color-palette-branding-normal: 237 29 38; /* #ED1D26 */

    --text-colors-link-default: 237 29 38; /* #ED1D26 */

    --navigation--background: #420003; /* #420003 */
    --navigation--color: #fff; /* #fff; */
    --navigation--color--hover: #ffea00; /* #ffea00 */

    --theme-green: 0 128 0; /* #008000 */

    --corner-rounding-s: 0;
    --corner-rounding-m: 0;
    --corner-rounding-l: 0;
    --corner-rounding-xl: 0;

    /* Cards */
    --card--background: #420003;
    --card--color: #fff;
    --card--border: #ED1D26;

    /* Modals */
    --modal--background: 66 0 3; /* #420003 */
    --modal--color: 255 255 255; /* #fff; */
    --modal--accent: 237 29 38; /* #ED1D26 */
    --modal--border: 237 29 38; /* #ED1D26 */
    --modal--border-light: 90 18 23; /* #5A1217 */

    /* Crumbs */
    --crumbs--background: 0 0 0; /* #000; */
    --crumbs--background-active: 237 29 38; /* #ED1D26 */

    /* Inputs */
    --input-buttons-primary-bg-default: #ED1D26;
    --input-buttons-primary-bg-hover: #ae1c1c;
    --input-buttons-primary-bg-disabled: #a0a0a0;
    --input-buttons-primary-text-default: #fff;
    --input-buttons-primary-text-hover: #fff;
    --input-buttons-primary-text-disabled: #7f7f7f;
  }

  scroll-behavior: smooth !important;

  body {
    font-family: "Nunito Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    accent-color: rgb(var(--color--accent));
    background-image: url('/images/arcsystemworks/ggs-01-dark-10.jpg');
    background-size: cover;

    #__nuxt {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;

      #page {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }

    input, select, textarea {
      background-color: #fff;
      color: #000;
    }

    & .terms-of-service {
      & a {
        color: rgb(var(--color--accent)) !important;
      }

      & ul {
        padding: 0;
      }

      & ul:has(label [type="checkbox"]) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;

        & li:has(label [type="checkbox"]) {
          display: flex;
          align-items: center;
          gap: 5px;

          background: rgb(0 0 0 / 40%);
          display: flex;
          align-items: center;
          padding: 5px 10px;
          border-radius: 5px;
          font-weight: 800;

          & label {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  /* Application form specific fixes */
  & .UForm {
    /* Ensure dark labels */
    & .UFormField label,
    & .UFormHeading,
    & .UFormSubHeading,
    & label {
      color: #000 !important;
    }

    /* Selects/dropdowns should match light inputs */
    & .USelectMenu,
    & .USelectMenu button,
    & .USelectMenu [role="combobox"],
    & .USelectMenu input,
    & .URadioGroup,
    & .UInput,
    & .UTextarea,
    & .BaseFormSocialSelector {
      background-color: #fff !important;
      color: #000 !important;
    }

    /* Dropdown popover/list */
    & .USelectMenu .ui-select-menu-content,
    & .USelectMenu [role="listbox"],
    & .USelectMenu .ui-select-menu-item {
      background-color: #fff !important;
      color: #000 !important;
    }

    /* Checkbox text should be dark */
    & .UCheckbox label,
    & .UCheckbox span,
    & .UCheckbox {
      color: #000 !important;
    }

    /* Place the subheading/hint under the heading */
    & .UFormHeading .UFormSubHeading {
      display: block;
      margin-left: 0;
      margin-top: 6px;
      color: #000 !important;
      font-weight: 400;
    }
  }

  /* Login */
  & .login-wrapper {
    .form-wrapper {
      --_banner: none;

      & .login::before {
        background-color: var(--card--background);
      }
    }
  }

  & .user-menu {
    & .wrapper {
      background-color:  var(--card--background) !important;
      border-radius: 0 !important;

      & img, button {
        border-radius: 0 !important;
      }

      & .bar {
        &::before { display: none; }

        & .inner {
          &::before {
            background: var(--theme-color) !important;
          }

          & button {
            color: var(--theme-white) !important;
            background: var(--theme-dark-color) !important;

            &:hover {
              background: var(--input-buttons-primary-bg-hover) !important;
            }
          }
        }
      }
    }
  }

  &.dashboard {
    & main {
      & aside {
        --_background: var(--navigation--background);

        & .logo {
          background-color: var(--navigation--background) !important;

          & svg {
            height: 50px;
          }
        }
      }

      & section {
        & .header {
          background-color: var(--navigation--background) !important;

          & .title {
            color: var(--theme-white) !important;
          }
        }

        & .zero-state {
          color: var(--theme-black) !important;
        }
      }

      & .card, & .application-container {
        background: var(--card--background) !important;
        border-radius: 0;

        &::before, &::after {
          background: var(--card--background) !important;
        }

        & i {
          color: var(--theme-white) !important;
        }

        &:hover {
          outline-color: rgb(var(--color--accent));
          outline-width: 5px;
        }
      }

      & button {
        background: var(--input-buttons-primary-bg-default) !important;
        color: var(--input-buttons-primary-text-default) !important;

        &:hover {
          background: var(--input-buttons-primary-bg-hover) !important;
        }

        &:disabled {
          background: var(--input-buttons-primary-bg-disabled) !important;
          color: var(--input-buttons-primary-text-disabled) !important;
        }
      }
    }
  }
}