/* hiring people */

#hire-wrapper {
   display: grid;
   grid-template-columns: 1fr 2.5fr;
   gap: 2rem;

   >* {
      height: 79vh;
   }

   .outer-list {
      z-index: 15;

      background-color: var(--bl);
      box-shadow: var(--shd);
   }
}

/* right side */

#profile-details {
   display: grid;
   border: var(--brd);
   border-radius: 1rem;
   border-top-right-radius: 6rem;
   border-bottom: none;

   >* {
      z-index: 10;
   }
}

#profile-details::before {
   content: '';
   position: absolute;
   right: 100%;
   width: 2rem;
   top: 2rem;
   border-bottom-right-radius: 1rem;
   height: 50%;
   z-index: 10;
   border-right: var(--brd);
   border-bottom: var(--brd);
}

#profile-details::after {
   content: '';
   position: absolute;
   place-self: center;
   width: 110%;
   height: 66%;
   bottom: 0;
   z-index: 5;
   background: linear-gradient(transparent 10%, var(--bl) 25%);
}

#profile-inner {
   display: grid;
   height: 100%;
   overflow: auto;
   scrollbar-width: none;

   padding: 1rem;
   border-radius: inherit;
}

#profile-inner:not(:has(*))::before {
   display: block;
   place-self: center;
   margin: auto;
}

/* newest on top */
#profile-view {
   flex-direction: column-reverse;
}



/* table view */
.subject-entry {

   --hl: var(--pk);

   min-width: 15rem;
   display: flex;
   gap: 1rem;
   padding-inline: 1rem;
   border: 1px solid;
   align-items: center;
   border-radius: .75rem;
   transition: .15s ease-in-out;

   p {
      display: inline;
   }

   a,
   button {
      right: .5rem;
      position: absolute;
      padding: .25rem;
      font-size: .8rem;
      border: 1px solid;
      border-color: transparent;
      border-radius: .5rem;

      &:hover {
         border-color: var(--w);
      }
   }
}

.subject-entry [data-icon="subjectify"] {
   position: absolute;
   right: .5rem;
   font-size: .8em;
}

.subject-entry:hover {
   box-shadow: 0 0 .4rem .15rem var(--hl);

   i.icon {
      filter: drop-shadow(0 0 .25rem var(--hl));
   }
}

.subject-entry[data-role="administrator"],
.subject-entry[data-role="secretary"] {
   --hl: var(--yl);
}

.subject-entry[data-role="nurse"],
.subject-entry[data-role="scientist"] {
   --hl: var(--med);
}



/* sheet, shared between subjects and scientists */
#popup.subject-view {
   filter: drop-shadow(0 0 1rem var(--bl)) drop-shadow(0 0 2rem var(--bl)) drop-shadow(0 0 1.5rem var(--bl));
   background-color: transparent;
   box-shadow: none;
}