/* hiring people */

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

   .outer-list {
      border-left: 0;
      z-index: 15;
   }
}

/* right side */

#profile-details {
   display: grid;
   border: var(--brd);
   border-radius: 1rem;
   border-top-right-radius: 6rem;
   padding: 1rem;
   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;
}

#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 {
   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;
   }

}

.subject-entry:hover {
   box-shadow: 0 0 .5rem .25rem var(--w);
}

.subject-entry[data-role="subject"]:hover {
   box-shadow: 0 0 .25rem .25rem var(--pk);
}

.subject-entry[data-role="nurse"]:hover,
.subject-entry[data-role="scientist"]:hover {
   box-shadow: 0 0 .25rem .25rem var(--med);
}




.offer-delete {
   right: .5rem;
   position: absolute;
   padding: .25rem;
   font-size: .8rem;
   border: 1px solid;
   border-color: transparent;
   border-radius: .5rem;
}

.offer-delete:hover {
   border-color: var(--w);
}

.hire-button {
   place-self: center;
}



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

#data-sheet {
   height: fit-content;
   border: var(--brd);
   border-radius: 1rem;
   padding-top: 1rem;
   border-top-right-radius: 5rem;
   background-color: var(--tbl);
   min-width: 35vw;

   box-shadow: var(--sh) var(--cl) inset, 0 0 .5rem .5rem var(--bl);

   --cl: var(--pk);

   .identity {
      margin-right: 9.5rem;
   }

   h2 {
      margin-left: 1rem;
      margin-bottom: 2rem;
      font-size: 1.75rem;
   }

}

div.section {

   border-top: var(--brd);
   padding-block: .75em;
   padding-left: 1em;

   h3 {
      position: absolute;
      top: -1.2rem;
      text-align: left;
      width: fit-content;
      border: var(--brd);
      border-radius: .5rem;
      padding-inline: .5rem;
      margin: 0;
      margin-left: .5rem;
      background-color: var(--bl);
      z-index: 10;
      box-shadow: 0 0 1rem var(--cl);
   }

}

#data-sheet .section {
   padding-block: 1.75em;
}

div.section:last-of-type {
   padding-bottom: 1em !important;
}

#data-sheet[data-role="nurse"],
#data-sheet[data-role="scientist"] {
   --cl: var(--med);
}

#data-sheet[data-role="administrator"],
#data-sheet[data-role="secretary"] {
   --cl: var(--yl);
}

.sheet-vignette {

   float: right;
   right: 1rem;
   top: 1rem;

   >i {
      background-color: var(--bl);
      border: var(--brd);
      border-radius: 100%;
   }
}

.icon.sheet-icon {
   font-size: 4rem;
   padding: .5rem;
   z-index: 5;
   box-shadow: 0 0 1rem var(--cl);
}

.sheet-icon svg {
   transition: .3s;
}

.icon.sheet-icon:hover svg {
   filter: drop-shadow(0 0 .25rem var(--cl));

}

.icon.sex {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 5;
}

/* side buttons */
.sheet-actions {
   position: absolute;
   right: 100%;
   top: 1rem;

   display: flex;
   flex-direction: column;
   gap: .5rem;

   z-index: -1;

   button {
      display: grid;
      place-items: center;
      border-right: 0;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      background: var(--tbl);
      box-shadow: 0 0 .5rem var(--cl) inset;

      i {
         transition: ease-in-out .3s;
      }
   }

   button::after {
      content: attr(label);
      opacity: 0;
      position: absolute;
      font-size: .55rem;
      transition: ease-in-out .3s;
   }

   button:hover {
      i {
         opacity: 0;
      }

      &::after {
         opacity: 1;
      }
   }
}

/* dismiss warning */

.section.warning {
   padding-right: 10rem;
}

button.confirm-button {
   margin-top: 1em;
   margin-left: 1em;
   padding-inline: 2em;
   box-shadow: 0 0 1rem var(--cl);
   transition: ease-in-out .3s;
}

button.confirm-button:hover {
   text-decoration: underline;
}

/* chat box */

#data-sheet.chatting {
   border-radius: 1rem;
   padding: 0;
   padding-top: 3rem;
   display: grid;
}

.chat-header {
   display: grid;
   place-items: center;
   position: absolute;
   bottom: calc(100% - 4em);
   justify-self: center;

   border-radius: 1rem;

   i {
      font-size: 5rem;
      filter: drop-shadow(0 0 .25rem var(--cl));
   }

   span {
      position: absolute;

      font-size: 1.25rem;
      background-color: var(--bl);
      z-index: 2;
      min-width: 100%;
      width: fit-content;
      padding-inline: .5rem;
      text-align: center;
      box-shadow: 0 0 .5rem .5rem var(--bl);
      text-shadow: 0 0 .5rem var(--cl);
      white-space: nowrap;
   }
}

.chat-box {
   max-height: 65vh;

   width: 50vw;
   min-width: 40em;

   margin: 1rem;
   padding-inline: .5rem;

   overflow: hidden;

   border: var(--brd);
   border-radius: 1rem;
   box-shadow: var(--sh) var(--cl);


   /* direct options */
   >a {
      font-size: 1.1em;
      padding: .5rem;
      display: block;
   }

   >a:not(:first-child) {
      border-top: 1px solid;
   }
}

.twee-context {
   max-height: inherit;
   height: 100%;
   overflow-y: auto;
}

.twee-context[data-type="message"] {
   padding-bottom: .5rem;
}