main.page__user-profile {
  --avatar-width: 180px;
  --grid-spacing: 0.5rem;

  align-items: start;
  display: grid;
  grid-auto-rows: min-content;
  grid-template-rows: auto;
  grid-template-columns: minmax(var(--container-xs), var(--container-sm)) minmax(var(--container-xs), auto);
  grid-gap: var(--grid-spacing);
  margin-top: calc((var(--avatar-width) / 2) + var(--navbar-height) - 1rem);

  .page__column {
    display: flex;
    flex-direction: column;
    gap: var(--grid-spacing);
    height: 100%;
    min-width: var(--container-s);

    section.profile__section {
      background-color: var(--pure-white);
      border-radius: var(--border-radius);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;

      &:has(.notice#default-organisation-membership-notice, .notice#shared-organisation-membership-notice) {
        justify-content: center;
      }

      .page__content#organisation_membership_details {

        section.attributes .attributes__item#skills_attribute .attributes__body {
          max-height: calc((1.5rem + 0.5rem) * 3); /* 3 rows of badges */
          overflow-y: scroll;
        }

        @media screen and (max-width: 1100px) {
          flex-direction: column-reverse;
        }
      }
    }

    &.page__column--user-account {

      section.profile__section {

        &#user-info {
          padding-top: 0;
        }

        &#org-memberships-list {
          gap: 0.5rem;
        }

        &#account-section {
          flex: 1;

          .tabs-container nav.tab-navigation {
            margin-top: 0;
          }
        }
      }
    }

    &.page__column--organisation-membership {
      section.profile__section#org-membership-section {
        flex: 1;

        .page__content-column .page__section {
          &#organisation-membership-shifts {
            .calendar__view .calendar__events-section ul.list {
              max-height: var(--container-sm);
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px){
    grid-template-columns: minmax(var(--container-xs), auto);

    .page__column {
      min-width: var(--container-xs);
    }
  }
}

.section__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  .header__heading {
    width: 100%;
  }

  .header__top {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }
}

header.profile__header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.header__actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: fit-content;

  &.header__actions--full {
    width: 100%;
  }
}

header.profile__header {
  .avatar__container {
    display: inline-flex;
    max-height: calc(var(--avatar-width) / 2);
    position: relative;
    justify-content: center;
    min-width: var(--container-s);

    .avatar__form-wrapper {
      align-items: center;
      aspect-ratio: 1/1;
      background-color: var(--ink-gray);
      color: white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      min-height: var(--avatar-width);
      position: absolute;
      text-decoration: none;
      opacity: 0;
      transform: translateY(-50%);
      width: var(--avatar-width);
      z-index: 2;

      &:hover {
        transition: 0.4s ease-out;
        opacity: 0.75;
      }
    }

    .avatar.avatar--auto {
      aspect-ratio: 1/1;
      min-height: var(--avatar-width);
      transform: translateY(-50%);
      width: var(--avatar-width);
      z-index: 1;
    }
  }

  .header__left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }
}

/*Membership Details Card*/
.admin-permissions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;

  & > .badge-full {
    justify-content: space-between;
    padding-right: 0;

    .permission-type {
      display: inline-flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;

      .ss-main {
        min-width: 140px; /* same as btn */

        .ss-values {
          justify-content: center;
          text-transform: capitalize;
        }
      }
    }
  }
}

section#site-and-department-memberships-section {
  border-top: 1px solid var(--light-gray);
  padding-top: 1rem;
}

.membership-profile {
  & > turbo-frame {
    display: inherit;
    flex-direction: inherit;
    gap: inherit;
    width: inherit;
  }
}

.modal__container .modal__page .badge__wrapper {
  &:has(form#organisation-membership-permissions-form) {
    .badge {
      width: 100%;
    }

    form#organisation-membership-permissions-form {
      min-width: var(--btn-min-width);
    }
  }
}

.modal__page#user-profile-preview {
  --avatar-width: 96px;

  header.profile__header {
    flex-direction: row;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 1rem;
    position: sticky;
    top: 0;
    background-color: white;
    padding-top: 2rem;
    z-index: 1;

    .avatar__container {
      max-height: fit-content;
      min-width: fit-content;

      .avatar {
        transform: translateY(0);
      }
    }

    .header__left {
      align-items: flex-start;
      gap: 0.5rem;

      .header__heading .header__title {
        text-align: left;
      }
    }
  }

  .page__content.page__content--two-split-column {
    flex-direction: column-reverse;
  }

  .calendar__view .calendar__events-section ul.list {
      max-height: var(--container-sm);
  }
}

 section.attributes#profile_work_details .attributes__row {
  article.attributes__item#job-role-attribute .attributes__body {
    width: 100%;

    & > turbo-frame {
      width: inherit;
    }
  }
   article.attributes__item#skills-attribute {
     max-width: calc(100% / 3);
   }
}

section#organisation_membership_skills, section#organisation_membership_job_roles {
  max-height: calc(3rem * 5);
  min-height: calc(3rem * 5);
  overflow-x: hidden;
  overflow-y: scroll;

  .list#organisation_membership_skills_list, .list#organisation_membership_job_roles_list {
    .list__item {
      min-height: 3rem;
      padding: 0.5rem 0;

      .list__item-header {
        align-items: center;
      }

      .list__item-rejected-reason {
        border: 1px solid var(--danger-dark);
        border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
        padding: 0.5rem;
      }
    }
  }

  .pagy-controls {
    margin-top: 0;
  }
}

.modal__page#organisation_membership_job_roles_modal, .modal__page#organisation_membership_skills_modal {
  section#organisation_membership_job_roles, section#organisation_membership_skills {
    border-bottom: 1px solid var(--light-gray);
    margin-bottom: 2rem;
  }
}