eapim-portal/src/main/resources/static/sass/components/_header-auth.scss

@use '../abstracts/variables' as *;
@use '../abstracts/color-functions' as *;
@use '../abstracts/mixins' as *;

// -----------------------------------------------------------------------------
// Header Authentication Component Styles
// Login/Logout button groups and user profile dropdown
// -----------------------------------------------------------------------------

// ===========================
// Authentication Group
// ===========================
.auth-group {
  display: flex;
  align-items: center;
  gap: $spacing-md;

  &.authenticated {
    gap: 0;
  }


  .login-btn{
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: var(--transition-smooth);

    &:hover{
        background-color: var(--accent-light);
    }
  }

    .btn-login:hover {
        background-color: var(--accent-light);
    }

}

// ===========================
// Login Button
// ===========================
.login-btn {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: var(--transition-smooth);
    white-space: nowrap;

  &:hover {
    background-color: var(--accent-light);
  }
}


.btn-signup {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background-color: var(--primary-color);
  padding: 10px 24px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 73, 180, 0.15);
  transition: var(--transition-smooth);

  &:hover {
       background-color: var(--secondary-color);
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(0, 73, 180, 0.25);
       color:white;
  }
}


// Box style for Figma design (node-id: 721-1489)
.login-btn-box {
    font-size: 15px;
     font-weight: 500;
     color: var(--primary-color);
     padding: 10px 20px;
     border-radius: 8px;
     transition: var(--transition-smooth);

  .user-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}

// ===========================
// User Profile Dropdown (Desktop)
// ===========================
.user-profile-dropdown {
  position: relative;

  .user-profile-btn {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    padding: 10px 20px;
    background: $light-bg;
    border: 2px solid transparent;
    border-radius: $border-radius-full;
    cursor: pointer;
    transition: $transition-base;
    font-family: $font-family-primary;
    font-size: $font-size-sm;

    .user-name {
      color: $text-dark;
      font-weight: $font-weight-semibold;
    }

    i {
      color: $text-gray;
      font-size: 12px;
      transition: transform $transition-fast;
    }

    &:hover {
      background: $white;
      border-color: $primary-blue;
      box-shadow: $shadow-md;

      .user-name {
        color: $primary-blue;
      }

      i {
        color: $primary-blue;
      }
    }
  }

  &.active {
    .user-profile-btn i {
      transform: rotate(180deg);
    }

    .profile-dropdown-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }

  .profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 280px;
    background: $white;
    border: 1px solid $border-gray;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-xl;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all $transition-base;
    z-index: $z-index-dropdown;
    overflow: hidden;
  }

  .profile-header {
    padding: $spacing-lg;

    color: $white;
    text-align: center;

    .user-greeting {
      margin: 0 0 $spacing-xs 0;
      font-size: $font-size-md;
      font-weight: $font-weight-bold;
    }

    .user-message {
      font-size: $font-size-xs;
      opacity: 0.9;
    }
  }

  .profile-menu-list {
    list-style: none;
    margin: 0;
    padding: $spacing-sm 0;

    li {
      margin: 0;

      a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px $spacing-lg;
        color: $text-dark;
        text-decoration: none;
        font-size: $font-size-sm;
        transition: $transition-fast;

        i {
          width: 20px;
          color: $text-gray;
          font-size: 14px;
        }

        &:hover {
          background: $light-bg;
          color: $primary-blue;

          i {
            color: $primary-blue;
          }
        }
      }
    }
  }

  .profile-footer {
    padding: $spacing-sm $spacing-lg $spacing-lg;
    border-top: 1px solid $border-gray;

    .logout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: $spacing-sm;
      width: 100%;
      padding: 12px;
      background: $gray-bg;
      color: $text-dark;
      text-decoration: none;
      border-radius: $border-radius-md;
      font-weight: $font-weight-semibold;
      font-size: $font-size-sm;
      transition: $transition-base;

      i {
        font-size: 14px;
      }

      &:hover {
        background: $accent-orange;
        color: $white;
        transform: translateY(-2px);
        box-shadow: $shadow-md;
      }
    }
  }
}

// ===========================
// Mobile Drawer User Info
// ===========================
.drawer-user-info {
  padding: $spacing-lg;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  .drawer-profile {
    display: flex;
    align-items: center;
    gap: $spacing-md;

    .profile-avatar {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
      border-radius: $border-radius-circle;
      color: $white;

      i {
        font-size: 32px;
      }
    }

    .profile-info {
      flex: 1;
      color: $white;

      .profile-name {
        margin: 0 0 $spacing-xs 0;
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
      }

      .profile-greeting {
        font-size: $font-size-xs;
        opacity: 0.9;
      }
    }
  }
}

// ===========================
// Mobile Drawer Actions
// ===========================
.drawer-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-sm;
  width: 100%;
  padding: 14px 20px;
  background: $accent-orange;
  color: $white;
  text-decoration: none;
  border-radius: $border-radius-lg;
  font-weight: $font-weight-semibold;
  font-size: $font-size-base;
  transition: $transition-base;
  box-shadow: $shadow-md;

  i {
    font-size: 16px;
  }

  &:hover {
    background: darken($accent-orange, 10%);
    transform: translateY(-2px);
    box-shadow: $shadow-lg;
  }
}

// ===========================
// Responsive Adjustments
// ===========================
@media (max-width: $breakpoint-sm) {
  .user-profile-dropdown {
    .profile-dropdown-menu {
      width: 260px;
      right: -10px;
    }
  }
}

@media (max-width: $breakpoint-xs) {
  .user-profile-dropdown {
    .user-profile-btn {
      padding: 8px 16px;

      .user-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .profile-dropdown-menu {
      width: 240px;
      right: -20px;
    }
  }
}