/* body */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);

  /* Main content */
  main {
    flex-grow: 1;

    &.main-padding {
      padding: var(--spacing-lg);
    }
  }

  /* Loading message */
  #loading-message {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--background-color-content);
    border-radius: var(--border-radius);
    box-shadow: 1px 1px 5px var(--background-color-grey);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;

    &.show {
      visibility: visible;
      opacity: 1;
    }
  }

  /* Navbar expand button */
  .navbar-expand-button {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xxl);
    height: 40px;
    width: 40px;
    z-index: 50;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    padding: var(--spacing-sm);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;

    .icon {
      width: var(--font-size-xl);
      height: var(--font-size-xl);
    }

    &.hidden {
      opacity: 0;
      pointer-events: none;
    }
  }

  .env-banner {
    text-align: center;
    font-size: 10px;
    background-color: var(--success-color);
    letter-spacing: 1px;
    color: var(--color-white);
    padding: var(--spacing-xs);
  }

  /* Navbar */
  nav#navbar {
    height: 50px;
    /* height: 60px; */
    background-color: var(--navbar-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);

    #navbar-logo {
      height: 100%;

      img {
        height: 100%;
        width: auto;
      }
    }

    .avatar-menu {
      display: flex;
      align-items: center;
    }

    #navbar-menus {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);

      button.menu-button {
        border: none;

        height: 45px;
        width: 45px;
        display: flex;
        justify-content: center;
        align-items: center;

        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out;
        background-color: var(--primary-color);

        &:hover {
          filter: brightness(1.2);
        }

        .icon {
          height: 40px;
          width: 40px;
          fill: white;
        }
      }

      .dropdown-panel {
        position: fixed;
        top: 70px;
        right: 10px;
        visibility: hidden;
        transform: scale(0);
        transform-origin: top right;
        max-height: calc(100% - 80px);
        overflow-y: auto;
        background-color: var(--background-color-content);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        z-index: 10;
        transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
        border: 1px solid var(--border-color);

        &.show {
          visibility: visible;
          transform: scale(1);
        }
      }

      #navbar-module-menu {
        padding: var(--spacing-md);
      }

      #navbar-collapse-menu-button {
        margin-right: var(--spacing-md);
        height: 30px;
        width: 30px;

        @media (max-width: 640px) {
          display: none;
        }

        .icon {
          width: var(--font-size-xl);
          height: var(--font-size-xl);
        }
      }

      #navbar-avatar-menu {
        width: calc(100% - 20px);
        max-width: 300px;

        display: flex;
        flex-direction: column;

        button {
          border: none;
          background-color: var(--background-color-content);
          transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

          &:hover {
            background-color: var(--primary-color);
            color: var(--text-color-contrast);
          }
        }

        a.logout-btn {
          width: 100%;
          padding: var(--spacing-md);
          text-align: left;
          font-size: var(--font-size-md);
          color: var(--text-color);
          cursor: pointer;

          &:hover {
            background-color: var(--primary-color);
            color: var(--text-color-contrast);
          }
        }

        section {
          padding: var(--spacing-md);

          p {
            margin: var(--spacing-md) 0;
          }

          &:not(.actions) {
            display: flex;
            flex-direction: column;
            width: 100%;
          }

          &:not(:first-child) {
            border-top: 1px solid var(--border-color);
          }

          &.name {
            font-size: var(--font-size-lg);
            font-weight: 500;
            color: var(--text-color);
          }

          &.actions {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);

            button {
              transition: background-color 0.2s ease-in-out,
                color 0.2s ease-in-out;
              font-size: var(--font-size-md);
              color: var(--text-color);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              height: 45px;
              width: 45px;

              &:hover {
                background-color: var(--primary-color);
                color: var(--text-color-contrast);
              }

              .icon {
                width: 32px;
                height: 32px;
                fill: var(--text-color);
                padding: var(--spacing-xs);
                transition: fill 0.2s ease-in-out,
                  background-color 0.2s ease-in-out;
                display: none;

                &.show {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }

  /* Footer */
  footer {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-light);
    font-size: var(--font-size-xs);
    position: relative;

    sup {
      font-size: var(--font-size-icon);
    }
  }
}

/* Start Breadcrumbs */
.breadcrumbs {
  background: var(--background-color-grey);
  font-size: var(--font-size-xs);
}

.breadcrumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.breadcrumbs ol li {
  margin-right: var(--spacing-xs);
  display: flex;
  align-items: center;
}

.breadcrumbs ol li .icon {
  width: 16px;
  height: 16px;
  fill: var(--text-color-light);
  margin-right: var(--spacing-xs);
}

.breadcrumbs ol li .divider {
  /* padding: var(--spacing-sm); */
  font-size: var(--font-size-md);
  color: var(--text-color-light);
}

.breadcrumbs ol li div,
.breadcrumbs ol li a {
  display: flex;
  align-items: center;
  color: var(--text-color-light);
  padding: var(--spacing-sm);
}

.breadcrumbs ol li a {
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: background-color 0.2s ease-in-out;
}

.breadcrumbs ol li a:hover {
  color: var(--text-color);
  background-color: var(--background-color-content);
}
/* End Breadcrumbs */

footer {
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--text-color-light);
  font-size: var(--font-size-xs);

  .footer-right {
    display: flex;
    justify-content: flex-end;
  }

  .footer-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--spacing-md);
  }

  .footer-left,
  .footer-right {
    flex: 1 1 0; /* take remaining space on both sides */
  }

  sup {
    font-size: var(--font-size-icon);
  }

  .footer-center {
    flex: 0 0 auto; /* size to content */
    text-align: center;
  }

  .commit-hash {
    font-family: monospace;
    opacity: 0.85;
  }
}